/* Diego Medina */

/* Weather Section Styling */
.weather-section {
    display: flex; /* Set flexbox for horizontal alignment */
    align-items: center; /* Align items vertically within the container */
    gap: 15px; /* Add spacing between elements */
    text-align: left; /* Align text to the left */
    padding: 10px; /* Add padding */
    margin: 0 auto; /* Center the container */
    color: #0c0c0c; /* Light default text for dark background */
}

/* Title Styling */
.weather-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #66b3ff; /* Light default text for dark background */
    margin: 0;
}

/* Temperature Styling */
.temp {
    font-size: 1rem; 
    color: #060606; /* Blue color for temperature */
    margin: 0;
}

/* Condition Styling */
.condition {
    font-size: 0.9rem;
    color: #08080833; /* text light for the condition color for better readability */
    margin: 0;
}

/* Weather Icon Styling */
.weather-icon {
    width: 40px;
    height: 40px;
    margin-left: 15px;
}
/* icon styling */
.fas.fa-temperature-low {
    background: none; /* Remove any background color */
    color: inherit; /* Match the text color */
    font-size: 1.5rem; /* Adjust size to fit nicely */
    display: inline-block; /* Align inline with other elements */
    padding: 0; /* Remove any padding */
    border: none; /* Remove any border */
    box-shadow: none; /* Ensure no shadow is applied */
    font-size: 24px; /* Default size */
    color: #007bff; /* Default color */
    transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition */
    display: inline-block; /* Inline alignment */
}

/* Hover effect */
.fas.fa-temperature-low:hover {
    color: #ff5733; /* Change color on hover */
    transform: scale(1.5); /* Slightly enlarge icon */
    cursor: pointer; /* Pointer cursor */
}


/* indicator down*/

.down-indicator {
    margin-top: -20px; /* Adjust margin to bring it closer to the carousel */
    animation: bounce 2s infinite; /* Add bounce animation */
    
}

.down-indicator i {
    color: #007bff; /* Bootstrap primary color */
    text-decoration: none;
    cursor: pointer;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* contact */


/* Center the contact button on smaller screens */
@media (max-width: 768px) {
    .navbar .btn-primary {
        margin-top: 5px;
    }
}

/* Modal customizations */

/* Scoped Navbar Contact Button */
.navbar .btn-primary {
    margin-top: 5px;
    z-index: 1050; /* Ensure button appears above other elements */
}

.modal-header {
    background-color: #007bff;
    color: white;
}

.modal-header {
    background-color: #007bff;
    color: white;
}

.modal-title {
    font-weight: bold;
}

.modal-body input,
.modal-body textarea {
    border-radius: 5px;
    border: 1px solid #ddd;
}

.modal-body button {
    width: 100%;
    font-weight: bold;
}

/* contact thanks  */


.confetti {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Ensures no interaction */
    z-index: 9999;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 20px;
    background-color: #ffd700; /* Default confetti color */
    animation: fall linear infinite;
    transform-origin: left bottom;
}

/* Add variety in colors */
.confetti-piece:nth-child(odd) {
    background-color: #ff4500;
}
.confetti-piece:nth-child(even) {
    background-color: #00bfff;
}

/* Falling animation */
@keyframes fall {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
    }
}