/* Main Content Styles */
body {
    padding-top: 80px;
}

/* Hero Section */
.heroSection {
    background: linear-gradient(135deg, #f8fff8 0%, #e8f5e8 100%);
    padding: 100px 0;
    min-height: 70vh;
    display: flex;
    align-items: center;
    
    .heroContainer {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        
        .heroContent {
            .heroTitle {
                font-size: 3rem;
                font-weight: 700;
                color: #2c3e50;
                margin-bottom: 24px;
                line-height: 1.2;
                font-family: 'Comfortaa', cursive;
            }
            
            .heroSubtitle {
                font-size: 1.1rem;
                color: #7f8c8d;
                margin-bottom: 40px;
                line-height: 1.6;
            }
            
            .heroButtons {
                display: flex;
                gap: 20px;
                flex-wrap: wrap;
            }
        }
        
        .heroImage {
            figure {
                position: relative;
                overflow: hidden;
                border-radius: 50%;
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                
                img {
                    width: 400px;
                    height: 400px;
                    object-fit: cover;
                    transition: transform 0.3s ease;
                }
                
                &:hover img {
                    transform: scale(1.05);
                }
            }
        }
    }
}

/* About Section */
.aboutSection {
    padding: 100px 0;
    background-color: #ffffff;
    
    .aboutContent {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: 80px;
        align-items: center;
        
        .aboutText {
            h3 {
                font-size: 2rem;
                color: #2c3e50;
                margin-bottom: 24px;
                font-family: 'Comfortaa', cursive;
            }
            
            p {
                font-size: 1.1rem;
                color: #7f8c8d;
                margin-bottom: 20px;
                line-height: 1.7;
            }
            
            .aboutFeatures {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 30px;
                margin-top: 40px;
                
                .featureItem {
                    text-align: center;
                    padding: 20px;
                    border-radius: 50%;
                    background-color: #f8fff8;
                    transition: transform 0.3s ease;
                    
                    &:hover {
                        transform: translateY(-5px);
        }
}
                    }
                    
                    .featureIcon {
                        font-size: 2.5rem;
                        margin-bottom: 16px;
                    }
                    
                    h4 {
                        font-size: 1.2rem;
                        color: #2c3e50;
                        margin-bottom: 8px;
                    }
                    
                    p {
                        font-size: 0.9rem;
                        color: #7f8c8d;
                        margin: 0;
                    }
                }
            }
        }
        
        .aboutImage {
            figure {
                position: relative;
                overflow: hidden;
                border-radius: 20px;
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                
                img {
                    width: 100%;
                    height: 600px;
                    object-fit: cover;
                    transition: transform 0.3s ease;
                }
                
                &:hover img {
                    transform: scale(1.05);
                }
            }
        }
    }
}

/* Menu Section */
.menuSection {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8fff8 0%, #e8f5e8 100%);
    
    .menuGrid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 40px;
        
        .menuCard {
            background-color: white;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            
            &:hover {
                transform: translateY(-10px);
            }
            
            figure {
                img {
                    width: 100%;
                    height: 250px;
                    object-fit: cover;
                }
            }
            
            .menuCardContent {
                padding: 30px;
                
                h3 {
                    font-size: 1.5rem;
                    color: #2c3e50;
                    margin-bottom: 12px;
                    font-family: 'Comfortaa', cursive;
                }
                
                p {
                    color: #7f8c8d;
                    line-height: 1.6;
                }
            }
        }
    }
}

/* Info Section */
.infoSection {
    padding: 100px 0;
    background-color: #ffffff;
    
    .infoGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        
        .infoCard {
            background-color: #f8fff8;
            padding: 40px;
            border-radius: 20px;
            border: 1px solid #e8f5e8;
            
            .infoTitle {
                font-size: 2rem;
                color: #2c3e50;
                margin-bottom: 30px;
                font-family: 'Comfortaa', cursive;
                text-align: center;
            }
            
            .infoContent {
                .hoursItem, .accessItem {
                    margin-bottom: 30px;
                    padding: 20px;
                    background-color: white;
                    border-radius: 15px;
                    
                    &:last-child {
                        margin-bottom: 0;
                    }
                    
                    &.special {
                        background-color: #fff3cd;
                        border: 1px solid #ffeaa7;
                    }
                    
                    h3 {
                        font-size: 1.3rem;
                        color: #4CAF50;
                        margin-bottom: 12px;
                        font-family: 'Comfortaa', cursive;
                    }
                    
                    p {
                        color: #333;
                        margin-bottom: 4px;
                        
                        &:last-child {
                            margin-bottom: 0;
                        }
                        
                        &.note {
                            font-size: 0.9rem;
                            color: #7f8c8d;
                            font-style: italic;
                        }
                        
                        strong {
                            color: #2c3e50;
                        }
                    }
                }
            }
        }
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .heroSection {
        padding: 60px 0;
        
        .heroContainer {
            grid-template-columns: 1fr;
            gap: 40px;
            text-align: center;
            
            .heroContent {
                .heroTitle {
                    font-size: 2.2rem;
                }
                
                .heroSubtitle {
                    font-size: 1rem;
                }
                
                .heroButtons {
                    justify-content: center;
                }
            }
        }
    }
    
    .aboutSection {
        padding: 60px 0;
        
        .aboutContent {
            grid-template-columns: 1fr;
            gap: 40px;
            
            .aboutText {
                .aboutFeatures {
                    grid-template-columns: 1fr;
                }
            }
        }
    }
    
    .menuSection {
        padding: 60px 0;
        
        .menuGrid {
            grid-template-columns: 1fr;
            gap: 30px;
        }
    }
    
    .infoSection {
        padding: 60px 0;
        
        .infoGrid {
            grid-template-columns: 1fr;
            gap: 40px;
        }
    }
}