@import url("https://fonts.googleapis.com/css?family=Poppins:300;400;500;600;700;800;900&display=swap");

* {
    margin: 0; padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none; outline: none;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
}

:root {
    --bg-color: #1f242d;
    --second-bg-color: #323946;
    --text-color: #fff;
    --main-color: #0ef;
}

html { font-size: 62.5%; }
body { background: var(--bg-color); color: var(--text-color); }
section { min-height: 100vh; padding: 10rem 9% 2rem; }

.header {
    position: fixed; top: 0; left: 0;
    width: 100%; padding: 2rem 9%;
    background: var(--bg-color);
    display: flex; justify-content: space-between; align-items: center;
    z-index: 100;
}
.header.sticky { border-bottom: .1rem solid rgba(0,0,0,.2); }

.logo { font-size: 2.5rem; font-weight: 600; color: var(--text-color); cursor: default; }
.navbar a { font-size: 1.7rem; margin-left: 4rem; color: var(--text-color); transition: 0.3s; }
.navbar a:hover, .navbar a.active { color: var(--main-color); }
#menu-icon { font-size: 3.6rem; color: var(--text-color); display: none; }

/* Home Section */
.home { display: flex; justify-content: center; align-items: center; }
.home-img { width: 35vw; padding-left: 30px; border-radius: 15%; }
.home-content h1 { font-size: 5.6rem; font-weight: 700; line-height: 1.3; }
.home-content h3 { font-size: 3.2rem; font-weight: 700; }
.home-content h3:nth-of-type(2) { margin-bottom: 2rem; }
span { color: var(--main-color); }
.home-content p { font-size: 2rem; }
.social-media a {
    display: inline-flex; justify-content: center; align-items: center;
    width: 4rem; height: 4rem;
    border: 0.2rem solid var(--main-color);
    border-radius: 50%;
    font-size: 2rem; color: var(--main-color);
    margin: 3rem 1.5rem 3rem 0;
    transition: .4s ease;
}
.social-media a:hover { background: var(--main-color); color: var(--second-bg-color); box-shadow: 0 0 1rem var(--main-color); }
.btn { display: inline-block; padding: 1rem 2.8rem; background: var(--main-color); border-radius: 6rem; font-size: 1.6rem; color: var(--second-bg-color); font-weight: 700; transition: .5s ease; }
.btn:hover { box-shadow: none; }

/* About */
.about { display: flex; gap: 2rem; background: var(--second-bg-color); align-items: center; }
.about-img img { width: 35vw; }
.heading { text-align: center; font-size: 4.5rem; }
.about-content h2 { text-align: left; line-height: 1.2; }
.about-content h3 { font-size: 2.6rem; }
.about-content p { font-size: 1.5rem; margin: 2rem 0 3rem; }

/* Skills */
.skills h2 { margin-bottom: 5rem; }
.skills-container { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
.skills-box { flex: 1 1 25rem; background: var(--second-bg-color); padding: 3rem 2rem; border-radius: 2rem; text-align: center; transition: .5s ease; }
.skills-box:hover { border: 0.5rem solid var(--main-color); }
.skills-box i { font-size: 7rem; color: var(--main-color); }
.skills-box h3 { font-size: 2.6rem; }
.skills-box ul { font-size: 1.6rem; margin: 1rem 0 3rem; }

/* Experience */
.experience { background: var(--bg-color); }
.experience h2 { margin-bottom: 5rem; }
.experience-container { display: flex; flex-direction: column; gap: 2.5rem; }
.experience-box { background: var(--second-bg-color); padding: 3rem; border-radius: 1.5rem; box-shadow: 0 0 1rem var(--bg-color); transition: .4s ease; }
.experience-box:hover { border-left: 0.6rem solid var(--main-color); transform: translateY(-5px); }
.experience-box h3 { font-size: 2.4rem; color: var(--main-color); margin-bottom: 1rem; }
.experience-box span { display: block; font-size: 1.6rem; color: #ccc; margin-bottom: 1.5rem; }
.experience-box ul { list-style: disc; padding-left: 2rem; font-size: 1.6rem; line-height: 1.8; }

/* Projects */
.projects { background: var(--second-bg-color); }
.projects h2 { margin-bottom: 4rem; }
.project-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.project-box { position: relative; width: 100%; height: 400px; border-radius: 10%; background: linear-gradient(rgba(0,0,0,0.1), var(--main-color)); overflow: hidden; }
.project-box img { width: 100%; height: 100%; border-radius: 10%; opacity: 0.4; transition: .5s ease; }
.project-box:hover img { transform: scale(1.1); }
.project-layer { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 2rem; text-align: center; transform: translateY(100%); transition: .5s ease; }
.project-box:hover .project-layer { transform: translateY(0); }
.project-layer h4 { font-size: 2.4rem; margin-bottom: 1rem; }
.project-layer p { font-size: 1.6rem; margin-bottom: 1rem; }
.project-layer a { width: 5rem; height: 5rem; background: var(--text-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.project-layer a i { font-size: 2rem; color: var(--second-bg-color); }

/* Contact */
.contact h2 { margin-bottom: 3rem; }
.contact form { max-width: 70rem; margin: auto; text-align: center; margin-bottom: 3rem; }
.contact .input-box { display: flex; justify-content: space-between; flex-wrap: wrap; }
.contact .input-box input, .contact textarea { width: 100%; padding: 1.5rem; font-size: 1.6rem; background: var(--second-bg-color); border-radius: .8rem; margin: .7rem 0; color: var(--text-color); }
.contact .input-box input { width: 49%; }
.contact textarea { resize: none; }

/* Responsive */
@media (max-width: 991px) { .navbar { display: none; } #menu-icon { display: block; } }