* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Open Sans', sans-serif; color: #5a5a5a; line-height: 1.7; background: linear-gradient(to bottom, #faf7f5, #f5f2f0); min-height: 100vh; } .container { max-width: 1200px; width: 100%; margin: 0 auto; background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); margin-top: 30px; margin-bottom: 30px; } header { background: linear-gradient(to right, #a8d8d5, #8ec9c6); color: white; padding: 25px 50px; display: flex; justify-content: space-between; align-items: center; } .logo { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 32px; display: flex; align-items: center; } .logo i { margin-right: 15px; color: #f8e0d4; } .logo a { text-decoration: none; color: white; } nav ul { display: flex; list-style: none; } nav ul li { margin-left: 30px; } nav ul li a { color: white; text-decoration: none; font-weight: 500; transition: all 0.3s ease; padding: 8px 15px; border-radius: 30px; } nav ul li a:hover { background: rgba(255, 255, 255, 0.15); } .hero { height: 500px; background: url('https://images.unsplash.com/photo-1524231757912-21f4fe3a7200?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80') no-repeat center center; background-size: cover; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to right, rgba(168, 216, 213, 0.8), rgba(142, 201, 198, 0.7)); } .hero-content { position: relative; z-index: 1; color: white; max-width: 800px; padding: 0 20px; } .hero-content h1 { font-family: 'Playfair Display', serif; font-size: 48px; margin-bottom: 20px; line-height: 1.2; } .hero-content p { font-size: 20px; margin-bottom: 40px; font-weight: 300; } .btn { display: inline-block; background: linear-gradient(to right, #f8c8b4, #f8e0d4); color: #8a7a6d; padding: 16px 32px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 16px; transition: all 0.3s ease; border: none; cursor: pointer; box-shadow: 0 5px 15px rgba(248, 200, 180, 0.4); } .btn:hover { background: linear-gradient(to right, #f8e0d4, #f8c8b4); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(248, 200, 180, 0.5); } .main-content { padding: 60px; } .article-body { font-size: 18px; line-height: 1.8; color: #5a5a5a; } .article-body h2 { font-family: 'Playfair Display', serif; font-size: 36px; color: #8ec9c6; margin: 50px 0 25px; padding-bottom: 10px; border-bottom: 2px solid #d6eae8; } .article-body h3 { font-family: 'Playfair Display', serif; font-size: 28px; color: #7abeb5; margin: 40px 0 20px; } .article-body p { margin-bottom: 25px; text-align: justify; } .article-body blockquote { background: linear-gradient(to right, #f0f7f6, #e5f2f1); color: #7abeb5; padding: 30px; margin: 40px 0; border-radius: 10px; font-style: italic; font-size: 20px; position: relative; border-left: 5px solid #a8d8d5; } .article-body blockquote:before { content: """; font-family: 'Playfair Display', serif; font-size: 80px; position: absolute; top: -20px; left: 20px; color: rgba(168, 216, 213, 0.2); } .article-body ul, .article-body ol { margin: 25px 0; padding-left: 30px; } .article-body li { margin-bottom: 15px; } .highlight-box { background: #f5f9f8; border-left: 5px solid #a8d8d5; padding: 25px; margin: 30px 0; border-radius: 0 8px 8px 0; } .highlight-box h4 { font-family: 'Playfair Display', serif; color: #8ec9c6; margin-bottom: 15px; font-size: 22px; } .image-container { margin: 40px 0; position: relative; } .image-container img { width: 100%; border-radius: 10px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .image-caption { text-align: center; font-style: italic; color: #8ec9c6; margin-top: 10px; font-size: 14px; } .table-container { overflow-x: auto; margin: 40px 0; } .article-body table { width: 100%; border-collapse: collapse; } .article-body th, .article-body td { padding: 15px; text-align: left; border: 1px solid #d6eae8; } .article-body th { background: #a8d8d5; color: white; font-weight: 600; } .article-body tr:nth-child(even) { background: #f0f7f6; } .article-body a { color: #7abeb5; text-decoration: none; font-weight: 500; transition: all 0.3s ease; } .article-body a:hover { color: #8ec9c6; } .tags { display: flex; flex-wrap: wrap; margin: 40px 0; } .tag { background: #e5f2f1; color: #7abeb5; padding: 8px 15px; border-radius: 30px; font-size: 14px; margin-right: 10px; margin-bottom: 10px; transition: all 0.3s ease; } .tag:hover { background: #a8d8d5; color: white; cursor: pointer; } .info-box { background: #e8f4f8; border-left: 5px solid #a8c8e5; padding: 25px; margin: 30px 0; border-radius: 0 8px 8px 0; } .warning-box { background: #fef6e7; border-left: 5px solid #f4d8a8; padding: 25px; margin: 30px 0; border-radius: 0 8px 8px 0; } .tip-box { background: #f0f8f0; border-left: 5px solid #a8d8a8; padding: 25px; margin: 30px 0; border-radius: 0 8px 8px 0; } .booking-section { background: linear-gradient(to right, #a8d8d5, #8ec9c6); padding: 60px; color: white; margin: 50px 0; border-radius: 15px; } .booking-section h2 { font-family: 'Playfair Display', serif; font-size: 36px; margin-bottom: 30px; text-align: center; color: white; } .widget-tabs { display: flex; margin-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); justify-content: center; } .widget-tab { padding: 10px 20px; cursor: pointer; color: rgba(255, 255, 255, 0.7); border-bottom: 2px solid transparent; transition: all 0.3s ease; } .widget-tab.active { color: white; border-bottom: 2px solid white; } .tab-content { display: none; } .tab-content.active { display: block; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: white; } .form-control { width: 100%; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; font-size: 16px; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.1); color: white; } .form-control:focus { border-color: white; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2); outline: none; } select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L2 6h12L8 12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 16px; } .form-row { display: flex; gap: 20px; } .form-row .form-group { flex: 1; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 40px 0; } .feature-card { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); text-align: center; transition: all 0.3s ease; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); } .feature-card i { font-size: 48px; color: #a8d8d5; margin-bottom: 20px; } .feature-card h3 { color: #8ec9c6; margin-bottom: 15px; } .testimonials { background: #f0f7f6; padding: 60px; margin: 50px 0; border-radius: 15px; } .testimonial { background: white; padding: 30px; border-radius: 10px; margin-bottom: 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .testimonial-author { font-weight: 600; color: #8ec9c6; margin-top: 15px; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin: 40px 0; text-align: center; } .stat { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } .stat-number { font-size: 48px; font-weight: bold; color: #a8d8d5; display: block; } .stat-label { color: #5a5a5a; font-size: 16px; margin-top: 10px; } footer { background: linear-gradient(to right, #a8d8d5, #8ec9c6); color: white; padding: 60px 50px 30px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 50px; } .footer-column h3 { font-family: 'Playfair Display', serif; font-size: 22px; margin-bottom: 25px; color: #f8e0d4; } .footer-column ul { list-style: none; } .footer-column ul li { margin-bottom: 15px; } .footer-column ul li a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: all 0.3s ease; } .footer-column ul li a:hover { color: white; } .contact-info { list-style: none; } .contact-info li { margin-bottom: 15px; display: flex; align-items: center; } .contact-info li i { margin-right: 15px; color: #f8e0d4; font-size: 20px; width: 24px; } .social-links { display: flex; gap: 15px; margin-top: 20px; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: white; text-decoration: none; transition: all 0.3s ease; } .social-links a:hover { background: #f8e0d4; color: #8a7a6d; transform: translateY(-3px); } .copyright { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); font-size: 14px; } @media (max-width: 1200px) { .container { width: 95%; margin: 20px auto; } } @media (max-width: 992px) { header { padding: 20px; flex-direction: column; text-align: center; } nav ul { margin-top: 20px; justify-content: center; flex-wrap: wrap; } nav ul li { margin: 10px; } .form-row { flex-direction: column; gap: 0; } .main-content { padding: 40px; } } @media (max-width: 768px) { .hero-content h1 { font-size: 36px; } .main-content { padding: 30px 20px; } .article-body { font-size: 16px; } .article-body h2 { font-size: 28px; } .article-body h3 { font-size: 22px; } .booking-section { padding: 40px 20px; } footer { padding: 50px 20px 20px; } .footer-content { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 480px) { .hero { height: 400px; } .hero-content h1 { font-size: 28px; } .hero-content p { font-size: 16px; } .btn { padding: 12px 24px; font-size: 14px; } .logo { font-size: 24px; } nav ul li { margin: 5px; } nav ul li a { padding: 6px 12px; font-size: 14px; } }