/* General Styles */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #f4f7f9; color: #333; line-height: 1.6; }

/* Navigation */
header { background: #0a192f; color: white; padding: 1rem 5%; position: sticky; top: 0; z-index: 1000; }
nav { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.5rem; font-weight: bold; }
.logo span { color: #00a8ff; }
nav ul { list-style: none; display: flex; align-items: center; }
nav ul li { margin-left: 20px; }
nav ul li a { color: white; text-decoration: none; font-weight: 500; }
.cta-button { background: #00a8ff; padding: 10px 20px; border-radius: 5px; }

/* Hero Section */
.hero { 
    background: linear-gradient(rgba(10, 25, 47, 0.8), rgba(10, 25, 47, 0.8)), url('images/dash.jpg'); 
    background-size: cover; background-position: center;
    height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; color: white;
}
/* Hero Section Updates */
.hero h1 { 
    font-size: 3rem; 
    margin-bottom: 1rem; 
}

/* Add this to create space for the paragraph */
.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem; /* This pushes the button down */
}

.main-btn { 
    display: inline-block; /* Essential to allow margins/spacing */
    background: #00a8ff; 
    color: white; 
    padding: 15px 30px; 
    text-decoration: none; 
    font-size: 1.2rem; 
    border-radius: 5px; 
    transition: background 0.3s;
}

.main-btn:hover {
    background: #0086cc;
}
/* Services */
.services { padding: 50px 5%; text-align: center; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 30px; }
.service-card { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: 0.3s; }
.service-card:hover { transform: translateY(-5px); }
.service-card i { font-size: 2.5rem; color: #00a8ff; margin-bottom: 15px; }

/* About & Footer */
.about { background: #0a192f; color: white; padding: 50px 5%; text-align: center; }
footer { padding: 30px; text-align: center; background: #050c16; color: #888; }

/* Mobile Responsive */
@media (max-width: 768px) {
    nav {
        flex-direction: column; /* Stacks logo above the menu */
        gap: 15px;
    }

    nav ul {
        display: flex; /* Overrides the 'none' display */
        padding: 0;
        justify-content: center;
        flex-wrap: wrap; /* Allows links to wrap if screen is very narrow */
    }

    nav ul li {
        margin: 0 10px; /* Adjust spacing between links */
    }

    .hero h1 { font-size: 2rem; }
    .hero { height: auto; padding: 100px 20px; } /* Ensures text doesn't overlap on mobile */

    .gallery-item {
        flex: 1 1 100%; /* Forces images to take full width on mobile */
        max-width: none;
    }
    
    .gallery-item img {
        height: auto; /* Maintains aspect ratio on mobile */
    }    
}
.work-gallery { padding: 50px 5%; text-align: center; background: #fff; }
.work-gallery h2 { margin-bottom: 30px; }

.gallery-container { 
    display: flex; 
    gap: 20px; 
    justify-content: center; 
    flex-wrap: wrap; /* Allows images to stack on mobile */
}

.gallery-item { flex: 1; min-width: 250px; max-width: 400px; }

.gallery-item img { 
    width: 100%; 
    height: auto; /* The image dictates the height based on its shape */
    display: block;
    border-radius: 10px;
}

.gallery-item p { margin-top: 10px; font-weight: bold; color: #0a192f; }

.whatsapp-btn {
    background-color: #25D366;
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}
.whatsapp-btn:hover {
    background-color: #128C7E;
}

html {
    scroll-behavior: smooth;
}

/* Container for the logo and text */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 12px; /* Space between logo and text */
}

/* Styling for the Coding/Programming Service Card */
.service-card i.fa-code {
    color: #00a8ff; /* Your primary blue */
    background: rgba(0, 168, 255, 0.1); /* Subtle light blue circle background */
    padding: 20px;
    border-radius: 50%;
    font-size: 2.5rem;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

/* Hover effect to make it feel interactive */
.service-card:hover i.fa-code {
    transform: scale(1.1);
    color: #00d2ff; /* Brightens on hover */
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
}