@import url("pygment_highlights.css");

/* --- General --- */

html {
  font-size: 100%
}

body {
  font-family: 'Lora', 'Times New Roman', serif;
  font-size: 1.125rem;
  color: #404040;
  position: relative;
  background-color: #FFFFFF;
  
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1;
}
p {
  line-height: 1.5;
  margin: 1.875rem 0;
}
h1,h2,h3,h4,h5,h6 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
  line-height: 1.1;
}
h1 {
  font-size: 2.25rem;
}
h2 {
  font-size: 1.875rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.125rem;
}
h1, h2, h3, h4 {
  margin-top: 1.25rem;
}
a {
  color: #008AFF;
}
a:hover,
a:focus {
  color: #0085A1;
}
blockquote {
  color: #808080;
  font-style: italic;
}
blockquote p:first-child {
  margin-top: 0;
}
hr.small {
  max-width: 6.25rem;
  margin: 1rem auto;
  border-width: 0.25rem;
  border-color: inherit;
  border-radius: 0.1875rem;
}

/* fix in-page anchors to not be behind fixed header */
:target:before {
  content: "";
  display: block;
  height: 3.125rem; /* navbar height */
  margin: -3.125rem 0 0;
}

.hideme {
  display: none;
}

::-moz-selection {
  color: #fff;
  text-shadow: none;
  background-color: #0085A1;
}
::selection {
  color: #fff;
  text-shadow: none;
  background-color: #0085A1;
}
img::selection {
  color: #fff;
  background: transparent;
}
img::-moz-selection {
  color: #fff;
  background: transparent;
}

img {
  max-width: 100%;
}

.linked-section {
  padding-top: 3.75rem;
  margin-top: -1.5625rem;
}

/* Comments */

.disqus-comments {
  margin-top: 1.875rem;
}

@media (min-width: 768px) {
  .disqus-comments {
    margin-top: 2.5rem;
  }
}

/* --- Navbar --- */

.navbar-custom {
  background-color: #4A5A4F;
  border-radius: 8px; /* Add rounded corners for a softer look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
  font-family: 'Playfair Display', serif; /* Updated to a more elegant font */
  font-weight: 400;
  padding: 1rem 2rem;
  -webkit-transition: padding .5s ease-in-out, background-color 0.3s ease;
  -moz-transition: padding .5s ease-in-out, background-color 0.3s ease;
  transition: padding .5s ease-in-out, background-color 0.3s ease;

  
}

.navbar-custom,
.navbar-custom.top-nav-short,
.navbar-custom.top-nav-short-permanent {
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-custom .navbar-brand {
  line-height: 1.5;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 1.25rem;
  font-weight: 600; /* Made brand font weight softer */
  color: #FFFFFF;
  transition: color 0.3s ease;
}

.navbar-custom .navbar-brand-logo {
  -webkit-transition: padding .5s ease-in-out;
  -moz-transition: padding .5s ease-in-out;
  transition: padding .5s ease-in-out;
}

.navbar-custom .navbar-brand-logo img {
  height: 2.5rem;
  -webkit-transition: height .5s ease-in-out;
  -moz-transition: height .5s ease-in-out;
  transition: height .5s ease-in-out;
}

.navbar-custom .navbar-nav .nav-item {
  text-transform: uppercase;
  font-size: 0.875rem; /* Slightly larger and softer */
  letter-spacing: 0.05rem;
  padding: 0.5rem 1rem; /* Added padding for spacing */
}

.navbar-custom .navbar-nav .nav-link {
  line-height: 1.5rem;
  padding-top: 0.9375rem;
  padding-bottom: 0.9375rem;
  font-weight: 800;
  color: #FFFFFF;
  transition: color 0.3s ease;
}

.navbar-toggler {
  font-size: 1.2rem;
  margin: 0.5rem 0;
  color: #FFFFFF;
}
.navbar-custom .navbar-toggler:focus,
.navbar-custom .navbar-toggler:hover {
  background-color: rgba(0, 133, 161, 0.1); /* Softer hover effect */
}

.navbar-custom .navbar-toggler[aria-expanded="true"] {
  background-color: rgba(0, 0, 0, 0.2);
}

.dropdown-toggle::after {
  border-width: 0.4em;
}

@media (min-width: 1200px) {
  .navbar-custom {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .navbar-custom .navbar-brand-logo {
    padding-top: 0;
    padding-bottom: 0;
  }

  .navbar-custom .navbar-brand-logo img {
    height: 3.125rem;
  }

  .navbar-expand-xl .navbar-nav .nav-link {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }

  .navbar-expand-xl .navbar-nav .nav-item:not(.dropdown):last-child .nav-link {
    padding-right: 0;
  }

  .navbar-custom .nav-item.dropdown:hover {
    background: rgba(0, 0, 0, 0.05); /* Softer hover effect for dropdown */
  }
}

.navbar-custom .nav-item.dropdown.show {
  background: rgba(0, 0, 0, 0.1);
}

.navbar-custom .nav-item.dropdown .dropdown-menu {
  border-radius: 12px; /* Rounded corners for dropdown menu */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow for depth */
  margin-top: 0.5rem;
  font-size: 1em;
  border: 0;
  padding: 0.5rem;
  
    min-width: 100%;
  
}

.navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item {
  padding: 0.75rem;
  background-color: #4A5A4F;
  text-decoration: none !important;
  font-weight: normal;
  color: #FFFFFF;
  transition: background-color 0.3s ease, color 0.3s ease;
  
}

@media (min-width: 1200px) {
  .navbar-custom .nav-item.dropdown .dropdown-menu {
    text-align: center;
  }

  .navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item {
    padding-left: 0.625rem;
    border: 1px solid #DDDDDD;
    border-width: 0 1px 1px;
  }

  .navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item:first-child {
    border-top-width: 1px;
  }
}

@media (max-width: 1199px) {
  .navbar-custom .navbar-collapse {
    border-top: 1px solid #DDDDDD;
    margin: 0 -1rem;
  }

  .navbar-custom .navbar-nav {
    padding: 0.5rem 0;
  }

  .navbar-custom .navbar-nav .nav-link {
    padding: 0.675rem 0 0.675rem 1rem;
  }

  .navbar-custom .nav-item.dropdown.show {
    background: rgba(0, 0, 0, 0.2);
  }

  .navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item {
    padding-left: 2rem;
  }
}

.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus,
.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .nav-link:focus,
.navbar-custom .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-custom .navbar-nav .dropdown-menu .dropdown-item:focus {
  color: #0085A1;
}

.navbar-custom .avatar-container {
  position: absolute;
  left: 50%;
  width: 3.125rem;
  bottom: -1.5rem;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.navbar-custom.top-nav-short .avatar-container {
  opacity: 0;
  visibility: hidden;
  transition: visibility linear 0.5s, opacity 0.5s ease-in-out;
}

.navbar-custom .avatar-container .avatar-img-border {
  width: 100%;
  margin-left: -50%;
  
    border-radius: 50%;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, .8);
  
}
.navbar-custom .avatar-container .avatar-img {
  width: 100%;
  
    border-radius: 50%;
  
  display: block;
}

.navbar-custom.top-nav-expanded .avatar-container {
  display: none;
}

@media (min-width: 1200px) {
  .navbar-custom.top-nav-regular .avatar-container {
    width: 6.25rem;
    bottom: -1.9375rem;
  }

  .navbar-custom.top-nav-regular .avatar-container .avatar-img-border {
    width: 100%;
    
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
    
  }

  .navbar-custom.top-nav-regular .avatar-container .avatar-img {
    width: 100%;
  }
}


/* --- Footer --- */

footer {
  padding: 1.875rem 0;
  border-top: 1px #EAEAEA solid;
  margin-top: 3.125rem;
  font-size: 0.875rem;
  background-color: #4A5A4F;
  
}

footer p.text-muted {
  color: #777777 !important;
}

footer a {
  color: #FFFFFF;
}

footer a:hover,
footer a:focus {
  color: #0085A1;
}

footer .list-inline {
  margin: 0;
  padding: 0;
  margin-bottom: 1.875rem;
}
footer .copyright {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
}
footer .theme-by {
  text-align: center;
  margin: 0.625rem 0 0;
}
footer .footer-custom-content {
  text-align: center;
  margin-bottom: 0.9375rem;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@media (min-width: 768px) {
  footer {
    padding: 3.125rem 0;
  }
  footer .footer-links {
    font-size: 1.125rem;
  }
  footer .copyright {
    font-size: 1rem;
  }
  footer .footer-custom-content {
    font-size: 1rem;
  }
}

/* --- Post preview (feed) --- */

.posts-list {
    margin: 0;
}

.post-preview {
  padding: 1.25rem 0;
  border-bottom: 1px solid #eee;
  overflow: hidden;
}

@media (min-width: 768px) {
  .post-preview {
    padding: 2.1875rem 0;
  }
}

.post-preview:last-child {
  border-bottom: 0;
}

.post-preview a {
  text-decoration: none;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #404040;
}

.post-preview a:focus,
.post-preview a:hover {
  text-decoration: none;
  color: #0085A1;
}

.post-preview .post-title {
  font-size: 1.875rem;
  margin-top: 0;
}
.post-preview .post-subtitle {
  margin: 0;
  font-weight: 300;
  margin-bottom: 0.625rem;
}
.post-preview .post-meta,
.post-heading .post-meta {
  color: #808080;
  font-size: 1.125rem;
  font-style: italic;
  margin: 0 0 0.625rem;
  font-family: 'Lora', 'Times New Roman', serif;
}
.post-heading .post-meta {
  display: inline-block;
}
@media (max-width: 767px) {
  .post-heading .post-meta {
    display: block;
    margin-bottom: 0;
  }
}
.post-heading .post-meta .middot {
  margin: 0 0.625rem;
}
.post-preview .post-entry {
  width: 100%;
}
.post-preview .post-image {
  float: right;
  margin-left: 0.625rem;
  height: 12rem;
  width: 12rem;
}
.post-preview .post-image {
  filter: grayscale(40%);
}
.post-preview .post-image:hover {
  filter: grayscale(0%);
}
.post-preview .post-image img {
  max-height: 100%;
  max-width: 100%;
}
.post-preview .post-image-short {
  margin-top: -2.1875rem;
}
@media (max-width: 767px) {
  .post-preview .post-image {
    height: 9rem;
    width: 9rem;
  }
  .post-preview .post-image-short {
    margin-top: 0;
  }
}
.post-preview .post-image-small {
  width: 100%;
  height: 100%;
  text-align: center;
  display: none;
}
.post-preview .post-image-small img {
  max-width: 6.25rem;
  max-height: 6.25rem;
}
@media (max-width: 500px) {
  .post-preview .post-image {
    display: none;
  }
  .post-preview .post-image-small {
    display: block;
  }
}

.post-preview .post-read-more {
  font-weight: 800;
}

@media (min-width: 768px) {
  .post-preview .post-title {
    font-size: 2.25rem;
  }
}

/* --- Tags --- */

.blog-tags {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.9375rem;
  margin: 1.875rem 0;
}

.blog-tags span {
  color: #404040;
  opacity: 0.8;
}

.blog-tags .list-inline-item {
  margin-right: 0;
}

.blog-tags a {
  color: #404040;
  text-decoration: none;
  padding: 0 0.3125rem;
  opacity: 0.8;
  border: 1px solid transparent;
  border-radius: 0.1875rem;
}

.blog-tags a:hover {
  opacity: 1;
  color: #404040;
  border-color: #404040;
}

.post-preview .blog-tags {
  margin-top: 0.3125rem;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .post-preview .blog-tags {
    margin-top: 0.625rem;
  }
}

/* Tags page */

.tag-btn {
  margin: 0.3125rem;
}

#full-tags-list {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#full-tags-list .tag-entry {
  margin: 0 0 0.9375rem 1.5625rem;
}

#full-tags-list .tag-entry a {
  font-size: 1.25rem;
}

#full-tags-list .tag-entry .entry-date {
  color: #808080;
  font-style: italic;
  font-size: 1rem;
}

/* --- Post and page headers --- */

.intro-header {
  margin: 5rem 0 1.25rem;
  position: relative;
}
.intro-header.big-img {
  background: no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  margin-top: 3.1875rem; /* The small navbar is 50px tall + 1px border */
  margin-bottom: 2.1875rem;
}
nav.top-nav-short-permanent ~ header > .intro-header {
  margin-top: 5rem;
}
nav.top-nav-short-permanent ~ header > .intro-header.big-img {
  margin-top: 3.1875rem;
}
.intro-header.big-img .big-img-transition {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  transition: opacity 1s linear;
}
.intro-header .page-heading {
  text-align: center;
}
.intro-header.big-img .page-heading,
.intro-header.big-img .post-heading {
  padding: 6.25rem 0;
  color: #FFF;
  text-shadow: 1px 1px 3px #000;
}
.intro-header .page-heading h1 {
  margin-top: 0;
  font-size: 3.125rem;
}
.intro-header .post-heading h1 {
  margin-top: 0;
  font-size: 2.1875rem;
}
.intro-header .page-heading .page-subheading,
.intro-header .post-heading .post-subheading {
  font-size: 1.6875rem;
  line-height: 1.1;
  display: block;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  margin: 0.625rem 0 0;
}
.intro-header .post-heading .post-subheading {
  margin-bottom: 1.25rem;
}
.intro-header.big-img .page-heading .page-subheading,
.intro-header.big-img .post-heading .post-subheading {
  font-weight: 400;
}
.intro-header.big-img .page-heading hr {
  box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  -moz-box-shadow: 1px 1px 3px #000;
}
.intro-header.big-img .post-heading .post-meta {
  color: #EEE;
}
.intro-header.big-img .img-desc {
  background: rgba(30, 30, 30, 0.6);
  position: absolute;
  padding: 0.3125rem 0.625rem;
  font-size: 0.6875rem;
  color: #EEE;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  right: 0;
  bottom: 0;
  display: none;
}
@media (min-width: 1200px) {
  .intro-header {
    margin-top: 8.125rem;
  }
  .intro-header.big-img {
    margin-top: 5.6875rem; /* Full navbar is small navbar + 20px padding on each side when expanded */
  }
  .intro-header.big-img .page-heading,
  .intro-header.big-img .post-heading {
    padding: 9.375rem 0;
  }
  .intro-header .page-heading h1 {
    font-size: 5rem;
  }
  .intro-header .post-heading h1 {
    font-size: 3.125rem;
  }
  .intro-header.big-img .img-desc {
    font-size: 0.875rem;
  }
}

#header-gh-btns {
  margin-bottom: 0.9375rem;
}
@media (max-width: 500px) {
  #header-gh-btns > iframe {
    display: block;
    margin-bottom: 0.3125rem;
  }
}

/* --- Pagination --- */

.pagination {
  margin: 0.625rem 0 0;
  justify-content: space-between;
}

.pagination.blog-pager {
  margin-top: 0;
}

.pagination .page-item.next {
  margin-left: auto;
}

@media (min-width: 768px) {
  .pagination.blog-pager {
    margin-top: 0.625rem;
  }
}

.pagination .page-item .page-link {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 0.625rem 0.3125rem;
  background-color: #FFF;
  border-radius: 0;
  color: #404040;
  padding: 0.75rem 1rem;
}
@media (min-width: 768px) {
  .pagination .page-item .page-link {
    padding: 0.9375rem 1.5625rem;
  }
}
.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:focus {
  color: #FFF;
  border: 1px solid #0085A1;
  background-color: #0085A1;
}

/* --- Tables --- */

table {
  padding: 0;
}
table tr {
  border-top: 1px solid #cccccc;
  background-color: #ffffff;
  margin: 0;
  padding: 0;
}
table tr:nth-child(2n) {
  background-color: #f8f8f8;
}
table tr th {
  font-weight: bold;
  border: 1px solid #cccccc;
  text-align: left;
  margin: 0;
  padding: 0.375rem 0.8125rem;
}
table tr td {
  border: 1px solid #cccccc;
  text-align: left;
  margin: 0;
  padding: 0.375rem 0.8125rem;
}
table tr th :first-child,
table tr td :first-child {
  margin-top: 0;
}
table tr th :last-child,
table tr td :last-child {
  margin-bottom: 0;
}

/* --- Code blocks --- */

code {
  padding: 0.125rem 0.25rem;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 0.25rem;
}

pre code {
  padding: 0;
  background-color: transparent;
  border-radius: 0;
}

pre {
  font-size: 0.875rem;
  line-height: 1.5em;
  border-radius: 0.25rem;
  padding: 0.59375rem;
}
.highlight pre {
  border: none;
  background: none;
  margin: 0;
}
.highlight > pre {
  background-image: linear-gradient(
    rgba(0,0,0,0.03), rgba(0,0,0,0.03) 1.5em, rgba(0,0,0,0.02) 1.5em, rgba(0,0,0,0.02) 3em);
  background-size: auto 3em;
  background-position-y: 0.625rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-left: 0.4375rem solid #444;
}
.highlight > pre:not([class~="highlight"]) { /* code block with line number */
  padding: 0;
}
.highlight table,
.highlight tr,
.highlight td { /* to be removed after fixing table styles */
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}
.highlight pre.lineno {
  color: rgba(0,0,0,0.3);
  border-radius: 0;
  border-right: 2px solid #444;
}

/* Make line numbers unselectable: excludes line numbers from copy-paste user ops */
.lineno {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.lineno::selection, .lineno::-moz-selection {
  background: none;
}

/* Fix table border github gist snippets */

.gist, .gist-file table tr {
  border: unset;
}

.gist, .gist-file table tr td {
  border: unset;
}

/* --- Social media sharing section --- */

#social-share-section {
  margin-bottom: 1.875rem;
  margin-top: 1.875rem;
}

/* --- Notification boxes --- */
.box-note,
.box-warning,
.box-error,
.box-success {
  padding: 0.9375rem 0.9375rem 0.9375rem 0.625rem;
  margin: 1.25rem 1.25rem 1.25rem 0.3125rem;
  border: 1px solid #eee;
  border-left-width: 0.3125rem;
  border-radius: 0.3125rem 0.1875rem 0.1875rem 0.3125rem;
}

.box-note {
  background-color: #eee;
  border-left-color: #2980b9;
}

.box-warning {
  background-color: #fdf5d4;
  border-left-color: #f1c40f;
}

.box-error {
  background-color: #f4dddb;
  border-left-color: #c0392b;
}

.box-success {
  background-color: #98FB98;
  border-left-color: #3CB371;
}

/* --- Misc blog post styles --- */

.blog-post :first-child {
  margin-top: 0;
}

.blog-post img {
  max-width: 100%;
}

.blog-post .caption {
  text-align: center;
  font-size: 0.875rem;
  padding: 0.625rem;
  font-style: italic;
  color: #777;
  margin: 0;
  display: block;
  border-bottom-right-radius: 0.3125rem;
  border-bottom-left-radius: 0.3125rem;
}

.blog-post hr {
  max-width: 25%;
  border-width: 0.25rem;
  border-radius: 0.1875rem;
  border-color: #808080;
}

.blog-post blockquote {
  padding: 0.625rem 1.25rem;
  margin: 0 0 1.25rem;
  font-size: 1.1rem;
  border-left: 0.3125rem solid #eee;
}

.blog-post blockquote p:last-child {
  margin-bottom: 0;
}

.center {
  display: block;
  margin: 0 auto;
}

/* Search bar */
#beautifuljekyll-search-overlay {
  display: none;
  z-index: 999999;
  position: fixed;
  background: rgba(0,0,0,0.9);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  padding: 1rem;
}
#nav-search-exit {
  position: absolute;
  top: 1.5rem;
  cursor: pointer;
  right: 25%;
  margin-right: 2rem;
  color: #555;
  font-size: 2rem;
  line-height: 2rem;
  font-weight: bold;
}
#nav-search-exit:hover {
  color: #000;
}
#nav-search-input {
  text-align: center;
  background: #e7edee;
  margin: auto;
  display: block;
  font-size: 2rem;
  width: 50%;
  transition: width 300ms ease;
  color: #222;
  border-radius: 5rem;
  outline: none;
  border: none;
  padding: 0 3rem;
}
@media (max-width: 1199px) {
  #nav-search-input {
    width: 75%;
  }
  #nav-search-exit {
    right: 12.5%;
  }
}
@media (max-width: 767px) {
  #nav-search-input {
    width: 100%;
  }
  #nav-search-exit {
    right: 0;
  }
}
#nav-search-input:focus {
  background: #f3f8fe;
  box-shadow: 0px 0.15rem 1rem #e7f4ff;
  outline: none;
}

#nav-search-input::placeholder {
  color: #777;
}

#search-results-container {
  list-style: none;
  padding-left: unset;
  margin-top: 1.5rem;
  color: #fff;
  font-size: 1.5rem;
  max-height: calc(100vh - 6.5rem);
  overflow-y: auto;
}
#search-results-container a {
  color: #fff;
  text-decoration: none;
}
#search-results-container a:hover {
  color: #fff;
  text-decoration: underline;
}

#nav-search-icon {
  display: inline-block;
}
#nav-search-text {
  display: none;
}

@media (max-width: 1199px) {
  #nav-search-icon {
    display: none;
  }
  #nav-search-text {
    display: inline-block;
  }
}

/* Card styling */
.menu-card {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* Remove fixed width to allow responsiveness */
  /* Add margin to ensure spacing between cards */
  margin: 0.5rem; /* Adjust this value to increase spacing */
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%; /* This will make sure all cards in the same row are of equal height */
}

.card-body {
  flex: 1; /* This will make the card body take up as much space as possible, pushing the footer to the bottom */
}

/* Image styling */
.menu-item-image {
  /* Responsive width with a max-width to control the size */
  width: 100%; /* Responsive: takes up 100% of the .menu-card width */
  max-width: 500px; /* Control the maximum size of the image */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover;
  /* Center the image if it's not filling the entire card */
  margin-left: auto;
  margin-right: auto;
}

.menu-item-image:hover {
  opacity: 0.8; /* Slightly see-through */
  transition: opacity 0.3s ease-in-out;
}

/* Custom padding for the container */
@media (min-width: 1199px) {
  .custom-padding {
    padding-left: 105px; /* This adds padding inside the container */
    padding-right: 105px;
  }
}

/* Style for images within the modal */
.modal-body .img-fluid {
  max-width: 100%;  /* Ensures the image is responsive and doesn't exceed its container */
  height: auto;     /* Maintains the aspect ratio */
  max-height: 500px; /* Adjust this value to fit your design */
}

.modal-disclaimer {
  font-size: x-small;
  color: grey;
}

.modal-price {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1em; /* Matches the body text size */
  font-weight: 300; /* Lighter font-weight */
  color: #555; /* A subtle dark grey, less harsh than black */
  text-decoration: wavy; /* Underline can highlight the price subtly */
  padding: 0; /* No padding */
  background-color: transparent; /* No background */
  margin-top: 0.5rem; /* Less margin, just enough to separate it from the text above */
  display: inline; /* No block-level container */
}

/* If you want to keep the price on its own line but minimal */
.modal-price::before {
  font-weight: normal; /* Standard weight for the label */
  color: #999; /* A lighter grey for the label */
}



/* About Me Page Specific Styles */
.about-me-container {
  font-family: 'Georgia', serif;
  color: #444;
  line-height: 1.6;
}

.about-me-container h1 {
  font-size: 2.5rem;
  color: #333;
  text-align: center;
  margin-bottom: 0.5rem;
}

.about-me-container h2 {
  font-size: 1.75rem;
  color: #555;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.about-me-container em {
  font-style: italic;
  color: #555;
}

.about-me-container strong {
  font-weight: bold;
  color: #333;
}

.about-me-container .signature-delights,
.about-me-container .sweet-creations,
.about-me-container .chocolate-dipped,
.about-me-container .more-than-a-bakery {
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.about-me-container .signature-delights {
  background-color: #fff;
}

.about-me-container a {
  color: #337ab7;
  text-decoration: none;
}

.about-me-container a:hover {
  text-decoration: underline;
}

.about-me-container .social-links-container a {
  margin: 0 10px;
}

.about-me-container .footer-signature {
  text-align: center;
  margin-top: 2rem;
  font-style: italic;
  font-size: 1rem;
}

/* Responsive design adjustments */
@media (max-width: 768px) {
  .about-me-container h1 {
    font-size: 2rem;
  }

  .about-me-container h2 {
    font-size: 1.5rem;
  }
}

/* .google-form-embed {
  width: 100%; 
  height: 2250px; 
  border: none;
} */

/* Responsive height for smaller screens */
/* @media (max-width: 768px) {
  .google-form-embed {
    height: 2250px; 
  }
} */

/* --- Homepage Cards --- */

.homepage-category-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center the cards horizontally */
  gap: 20px; /* Spacing between cards */
  margin-top: 40px;
  padding: 0 20px; /* Padding on the left and right of the card container */
}

.category-card {
  flex: 1 1 300px; /* Cards will have a minimum width of 300px */
  max-width: 400px; /* Set a maximum width for consistency */
  margin: 10px; /* Margin around each card */
  border: none;
  border-radius: 15px; /* Rounded corners for a modern look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  text-align: center;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
  background-color: #ffffff; /* White background for the card */
}

.category-card h2 {
  margin: 15px 0 10px;
  font-size: 1rem !important; /* Reduce the font size to be smaller */
  font-family: 'Playfair Display', serif; /* Maintain the elegant, artistic font */
  font-weight: 500;
  color: #4A5A4F; /* Soft green color */
  letter-spacing: 1px; /* Slight letter spacing for readability */
  text-transform: uppercase; /* Makes the text uppercase for consistency */
}

.category-card h2::after {
  content: " \279C"; /* Adds an arrow after the text to indicate clickability */
  font-weight: bold; /* Makes the arrow more prominent */
  margin-left: 5px; /* Adds a small space between the text and the arrow */
}

.category-card:hover {
  transform: translateY(-5px); /* Lift the card slightly when hovered */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Increase shadow on hover for emphasis */
}

.card-img {
  width: 100%; /* Image takes full width of the card */
  height: 500px; /* Fixed height for consistent card sizing */
  object-fit: cover; /* Ensure the image covers the area without distortion */
}

/* --- Menu Page Cards --- */

/* Page Wrapper */
.menu-page {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Playfair Display', serif; /* Elegant serif font for an upscale look */
}

/* Centered and Elegant Header Styling */
.menu-header h1 {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  color: #355c47; /* Soft green color for a nature-inspired touch */
  margin-bottom: 2rem;
  letter-spacing: 0.1rem;
}

.menu-header-featured {
  font-size: 2rem; /* Slightly smaller than the main header */
  font-weight: 700;
  text-align: center;
  color: #355c47; /* Using the same soft green color */
  margin-bottom: 1.5rem; /* Provide a bit of spacing below */
  letter-spacing: 0.1rem;
}

.menu-items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* Center the menu items horizontally */
}

.menu-item-card {
  flex: 1 1 300px; /* Cards will have a minimum width of 300px */
  max-width: 400px; /* Set a maximum width for consistency */
  margin: 10px; /* Margin around each card */
  border-radius: 15px; /* Rounded corners for a modern look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
  background-color: #ffffff; /* White background for the card */
}

.menu-item-card:hover {
  transform: translateY(-5px); /* Lift the card slightly when hovered */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Increase shadow on hover for emphasis */
}

.menu-item-img {
  width: 100%; /* Image takes full width of the card */
  height: 300px; /* Fixed height for consistent card sizing */
  object-fit: cover; /* Ensure the image covers the area without distortion */
}

.menu-item-details {
  padding: 20px; /* Padding inside the card for content spacing */
  text-align: center;
}

.menu-item-details h2 {
  font-family: 'Playfair Display', serif; /* Elegant, artistic font for menu item titles */
  font-weight: 400;
  font-size: 1.5rem; /* Font size for the menu item title */
  color: #355c47; /* Soft green color to match bakery theme */
  margin-bottom: 10px; /* Space below the title */
}

.menu-item-price {
  font-weight: bold; /* Highlight the price */
  color: #355c47; /* Soft green color to match bakery theme */
  margin-top: 10px; /* Space above the price */
}

@media (max-width: 768px) {
  .category-card, .menu-item-card {
    flex: 1 1 100%; /* Cards take full width on smaller screens */
    max-width: 100%;
  }
}



/* --- Lightbox Gallery CSS --- */
.cake-lightbox-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem; /* Add spacing below the gallery */
}

.lightbox-item {
  width: calc(25% - 1rem);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.lightbox-item:hover {
  transform: scale(1.05);
}

.lightbox-thumbnail {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Lightbox Modal */
.lightbox-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}

.lightbox-content {
  display: block;
  margin: auto;
  max-width: 80%;
  max-height: 80%;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 2rem;
  color: #ffffff;
  cursor: pointer;
}

/* --- Masonry Gallery CSS --- */
.cake-masonry-gallery {
  column-count: 3;
  column-gap: 1rem;
  margin: 2rem auto;
  max-width: 1200px;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 10px;
}

.masonry-img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.masonry-item:hover .masonry-img {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* --- Carousel Gallery CSS --- */
/* --- Updated Carousel Gallery CSS --- */
.cake-carousel-gallery-wrapper {
  max-width: 80%; /* Adjust to set width, e.g., 80% of the container */
  height: 300px;  /* Set height of the gallery wrapper */
  overflow-x: scroll; /* Enable horizontal scrolling */
  overflow-y: hidden; /* Prevent vertical scrolling */
  margin: 0 auto 2rem auto; /* Center the gallery with some spacing below */
  white-space: nowrap; /* Ensure all items are on one line */
  padding: 10px;
  border-radius: 15px; /* Adds a rounded border for aesthetics */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds a soft shadow to distinguish */
  background-color: #f9f9f9; /* Adds a light background color for contrast */
}

.cake-carousel-gallery {
  display: inline-block; /* Allow inline block layout for horizontal scroll */
}

.carousel-inner {
  display: flex; /* Use flex for better control of spacing */
  gap: 15px; /* Space between images */
}

.carousel-item {
  flex: 0 0 auto; /* Prevent flex items from growing or shrinking */
  width: 200px; /* Set consistent width for each item */
  height: 300px; /* Set consistent height for each item */
  border-radius: 10px; /* Rounded corners */
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

.carousel-img {
  width: 100%; /* Full width of the carousel item */
  height: 100%; /* Full height of the carousel item */
  object-fit: cover; /* Cover the item without stretching */
}


/* Caption Styling */
.caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  padding: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  border-radius: 6px;
  text-align: center;
  max-width: 90%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Carousel Controls */
.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  transition: background-color 0.3s ease;
}

.carousel-control-prev {
  left: 20px;
}

.carousel-control-next {
  right: 20px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Active Indicator Dot */
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.carousel-indicators .dot {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}

.carousel-indicators .dot.active {
  background: #ffffff;
}

.menu-item-link {
  text-decoration: none; /* Remove underline from the link */
  color: inherit; /* Ensure the link takes on the text color of the menu item */
  display: block; /* Make the link fill the entire menu item card */
}

.menu-item-link:hover .menu-item-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Add a subtle shadow to indicate the card is clickable */
  transform: translateY(-2px); /* A slight lift effect for better UX */
  transition: all 0.3s ease; /* Smooth transition effect */
}

.full-menu-img {
  max-width: 90%;
  height: auto;
  border-radius: 15px;
  margin: 0 auto;
  display: block;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a soft shadow for emphasis */
}

/* --- Sold Out Overlay --- */

/* Add a "sold-out" class to the image itself to change opacity */
.sold-out {
  opacity: 0.4; /* Make the image appear less vivid to indicate it's sold out */
}

/* Wrapper for sold-out overlay without affecting image layout */
.menu-item-img-wrapper {
  position: relative;
}

/* Sold out overlay that will cover the image */
.sold-out-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.75); /* Semi-transparent dark overlay */
  color: white;
  padding: 10px 20px;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 10px;
  text-align: center;
  pointer-events: none; /* Ensure overlay does not block user interactions */
  z-index: 2; /* Keep overlay above image */
}