/* Basic layout tweaks for the portfolio */
:root{
	--primary: #0d6efd;
}
html{scroll-behavior:smooth}
body{
	padding-top:70px; /* space for fixed navbar */
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background: #fff;
}
.profile-photo{max-width:260px}
h2{margin-bottom:0.75rem}
.skill-box{
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 6px;
	text-align: center;
	font-weight:600;
}
section{border-bottom: 1px solid #f1f1f1}
main{padding-bottom:2rem}
@media (max-width:575px){
	.profile-photo{max-width:180px;margin:0 auto 1rem}
}

/* Hero styles matching provided design */
.hero-section{background: linear-gradient(180deg,#EFF6FF 0%, #FFFFFF 50%, #FFFFFF 100%);}
.hero-badge{display:inline-block;background:#DBEAFE;color:#1447E6;padding:8px 18px;border-radius:999px;font-size:14px}
.hero-name{color:#155DFC;font-size:20px;font-weight:600}
.hero-title{color:#314158;font-size:28px;font-weight:600}
.hero-desc{color:#45556C;font-size:18px;line-height:1.6}
.view-work{background:#155DFC;border-color:#155DFC}
.get-in-touch{background:#fff;border:1.25px solid #155DFC;color:#155DFC}

.hero-canvas{width:384px;height:384px;position:relative;display:inline-block}
.circle{border-radius:9999px;position:absolute}
.circle-large{width:384px;height:384px;left:0;top:0;background:#155DFC;opacity:0.5}
.circle-mid{width:320px;height:320px;left:32px;top:32px;background:#2B7FFF;opacity:0.2}
.circle-inner{width:256px;height:256px;left:64px;top:64px;background:transparent;border-radius:9999px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);overflow:hidden;padding:3.75px;outline:3.75px #fff solid;outline-offset:-3.75px}
.hero-photo{width:100%;height:100%;object-fit:cover;display:block}

.overlay-card{position:absolute;left:206px;top:318px;width:194px;background:#fff;padding:12px;border-radius:12px;box-shadow:0 8px 10px -6px rgba(0,0,0,.1);border:1px solid #F1F5F9;display:flex;gap:12px;align-items:center}
.overlay-icon{width:48px;height:48px;border-radius:9999px;background:#155DFC;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px}
.overlay-small{color:#62748E;font-size:13px}
.overlay-strong{color:#0F172B;font-size:16px;font-weight:600}

@media (max-width:991px){
	.hero-canvas{width:320px;height:320px}
	.circle-large{width:320px;height:320px}
	.circle-mid{width:256px;height:256px;left:32px;top:32px}
	.circle-inner{width:192px;height:192px;left:64px;top:64px}
	.overlay-card{left:160px;top:270px}
}

/* About section styles */
.about-section{background:#F8FAFC}
.about-card{background:#fff;box-shadow:0 4px 6px -4px rgba(0,0,0,.1);border-radius:16px;outline:1.25px #E2E8F0 solid;outline-offset:-1.25px;padding:33px}
.about-paragraph{color:#314158;font-size:18px;line-height:28px;margin-bottom:18px}
.about-features{margin-top:8px}
.feature{width:282.68px;height:119.92px;border-radius:14px;padding:24px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:#fff;box-shadow:0 4px 6px -4px rgba(0,0,0,.1)}
.feature-icon{font-size:36px;align-self:center;margin-bottom:6px}
.feature-title{text-align:center;font-size:16px}
.feature-blue{background:#155DFC}
.feature-dark{background:#314158}

@media (max-width:991px){
	.feature{width:100%}
}

/* Certificates styles */
.certificates-section{background:#fff}
.cert-card{background:#fff;border-radius:14px;box-shadow:0 4px 6px -4px rgba(0,0,0,.1);overflow:hidden;border:1px solid #E2E8F0;display:flex;flex-direction:column}
.cert-preview{height:270px;background:#F1F5F9}
.cert-preview img{width:100%;height:270px;object-fit:cover;display:block}
.cert-body{padding:16px;display:flex;flex-direction:column;gap:8px}
.cert-title{margin:0;color:#0F172B;font-size:16px}
.cert-banner{width:100%;max-width:760px;background:#F8FAFC;border-radius:14px;border:1px solid #E2E8F0;outline-offset:-1.25px}
.banner-icon{font-size:24px}
.banner-title{font-weight:600;color:#0F172B}
.banner-sub{font-size:16px}

@media (max-width:767px){
	.cert-preview{height:200px}
}

/* Skills styles */
.skills-section{background:#fff}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.skill-card{background:#fff;border-radius:14px;padding:24px;border:1px solid #E2E8F0;box-shadow:0 4px 6px -4px rgba(0,0,0,.1);min-height:160px;display:flex;flex-direction:column;gap:8px}
.skill-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(180deg,#155DFC,#2B7FFF);box-shadow:0 6px 10px -6px rgba(21,93,252,.4);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px}
.skill-icon i{line-height:1}
.skill-title{margin:0;color:#0F172B;font-size:18px}
.skill-desc{margin:0;color:#45556C;font-size:16px;line-height:1.4}

@media (max-width:991px){
	.skills-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:575px){
	.skills-grid{grid-template-columns:1fr}
}

/* Projects styles */
.projects-section{background:#F8FAFC}
.project-card{background:#fff;border-radius:16px;box-shadow:0 8px 10px -6px rgba(0,0,0,.1);overflow:hidden;border:1px solid #E2E8F0; display:flex;flex-direction:column}
.project-topbar{height:8px}
.gradient-primary{background:linear-gradient(90deg,#2B7FFF 0%,#1447E6 100%)}
.gradient-dark{background:linear-gradient(90deg,#45556C 0%,#1D293D 100%)}
.project-visual img{width:100%;height:220px;object-fit:cover;display:block}
.project-body{padding:20px}
.project-title{margin:0;color:#0F172B;font-size:16px}
.project-desc{color:#314158;font-size:16px;line-height:1.5}
.project-highlights ul{padding-left:0;margin:0;list-style:none}
.project-highlights ul li{position:relative;padding-left:26px;margin-bottom:6px}
.project-highlights ul li:before{content:'✓';position:absolute;left:0;top:0;color:#155DFC}
.tag{display:inline-block;padding:6px 12px;background:#DBEAFE;color:#1447E6;border-radius:999px;font-size:14px}
.project-actions .btn-secondary{background:#E2E8F0;border-color:#E2E8F0;color:#314158}

@media (max-width:991px){
	.project-body{padding:16px}
}

/* Contact styles */
.contact-section{background:#0F172B;color:#fff;width:100%}
.contact-sub{color:#CAD5E2}
.contact-card{background:#fff;border-radius:14px;padding:22px;color:#0F172B;border:1px solid #E2E8F0;box-shadow:0 6px 12px -8px rgba(0,0,0,.2)}
.icon-circle{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;margin:0 auto}
.icon-gmail{background:#155DFC}
.icon-github{background:#1D293D}
.icon-facebook{background:#1447E6}
.contact-card a{color:#155DFC;text-decoration:none}
.contact-footer .text-muted{color:#90A1B9}

@media (max-width:767px){
	.icon-circle{width:56px;height:56px}
}