body {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 22px;
background: #0d0d1a url("../Images/about.jpg") no-repeat center center fixed;
background-size: cover;
color: #e9e8ff;
min-height: 100vh;
position: relative;
}

body::before {
content: "";
position: fixed;
inset: 0;
background:
radial-gradient(circle at 16% 20%, rgba(74, 144, 218, 0.24), transparent 36%),
radial-gradient(circle at 84% 14%, rgba(171, 71, 188, 0.28), transparent 34%),
linear-gradient(145deg, rgba(12, 12, 26, 0.86), rgba(24, 17, 48, 0.84));
z-index: 0;
}

.container {
position: relative;
z-index: 1;
max-width: 920px;
margin: 42px auto;
}

.overlay {
background: linear-gradient(165deg, rgba(20, 20, 44, 0.9), rgba(30, 20, 54, 0.87));
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
padding: 28px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
}

h1 {
text-align: center;
font-size: clamp(1.7rem, 3.4vw, 2.3rem);
margin: 0 0 14px;
letter-spacing: 0.3px;
background: linear-gradient(90deg, #6eb6ff, #ce93d8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.lead {
text-align: center;
line-height: 1.7;
color: #ddd9ff;
margin: 0 auto 18px;
max-width: 760px;
}

.info-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 14px;
padding: 16px 18px;
margin-top: 14px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.info-card:hover {
transform: translateY(-3px);
border-color: rgba(171, 71, 188, 0.42);
box-shadow: 0 10px 20px rgba(20, 10, 38, 0.45);
}

h2 {
color: #c8a6ff;
font-size: 1.15rem;
margin: 0 0 8px;
}

p {
line-height: 1.65;
margin: 0 0 8px;
color: #e0ddff;
}

ul {
margin: 0;
padding-left: 18px;
line-height: 1.65;
color: #ddd7ff;
}

code {
background: rgba(255, 255, 255, 0.14);
padding: 2px 7px;
border-radius: 6px;
font-family: Consolas, monospace;
font-size: 0.9rem;
color: #f0e7ff;
}

.home-button-wrapper {
text-align: center;
margin-top: 22px;
}

.home-btn {
display: inline-block;
padding: 11px 26px;
background: linear-gradient(135deg, #4a90da, #ab47bc);
color: #fff;
border-radius: 999px;
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
box-shadow: 0 10px 20px rgba(46, 25, 84, 0.4);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(46, 25, 84, 0.5);
}

.home-btn i,
.contact-btn i {
margin-right: 7px;
}

.contact-btn {
position: fixed;
top: 18px;
right: 18px;
padding: 10px 18px;
background: linear-gradient(135deg, #4a90da, #ab47bc);
color: #fff;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
box-shadow: 0 8px 18px rgba(46, 25, 84, 0.38);
transition: transform 0.2s ease, box-shadow 0.2s ease;
z-index: 2;
}

.contact-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(46, 25, 84, 0.5);
}

@media (max-width: 640px) {
body {
padding: 14px;
}

.container {
margin: 58px auto 20px;
}

.overlay {
padding: 18px;
}

.contact-btn {
top: 10px;
right: 10px;
padding: 8px 13px;
font-size: 0.85rem;
}
}