/* =======================
   GLOBAL PAGE STYLING
   ======================= */

body {
    background: #05060a;                 /* Dark futuristic background */
    color: #d7f9ff;                      /* Light cyan text for readability */
    font-family: 'Orbitron', sans-serif; /* Futuristic font */
    overflow-x: hidden;                  /* Prevent horizontal scroll */
}

/* Animated scan-line background overlay */
body::before {
    content: "";
    position: fixed;                     /* Stays in place even when scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Creates horizontal scan-line effect */
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 255, 255, 0.07),
        rgba(0, 255, 255, 0.07) 1px,
        transparent 1px,
        transparent 3px
    );

    z-index: -1;                         /* Keeps it behind all other elements */
    pointer-events: none;                /* Allows clicks through overlay */
    animation: scan 10s linear infinite; /* Moves scan lines downward */
}

/* Animation for scan-line movement */
@keyframes scan {
    0% { background-position: 0 0; }
    100% { background-position: 0 200px; }
}

/* =======================
   NAVBAR STYLING
   ======================= */

.navbar {
    background: rgba(0, 0, 0, 0.8);      /* Slightly transparent dark bar */
    backdrop-filter: blur(6px);          /* Frosted glass effect */
    border-bottom: 2px solid #0ff;       /* Neon cyan border */
    box-shadow: 0 0 12px #0ff;           /* Neon glow */
}

.navbar-brand {
    font-size: 1.8rem;
    color: #0ff !important;              /* Neon brand text */
    letter-spacing: 2px;                 /* Widely spaced futuristic letters */
    text-shadow: 0 0 15px #0ff;          /* Strong neon glow */
}

.nav-link {
    color: #9dfcff !important;           /* Light cyan nav links */
    letter-spacing: 1px;
}

.nav-link:hover {
    color: #fff !important;              /* Turns white on hover */
    text-shadow: 0 0 10px #0ff;          /* Neon hover glow */
}

/* =======================
   HERO SECTION
   ======================= */

#hero {
    height: 70vh;                        /* Takes 70% of screen height */
    background: url('https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1500&q=80') 
        center/cover no-repeat;          /* Cyberpunk themed image */
    
    display: flex;
    flex-direction: column;
    justify-content: center;             /* Center content vertically */
    align-items: center;                 /* Center content horizontally */
    
    color: cyan;
    text-shadow: 0 0 20px #00faff;       /* Neon glow */
    position: relative;                  /* For overlay */
}

/* Dark fade overlay on hero image */
#hero::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.4), #05060a);
    top: 0;
}

/* Neon glowing hero title */
#hero h1 {
    font-size: 3.5rem;
    z-index: 1;                          /* Above overlay */
    animation: glow 2s ease-in-out infinite alternate; /* Pulsing glow */
}

/* Glow animation for hero title */
@keyframes glow {
    from { text-shadow: 0 0 10px #0ff; }
    to { text-shadow: 0 0 30px #00eaff, 0 0 60px #00d0ff; }
}

/* =======================
   BLOG CARDS
   ======================= */

.blog-card {
    background: rgba(0, 15, 20, 0.7);    /* Transparent dark futuristic box */
    border: 1px solid #0ff;              /* Neon border */
    border-radius: 12px;                 /* Smooth edges */
    box-shadow: 0 0 15px #0ff;           /* Neon glow */
    overflow: hidden;                    /* Prevents image spill */
    position: relative;
    transition: 0.3s;                    /* Smooth hover effect */
}

.blog-card:hover {
    transform: translateY(-10px);        /* Lifts card upward */
    box-shadow: 0 0 25px #0ff, 0 0 40px #00bcd4; /* Stronger glow */
}

.blog-card img {
    opacity: 0.85;                        /* Slightly dimmed images for style */
}

.blog-card .card-body {
    padding: 20px;                       /* Space inside card */
}

.blog-card h5 {
    color: #0ff;                         /* Neon title */
}

/* =======================
   FUTURISTIC BUTTON
   ======================= */

.cyber-btn {
    border: 2px solid #0ff;              /* Neon border */
    color: #0ff;                         /* Neon text */
    background: transparent;             /* No fill */
    padding: 10px 18px;
    text-transform: uppercase;           /* Futuristic button style */
    font-weight: bold;
    transition: 0.3s;                    /* Smooth hover effect */
}

.cyber-btn:hover {
    background: #0ff;                    /* Neon fill */
    color: #000;                         /* Black text on hover */
    box-shadow: 0 0 20px #0ff;           /* Glow effect */
}

/* =======================
   FOOTER
   ======================= */

footer {
    margin-top: 60px;
    text-align: center;
    padding: 25px;
    border-top: 2px solid #0ff;          /* Neon top border */
    box-shadow: 0 -5px 20px #0ff;        /* Glow upward */
}

/* =======================
   CONTACT FORM
   ======================= */

.form-control {
    background: rgba(0, 30, 30, 0.8);    /* Futuristic dark input */
    border: 1px solid #0ff;              /* Neon border */
    color: #0ff;                         /* Neon text */
}

.form-control:focus {
    box-shadow: 0 0 20px #0ff;           /* Glow outline */
    border-color: #0ff;                  /* Strong neon focus */
}

/* Center the submit button */
.center-btn {
    display: block;
    margin: 15px auto 0;
    text-align: center;
}

/* Ensures all images maintain size and crop evenly */
.uniform-img {
    width: 100%;
    height: 200px;
    object-fit: cover;                   /* Perfect cropping */
}

/* =======================
   SOCIAL ICONS
   ======================= */

.social-icons {
    display: flex;
    gap: 20px;                           /* Spacing between icons */
    justify-content: center;             /* Center alignment */
    flex-wrap: wrap;                     /* Wrap on small screens */
    margin: 20px 0;
}

.social-icons a img {
    width: 50px;
    height: 50px;
    transition: transform 0.3s, filter 0.3s; /* Smooth hover animation */
}

/* Hover glow/zoom effect */
.social-icons a img:hover {
    transform: scale(1.2);               /* Slight zoom */
    filter: brightness(1.2);             /* Lighten icon */
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .social-icons a img {
      width: 40px;
      height: 40px;                      /* Smaller icons for mobile */
    }
}