@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;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: #080808;
    --second-bg-color: #131313;
    --text-color: white;
    --main-color: #00ff51;
}

html { font-size: 0.9vw; } 

body { background: var(--bg-color); color: var(--text-color); }

/* HEADER */
.header {
    position: fixed; width: 100%; top: 0; left: 0;
    padding: 2rem 9%; background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px); display: flex;
    justify-content: space-between; align-items: center; z-index: 100;
}
.logo { font-size: 3rem; color: var(--main-color); font-weight: 800; cursor: pointer; transition: 0.3s; }
.logo span { color: var(--text-color); text-shadow: 0 0 25px var(--main-color); }
.navbar a {
    font-size: 1.8rem; color: var(--text-color); margin-left: 4rem;
    font-weight: 500; transition: 0.3s; border-bottom: 3px solid transparent;
}
.navbar a:hover, .navbar a.active { color: var(--main-color); border-bottom: 3px solid var(--main-color); }
#menu-icon { font-size: 3.6rem; color: var(--main-color); display: none; cursor: pointer; }

/* SECTIONS */
section { min-height: 100vh; padding: 10rem 9% 2rem; }

/* HOME */
.home { display: flex; align-items: center; justify-content: space-between; gap: 0; }
.home-content { flex: 1 1 50%; padding-right: 5rem; } 
.home-content h1 { font-size: 6rem; font-weight: 700; line-height: 1.3; color: var(--text-color); }
.home-content h1 span { color: var(--main-color); text-shadow: 0 0 25px var(--main-color); }
.home-content h3 { font-size: 3rem; margin-bottom: 2rem; font-weight: 700; }
.home-content h3 span { color: var(--main-color); text-shadow: 0 0 25px var(--main-color); }
.home-content p { font-size: 1.6rem; margin-bottom: 3rem; }

/* ICONS */
.social-icon { margin-bottom: 3rem; width: 100%; }
.social-icon a {
    display: inline-flex; justify-content: center; align-items: center;
    width: 4rem; height: 4rem; background: transparent;
    border: 2px solid var(--main-color); border-radius: 50%;
    font-size: 2rem; color: var(--main-color); margin: 0 1rem 1rem 0;
    transition: 0.1s ease; 
    position: relative;
    animation: walkSequence 6s linear infinite;
    animation-delay: calc(var(--i) * 0.4s); 
}
@keyframes walkSequence {
    0% { transform: translateX(0) rotate(0deg); }
    40% { transform: translateX(15vw) rotate(15deg); } 
    50% { transform: translateX(15vw) rotate(0deg); }
    90% { transform: translateX(0) rotate(-15deg); } 
    100% { transform: translateX(0) rotate(0deg); }
}
.social-icon a:hover, .social-icon a:active {
    animation-play-state: paused;
    background: var(--main-color); color: var(--bg-color);
    box-shadow: 0 0 25px var(--main-color);
    transform: scale(1.1);
}

.btn-group { display: flex; gap: 1.5rem; }
.btn {
    display: inline-block; padding: 1rem 2.8rem; background: var(--main-color);
    border-radius: 4rem; box-shadow: 0 0 25px var(--main-color);
    font-size: 1.6rem; color: var(--bg-color); letter-spacing: 0.1rem;
    font-weight: 600; transition: 0.1s ease;
}
.btn:hover, .btn:active { box-shadow: none; transform: scale(1.05); }

/* HOME IMAGE */
.home-img { flex: 1 1 45%; display: flex; justify-content: flex-end; }
.home-img img {
    width: 28vw; 
    transition: box-shadow 0.1s ease-in-out, transform 0.1s;
    animation: float 4s ease-in-out infinite;
    border-radius: 50%; border: 4px solid var(--main-color); 
    aspect-ratio: 1/1; object-fit: cover; 
    cursor: pointer;
}
.home-img img.auto-active-img, .home-img img:hover, .home-img img:active {
    box-shadow: 0 0 60px var(--main-color), 0 0 120px var(--main-color);
    transform: scale(1.05);
}
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

/* ABOUT */
.about { 
    display: flex; align-items: center; justify-content: center; gap: 5rem; 
    background: var(--second-bg-color); 
}
.about-img img { 
    width: 28vw; border-radius: 50%; 
    border: 2px solid var(--main-color); 
    aspect-ratio: 1/1; object-fit: cover;
    transition: box-shadow 0.1s ease-in-out, transform 0.1s;
    cursor: pointer;
    /* Added Float animation */
    animation: float 4s ease-in-out infinite;
}
.about-img img.auto-active-about, .about-img img:hover, .about-img img:active {
    box-shadow: 0 0 50px var(--main-color), 0 0 100px var(--main-color);
}
.about-content h2 { font-size: 4.5rem; text-align: left; }
.about-content h2 span { color: var(--main-color); text-shadow: 0 0 10px var(--main-color); }
.about-content p { font-size: 1.6rem; margin: 2rem 0 3rem; line-height: 1.8; }

/* ABOUT READING TEXT */
.word-span { 
    opacity: 0.5; /* Visible before animation */
    transition: opacity 0.5s ease, color 0.5s ease; 
    color: white; 
}
.word-span.green-read { opacity: 1; color: var(--main-color); text-shadow: 0 0 2px var(--main-color); }
.word-span.white-read { opacity: 1; color: var(--text-color); text-shadow: none; }

/* SERVICES */
.services h2 { font-size: 4.5rem; margin-bottom: 5rem; text-align: center; }
.services h2 span { color: var(--main-color); }
.services-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 2rem; perspective: 1000px; 
}
.services-box {
    background: var(--second-bg-color); padding: 3rem 2rem; border-radius: 2rem;
    text-align: center; border: 2px solid var(--bg-color); 
    transition: transform 1.5s ease, background 0.5s; 
    transform-style: preserve-3d;
    cursor: pointer;
}
/* AUTO FLIP: Slow 1.5s transition */
.services-box.auto-flip {
    transition: transform 1.5s ease, background 0.1s; 
    background: var(--main-color);
    border-color: var(--main-color); 
    transform: rotateY(360deg);
}

.services-box:hover, .services-box:active {
    background: var(--main-color);
    border-color: var(--main-color); 
    transform: rotateY(360deg);
}
.services-box.auto-flip .services-info, .services-box:hover .services-info, .services-box:active .services-info { color: #000; }
.services-box.auto-flip i, .services-box:hover i, .services-box:active i { color: #000; }
.services-info i { font-size: 5rem; color: var(--main-color); margin-bottom: 1rem; transition: 0.3s;}
.services-info h4 { font-size: 2.5rem; margin-bottom: 1rem; transition: 0.3s;}
.services-info p { font-size: 1.6rem; transition: 0.3s;}

/* PROJECTS */
.projects-cta {
    background: var(--bg-color);
    display: flex; justify-content: center; align-items: center;
    padding: 5rem 9%;
    min-height: 40vh;
}
.project-banner {
    width: 100%;
    background: linear-gradient(45deg, var(--second-bg-color), #0f2b16);
    padding: 4rem;
    border-radius: 2rem;
    text-align: center;
    border: 1px solid var(--main-color);
    box-shadow: 0 0 20px rgba(0, 255, 81, 0.2);
}
.project-banner i { font-size: 6rem; color: var(--main-color); margin-bottom: 1rem; }
.project-banner h3 { font-size: 3rem; margin-bottom: 1rem; }
.project-banner p { font-size: 1.6rem; margin-bottom: 2rem; }

/* CONTACT */
.contact { background: var(--second-bg-color); }
.contact h2 { font-size: 4.5rem; margin-bottom: 5rem; text-align: center; }
.contact h2 span { color: var(--main-color); }

.contact-options { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; }
.contact-box {
    flex: 1 1 300px;
    background: var(--bg-color);
    border: 2px solid var(--main-color);
    border-radius: 2rem;
    padding: 3rem;
    text-align: center;
    transition: 0.05s ease; 
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 255, 81, 0.1);
    text-decoration: none;
    display: block;
}
.contact-box i { font-size: 4rem; color: var(--main-color); margin-bottom: 1.5rem; transition: 0.3s; }
.contact-box h3 { font-size: 2.2rem; margin-bottom: 1rem; color: var(--text-color); transition: 0.3s; }
.contact-box p { font-size: 1.6rem; color: #aaa; transition: 0.3s; }

/* RESIZE PULSE ANIMATION */
@keyframes pulseContact {
    0% { transform: scale(1) translateY(-10px); }
    50% { transform: scale(0.9) translateY(-10px); }
    100% { transform: scale(1) translateY(-10px); }
}

.contact-box:hover, .contact-box:active, .auto-active-contact {
    background: var(--main-color);
    box-shadow: 0 0 30px var(--main-color);
    
    /* Animation runs for 1 second */
    animation: pulseContact 1s infinite ease-in-out;
    
    transform: translateY(-10px); 
}

.contact-box:hover h3, .contact-box:hover p, .contact-box:hover i,
.contact-box:active h3, .contact-box:active p, .contact-box:active i,
.auto-active-contact h3, .auto-active-contact p, .auto-active-contact i {
    color: #000;
}

/* FOOTER */
.footer { background: var(--bg-color); padding: 5rem 0; text-align: center; }
.footer ul { margin: 2rem 0; }
.footer ul li { display: inline-block; margin: 0 1.5rem; }
.footer ul li a { font-size: 1.6rem; color: var(--text-color); transition: 0.3s; }
.footer ul li a:hover { color: var(--main-color); }
.footer .copyright { font-size: 1.4rem; }

/* MOBILE BREAKPOINTS */
@media (max-width: 991px) {
    html { font-size: 55%; } 
    .header { padding: 2rem 3%; }
    section { padding: 10rem 3% 2rem; }
}

@media (max-width: 768px) {
    html { font-size: 60%; } 
    #menu-icon { display: block; }
    .navbar {
        position: absolute; top: 100%; left: 0; width: 100%;
        padding: 1rem 3%; background: var(--bg-color);
        display: none; 
    }
    .navbar.active { display: block; } 
    .home { flex-direction: column; text-align: center; }
    .home-content { padding-right: 0; }
    .home-img { justify-content: center; margin-top: 4rem; }
    .home-img img { width: 70vw; }
    .about { flex-direction: column-reverse; text-align: center; }
    .about-img img { width: 70vw; margin-top: 2rem; }
}