﻿ 
.form-container-Gallary {
    width: 100%;
    max-width: 60vw; /* Limits the max width of the form */
    margin: 0 auto; /* Centers the form horizontally */
    padding: 20px;
    background-color: transparent;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    /* Heading Styles */
    .form-container-Gallary h2 {
        text-align: center;
        color: antiquewhite font-size: 1.5em;
        margin-bottom: 20px;
    }

    /* Label Styles */
    .form-container-Gallary label {
        display: block;
        font-weight: bold;
        margin-bottom: 8px;
        color: antiquewhite;
    }

    /* Input Field Styles */
    .form-container-Gallary input[type="file"],
    .form-container-Gallary input[type="text"],
    .form-container-Gallary input[type="number"] {
        width: 100%;
        padding: 12px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 1em;
        box-sizing: border-box; /* Ensures padding is included in width calculation */
    }

    /* Placeholder Styling */
    .form-container-Gallary input::placeholder {
        color: #aaa;
    }
/* Style for the container */
.upload-container {
    border: 2px dashed #3498db;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    position: relative;
    background-color: #f5f5f5;
    transition: background-color 0.3s ease;
}

    .upload-container:hover {
        background-color: #e1f5fe;
    }

    /* Label inside the container */
    .upload-container label {
        font-size: 16px;
        color: #3498db;
        cursor: pointer;
        display: block;
        margin-top: 10px;
    }

    /* Hidden input field */
    .upload-container input[type="file"] {
        display: none;
    }

    /* When the user drags an image */
    .upload-container.dragover {
        background-color: #d0e9ff;
        border-color: #2980b9;
    }

    /* Styling the drop zone text */
    .upload-container::before {
        /*       content: "Drop your image here or click to browse."; */
        font-size: 18px;
        color: #7f8c8d;
        display: block;
        margin-bottom: 20px;
        font-weight: bold;
        transition: opacity 0.3s ease;
    }

    .upload-container.dragover::before {
        content: "Release to upload!";
        color: #2980b9;
    }

    /* Optional: Add an icon (can use Font Awesome or any other) */
    .upload-container::after {
        content: url('https://img.icons8.com/ios-filled/50/000000/drag-and-drop.png');
        display: block;
        margin: 20px auto;
    }

/* Style for image preview */
.image-preview {
    margin-top: 20px;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    display: none;
}

    .image-preview img {
        max-width: 100% !important;
        max-height: 100vw;
        border-radius: 8px;
    } 
/* Styling for select element */
select, textarea, input[type="file"], button {
 
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
    box-sizing: border-box;
 }

    /* Select input focus state */
    select:focus, textarea:focus, input[type="file"]:focus, button:focus {
        outline: none;
        border-color: #4CAF50; /* Green outline when focused */
    }

/* Textarea specific styling */
textarea {
    resize: vertical; /* Allows the user to resize the textarea vertically */
    /* Minimum height */
    min-height: 300px;
}
