/* Location Page Styles */

/* Custom Fonts for Location Page */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Pacifico&display=swap');

/* Visit Us Header Section */
.visit-us-header {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #A9DDF3, #FADADD); /* Soft gradient */
}

.visit-us-header h1 {
    font-family: 'Pacifico', cursive; /* Playful, cute font */
    font-size: 4rem;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    margin: 0;
}

.visit-us-header p {
    font-size: 1.2rem;
    color: #fff;
    margin-top: 10px;
}

/* Visit Us Section */
.visit-us-section {
    padding: 60px 20px;
    max-width: 1100px;
    margin: auto;
}

/* State Section */
.state-section {
    margin-bottom: 60px;
}

.state-section h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--brand-blue);
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.state-section h2::after {
    content: ' ';
    position: absolute;
    width: 80px;
    height: 4px;
    background-color: var(--light-blue);
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Location Grid */
.location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

/* Location Card */
.location-card {
    background-color: #fff;
    border-radius: 20px; /* More rounded corners */
    padding: 25px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 8px solid #FADADD; /* Pink accent border */
}

/* Alternating accent colors */
.location-card:nth-child(even) {
    border-left-color: #A9DDF3; /* Blue accent */
}

.location-card:nth-child(3n) {
    border-left-color: #98D7A5; /* Green accent */
}

.location-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.location-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: var(--brand-blue);
}

/* Location Details */
.location-detail {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    font-size: 1rem;
    line-height: 1.6;
    color: #5C5470;
    margin-bottom: 15px;
}

.location-detail i {
    font-size: 1.2rem;
    color: var(--brand-blue);
    margin-top: 5px;
}

.location-detail strong {
    font-weight: 600;
}

/* Coming Soon Section */
.coming-soon-section {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    border: 2px dashed var(--light-blue);
    margin-top: 60px;
}

.coming-soon-section h2 {
    font-family: 'Pacifico', cursive;
    font-size: 2.5rem;
    color: var(--brand-blue);
    margin: 0 0 15px 0;
}

.coming-soon-icon {
    font-size: 3rem;
    color: #FADADD;
    margin-bottom: 20px;
    animation: bounce 2s infinite;
}

.coming-soon-location h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #5C5470;
    margin: 0;
}

.coming-soon-location p {
    color: #5C5470;
    margin-top: 10px;
}

/* Bounce animation for the icon */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

/* Responsive */
@media (max-width: 600px) {
    .visit-us-header h1 {
        font-size: 3rem;
    }

    .location-grid {
        grid-template-columns: 1fr;
    }

    .state-section h2 {
        font-size: 1.75rem;
    }

    .coming-soon-section h2 {
        font-size: 2rem;
    }
}