/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Lora:wght@700&display=swap');

/* General Styles */
body {
 font-family: 'Montserrat', sans-serif;
 margin: 0;
 padding: 0;
 color: #333;
 line-height: 1.6;
 background-color: #f5f5f5;
}

.container {
 width: 90%;
 max-width: 1200px;
 margin: 0 auto;
 padding: 20px;
}

/* Header Styles */
header {
 background-color: #ffffff;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 padding: 20px 0;
 margin-bottom: 20px;
}

header h1 {
 text-align: center;
 font-size: 3em;
 font-family: 'Lora', serif;
 /* Elegant serif font */
 color: #222;
 margin: 0;
 letter-spacing: 1px;
}

/* Navigation Styles */
nav {
 margin-top: 10px;
 text-align: center;
}

.nav-links {
 list-style: none;
 padding: 0;
 margin: 0;
 display: inline-block;
}

.nav-links li {
 display: inline-block;
 margin: 0 15px;
 position: relative;
}

.nav-links a {
 text-decoration: none;
 color: #333;
 font-weight: 500;
 padding: 10px 15px;
 transition: all 0.3s ease;
 border-radius: 5px;
 position: relative;
}

.nav-links a:hover,
.nav-links .dropdown:hover>a {
 background-color: #444;
 color: #fff;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.dropdown-menu {
 display: none;
 position: absolute;
 top: 100%;
 left: 50%;
 transform: translateX(-50%);
 background-color: #fff;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 padding: 10px 0;
 border-radius: 5px;
 z-index: 1;
 min-width: 160px;
}

.dropdown:hover .dropdown-menu {
 display: block;
}

.dropdown-menu li {
 display: block;
 margin: 0;
}

.dropdown-menu a {
 display: block;
 padding: 10px 20px;
 color: #333;
 text-align: left;
 white-space: nowrap;
}

.dropdown-menu a:hover {
 background-color: #444;
 color: #fff;
}

/* Main Content Styles */
main {
 background-color: #ffffff;
 border-radius: 8px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 padding: 20px;
 margin-bottom: 20px;
}

.latest-article {
 margin-bottom: 40px;
}

.latest-article h2,
.latest-article h3 {
 color: #444;
 font-weight: 700;
 margin-bottom: 15px;
}

.latest-article h2 {
 font-size: 1.8em;
}

.latest-article h3 {
 font-size: 1.5em;
 color: #333;
 font-weight: 600;
}

.article-thumbnail img {
 width: 100%;
 max-width: 600px;
 height: auto;
 border-radius: 5px;
 display: block;
 margin: 0 auto 20px;
}

.latest-article p {
 font-size: 1em;
 color: #666;
}

/* Newsletter Styles */
.newsletter {
 background-color: #f9f9f9;
 padding: 30px;
 border-radius: 8px;
 text-align: center;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.newsletter h2 {
 font-size: 1.8em;
 margin-bottom: 20px;
 color: #333;
}

.newsletter form {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.newsletter input[type="email"] {
 width: 100%;
 max-width: 400px;
 padding: 12px;
 margin-bottom: 15px;
 border: 1px solid #ddd;
 border-radius: 4px;
 font-size: 1em;
 color: #333;
}

.newsletter button {
 padding: 12px 25px;
 background-color: #333;
 color: #fff;
 border: none;
 border-radius: 4px;
 font-size: 1em;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.newsletter button:hover {
 background-color: #555;
}

/* Footer Styles */
footer {
 background-color: #333;
 color: #fff;
 padding: 20px 0;
 text-align: center;
 font-size: 0.9em;
}

footer a {
 color: #fff;
 text-decoration: none;
 margin-left: 10px;
}

footer a:hover {
 text-decoration: underline;
}

/* Responsive Styles */
@media (max-width: 768px) {
 .nav-links li {
  display: block;
  margin: 10px 0;
 }

 .nav-links a {
  display: block;
  padding: 10px 0;
 }

 .dropdown-menu {
  left: 0;
  transform: translateX(0);
  min-width: 100%;
 }

 .newsletter form {
  flex-direction: column;
  align-items: stretch;
 }

 .newsletter input[type="email"] {
  width: 100%;
  margin-bottom: 10px;
 }

 .signup-form {
  flex-direction: column;
 }

 .signup-form input[type="email"] {
  width: calc(100% - 20px);
  margin-bottom: 10px;
 }

 .social-media-connect {
  flex-direction: column;
 }

 .social-media-platform {
  margin-bottom: 20px;
 }

 .about-content {
  flex-direction: column;
  text-align: center;
 }

 .about-image img {
  margin-top: 20px;
 }
}

/* About Page Styles */
.about-section {
 max-width: 1000px;
 margin: 40px auto;
 padding: 20px;
 background-color: #f9f9f9;
 border-radius: 8px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.about-content {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
}

.about-text {
 flex: 1;
}

.about-text h1 {
 font-family: 'Montserrat', sans-serif;
 font-weight: 700;
 color: black;
 margin-bottom: 15px;
}

.about-text p {
 font-family: 'Montserrat', sans-serif;
 font-weight: 300;
 color: #666;
 line-height: 1.6;
}

.about-image {
 flex: 1;
 text-align: center;
}

.about-image img {
 width: 100%;
 max-width: 300px;
 border-radius: 8px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Connect Page Styles */
.connect-section {
 max-width: 800px;
 margin: 20px auto;
 padding: 20px;
 background-color: #f9f9f9;
 border-radius: 8px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 text-align: center;
}

.connect-section h1 {
 color: black;
 font-weight: 700;
 margin-bottom: 15px;
}

.connect-section p {
 color: #666;
 margin-bottom: 20px;
 font-size: 18px;
 line-height: 1.8;
}

.social-media-connect {
 max-width: 800px;
 margin: 40px auto;
 display: flex;
 justify-content: space-between;
 gap: 20px;
 flex-wrap: wrap;
}

.social-media-platform {
 flex: 1;
 background-color: #f9f9f9;
 padding: 20px;
 border-radius: 8px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 text-align: center;
}

.social-media-platform h2 {
 color: black;
 font-weight: 700;
 margin-bottom: 10px;
}

.social-media-platform p {
 color: #666;
 margin-bottom: 15px;
}

.social-link {
 display: inline-block;
 background-color: #333;
 color: #fff;
 padding: 10px 20px;
 border-radius: 4px;
 text-decoration: none;
 font-weight: bold;
 transition: background-color 0.3s ease;
 margin-top: 10px;
}

.social-link:hover {
 background-color: gold;
}

.social-icon {
 width: 40px;
 height: auto;
 vertical-align: middle;
 margin-right: 10px;
}

/* Newsletter Page Styles */
.newsletter-intro {
 max-width: 800px;
 margin: 20px auto;
 padding: 20px;
 background-color: #f9f9f9;
 border-radius: 8px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 text-align: center;
}

.newsletter-intro h1 {
 color: black;
 font-weight: 700;
 margin-bottom: 15px;
}

.newsletter-intro p {
 color: #666;
 margin-bottom: 20px;
 font-size: 18px;
 line-height: 1.8;
}

.newsletter-signup {
 max-width: 600px;
 margin: 20px auto;
 text-align: center;
}

.newsletter-signup h2 {
 color: black;
 font-weight: 700;
 margin-bottom: 15px;
}

.signup-form {
 display: flex;
 justify-content: center;
 align-items: center;
}

.signup-form input[type="email"] {
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 4px;
 font-family: 'Lato', sans-serif;
 font-size: 16px;
 margin-right: 10px;
 width: 60%;
}

.signup-form button {
 background-color: #333;
 color: #fff;
 padding: 10px 20px;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.signup-form button:hover {
 background-color: gold;
}

.past-newsletters {
 max-width: 800px;
 margin: 40px auto;
 padding: 20px;
}

.past-newsletters h2 {
 color: black;
 font-weight: 700;
 margin-bottom: 20px;
 text-align: center;
}

.newsletter {
 border-bottom: 1px solid #ddd;
 padding: 20px 0;
}

.newsletter h3 {
 color: black;
 font-weight: 700;
 margin-bottom: 10px;
}

.newsletter p {
 color: #666;
 margin-bottom: 10px;
}

.newsletter .read-more {
 color: #333;
 text-decoration: none;
 font-weight: bold;
}

.newsletter .read-more:hover {
 color: gold;
}

/* Post Metadata */
.post-date {
 font-size: 14px;
 color: #666;
 margin-top: 5px;
}

.post-meta {
 font-size: 14px;
 color: #999;
 margin-bottom: 20px;
}

span {
 font-size: 1.9em;
 /* This makes the font size twice as large as the base size */
 font-weight: bold;
 /* Makes the text bold */
 line-height: 1.4;
 /* Adjusts the line height for better spacing */
 color: #333;
 /* Ensures the color is consistent with the body text */
}

/* Audio Player Styles */
.audio-player {
 margin-bottom: 20px;
 text-align: center;
}

audio {
 width: 100%;
 max-width: 600px;
 outline: none;
 border-radius: 8px;
 /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

/* Adjustments for mobile devices */
@media (max-width: 768px) {
 audio {
  width: 100%;
 }
}

/* Contact Section Styles */
.contact-section {
 max-width: 800px;
 margin: 40px auto;
 padding: 40px;
 background-color: #ffffff;
 border-radius: 8px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 text-align: center;
}

.contact-section h1 {
 font-size: 2.5em;
 color: #222;
 margin-bottom: 20px;
 font-weight: 700;
}

.contact-section p {
 font-size: 1.2em;
 color: #666;
 margin-bottom: 30px;
}

/* Form Styles */
.contact-form {
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.form-group {
 display: flex;
 flex-direction: column;
 text-align: left;
}

.form-group label {
 font-weight: 600;
 color: #333;
 margin-bottom: 8px;
 font-size: 1.1em;
}

.form-group input,
.form-group textarea {
 padding: 12px;
 font-size: 1.1em;
 border: 1px solid #ddd;
 border-radius: 4px;
 width: 100%;
 box-sizing: border-box;
 transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
 border-color: gold;
 outline: none;
}

.form-group textarea {
 resize: vertical;
}

/* Button Styles */
button[type="submit"] {
 padding: 14px 25px;
 background-color: #333;
 color: #fff;
 border: none;
 border-radius: 4px;
 font-size: 1.2em;
 font-weight: bold;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
 background-color: gold;
 color: #333;
}

/* Responsive Contact Form */
@media (max-width: 768px) {
 .contact-section {
  padding: 20px;
 }

 .form-group input,
 .form-group textarea {
  font-size: 1em;
 }

 button[type="submit"] {
  font-size: 1.1em;
  padding: 12px 20px;
 }
}

.audio-player {
 margin-bottom: 20px;
 text-align: center;
}

.audio-player h3 {
 font-size: 1.2em;
 margin-bottom: 10px;
 color: #444;
}

audio {
 width: 100%;
 max-width: 600px;
 outline: none;
 border-radius: 8px;
}

.post-date {
 font-size: 0.75em;
 color: #666;
 margin-top: -4px;
 /* Adjusts the space between the title and date */
 margin-bottom: 15px;
 /* Adjusts the space between the date and article text */
}

.newsletter {
 background-color: #f9f9f9;
 padding: 30px;
 border-radius: 8px;
 text-align: center;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 margin-bottom: 20px;
 /* Added margin to create spacing between articles */
}

/* Responsive Styles */
@media (max-width: 768px) {
 .nav-links li {
  display: block;
  margin: 10px 0;
 }

 .nav-links a {
  display: block;
  padding: 10px 0;
 }

 .dropdown-menu {
  left: 0;
  transform: translateX(0);
  min-width: 100%;
 }

 .newsletter form {
  flex-direction: column;
  align-items: stretch;
 }

 .newsletter input[type="email"] {
  width: 100%;
  margin-bottom: 10px;
 }

 .signup-form {
  flex-direction: column;
 }

 .signup-form input[type="email"] {
  width: calc(100% - 20px);
  margin-bottom: 10px;
 }

 .social-media-connect {
  flex-direction: column;
 }

 .social-media-platform {
  margin-bottom: 20px;
 }

 .about-content {
  flex-direction: column;
  text-align: center;
 }

 .about-image img {
  margin-top: 20px;
 }

 /* Center article text for mobile */
 .latest-article p {
  text-align: center;
 }
}

/* Success Page Styles */
.success-message {
 text-align: center;
 margin: 40px auto;
 padding: 20px;
 background-color: #f9f9f9;
 border-radius: 8px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.success-message h2 {
 font-size: 2rem;
 color: #333;
 margin-bottom: 20px;
}

.success-message p {
 font-size: 1.2rem;
 color: #666;
 margin-bottom: 20px;
}

.success-message .back-button {
 display: inline-block;
 background-color: #333;
 color: #fff;
 padding: 10px 20px;
 text-decoration: none;
 border-radius: 4px;
 transition: background-color 0.3s ease;
}

.success-message .back-button:hover {
 background-color: gold;
 color: #333;
}

/* Review Section Styles */
.review {
 background-color: #f9f9f9;
 padding: 30px;
 border-radius: 8px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 margin-bottom: 40px;
 text-align: center;
}

.review h2 {
 font-size: 1.8em;
 color: #333;
 font-weight: 700;
 margin-bottom: 15px;
}

.review p {
 font-size: 1em;
 color: #666;
 margin-bottom: 20px;
 font-weight: 400;
}

.review-form {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 15px;
}

.review-form .form-group {
 width: 100%;
 max-width: 600px;
}

.review-form textarea {
 width: 100%;
 padding: 15px;
 font-size: 1em;
 border: 1px solid #ddd;
 border-radius: 6px;
 resize: vertical;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 transition: border-color 0.3s ease;
}

.review-form textarea:focus {
 border-color: gold;
 outline: none;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.review-form .submit-review {
 background-color: #333;
 color: #fff;
 font-size: 1em;
 font-weight: 600;
 padding: 12px 30px;
 border: none;
 border-radius: 6px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.review-form .submit-review:hover {
 background-color: gold;
 color: #333;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Feedback Section Styles */
.feedback-section {
 background-color: #f9f9f9;
 padding: 40px;
 border-radius: 8px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 margin-bottom: 40px;
 text-align: center;
}

.feedback-section h2 {
 font-size: 2em;
 color: #333;
 font-weight: 700;
 margin-bottom: 10px;
}

.feedback-section p {
 font-size: 1em;
 color: #666;
 margin-bottom: 30px;
 font-weight: 400;
}

.feedback-container {
 display: flex;
 gap: 20px;
 justify-content: center;
 flex-wrap: wrap;
}

.feedback-box {
 background-color: #ffffff;
 padding: 20px;
 border-radius: 8px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 flex: 1;
 min-width: 280px;
 max-width: 400px;
 text-align: center;
}

.feedback-box h3 {
 font-size: 1.5em;
 color: #333;
 font-weight: 600;
 margin-bottom: 10px;
}

.feedback-box p {
 font-size: 0.9em;
 color: #666;
 margin-bottom: 15px;
}

.feedback-box form {
 display: flex;
 flex-direction: column;
 gap: 15px;
 align-items: center;
}

.feedback-box textarea,
.feedback-box input[type="email"] {
 width: 100%;
 padding: 12px;
 font-size: 1em;
 border: 1px solid #ddd;
 border-radius: 6px;
 resize: none;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 transition: border-color 0.3s ease;
}

.feedback-box textarea:focus,
.feedback-box input[type="email"]:focus {
 border-color: gold;
 outline: none;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.submit-feedback {
 background-color: #333;
 color: #fff;
 font-size: 1em;
 font-weight: 600;
 padding: 12px 30px;
 border: none;
 border-radius: 6px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.submit-feedback:hover {
 background-color: gold;
 color: #333;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Responsive Styles */
@media (max-width: 768px) {
 .feedback-container {
  flex-direction: column;
  gap: 20px;
 }
}

/* Feedback Section Styles */
.feedback-section {
 padding: 40px 0;
 text-align: center;
}

.feedback-section h2 {
 font-size: 2em;
 color: #333;
 font-weight: 700;
 margin-bottom: 10px;
}

.feedback-section p {
 font-size: 1em;
 color: #666;
 margin-bottom: 30px;
 font-weight: 400;
}

.feedback-container {
 display: flex;
 gap: 20px;
 justify-content: center;
 flex-wrap: wrap;
}

.feedback-box {
 flex: 1;
 min-width: 280px;
 max-width: 400px;
 text-align: center;
}

.feedback-box h3 {
 font-size: 1.5em;
 color: #333;
 font-weight: 600;
 margin-bottom: 10px;
}

.feedback-box p {
 font-size: 0.9em;
 color: #666;
 margin-bottom: 15px;
}

.feedback-box form {
 display: flex;
 flex-direction: column;
 gap: 15px;
 align-items: center;
}

.feedback-box textarea,
.feedback-box input[type="email"] {
 width: 100%;
 padding: 12px;
 font-size: 1em;
 border: 1px solid #ddd;
 border-radius: 6px;
 resize: none;
 transition: border-color 0.3s ease;
}

.feedback-box textarea:focus,
.feedback-box input[type="email"]:focus {
 border-color: gold;
 outline: none;
}

.submit-feedback {
 background-color: #333;
 color: #fff;
 font-size: 1em;
 font-weight: 600;
 padding: 12px 30px;
 border: none;
 border-radius: 6px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.submit-feedback:hover {
 background-color: gold;
 color: #333;
}

/* Responsive Styles */
@media (max-width: 768px) {
 .feedback-container {
  flex-direction: column;
  gap: 20px;
 }
}

/* Add spacing between the article and the review section */
.latest-article {
 margin-bottom: 50px;
 /* Adjust the space between the article and the next section */
}

/* Feedback Section Styles */
.feedback-section {
 padding: 40px 0;
 text-align: center;
}

/* Add spacing between the article and the "Write a Review" section */
.feedback-section {
 padding: 40px 0;
 text-align: center;
 margin-top: 70px;
 /* Space between the article and the "Write a Review" section */
}

.article-thumbnail img {
 width: 100%;
 max-width: 400px;
 /* Ensures the image doesn't exceed a reasonable size */
 height: auto;
 /* Maintains the aspect ratio */
 border-radius: 8px;
 /* Adds slightly rounded corners */
 display: block;
 margin: 20px auto 30px;
 /* Adds top and bottom spacing, with more space at the top */
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 /* Adds a subtle shadow for a polished look */
}

/* Adjust image sizes for mobile screens */
@media (max-width: 768px) {
 .article-thumbnail img {
  max-width: 100%;
  /* Allows the image to scale to the screen width */
  margin: 10px auto;
  /* Reduces the margin for smaller screens */
 }
}

.article-thumbnail a {
 display: block;
 /* Makes the whole image clickable */
}

/* Styling for Book Titles */
.book-title {
 font-style: italic;
 font-family: 'Lora', serif;
 /* Elegant serif font */
 font-weight: 500;
 /* Medium weight for balance */
 color: #555;
 /* Slightly darker neutral color */
 transition: color 0.3s ease, font-weight 0.3s ease;
 /* Smooth transition for hover effects */
}

.book-title:hover {
 color: #0073e6;
 /* Noticeable but refined color change on hover */
 font-weight: 600;
 /* Slight increase in weight for hover */
 text-decoration: underline;
 /* Adds a subtle underline on hover */
}