style.css

*{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin:0;
padding: 0; 
}
body{ background-color:rgb(0,0,33) ;
color: white;
}
nav{ display: flex; 
justify-content: space-around;
align-items: center; 
height:80px ;
background-color:rgb(8, 8, 64)
;
} 
nav ul{ 
display: flex;
justify-content: center;
}
nav ul li {
list-style: none;
margin:0 23px; 
}
nav ul li a {
text-decoration: none; 
color: aliceblue;
} 
nav ul li a:hover { 
color: rgb(172, 172, 237);
font-size:1.1rem ;
} 
.left{ font-size: 1.5rem;
} 
.firstsection{ 
display: flex;
justify-content:space-around ;
align-items: center;
margin:130px 0 ; 
}
.firstsection div{ 
width: 30%; 
} 
.leftsection{
font-size: 2.5rem; 
margin: 90px 0;;
} 
.buttons {
margin-top: 20px; 
display: flex;
/* makes children side by side */
gap: 15px; /* space between buttons */ 
}
.btn {
padding: 10px 20px; 
border: 2px solid #9c97f1;
background: transparent;
color: white; 
border-radius: 6px;
font-size: 16px; 
cursor: pointer; 
text-decoration: none;
transition: all 0.3s ease;
} 
.btn:hover { 
background: #9c97f1; 
color: black;
} 
.rightsection img{
width:80%; 
margin:50px 0;
} 
.purple{ 
color:blueviolet; 
}
#element{ 
color:blueviolet;
}
main hr{ 
border: 0;
background: #9c97f1;
height: 1.2px;
margin:40px 84px;
}
footer{
background-color: #0e0e1a;
}
footer { 
color: #fff;
padding: 40px 20px; 
text-align: center; 
} 
footer a { 
color: #ffcc00; /* highlight links */ 
text-decoration: none;
}
footer a:hover {
text-decoration: underline; 
}
.footer-rights {
margin-top: 20px;
font-size: 14px; 
color: #ccc;
}
.about { 
max-width: 80vw;
margin: 60px auto; 
font-size: 1.1rem; 
line-height: 1.6; /* better spacing between lines */ 
} 
.about h2 { 
font-size: 2rem;
margin-bottom: 25px; 
color: #9c97f1; 
text-align: center; 
}
.about-container {
display: flex; 
align-items: flex-start; /* align items at top */ 
gap: 50px;
flex-wrap: wrap; 
} 
.about-text {
flex: 1; 
}
.about-text p {
margin-bottom: 20px; /* spacing below intro paragraph */
} 
.about-info ul, .skills ul {
list-style: none;
padding: 0; 
margin: 15px 0;
}
.about-info li, .skills li {
margin-bottom: 10px; /* spacing between list items */
} 
.about-info li b { 
color: #9c97f1; /* highlight labels like Name, Email */
margin-right: 8px;
} 
.skills h3 {
margin: 20px 0 12px;
color: #9c97f1;
font-size: 1.3rem; 
}
.services {
max-width: 80vw; 
margin: 60px auto;
text-align: center;
} 
.services h2 {
font-size: 2rem;
margin-bottom: 40px; 
color: #9c97f1; } 
.services-container { 
display: flex;
flex-wrap: wrap;
justify-content: center; 
gap: 30px;
} 
.service-box { 
background: #111132;
border: 1px solid #9c97f1;
border-radius: 10px;
padding: 20px; 
width: 250px;
transition: transform 0.3s, box-shadow 0.3s;
}
.service-box img { 
width: 60px;
margin-bottom: 15px;
}
.service-box h3 {
margin-bottom: 10px; 
color: #9c97f1;
} 
.service-box p { 
font-size: 0.9rem;
color: #ccc; 
}
.service-box:hover { 
transform: translateY(-10px);
box-shadow: 0 4px 20px rgba(156, 151, 241, 0.3);
} 
.projects { 
padding: 60px 20px; 
text-align: center;
} 
.projects h2 { 
font-size: 2rem; 
margin-bottom: 40px;
color: #9c97f1; 
} 
.projects-container
{
display: flex; 
justify-content: center;
gap: 30px; flex-wrap: wrap; }
.project-card {
background: #1e1e3f;
padding: 20px;
border-radius: 10px;
border: 2px solid #9c97f1; 
width: 300px; 
text-align: center;
transition: transform 0.3s ease, background 0.3s ease; 
}
.project-card:hover {
transform: translateY(-10px);
background: #2a2a50;
} 
.project-card img {
width: 80px; 
margin-bottom: 15px;
} 
.project-card h3 {
margin-bottom: 10px; 
color: #fff;
}
.project-card p {
font-size: 0.9rem;
color: #ccc; 
margin-bottom: 15px; 
} 
.project-card .btn
{
padding: 8px 16px; 
border: 2px solid #9c97f1;
background: transparent;
color: #fff;
border-radius: 6px; 
cursor: pointer; 
text-decoration: none;
transition: all 0.3s ease;
} 
.project-card .btn:hover {
background: #9c97f1;
color: #000;
}
#contact {
padding: 60px 20px;
text-align: center; 
background-color: #111;
color: white;
}
#contact h2 {
font-size: 2rem; 
color: #9c97f1; 
margin-bottom: 15px; 
}
#contact p { 
font-size: 18px; 
margin: 8px 0; 
}
.contact-details a { 
color: #9c97f1;
text-decoration: none; 
transition: 0.3s; 
}
.contact-details a:hover {
color: white;
} /* Learning Journey Section */
#learning {
padding: 60px 20px;
background: #f9f9f9;
}
.learning-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 25px; 
max-width: 1000px; 
margin: 0 auto;
}
#learning{
background-color: rgb(0,0,33); 
text-align: center; 
color:#9c97f1
}
.learning-card {
background-color: #242249 ;
border: 2px solid #9c97f1;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
padding: 25px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.learning-card:hover { 
transform: translateY(-8px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.learning-card h3 { 
color: #00bcd4; 
font-size: 1.3rem;
margin-bottom: 10px;
}
.learning-card p {
color:white;
font-size: 1rem; 
line-height: 1.5;
}
* Reveal Animation */ 
.learning-card,
.project-card,
.service-box,
.about-container,
.leftsection,
.rightsection 
{ opacity: 0; 
transform: translateY(50px);
transition: opacity 0.8s ease,
transform 0.8s ease; 
}
.visible {
opacity: 1;
transform: translateY(0);
}
/* Scroll to Top Button */ 
.scroll-top {
position: fixed;
bottom: 30px;
right: 30px; 
background: #00bcd4; 
color: white;
border: none; 
border-radius: 50%;
width: 45px;
height: 45px;
font-size: 22px;
cursor: pointer; 
display: none; 
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
transition: transform 0.3s ease, background 0.3s ease;
}
.scroll-top:hover {
transform: scale(1.1); 
background: #0097a7;

}
img{
    border-radius: 100px;
    border: 3px solid #00ffff;
     box-shadow: 0 0 20px #00ffff;
}