:root {
 --primary-color: #b8bec5; /* Navy blue */
 --secondary-color: #f39237; /* Orange */
 --text-color: #000000; /* Dark blue-gray */
 --background-color: #eaecf0; /* Slightly darker off-white */
 --header-footer-bg: #778fd7; /* Dark navy */
 --accent-color: #3a89c6; /* Teal */
 --hover-color: #ef476f; /* Coral pink */
 --card-bg: #ffffff; /* Pure white */
 --border-radius: 10px;
}
body {
 font-family: 'Montserrat', 'Arial', sans-serif;
 margin: 0;
 padding: 0;
 background-color: var(--background-color);
 color: var(--text-color);
 line-height: 1.6;
}

.container {
 max-width: 1400px;
 margin: 0 auto;
 padding: 0 15px;
}
/* Header Styles */
header {
 background: linear-gradient(135deg, var(--header-footer-bg), var(--primary-color));
 color: rgba(17, 15, 15, 0.973);
 padding: 0.5rem 0;
 text-align: center;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 margin-bottom: 0.5rem; /* Added bottom margin */
 width: 100%;
}

header h1 {
 margin: 0;
 font-size: 2.2rem;
 font-weight: 700;
 letter-spacing: 1px;
}

nav ul {
 list-style: none;
 padding: 0;
 margin: 0.3rem 0 0;
 display: flex;
 justify-content: center;
 gap: 10px;
}

nav a {
 text-decoration: none;
 color: rgba(17, 15, 15, 0.973);
 font-weight: 600;
 padding: 0.3rem 1.2rem;
 border-radius: var(--border-radius);
 transition: all 0.3s ease;
 position: relative;
 overflow: hidden;
}

nav a:hover {
 background-color: var(--accent-color);
 transform: translateY(-3px);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Main Content Styles */
main.blog-posts {
 padding: 3rem;
 background-color: var(--background-color);
 max-width: 1200px;
 margin: 3rem auto 5rem; /* Increased top and bottom margins */
}

article {
 background-color: var(--card-bg);
 padding: 2rem;
 margin-bottom: 3rem;
 border-radius: var(--border-radius);
 box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
 border-left: 5px solid var(--secondary-color);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

article:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

article h2 {
 color: var(--primary-color);
 margin-top: 0;
 font-weight: bold;
 font-size: 1.8rem;
 border-bottom: 2px solid var(--secondary-color);
 padding-bottom: 0.5rem;
 display: inline-block;
}

.post-meta {
 color: var(--primary-color);
 font-style: italic;
 margin-bottom: 1.5rem;
 background-color: rgba(91, 192, 190, 0.1); /* Light teal background */
 display: inline-block;
 padding: 0.3rem 0.7rem;
 border-radius: 20px;
 font-size: 0.9rem;
}

ol {
 padding-left: 2rem;
}

ol li {
 margin-bottom: 1rem;
 position: relative;
 padding-left: 0.5rem;
}

ol li::marker {
 color: var(--secondary-color);
 font-weight: bold;
}

/* Apply Georgia font to paragraphs with improved styling */
p {
 font-family: Georgia, 'Times New Roman', serif;
 font-size: 1.05rem;
 color: var(--text-color);
 margin-bottom: 1.2rem;
}

article a.back-link {
 display: inline-block;
 padding: 0.7rem 1.5rem;
 background-color: var(--accent-color);
 color: white;
 text-decoration: none;
 border-radius: 25px;
 transition: all 0.3s ease;
 margin-top: 2.5rem; /* Increased top margin */
 font-weight: 600;
 letter-spacing: 0.5px;
 border: none;
}

article a.back-link:hover {
 background-color: var(--hover-color);
 transform: translateY(-2px);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Footer Styles */
footer {
 background: linear-gradient(135deg, var(--primary-color), var(--header-footer-bg));
 color: white;
 text-align: center;
 padding: 0.75rem 0; /* Reduced padding from 1.5rem to 0.75rem */
 position: sticky;
 bottom: 0;
 width: 100%;
 margin-top: 1.5rem; /* Reduced top margin from 3rem to 1.5rem */
}

/* Adjust footer content for more compact appearance */
footer p {
 margin: 0.25rem 0; /* Minimal margin for paragraph inside footer */
 font-size: 0.9rem; /* Slightly smaller text */
}

footer a {
 color: var(--secondary-color);
 text-decoration: none;
 font-weight: 600;
 transition: color 0.3s ease;
}

footer a:hover {
 color: var(--accent-color);
 text-decoration: underline;
}
/* LinkedIn-specific style */
.linkedin-link {
 color: #141718; /* LinkedIn blue */
}
.linkedin-link:hover {
 color: #005582;
 text-decoration: underline;
}

/* Twitter-specific style */
.twitter-link {
 color: #141718; /* Twitter blue */
}
.twitter-link:hover {
 color: #1479c9;
 text-decoration: underline;
}


/* Additional styling for emphasis */
strong {
 color: var(--primary-color);
 font-weight: 700;
}

em {
 color: var(--secondary-color);
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
 header h1 {
 font-size: 1.8rem;
 }

 nav ul {
 flex-direction: column;
 align-items: center;
 gap: 15px;
 }

 main.blog-posts {
 padding: 1.5rem;
 margin: 2rem auto 3rem; /* Adjusted margins for mobile */
 }

 article {
 padding: 0.5rem;
 }
}

/* Add a subtle animation to the page load */
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
}

article {
 animation: fadeIn 0.8s ease forwards;
}