.navbar-item {
  font-size: large !important;
}

.navbar-item:hover {
  background-color: white !important;
  color: black !important;
}
#carousel-section {
  background-color: #f7f7f7 !important;
  padding: 50px 0;
  margin-bottom: 50px;
}

#carousel-demo {
  margin-top: 50px;
}

#card-product-description {
  color: orange;
}

.is-white-text-title {
  color: white !important;
  text-transform: uppercase;
}

.is-256x256 {
  width: 256px !important;
  height: 256px !important;
}

#contact-section {
  background-image: url(https://technext.github.io/tropika//images/orange-dish.png);
  background-repeat: no-repeat;
  height: 500px;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-top: 50px;
  margin-bottom: 100px;
  background-position: right center;
  overflow: hidden;
}

input.is-custom-field {
  border-bottom: 0.8px solid #252525 !important;
  outline: none;
  border: none;
  box-shadow: none !important;
  /* width: 90% !important; */
  border-radius: unset;
}

textarea {
  border-bottom: 0.8px solid #252525 !important;
  outline: none !important;
  border: none;
  box-shadow: none !important;
  border-radius: unset;
  border-color: none !important;
  outline-color: none !important;
}

#map {
  width: 100% !important;
  height: 400px;
  margin-bottom: 50px;
}

.footer-main {
  background-color: white !important;
  padding: 0 !important;
}

.footer-secondary {
  padding: 20px;
  margin-top: 20px;
}

.button.is-black {
  background-color: black !important;
  color: white !important;
}

.button.is-orange {
  background-color: #fc5d35 !important;
  color: white !important;
}

.button.is-orange:hover {
  background-color: white !important;
  color: #fc5d35 !important;
}
.button.is-black:hover {
  background-color: white !important;
  color: black !important;
}

.is-black-social {
  color: black !important;
}
.is-black-social:hover {
  background-color: white !important;
  color: #fc5d35 !important;
}
/* General text styling */
.markdown {
  font-family: sans-serif;
  line-height: 1.6;
  color: #333;
}

/* Headings */
.markdown h1 { font-size: 1.4em; margin-bottom: 0.2em; }
.markdown h2 { font-size: 1.3em; margin-bottom: 0.2em; }
.markdown h3 { font-size: 1.2em; margin-bottom: 0.2em; }
.markdown h4, 
.markdown h5, 
.markdown h6 { font-size: 1.1em; margin-bottom: 0.2em; }

/* Paragraphs and blockquotes */
.markdown p { margin-bottom: 1em; }
.markdown blockquote {
  border-left: 4px solid #ccc;
  padding-left: 1em;
  font-style: italic;
  color: #666;
}

/* Lists */
.markdown ul, 
.markdown ol { padding-left: 1.5em; margin-bottom: 1em; }
.markdown li { margin-bottom: 0.5em;     list-style-type: disc; }

/* Code blocks */
.markdown pre {
  background: #f4f4f4;
  padding: 1em;
  overflow-x: auto;
  border-radius: 5px;
}
.markdown code {
  font-family: monospace;
  background: #f4f4f4;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

/* Tables */
.markdown table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}
.markdown th, 
.markdown td {
  border: 1px solid #ddd;
  padding: 0.5em;
}
.markdown th {
  background: #f8f8f8;
  font-weight: bold;
}

/* Horizontal rule */
.markdown hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 2em 0;
}

/* Links */
.markdown a {
  color: #007bff;
  text-decoration: none;
}
.markdown a:hover {
  text-decoration: underline;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 .goal, .task, .project {
     .button.is-danger {
         visibility: hidden;
     }

     &:hover {
         .button.is-danger {
             visibility: visible;
         }
     }
 }

 .goal--completed,
 .project--completed,
 .task--completed {
     text-decoration: line-through;
 }

 /* Make the Bulma dropdown menu narrower */
.dropdown-menu,
.dropdown-content {
  width: auto;
  min-width: 0;  /* Ensure it doesn't have a minimum width */
  max-width: 100%;  /* Optional: Prevents it from growing too wide */
}
.dropdown-content a {
  padding-left: 0.75rem;  /* Example value */
  padding-right: 0.75rem; /* Example value */
}


@media screen and (max-width: 768px) {
  .no-caret.select::after {
    display: none;
  }
  .no-caret select {
    padding-right: 0.5em; /* Adjust this value as needed */
    width: auto; /* or specify a specific width like 100px */
  }
}

  @media screen and (max-width: 768px) {
    .select.is-mobile-small select {
      font-size: 0.75rem; /* Matches Bulma's .is-small size */
      padding: 0.25rem 0.5rem; /* Matches Bulma's .is-small padding */
      height: auto; /* Adjust if needed */
    }
  }


.alert {
  background-color:  hsl(347, 90%, 96%);
}
.warning {
}

/* Center the dropdown menu under the trigger button */
.dropdown-add-content {
  left: 50%;
  transform: translateX(-50%);
}

.tab-content > div {
  display: none;
}

.tab-content > div.is-active {
  display: block;
}

@media (min-width: 1024px) {
  .is-max-onboarding {
    max-width: 960px;
        margin-left: auto;
    margin-right: auto;
  }
}

.carousel {
  display: flex;
  overflow: hidden;
}

.carousel-item {
  display: flex;
  align-items: center; /* Vertically centers the content */
  justify-content: center; /* Optionally centers the content horizontally */
  min-height: 100%; /* Ensures that all items take up at least the full height of the tallest item */
  width: 100%; /* Adjust this according to your needs, depending on how many items are visible at once */
}

.carousel-content {
  text-align: center; /* Optionally centers the text */
  width: 100%; /* Adjust this if you want to control the width of the content */
}

.middot {
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}

.hp-calendar td {
  table-layout: fixed;
}
.hp-calendar td {
  height: 3.3rem;
}

.inline-action { display: none; }
.inline-edit .inline-action { display: initial; }

/* Fade out around div */
.task {
  border: 3px solid transparent; /* Default state */
}

.task-selected {
  border-color: #f00;
  animation: fadeBorder 3s ease-in-out forwards; /* Trigger fade-out */
}

@keyframes fadeBorder {
  0% {
    border-color: #f00; /* Red at start */
  }
  80% {
    border-color: #f00; /* Red at start */
  }
  100% {
    border-color: transparent; /* Fades out to transparent */
  }
}