.profile-container {
	margin-top: 100px;
	padding: 20px;
}


/* Scoped to profile page */
.profile-container {
    background-color: #2b2b2b; 
    background-image: url('../images/mariposa.jpg'); 
    background-repeat: no-repeat;
    background-size: cover; /* Ensures the image covers the entire container */
    background-position: center; /* Centers the image */
    color: white; 
    min-height: 100vh;
}


.profile-container .card {
    background-color: #333; /* Slightly lighter for individual cards */
    margin-bottom: 20px;
}

.profile-container header {
    padding: 20px;
    text-align: center;
    background-color: #444; /* Darker header */
    border-bottom: 2px solid #555;
}

.profile-container h1, h2 {
    font-family: 'Georgia', serif; 
    text-transform: uppercase; 
}










.profile_info input,
.profile_info select {
    margin-bottom: 10px;
    padding: 5px; 
    border-radius: 5px; /* Rounded corners */
    width: 100%; /* Ensure they span the available width */
    box-sizing: border-box; /* Include padding in the width */
}

.label {
    font-size: 10px;
    text-transform: uppercase;
}

.profile {
    margin: 10px;

}

.profile {
    position: relative;
    overflow: hidden;
    width: 500px;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: black;
    border: 5px solid white;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.profile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
    border-color: tan;
}










.custom-save-button {
    background: linear-gradient(180deg, #a7f3d0, #065f46); 
    color: white;
    padding: 6px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none; /* Remove default border */
    cursor: pointer;
}

.custom-save-button:hover {
    background: linear-gradient(180deg, #065f46, #064e3b); /* Hover effect with an even darker gradient */
}

.custom-save-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(6, 95, 70, 0.5); /* Focus outline with a green tint */
}

.custom-save-button:active {
    background: linear-gradient(180deg, #064e3b, #06402f); /* Darker gradient when clicked */
}















.profile-section input {
    width: 95%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
}

button {
    background: blue;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}


.label {
    text-transform: uppercase;
}


.left {
    text-align: left;
}

.btn {
    background: linear-gradient(180deg, #a7f3d0, #065f46); 
}

.del {
    background: linear-gradient(180deg, #fca5a5, #7f1d1d); 
}