/* Universal Box Sizing for better layout consistency */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }

 /* Adjusting the base font size for overall scaling */
 html {
     font-size: 15px;
     /* Reduced from browser default 16px to make everything slightly smaller */
 }

 :root {
     --page-background: #ffffff;
     --text-color-default: #212529;
     --text-color-muted: #6c757d;
     --text-color-light: #f8f9fa;
     /* For dark backgrounds like footer */

     --card-background: #ffffff;
     --card-text-color: #212529;

     --section-bg-light: #f8f9fa;
     /* Light grey for sections that were navy */

     --primary-accent-color: #ffc107;
     /* Brighter Yellow */
     --primary-accent-darker: #e0a800;
     --secondary-accent-color: #B29339;
     /* Gold/Brown */

     --border-color: #dee2e6;
     --radius: 0.5rem;
     --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
     --shadow-md: 0 .5rem 1rem rgba(0, 0, 0, .15);
 }

 body {
     background-color: var(--page-background);
     color: var(--text-color-default);
     font-family: var(--font-family);
     overflow-x: hidden;
 }

 header {
     /* background: url('../images/banner121.jpg') no-repeat center center/cover; */
     /* min-height: 75vh; */
     /* width: 100%; */
     color: #fff;
     display: flex;
     flex-direction: column;
     position: relative;
 }

 .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: white;
     padding: 0.5rem 0rem;
     width: 100%;
     z-index: 1030;
     background-color: rgb(24, 24, 24);
     transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }

 .navbar .logo img {
     padding-top: 5px;
     max-height: 70px;
 }

 .navbar .nav-right-container {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
 }

 .navbar .menu {
     display: flex;
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .navbar .menu li {
     margin: 0 1rem;
 }

 .navbar .menu li a {
     color: white;
     text-decoration: none;
     font-size: 1.2rem;
     font-weight: 500;
     transition: color 0.3s ease;
 }

 .navbar .menu li a:hover {
     color: var(--primary-accent-color);
 }

 .navbar .hamburger {
     display: none;
     flex-direction: column;
     cursor: pointer;
     padding: 10px;
 }

 .navbar .hamburger span {
     background-color: white;
     height: 3px;
     width: 25px;
     margin: 3px 0;
     transition: background-color 0.3s ease;
 }

 .contact-info {
     color: var(--primary-accent-color);
     text-decoration: none;
     font-size: 14px;
     padding-right: 1rem;
 }

 .contact-info img {
     vertical-align: middle;
 }


 @media (max-width: 991.98px) {
     .navbar .menu {
         display: none;
         flex-direction: column;
         background-color: #333;
         position: absolute;
         top: 100%;
         left: 0;
         width: 100%;
         padding: 1rem 0;
         box-shadow: var(--shadow-md);
     }

     .navbar .menu.active {
         display: flex;
     }

     .navbar .menu li {
         margin: 0.75rem 0;
         text-align: center;
     }

     .navbar .menu li a {
         color: white;
     }

     .navbar .menu li a:hover {
         color: var(--primary-accent-color);
     }

     .navbar .hamburger {
         display: flex;
     }

     .navbar .nav-right-container {
         align-items: flex-end;
     }

     .contact-info {
         font-size: 12px;
     }
 }

 .banner-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.55);
 }

 .banner-content {
     position: absolute;
     top: 50%;
     left: 10%;
     transform: translateY(-50%);
     z-index: 2;
 }

 .banner-content h1 {
     font-size: 3rem;
     font-weight: bold;
     line-height: 1.2;
 }

 .banner-content p {
     font-size: 1.5rem;
     margin-top: 1rem;
 }

 .banner-content p.since-text img {
     height: 25px;
 }


 .banner-buttons {
     margin-top: 2rem;
 }

 .banner-buttons .btn {
     font-size: 1rem;
     padding: 0.8rem 1.5rem;
     border-radius: 30px;
 }

 .btn-primary {
     background-color: var(--primary-accent-color);
     border: none;
     color: var(--text-color-default);
     transition: background-color 0.3s ease;
 }

 .btn-primary:hover {
     background-color: var(--primary-accent-darker);
     color: var(--text-color-default);
 }

 @media (max-width: 768px) {
     .banner-content h1 {
         font-size: 2rem;
     }

     .banner-content p {
         font-size: 1.2rem;
     }

     .banner-buttons .btn {
         font-size: 0.9rem;
         padding: 0.6rem 1.2rem;
     }
 }

 @media (max-width: 576px) {
     .banner-content {
         left: 5%;
     }

     .banner-content h1 {
         font-size: 1.8rem;
     }

     .banner-content p {
         font-size: 1rem;
     }
 }

 /* Blog Details Page Specific Styles */
 .blog-details-section {
     padding: 3rem 0;
     background-color: var(--section-bg-light);
 }

 .blog-details-header {
     margin-bottom: 2rem;
     text-align: center;
 }

 .blog-details-header .post-title {
     font-size: 2.8rem;
     font-weight: bold;
     color: var(--text-color-default);
     line-height: 1.2;
     margin-bottom: 1rem;
 }

 .blog-details-header .post-meta {
     font-size: 1rem;
     color: var(--text-color-muted);
     margin-bottom: 1.5rem;
 }

 .blog-details-header .post-meta .author {
     color: var(--secondary-accent-color);
     font-weight: 500;
 }

 .blog-details-hero-img {
     width: 100%;
     height: 500px;
     object-fit: cover;
     border-radius: var(--radius);
     margin-bottom: 3rem;
     box-shadow: var(--shadow-md);
 }

 .blog-content h1,
 .blog-content h2,
 .blog-content h3,
 .blog-content h4,
 .blog-content h5,
 .blog-content h6 {
     color: var(--text-color-default);
     margin-top: 1.5em;
     margin-bottom: 0.75em;
     font-weight: 600;
 }

 .blog-content p {
     font-size: 1.05rem;
     line-height: 1.8;
     margin-bottom: 1rem;
     color: var(--text-color-default);
 }

 .blog-content ul,
 .blog-content ol {
     font-size: 1.05rem;
     line-height: 1.8;
     margin-bottom: 1rem;
     padding-left: 20px;
 }

 .blog-content li {
     margin-bottom: 0.5rem;
 }

 .blog-content blockquote {
     border-left: 4px solid var(--primary-accent-color);
     padding-left: 1.5rem;
     margin: 2rem 0;
     font-style: italic;
     color: var(--text-color-muted);
 }

 .blog-content img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius);
     margin: 1.5rem 0;
     box-shadow: var(--shadow-sm);
 }

 /* Tags and Share Section */
 .post-tags-share {
     border-top: 1px solid var(--border-color);
     padding-top: 1.5rem;
     margin-top: 2rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
 }

 .post-tags span {
     display: inline-block;
     background-color: var(--primary-accent-color);
     color: var(--text-color-default);
     padding: 0.4rem 0.8rem;
     border-radius: 0.25rem;
     font-size: 0.85rem;
     margin-right: 0.5rem;
     margin-bottom: 0.5rem;
 }

 .social-share a {
     font-size: 1.5rem;
     color: var(--text-color-muted);
     margin-left: 1rem;
     transition: color 0.3s ease;
 }

 .social-share a:hover {
     color: var(--secondary-accent-color);
 }

 /* Related Posts Section */
 .related-posts-section {
     margin-top: 4rem;
     padding-top: 2rem;
     border-top: 1px solid var(--border-color);
 }

 .related-posts-section h3 {
     text-align: center;
     font-size: 2rem;
     font-weight: bold;
     margin-bottom: 2.5rem;
     color: var(--text-color-default);
 }

 /* Reusing blog-post-card styles from blog.html */
 .blog-post-card {
     background-color: var(--card-background);
     border: 1px solid var(--border-color);
     border-radius: var(--radius);
     box-shadow: var(--shadow-sm);
     overflow: hidden;
     height: 100%;
     /* Ensure cards are same height */
     display: flex;
     flex-direction: column;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .blog-post-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-md);
 }

 .blog-post-card img {
     width: 100%;
     height: 200px;
     /* Adjusted height for grid images */
     object-fit: cover;
     /* Cover the area, cropping if necessary */
     border-top-left-radius: var(--radius);
     border-top-right-radius: var(--radius);
 }

 .blog-post-card .card-body {
     padding: 1.5rem;
     flex-grow: 1;
     /* Allow card body to grow */
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     /* Push button to bottom */
 }

 .blog-post-card .post-title {
     font-size: 1.25rem;
     /* Slightly smaller for grid posts */
     font-weight: 600;
     color: var(--card-text-color);
     margin-bottom: 0.75rem;
     line-height: 1.3;
 }

 .blog-post-card .post-meta {
     font-size: 0.85rem;
     color: var(--text-color-muted);
     margin-bottom: 1rem;
 }

 .blog-post-card .post-meta .author {
     color: var(--secondary-accent-color);
     font-weight: 500;
 }

 .blog-post-card .post-snippet {
     font-size: 0.95rem;
     color: var(--text-color-muted);
     line-height: 1.6;
     margin-bottom: 1rem;
 }

 .blog-post-card .btn {
     background-color: var(--secondary-accent-color);
     border-color: var(--secondary-accent-color);
     color: var(--text-color-light);
     padding: 0.6rem 1.5rem;
     border-radius: var(--radius);
     font-size: 0.95rem;
     /* Slightly smaller button */
     font-weight: 500;
     transition: background-color 0.3s ease, color 0.3s ease;
 }

 .blog-post-card .btn:hover {
     background-color: var(--primary-accent-color);
     border-color: var(--primary-accent-color);
     color: var(--text-color-default);
 }


 /* Sidebar Styles */
 .blog-sidebar .sidebar-widget {
     background-color: var(--card-background);
     border: 1px solid var(--border-color);
     border-radius: var(--radius);
     padding: 1.5rem;
     margin-bottom: 2rem;
     box-shadow: var(--shadow-sm);
 }

 .blog-sidebar .sidebar-widget h4 {
     font-size: 1.4rem;
     font-weight: 600;
     margin-bottom: 1.5rem;
     color: var(--text-color-default);
     border-bottom: 2px solid var(--primary-accent-color);
     padding-bottom: 0.5rem;
     display: inline-block;
     /* To make border-bottom only under text */
 }

 .blog-sidebar .sidebar-widget .form-control {
     border-radius: 2rem;
     padding: 0.75rem 1.5rem;
     box-shadow: none;
     border-color: var(--border-color);
 }

 .blog-sidebar .sidebar-widget .btn {
     background-color: var(--primary-accent-color);
     border-color: var(--primary-accent-color);
     color: var(--text-color-default);
     border-radius: 2rem;
     padding: 0.75rem 1.5rem;
 }

 .blog-sidebar .sidebar-widget .btn:hover {
     background-color: var(--primary-accent-darker);
     border-color: var(--primary-accent-darker);
 }

 .blog-sidebar .categories-list,
 .blog-sidebar .recent-posts-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .blog-sidebar .categories-list li,
 .blog-sidebar .recent-posts-list li {
     margin-bottom: 0.75rem;
 }

 .blog-sidebar .categories-list a,
 .blog-sidebar .recent-posts-list a {
     color: var(--text-color-default);
     text-decoration: none;
     font-size: 1rem;
     transition: color 0.3s ease;
 }

 .blog-sidebar .categories-list a:hover,
 .blog-sidebar .recent-posts-list a:hover {
     color: var(--secondary-accent-color);
 }

 .blog-sidebar .recent-posts-list .post-date {
     font-size: 0.85rem;
     color: var(--text-color-muted);
     display: block;
     margin-top: 0.2rem;
 }

 .blog-sidebar .tag-cloud .tag {
     display: inline-block;
     background-color: #e9ecef;
     color: var(--text-color-muted);
     padding: 0.5rem 0.8rem;
     border-radius: 0.25rem;
     font-size: 0.9rem;
     margin-right: 0.5rem;
     margin-bottom: 0.5rem;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .blog-sidebar .tag-cloud .tag:hover {
     background-color: var(--primary-accent-color);
     color: var(--text-color-default);
 }


 /* Footer Section (Kept from previous enhancement) */
 .footer-section {
     background-color: #2c3034;
     color: var(--text-color-light);
     padding: 3rem 0 1.5rem 0;
 }

 .footer-logo {
     max-width: 150px;
     height: auto;
     margin-bottom: 1rem;
 }

 .company-desc {
     font-size: 0.95em;
     opacity: 0.8;
     margin-left: 0;
     line-height: 1.6;
 }

 .footer-heading {
     color: var(--primary-accent-color);
     font-weight: 600;
     margin-bottom: 1.5rem;
     font-size: 1.4em;
     text-align: left;
 }

 .footer-links {
     list-style: none;
     padding: 0;
     margin: 0;
     text-align: left;
 }

 .footer-links li {
     margin-bottom: 0.5rem;
 }

 .footer-links a {
     color: rgba(248, 249, 250, 0.8);
     text-decoration: none;
     transition: color 0.3s ease;
     font-size: 0.95em;
 }

 .footer-links a:hover {
     color: var(--primary-accent-color);
 }

 .footer-contact {
     list-style: none;
     padding: 0;
     margin: 0;
     font-size: 0.95em;
     text-align: left;
 }

 .footer-contact li {
     display: flex;
     align-items: center;
     margin-bottom: 0.8rem;
 }

 .footer-contact i {
     margin-right: 10px;
     color: var(--primary-accent-color);
     font-size: 1.1em;
 }

 .newsletter-form input {
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.15);
     color: var(--text-color-light);
     padding: 0.75rem;
 }

 .newsletter-form input::placeholder {
     color: rgba(248, 249, 250, 0.6);
     font-size: 0.95em;
 }

 .newsletter-form .btn {
     background-color: var(--primary-accent-color);
     color: var(--text-color-default);
     border: none;
     padding: 0.75rem;
     width: 100%;
 }

 .newsletter-form .btn:hover {
     background-color: var(--primary-accent-darker);
 }

 .social-links {
     display: flex;
     gap: 1rem;
     justify-content: flex-start;
 }

 .social-icon {
     color: var(--text-color-light);
     font-size: 1.35rem;
     transition: transform 0.3s ease, color 0.3s ease;
 }

 .social-icon:hover {
     color: var(--primary-accent-color);
     transform: translateY(-3px);
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 1.5rem;
     margin-top: 2rem;
 }

 .footer-legal {
     margin-top: 0.5rem;
 }

 .footer-legal a {
     color: rgba(248, 249, 250, 0.7);
     text-decoration: none;
     font-size: 0.9rem;
     transition: color 0.3s ease;
 }

 .footer-legal a:hover {
     color: var(--primary-accent-color);
 }

 .separator {
     color: rgba(248, 249, 250, 0.4);
     margin: 0 0.5rem;
 }

 @media (max-width: 768px) {
     .footer-section {
         text-align: center;
     }

     .footer-heading,
     .footer-links,
     .footer-contact,
     .social-links {
         text-align: center;
         justify-content: center;
     }

     .footer-logo {
         margin: 0 auto 1rem auto;
     }

     .company-desc {
         margin-left: auto;
         margin-right: auto;
     }

     .footer-contact li {
         justify-content: center;
     }
 }

 /* Fixed WhatsApp Button Styles */
 .whatsapp-fixed-btn {
     position: fixed;
     bottom: 25px;
     right: 25px;
     background-color: #25D366;
     color: white;
     width: 55px;
     height: 55px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 28px;
     text-decoration: none;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
     z-index: 1000;
     transition: background-color 0.3s ease, transform 0.3s ease;
 }

 .whatsapp-fixed-btn:hover {
     background-color: #1DA851;
     transform: scale(1.08);
 }

 @media (max-width: 576px) {
     .whatsapp-fixed-btn {
         width: 50px;
         height: 50px;
         font-size: 24px;
         bottom: 20px;
         right: 20px;
     }
 }