:root {
    --primary-color: #FF6B00;
    --secondary-color: #000000;
    --accent-color: #FFFFFF;
    --text-color: #333333;
    --light-gray: #F5F5F5;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text-color);
    background-color: var(--accent-color);
    line-height: 1.6;
}

.workshop-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--accent-color);
    position: relative;
    overflow: hidden;
}

.hero-content {
    z-index: 2;
}

.animated-title {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    animation: fadeInDown 1s ease-out;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--primary-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.animated-subtitle {
    font-size: 1.5rem;
    animation: fadeInUp 1s ease-out 0.5s both;
    font-weight: 300;
}

.workshop-filter {
    padding: 2rem 0;
    background-color: var(--secondary-color);
}

.filter-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.8rem 1.5rem;
    background-color: transparent;
    color: var(--accent-color);
    border: 2px solid var(--primary-color);
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.filter-btn:hover, .filter-btn.active {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.workshop-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    padding: 3rem;
    max-width: 1400px;
    margin: 0 auto;
}

.workshop-card {
    background-color: var(--accent-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    border: 1px solid #e0e0e0;
}

.workshop-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.workshop-image {
    height: 200px;
    overflow: hidden;
}

.workshop-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.workshop-card:hover .workshop-image img {
    transform: scale(1.1);
}

.workshop-content {
    padding: 1.5rem;
}

.workshop-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--secondary-color);
}

.workshop-type {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background-color: var(--primary-color);
    color: var(--accent-color);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.workshop-description {
    margin-bottom: 1.5rem;
    color: #666;
}

.workshop-features {
    margin-bottom: 1.5rem;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.feature-item i {
    color: var(--primary-color);
    margin-right: 0.5rem;
    margin-top: 0.2rem;
}

.workshop-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.whatsapp-btn {
    background-color: #25D366;
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.3s ease;
}

.whatsapp-btn:hover {
    background-color: #128C7E;
}

.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100;
}

.whatsapp-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    font-size: 2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

.whatsapp-link:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .workshop-container {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }
    
    .animated-title {
        font-size: 2.5rem;
    }
    
    .animated-subtitle {
        font-size: 1.2rem;
    }
}
/* Base Styles */
:root {
    --primary-color: #FF6B00; /* Orange */
    --secondary-color: #000000; /* Black */
    --accent-color: #FFFFFF; /* White */
    --text-color: #333333;
    --light-gray: #F5F5F5;
    --dark-gray: #222222;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--accent-color);
}

/* In your style.css */

/* ... other styles ... */

.container { /* Ensure your container is full width within its context if not already */
    width: 100%; /* This was already present */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    background-color: var(--secondary-color);
    padding: 1px 0; /* Your existing padding */
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar .container {
    display: flex;
    /* Changed from space-between to allow nav-list to go to the right,
       while the logo is absolutely centered independently.
       If you have elements on the left AND right of the centered logo,
       you might revert to space-between for those elements. */
    justify-content: space-between;

    align-items: center;
    position: relative; /* This is crucial for absolute positioning of the logo */
    /* Set a height for the navbar container, e.g., based on logo or explicitly.
       Given logo img is 80px and navbar padding is 1px, total height is approx 82px.
       This helps in vertical centering of the logo. */
    height: 82px; /* Or adjust as per your design, can also be min-height */
}

.logo { /* This targets the <a> tag wrapping your logo image */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* This perfectly centers the logo */
    /* The image itself (img tag) already has its height set */
}

.logo img {
    height: 80px;
    width: auto;
    display: block; /* Helps prevent extra space below inline images */
}

.nav-list {

display: flex;

list-style: none;

}



.nav-list li {

margin-left: 30px;

}
.nav-list a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    position: relative;
}

.nav-list a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: var(--transition);
}

.nav-list a:hover::after {
    width: 100%;
}

.nav-list a.active {
    color: var(--primary-color);
}

.menu-toggle {
    display: none; /* Assuming this is hidden on desktop by default */
    cursor: pointer;
    /* If the menu-toggle needs to be on the left on desktop,
       you would need to adjust justify-content on .navbar .container,
       e.g., to space-between, and ensure .menu-toggle is an orderable flex item.
       The absolute positioning of the logo would still keep it centered. */
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--accent-color);
    transition: var(--transition);
}

/* Responsive adjustments for mobile might need to alter logo positioning
   if the absolute centering conflicts with a mobile layout (e.g., logo left, burger right).
   This solution is primarily for desktop view where the logo is centered. */

/* ... rest of your styles ... */