html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; padding-top: 59px; }
p::after { display: none; }

/* Brand Name */
.hero-name{ font-family:'Inter', sans-serif; font-weight:700; font-size:36px; /* reduced from 46px */ letter-spacing:-0.3px; color:#1E2A38; }
.hero-name .highlight{ font-weight:600; color:#2F80ED; }
/* Navbar */
nav.navbar{ box-shadow:0 4px 20px rgba(0,0,0,0.06); transition:all 0.3s ease; }
/* Menu spacing */
.navbar-expand-lg .navbar-nav .nav-item{ margin:0 18px; }
/* Menu links */
.navbar-expand-lg .navbar-nav .nav-link{ color:#1E2A38; padding:6px 4px; font-size:16px; font-weight:500; border-bottom:2px solid transparent; transition:all 0.25s ease; }
/* Hover effect */
.navbar-expand-lg .navbar-nav .nav-link:hover{ color:#2F80ED; border-bottom:2px solid #2F80ED; }
/* Active link */
.navbar-expand-lg .navbar-nav .nav-link.active{ border-bottom:2px solid #2F80ED; color:#2F80ED; }

.navbar-expand-lg .navbar-nav .nav-link{ position:relative; }
.navbar-expand-lg .navbar-nav .nav-link::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:#2F80ED; transition:width 0.25s ease; }
.navbar-expand-lg .navbar-nav .nav-link:hover::after{ width:100%; }

.btn { transition: all 0.2s ease-in-out; }
.btn:hover { transform: translateY(-2px); }

#hero { background: linear-gradient(135deg, #2F80ED 0%, #1B3578 100%); min-height: 500px; }
/* Profile Image */
#hero .hero-img { border-radius: 50%; border: 3px solid #fff; -webkit-filter: grayscale(50%); filter: grayscale(50%); transition: all ease 0.3s; width: 250px; }
#hero .hero-img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
/* Name */
#hero h1 { font-weight: 700; font-size: 46px; color: #fff; letter-spacing: 1.5px; }
/* Titles */
#hero h2 { font-weight: 600; font-size: 28px; color: #fff; line-height: 1.4; }
#hero h2 span:first-child { font-size: 32px; }
#hero h2 span:last-child { font-weight: 500; opacity: 0.95; }
/* Experience Badge (NEW) */
#hero .hero-experience { display: inline-block; margin-top: 12px; font-size: 14px; color: #fff; background: rgba(255,255,255,0.15); padding: 6px 14px; border-radius: 20px; letter-spacing: 0.3px; }
/* Description Text */
#hero p.hero-text { font-weight: normal; font-size: 18px; color: #fff; opacity: 0.9; max-width: 700px; margin: auto; line-height: 1.8; }
/* Optional underline separator (kept from your design) */
#hero p.para-bdr::before { position: absolute; width: 80px; height: 1px; background: #ccc; bottom: -16px; left: 50%; transform: translateX(-50%); content: ''; }
/* Buttons */
#hero .btn-light, #hero .btn-outline-light { padding: 12px 22px; font-size: 15px; }



#work { background: #f6f8fb; }
#work .work-title { color: #2F80ED; }
#work .card { background: #ffffff; border-radius: 10px; border: 1px solid #e9ecef; }
#work .meta-text { font-size: 14px; color: #6c757d; }
.work-screenshot{ border: 1px solid #ddd; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.06); transition:transform 0.25s ease, box-shadow 0.25s ease; cursor: pointer; max-height: 320px; object-fit: cover; }
.work-screenshot:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,0.10); cursor:pointer;}
#work h2 { font-size: 38px; font-weight: 700; margin-bottom: 16px; }
#work h6 { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
#work p { line-height: 1.8; }
#work ul { padding-left: 18px; margin-bottom: 0; }
#work ul li { margin-bottom: 8px; }
#work .card { padding: 48px; }
#work .work-title { font-size: 26px; }
.modal-body img { max-height: 85vh; }

.project-summary { display:flex; flex-wrap:wrap; gap:10px; }
.project-summary span { display:inline-flex; align-items:center; gap:6px; background:#f8f9fb; border:1px solid #e6e8ec; padding:6px 14px; border-radius:20px; font-size:13px; color:#444; transition:all 0.2s ease; }
.project-summary span:hover { background:#eef3ff; border-color:#d6e0ff; transform:translateY(-1px); }
.project-summary img { width:16px; height:16px; }
.project-summary span strong{ font-weight:600; color:#222; }

#expertise { background: #fff; padding-top: 90px; padding-bottom: 90px; border-top: 1px solid #e9ecef; }
#expertise h2, .section-title { font-size: 38px; font-weight: 700; margin-bottom: 16px; }
#expertise p.text-muted { font-size: 18px; margin-bottom: 60px; }
.expertise-card { background: #ffffff; border: 1px solid #e9ecef; border-radius: 14px; padding: 26px 22px; transition: all 0.3s ease; height: 100%; position: relative; }
.expertise-card::before { position: absolute; content: ""; left: 0px; top: 20px; width: 2px; height: 100px; background: #2F80ED; }
.expertise-card:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06); transform: translateY(-6px); }
.expertise-card img { height: 46px; margin-bottom: 20px; opacity: 0.5; }
.expertise-card h5 { font-size: 22px; font-weight: 600; color: #2F80ED; margin-bottom: 24px; }
.expertise-card ul { padding-left: 18px; }
.expertise-card ul li { margin-bottom: 8px; line-height: 1.7; }
#expertise .card{ border:1px solid #e8e8e8; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.04); }

/* Technical Stack Section */
.tech-stack { margin-top: 60px; padding-top: 40px; border-top: 1px solid #eef1f4; }
.tech-title { font-size: 26px; font-weight: 700; margin-bottom: 25px; }
.tech-subtitle { font-size: 15px; font-weight: 600; color: #2F80ED; letter-spacing: 0.3px; }
.tech-items { font-size: 15px; color: #495057; line-height: 1.8; }
.tools-heading { font-size: 16px; font-weight: 600; color: #2F80ED; margin-bottom: 15px; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-pill { background: #f1f4fb; color: #1E2A38; font-size: 14px; padding: 6px 12px; border-radius: 20px; border: 1px solid #e3e8f5; transition: all 0.2s ease; }
.skill-pill:hover { background: #2F80ED; color: #ffffff; cursor: default; }

/* About Section */
.about-summary-box { background: #f8f9fc; padding: 30px; border-radius: 12px; border-left: 4px solid #2F80ED; }
.about-summary-box h6 { font-size: 16px; color: #2F80ED; }
.about-summary-box { background:#fafafa; border:1px solid #e9ecef; border-radius:10px; padding:24px; box-shadow:0 2px 6px rgba(0,0,0,0.03); }
.about-summary-list {  list-style:none; padding:0; margin:0; }
.about-summary-list li { padding:8px 0; font-size:14px; color:#444; border-bottom:1px solid #f0f0f0; }
.about-summary-list li:last-child {  border-bottom:none; }
.about-summary-list li::before { content:"•"; color:#888; margin-right:8px; }
.about-summary-box h6 { font-size:15px; letter-spacing:0.5px; color:#333; }

/* Consulting Section */
.consulting-section{ padding:60px 20px; background:#f7f9fc; }
.consulting-section h2, .highlights-section h2 { font-size:28px; margin-bottom:10px; font-weight: 700; }
.consulting-intro{ color:#555; margin-bottom:20px; }
.consulting-list{ list-style:none; padding:0; }
.consulting-list li{ padding:10px 0; font-size:16px; border-bottom:1px solid #e5e5e5; }

/* Contact Section */
#contact { background: #f8f9fc; padding-top: 120px; padding-bottom: 500px; }
.contact-text { font-size: 17px; line-height: 1.8; color: #1E2A38; }
.contact-details a { color: #2F80ED; font-weight: 500; text-decoration: none; }
.contact-details a:hover { text-decoration: underline; }
#contact .btn-primary { background-color: #2F80ED; border: none; transition: all 0.3s ease; }
#contact .btn-primary:hover { background-color: #1B3578; transform: translateY(-2px); }
.contact-icons { height: 20px; opacity: 0.7; }

#scrollTopBtn { position: fixed; bottom: 30px; right: 30px; width: 45px; height: 45px; border-radius: 50%; border: none; background: #2F80ED; color: #ffffff; font-size: 18px; display: none; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,0.15); box-shadow:0 6px 16px rgba(0,0,0,0.15); transition: all 0.3s ease; z-index: 999; }
#scrollTopBtn img { height: 24px; position: relative; bottom: 2px; }
#scrollTopBtn:hover { background: #1B3578; transform: translateY(-3px);}

@media screen and (max-width: 1024px) {
    .navbar.navbar-expand-lg.px-5 { padding-left: 16px !important; padding-right: 16px !important; }
}
@media screen and (max-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-item { margin: 0; }
}
@media screen and (max-width: 446px) {
    .btn.btn-light { margin-bottom: 24px; }
    .btn.btn-outline-light.ms-3 { margin-left: 0 !important; }
}