/* General Styles */
:root {
    --primary: #6366f1;
    --secondary: #a855f7;
    --accent: #ec4899;
    --text: #2d3748;
    --background: #f8fafc;
    --card-bg: rgba(255, 255, 255, 0.95);
    --input-border: #e2e8f0;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    * {

        font-family: system-ui, -apple-system, BlinkMacSystemFont, 
                   'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 
                   'Open Sans', 'Helvetica Neue', sans-serif;
    }
}
    body {
        background-color: #111827; /* Dark background color */
        color: #24292e; /* Text color */
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Font family */
        margin: 0; /* Remove default margin */
        line-height: 1.5; /* Line height */
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    a {
        color:  #00ff6ed5 ; /* Link color */
        text-decoration: none; /* Remove underline */
    }

    a:hover {
        text-decoration: underline; /* Underline on hover */
    }

    /* Header Styles */
    header {
        background: #24292e; /* Header background color */
        padding: 1rem 0; /* Padding */
        position:  top; /* Positioning */
        opacity: 20; /* Initially hidden */
        transition: opacity 0.3s ease; /* Transition effect */
    }

    header:hover {
        opacity: 1; /* Show on hover */
    }

    nav {
        display: flex; /* Flexbox layout */
        justify-content: space-between; /* Space between items */
        align-items: center; /* Center items vertically */
        padding: 0px 10px 0px 10px; /* Padding */
    }

    /* Logo Container */
    .logo-container {
        display: flex; /* Flexbox layout */
        align-items: center; /* Center items vertically */
        gap: 10px; /* Space between logo and text */
        opacity: 10; /* Ensure it is visible */
        transition: opacity 0.3s ease; /* Transition effect */
    }

    /* Logo Image */
    .logo-image {
        width: 40px; /* Width */
        height: auto; /* Maintain aspect ratio */
    }

    /* Logo Text */
    .logo {
        font-size: 1.25em; /* Font size */
        color: #ffffff; /* Text color */
        font-weight: bold; /* Bold text */
    }

    .menu-icon {
        display: none; /* Hide by default */
        font-size: 2rem; /* Font size */
        cursor: pointer; /* Pointer cursor */
        color: #ffffff; /* Text color */
        opacity: 0; /* Initially hidden */
        transition: opacity 0.3s ease; /* Transition effect */
    }

    header:hover .menu-icon {
        opacity: 20; /* Show on hover */
    }

    nav ul {
        list-style: none; /* Remove list style */
        display: flex; /* Flexbox layout */
        gap: 15px; /* Space between items */
        text-decoration: none; /* Remove underline */
    }

    nav ul li {
        display: inline; /* Inline display */
    }

    nav ul li a {
        color: #ffffff; /* Link color */
        text-decoration: none; /* Remove underline */
        font-weight: bold; /* Bold text */
        transition: background-color 0.3s ease, color 0.3s ease; /* Transition effect */
        padding: 10px 15px; /* Padding */
        border-radius: 20px 0px 20px 0px; /* Rounded corners */
        
    }

    nav ul li a:hover {
        background-color: #00ff6ed5; /* Background color on hover */
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        nav ul {
            display: none; /* Hide navigation links */
        }
        .menu-icon {
            display: block; /* Show menu icon */
        }
    }
    /* Side Navigation Styles */
    .side-nav {
        background-color: #24292e; /* Background color */
        color: #ffffff; /* Text color */
        display: none; /* Hide by default */
        position: fixed; /* Fixed position */
        top: 0; /* Top position */
        left: 0; /* Left position */
        width: 250px; /* Width */
        height: 100%; /* Full height */
        z-index: 1000; /* Z-index */
        padding-top: 60px; /* Padding */
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); /* Box shadow */
    }
    .side-nav.active {
        display: block; /* Show when active */
    }
    .side-nav ul {
        list-style: none; /* Remove list style */
        padding: 0; /* Remove padding */
    }
    .side-nav ul li {
        margin: 20px 0; /* Margin */
    }
    .side-nav ul li a {
        color: #ffffff; /* Link color */
        text-decoration: none; /* Remove underline */
        font-size: 1.2rem; /* Font size */
        padding: 10px 20px; /* Padding */
        display: block; /* Block display */
        transition: background 0.3s ease; /* Transition effect */
    }
    .side-nav ul li a:hover {
        background: #00ff6ed5; /* Background color on hover */
    }

    /* Overlay Styles */
    .overlay {
        background-color: rgba(0, 0, 0, 0.8); /* Background color */
        display: none; /* Hide by default */
        position: fixed; /* Fixed position */
        top: 0; /* Top position */
        left: 0; /* Left position */
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        z-index: 999; /* Z-index */
    }
    .overlay.active {
        display: block; /* Show when active */
    }

    /* Hero Section Styles */
    .hero {
        position: relative; /* Positioning */
        text-align: center; /* Center text */
        padding: 50px 20px; /* Padding */
        color: #ffffff; /* Text color */
        overflow: hidden; /* Hide overflow */
        height: 550px;
    }

    .hero h1 {
        font-size: 2.5em; /* Font size */
        margin-bottom: 10px; /* Margin */
        animation: fadeIn 2s ease-in-out; /* Animation */
        position: relative; /* Positioning */
        z-index: 1; /* Z-index */
        
    }

    .hero p {
        font-size: 1.2em; /* Font size */
        margin-bottom: 20px; /* Margin */
        position: relative; /* Positioning */
        z-index: 1; /* Z-index */
    }

    .hero a {
        font-size: large; /* Font size */
        background-color: #5c13db; /* Background color */
        color: #ffffff; /* Text color */
        padding: 10px 20px; /* Padding */
        text-decoration: none; /* Remove underline */
        border-radius: 5px; /* Rounded corners */
        transition: background 0.3s ease; /* Transition effect */
        position: relative; /* Positioning */
        z-index: 1; /* Z-index */
    }

    .hero a:hover {
        background-color: #00ff6ed5; /* Background color on hover */
    }

    /* Gallery as Background */
    .hero::before {
        content: ''; /* Empty content */
        position: absolute; /* Positioning */
        top: 0; /* Top position */
        left: 0; /* Left position */
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        background: url('images/gallery1.png') no-repeat center center/cover; /* Background image */
        opacity: 0.5; /* Opacity */
        z-index: 0; /* Z-index */
        animation: galleryBackground 12s infinite; /* Animation */
    }

    @keyframes galleryBackground {
        0% {
            background: url('images/gallery1.png') no-repeat center center/cover; /* Background image */
        }
        33% {
            background: url('images/gallery2.png') no-repeat center center/cover; /* Background image */
        }
        66% {
            background: url('images/gallery3.png') no-repeat center center/cover; /* Background image */
        }
        100% {
            background: url('images/gallery1.png') no-repeat center center/cover; /* Background image */
        }
    }

    /* Image Animation Gallery */
    .gallery {
        display: flex; /* Flexbox layout */
        overflow: hidden; /* Hide overflow */
        position: relative; /* Positioning */
        height: 500px; /* Height */
        margin: 40px 0; /* Margin */
    }
    .gallery img {
        width: 100%; /* Full width */
        height: auto; /* Maintain aspect ratio */
        object-fit: cover; /* Cover object fit */
        position: absolute; /* Positioning */
        top: 0; /* Top position */
        left: 0; /* Left position */
        opacity: 0; /* Initially hidden */
        animation: slideShow 12s infinite; /* Animation */
    }
    .gallery img:nth-child(1) {
        animation-delay: 0s; /* Animation delay */
    }
    .gallery img:nth-child(2) {
        animation-delay: 2s; /* Animation delay */
    }
    .gallery img:nth-child(3) {
        animation-delay: 3s; /* Animation delay */
    }
    @keyframes slideShow {
        0% {
            opacity: 0; /* Initially hidden */
            transform: scale(1.2); /* Scale up */
        }
        10% {
            opacity: 1; /* Show */
            transform: scale(1); /* Scale down */
        }
        30% {
            opacity: 1; /* Show */
            transform: scale(1); /* Scale down */
        }
        40% {
            opacity: 0; /* Hide */
            transform: scale(1.2); /* Scale up */
        }
        100% {
            opacity: 0; /* Hide */
        }
    }
    /* Animations */
    @keyframes fadeIn {
        from { opacity: 0; } /* Initially hidden */
        to { opacity: 1; } /* Show */
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        nav ul {
            display: none; /* Hide navigation links */
        }
        .menu-icon {
            display: block; /* Show menu icon */
        }
        .hero h1 {
            font-size: 2rem; /* Font size */
        }
        .hero p {
            font-size: 1.2rem; /* Font size */
        }
    }

    /* Services Section Styles */
    .services {
        display: flex; /* Flexbox layout */
        flex-wrap: wrap; /* Wrap items */
        justify-content: space-around; /* Space around items */
        padding: 50px 20px; /* Padding */
        background: #111827; /* Background color */
        color: #ffffff; /* Text color */
        border-radius: 20px;
    }

    .services h2 {
        width: 100%; /* Full width */
        text-align: center; /* Center text */
        font-size: 2.5em; /* Font size */
        margin-bottom: 30px; /* Margin */
        color: #ffffff; /* Text color */
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow */
    }

    .services div {
        background: #111827; /* Background color */
        padding: 20px; /* Padding */
        margin: 10px; /* Margin */
        width: 100%; /* Width */
        text-align: center; /* Center text */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition effect */
        border-radius: 20px;
    }

    .services div:hover {
        transform: translateY(-10px); /* Move up on hover */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Box shadow on hover */
    }

    .services img {
        width: 80px; /* Width */
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 15px; /* Margin */
        border-radius: 20px;
    }

    .services h3 {
        font-size: 1.5em; /* Font size */
        margin-bottom: 10px; /* Margin */
        color: #ffffff; /* Text color */
    }

    .services p {
        font-size: 1em; /* Font size */
        color: #dcdcdc; /* Text color */
    }

    /* Modal Styles */
    .modal {
        display: none; /* Hide by default */
        position: fixed; /* Fixed position */
        z-index: 1000; /* Z-index */
        left: 0; /* Left position */
        top: 0; /* Top position */
        height: 100%; /* Full height */
        width: 100%; /* Full width */
        overflow: auto; /* Scrollable */
        background-color: rgba(0, 0, 0, 0.8); /* Background color */
        display: flex; /* Flexbox layout */
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
    }

    .modal-content {
        background-color:#111827; /* White background */
        padding: 20px; /* Padding */
        border: 1px solid #262728; /* Border */
        width: 100%; /* Width */
        border-radius: 10px; /* Rounded corners */
        color: #fafbfc; /* Text color */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Box shadow */
        text-align: center; /* Center text */
       
    }

    .modal-content img {
        max-width: 100%; /* Full width */
        height: 60px; /* Maintain aspect ratio */
        border-radius: 10px; /* Rounded corners */
        margin-bottom: 20px; /* Margin */;
    }

    .close {
        color: #586069; /* Text color */
        float: right; /* Float right */
        font-size: 28px; /* Font size */
        font-weight: bold; /* Bold text */
    }
    .close:hover,
    .close:focus {
        color: #24292e; /* Text color on hover/focus */
        text-decoration: none; /* Remove underline */
        cursor: pointer; /* Pointer cursor */
    }

    /* Form Input Styles */
    input[type="text"],
    input[type="email"],
    textarea {
        width: 100%; /* Full width */
        padding: 10px; /* Padding */
        margin: 10px 0; /* Margin */
        border: 1px solid #e2e8f0; /* Border */
        border-radius: 5px; /* Rounded corners */
        box-sizing: border-box; /* Box sizing */
        font-size: 1rem; /* Font size */
        color: #24292e; /* Text color */
        background-color: #f8fafc; /* Background color */
        transition: var(--transition); /* Transition effect */
    }

    input[type="text"]:focus,
    input[type="email"]:focus,
    textarea:focus {
        border-color: var(--primary); /* Border color on focus */
        outline: none; /* Remove outline */
        box-shadow: 0 0 5px var(--primary); /* Box shadow on focus */
    }

    button[type="submit"] {
        background-color: var(--primary); /* Background color */
        color: #ffffff; /* Text color */
        padding: 10px 20px; /* Padding */
        border: none; /* Remove border */
        border-radius: 5px; /* Rounded corners */
        cursor: pointer; /* Pointer cursor */
        transition: var(--transition); /* Transition effect */
        font-size: large;
    }

    button[type="submit"]:hover {
        background-color: var(--secondary); /* Background color on hover */
        font-size: large;
    }

    /* Footer Styles */
    footer  {
        display: flex; /* Flexbox layout */
        justify-content: center; /* Space around items */
        gap: 10px; /* Space between items */
        margin: 20px 0; /* Margin */
        text-align: center; /* Center text */
        color: #e300ff; /* Text color */
    }   
    footer a {
        color: #0366d6; /* Link color */
        text-decoration: none; /* Remove underline */
    }
    footer p {
        margin: 5px 0; /* Margin */
    }