/*---------------------------------------------------- General styling-----------------------------------------*/ 

        body {
            font-family: Arial, sans-serif; /*applys same font to*/
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: #ecf0f1; /* Light grey background */
            padding-top: 100px;
        }

        header {
            background-color: #2C3E50; /* Dark blue header */
            color: #FFFFFF; /* White text */
            padding: 1px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed; 
            top: 0; 
            width: 100%; 
            z-index: 1000; 
            height: 100px; 
        
        }

        .hero {
            background-image: url("BMWfront.jpg");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            height: 400px;
            display: flex;
            align-items: center;
            text-align: center;
            justify-content: center;
            color: #FFFFFF; /* White text in the hero section */
            font-size: 48px;
            font-weight: bold;
        }

    

        .container {
            max-width: 1100px;
            margin: auto;
            padding: 20px;
        }

        .logo {
            height: 100px;
            display: block;
             /* Adjust the size of your logo */
        }

        .social-media {
            position: absolute;
            top: 20px;
            right: 20px;
        }

        .social-media a {
            color: #FFFFFF; /* White icons */
            text-decoration: none;
            margin-left: 10px;
            font-size: 20px;
        }

        .social-media a:hover {
            color: #BDC3C7; /* Silver color on hover */
        }

        /* Icons for Social Media */
        .social-media a i {
            font-size: 24px;
        }

        /*---------------------------------------------------- Homepage -----------------------------------------*/ 
       
        .services, .testimonials, .contact, .gallery {
            margin: 40px 0;
        }

        .service-item {
            text-align: center;
            margin: 20px;
        }

        .service-item h3 {
            color: #2C3E50; /* Dark blue headers */
        }

        .service-grid {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .testimonial-item {
            background-color: #FFFFFF; /* White background for testimonials */
            padding: 20px;
            margin: 10px 0;
            color: #2C3E50; /* Dark blue text */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        /*---------------------------------------------------- sidepanel -----------------------------------------*/ 
            /* Mobile Sidepanel */
        .sidepanel {
            width: 0;
            position: fixed;
            z-index: 1000;
            height: 360px;
            top: 102px;
            left: 0;
            background-color: #2c3e50;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 15px;
            overflow-y: auto;
        }

        /* Links inside sidepanel */
        .sidepanel a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 20px;
            color: #FFFFFF;
            display: block;
            transition: 0.3s;
        }

        /* Hover effect */
        .sidepanel a:hover {
            color: #BDC3C7;
        }

        /* Close Button */
        .sidepanel .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
        }

        /* Menu Button */
        .openbtn {
            font-size: 20px;
            cursor: pointer;
            background-color: #BDC3C7;
            color: darkblue;
            padding: 10px 15px;
            border: none;
            position: fixed;
            top: 102px;
            left: 0px;
            z-index: 999;
        }

        .openbtn:hover {
            background-color: #BDC3C7;
        }

        /* --- MEDIA QUERY for big screens --- */
        @media screen and (min-width: 768px) {
            /* Sidepanel becomes Top Navigation Bar */
            .sidepanel {
                width: 100% !important;
                height: 60px;
                position: fixed;
                top:35px;
                left: 0;
                background-color: transparent;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                overflow: visible;
                z-index: 1000;
            }

            .sidepanel a {
                font-size: 18px;
                padding: 0 20px;
                line-height: 60px;
                display: inline-block;
                color: white;
                position: relative;
            }

            /* Highlight the active link */
            .sidepanel a.active {
                border: 2px solid white;
                border-radius: 8px;
                padding: 5px 15px;
                background-color: rgba(255, 255, 255, 0.1); /* Optional slight background */
            }

            .sidepanel .closebtn {
                display: none;
            }

            .openbtn {
                display: none;
            }

            body {
                padding-top: 60px;
            }
        }

        /*---------------------------------------------------- Contact -----------------------------------------*/ 

        .contact P{
            margin:45px;
        }

        .contact a{ margin:45px;
        }

        .contact-form {
            background-color: #FFFFFF; /* White form background */
            padding: 20px;
            margin: 40px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .contact-text p{
            color: black;
            text-decoration: none;
            font-weight: bold;
            font-size: 18px;
            text-align: center;
        }
        .contact-text a{
            color: black;
            text-decoration: none;
        }

        .contact-text a:hover{
            color: rgb(163, 66, 82) ;
        }

        .contact-text h2{
            margin:40px;
            text-align: left;
            font-size: 36px;
        }
        
        input, textarea {
            background-color: #FFFFFF; /* White input background */
            width: 100%;
            padding: 10px;
            margin: 10px -10px;
            border: 1px solid #BDC3C7; /* Silver border */
            overflow: auto;
            resize:none;
            

        }

        /*---------------------------------------------------- Gallery -----------------------------------------*/ 

        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 10px;
            padding: 20px;
            max-width: 1100px;
            margin: auto;
        }

        .gallery h2 {
            margin:40px;
        }

        .gallery img {
            width: 100%;
            height: 350px;
            display: block;
            border-radius: 8px;
            transition: transform 0.3s ease;
        }

        hr {
            background-color: black;
            height: 2px;
            border: none;
        }

        .gallery img:hover {
            transform: scale(1.05);
        }

        /* Responsive Gallery with Media Queries */
        @media (max-width: 1024px) {
            .gallery {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 2 images per row on medium screens */
            }
        }

        @media (max-width: 768px) {
            .gallery {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 1 image per row on smaller screens */
            }
        }
        /*---------------------------------------------------- Gallery mngr -----------------------------------------*/ 
            /* Gallery Manager Styles */
        .gallery-mgr-container { 
            display: flex; 
            flex-wrap: wrap; 
            gap: 15px; 
            row-gap: 20px;
            overflow: hidden;
        }

        .gallery-mgr-item { 
            text-align: center; 
            width: 150px; 
            cursor: grab; 
            border: 2px solid #ccc; 
            padding: 5px; 
            background: #f9f9f9; 
            position: relative; 
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
        }

        .gallery-mgr-image { 
            width: 100%;  /* Ensures the image fits inside the container */
            height: auto; /* Maintains aspect ratio */
            max-height: 400px; /* Prevents images from getting too tall */
            display: block; 
            object-fit: cover; /* Ensures uniform size */
        }

        .gallery-mgr-checkbox { 
            position: absolute; 
            top: 5px; 
            left: 5px; 
            overflow: hidden;
        }

        .gallery-mgr-btn { 
            margin-top: 20px; 
            padding: 10px; 
            font-size: 16px; 
            cursor: pointer; 
            background: #2c3e50; 
            color: white; 
            border: none; 
            border-radius: 5px; 
        }

        .gallery-mgr-btn:hover { 
            background: #0056b3; 
        }

        .gallery-mgr-dragging { 
            opacity: 0.5; 
        }




        /*---------------------------------------------------- footer -----------------------------------------*/ 

        footer {
            background-color: #2C3E50; /* Dark blue footer */
            color: #FFFFFF; /* White text */
            text-align: center;
            padding: 20px;
            position: relative;
            bottom: 0;
            max-width: 100%; 
            overflow: hidden;
        }

        footer a {
            color: #FFFFFF;
            text-decoration: none;
            
        }

        footer a:hover{color: #BDC3C7}

        /*---------------------------------------------------- Buttons -----------------------------------------*/ 

        button {
            padding: 10px 20px;
            background-color: #2C3E50; /* Dark blue buttons */
            color: #FFFFFF; /* White text */
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #34495e;
        }

        h2 {
            color: #2C3E50; /* Dark blue headings */
            margin: 40px;
            font-size: 36px;
        }

        .button {
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: #FFFFFF;
            background-color: #2C3E50; /* Dark blue buttons */
            text-decoration: none;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .button:hover {
            background-color: #82aedb;
        }

        .button-learn {
            display: inline-block;
            padding: 10px 20px;
            font-size: 20px;
            color: #FFFFFF;
            background-color: #2C3E50; /* Dark blue buttons */
            text-decoration: none;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .button-learn:hover {
            background-color: #82aedb;
        }

        .button-contact { 
            position: fixed; 
            bottom: 20px; 
            right: 30px; 
            z-index: 99; 
            border: none; 
            outline: none; 
            background-color: #2a4765; 
            color: #FFFFFF; 
            cursor: pointer; 
            padding: 15px; 
            border-radius: 10px; 
            font-size: 20px; 
            font-weight: bold;
            text-decoration: none;
        }

        .button-contact:hover{
            background-color: #82aedb;
        }


        .button-contact-still { 
            border: none; 
            outline: none; 
            background-color: #2C3E50; 
            color: #FFFFFF; 
            cursor: pointer; 
            padding: 15px; 
            border-radius: 10px; 
            font-size: 20px; 
            font-weight: bold;
            text-decoration: none;
            align-items: center; 
            width: 140px;
            display: block;
            margin: auto;
        }

        .button-contact-still:hover{
            background-color: #82aedb;
        }
        
        hr{
            background-color: black; height: 1px; border: 0; 
            
        }
        .horizontal {
            color: #FFFFFF;
        }
        .horizontal-hr{
            background-color: #FFFFFF; height: 1px; border: 0; 
            
        }

        /*----------------------------------------services css---------------------------------------- */
        
        /* Service card layout */
        .service-card {
            display: flex;
            background-color: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            margin: 30px 0;
        }

        .service-image {
            position: relative;
            width: 70%; /* Full width of its container */
            height: 500px; /* Set a fixed height for uniformity */
            overflow: hidden; /* Ensure cropped content is hidden */
            border-radius: 12px; /* Optional: rounded corners */
        }

        /* Image styling to maintain aspect ratio and fit */
        .service-image img {
            width: 100%; /* Scale to fill the width of the container */
            height: 100%; /* Scale to fill the height of the container */
            object-fit: cover; /* Ensures the image is cropped to fit the container */
            object-position: center; /* Centers the cropped portion of the image */
            filter: brightness(78%); /* Optional: Image brightness */
        }

        /* Content Overlay */
        .service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 20px;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center; /* Align content to the top left */
            justify-content: center; /* Ensure alignment stays at the top */
            text-align: center; /* Align text to the left */
            height: relative; /* Fill the height of the image container */
            box-sizing: border-box;
        }

        .service-title {
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .service-overview {
            font-size: 20px;
            color: #ddd;
        }


        /* Service Description Styling */
        .service-info {
            padding: 30px;
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            color: #333;
        }

        .service-description {
            font-size: 16px;
            line-height: 1.5;
            color: #666;
        }

        .service-price {
            font-size: 18px;
            color: #45a049; 
        }
    
        /*---------------------------------------------------- search Table Styling -----------------------------------------*/ 

        .table-container {
            display: flex; /* Enables flexible layout */
            justify-content: center; /* Horizontally centers the table */
            margin-top: 20px; /* Adds some space above the table */
        }
        
        table {
            border-collapse: collapse; /* Optional: Makes borders look cleaner */
            margin: auto; /* Centers the table horizontally */
            text-align: center; /* Centers text inside the table cells */
        }
        
        .td {
            max-width: 1100px;
            padding: 20px;
            text-align: center; /* Centers content inside the cells */
        }
        
        .td form {
            display: inline-block; /* Ensures forms are inline */
            margin: 0; /* Removes extra spacing between buttons */
        }
        
        .td button {
            margin: 2px; /* Adds a small space between buttons */
            padding: 1px 5px; /* Adjust button size if needed */
        }
        
        
        
    /*---------------------------------------------------- Table Styling -----------------------------------------*/ 
            
    
    
    /* Center the table on the page */
        .styled-table {
            margin: 20px auto;
            border-collapse: collapse; /* Remove gaps between table cells */
            width: 90%; /* Adjustes table width */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow */
            border: 1px solid #ddd; /* Adds a border around the table */
        }

        /* Style table headers */
        .styled-table th {
            background-color: #2a4765; /* Header background color */
            color: white; /* Header text color */
            padding: 12px; /* Space around header text */
            text-align: center; /* Center align header text */
            border: 1px solid #2b2929; /* Border for headers */
        }

        /* Style table rows */
        .styled-table td {
            padding: 10px; /* Space around cell content */
            text-align: center; /* Center align cell content */
            border: 1px solid #2b2929; /* Border for cells */
        }

        /* Style buttons inside the table */
        .styled-table td button {
            padding: 5px 10px;
            border: none;
            background-color: #4CAF50; /* Button background color */
            color: white;
            font-size: 14px;
            border-radius: 5px; /* Rounded corners */
            cursor: pointer;
            margin: 2px;
        }

        .styled-table td button:hover {
            background-color: #45a049; /* Darker shade on hover */
        }

        .unread-row {
            background-color: #f8d7da; /* Light red for unread */
        }
        
        /* Style for read rows */
        .read-row {
            background-color: #d4edda; /* Light green for read */
        }

        .admin-row {
            background-color: #f8d7da; /* Light red for admin */
        }
        
        .user-row {
            background-color: #d4edda; /* Light green for user */
        }

                /* Default colors for rows based on status */
        .complete-row {
            background-color: #6ec783; /* Light green for approved */
        }
        .reject-row {
            background-color: #942d35; /* Light red for rejected */
        }
        .pending-row {
            background-color: #afb42d; /* Light yellow for pending */
        }
        .approve-row {
            background-color: #ad3a90; /* Light pink for completed */
        }
        .cancel-row {
            background-color: #8b0b0b; 
        }



            /*---------------------------------------------------- admin dashboard -----------------------------------------*/ 
            body-admin {
                font-family: Arial, sans-serif;
                margin: 0;
                padding: 0;
                background-color: #f4f4f9;
            }
            
            header-admin {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 20px;
                background-color: #333;
                color: white;
            }
            
            .logo-admin {
                width: 150px;
            }
            
            .social-media-admin a {
                color: white;
                margin: 0 10px;
                text-decoration: none;
            }
            
            .social-media-admin a:hover {
                color: #ccc;
            }
            
            .container-admin {
                padding: 20px;
            }
            
            .dashboard-admin {
                display: grid;
                grid-template-columns: repeat(4, 1fr); /* Always 4 cards per row */
                gap: 20px;
            }
            
            @media (max-width: 600px) {
                .dashboard-admin {
                    grid-template-columns: 1fr;
                }
            }
            
            
            .card-admin {
                background: white;
                border-radius: 10px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
                padding: 20px;
                text-align: center;
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            
            .card-admin:hover {
                transform: translateY(-5px);
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            }
            
            .card-admin i {
                font-size: 2rem;
                margin-bottom: 10px;
                color: #555;
            }
            
            .card-admin a {
                text-decoration: none;
                font-weight: bold;
                color: #333;
                display: inline-block;
                margin-top: 10px;
            }
            
            .card-admin a:hover {
                color: #007bff;
            }
            
            .card-admin h3 {
                margin: 10px 0;
                font-size: 1.2rem;
            }
            
            .card-admin .count-admin {
                font-size: 2rem;
                font-weight: bold;
                color: #007bff;
            }
            


            /*---------------------------------------------------- delete account -----------------------------------------*/ 

       
            .delete-account-form {
                display: inline-block;
                margin-left: 10px;
            }
            
            .delete-account-btn {
                background-color: #ff4d4d;
                color: white;
                border: none;
                padding: 8px 12px;
                font-size: 14px;
                cursor: pointer;
                border-radius: 5px;
            }
            
            .delete-account-btn:hover {
                background-color: #e60000;
            }
            /*---------------------------------------------------- pay -----------------------------------------*/ 
                        
            #payment-form {
                background: white;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }
            .input-group {
                margin-bottom: 10px;
            }
            
            .input-group label {
                font-weight: bold;
                display: block;
                margin-bottom: 5px;
            }
            
            .input-group input {
                width: 100%;
                padding: 8px;
                font-size: 16px;
                border: 1px solid #ccc;
                border-radius: 5px;
            }
            
            .card-details {
                display: flex;
                gap: 10px;
            }
            
            .card-details .input-group {
                width: 50%;
            }
            
            #cardNumber {
                width: 100%;
            }

            #expiryDate, #cvv {
                width: 48%;
            }
                        
                        
            .button-pay {
                display: inline-block;
                padding: 10px 20px;
                font-size: 20px;
                width: 250px;
                color: #FFFFFF;
                background-color: red; /* red button*/
                text-decoration: none;
                border: none;
                border-radius: 5px;
                transition: background-color 0.3s ease;
            }
    
            .button-pay:hover {
                background-color: #82aedb;
            }