.popup-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.popup-content {
  background: white;
  padding: 24px;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.popup-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}

.popup-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
}

.popup-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.popup-button {
  padding: 10px 16px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.popup-cancel {
  background: #eee;
  color: #333;
}

.popup-continue {
  background: #3b82f6;
  color: white;
}

.popup-continue:hover {
  background: #2563eb;
}
#flout-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #2d3748;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  z-index: 9999;
}
#flout-toast.show {
  opacity: 1;
}
.yes {
  color: green;
  font-weight: bold;
}
.partial {
  color: orange;
  font-weight: bold;
}
.no {
  color: red;
  font-weight: bold;
}
.firebaseui-container input {
  margin: 18px 0;
  padding: 8px;
}

.firebaseui-container label {
  display: block;
  margin-bottom: 4px;
}
.button-2 {
  display: inline-block;
  height: auto;
  padding: 12px 26px;
  background-color:#87CEFA;
 font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
  text-decoration: none;
  border-radius: 3px;

}
.button-2:hover {
  cursor: pointer;
  background-color: #87AFC7; /* Slightly darker shade of blue */
  transform: translateY(-3px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
 /* Navbar Container */
        .navbar {
          background-color: #0074D9;
          padding: 5px 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }

      /* Logo */
      .navbar a {
          color: white;
          text-decoration: none;
          font-size: 1.2rem;
          font-weight: bold;
      }

      /* Desktop Menu */
      .nav-links {
          display: flex;
          gap: 15px;
      }

      .nav-links a {
          color: white;
          text-decoration: none;
          padding: 10px;
      }

      .nav-links a:hover {
          background: rgba(255, 255, 255, 0.2);
          border-radius: 5px;
      }

      /* Mobile Menu (Hidden by Default) */
      .mobile-menu {
          display: none;
          flex-direction: column;
          background: #005bb5;
          padding: 10px;
      }

      .mobile-menu a {
          color: white;
          text-decoration: none;
          padding: 10px;
      }

      /* Hamburger Button */
      .hamburger {
          display: none;
          font-size: 1.8rem;
          background: none;
          border: none;
          color: white;
          cursor: pointer;
      }

      /* Responsive Styles */
      @media (max-width: 768px) {
          .nav-links {
              display: none;
          }

          .hamburger {
              display: block;
          }

          .mobile-menu {
              display: none;
          }

          .mobile-menu.show {
              display: flex;
          }
      }
      /* Section Styling */
.custom-section {
  position: relative;
  padding: 44px 0; /* Equivalent to py-11 */
  padding-bottom: 32px; /* Equivalent to pb-8 */
}

/* Container */
.custom-container {
  position: relative;
  max-width: 1206px;
  width: 100%;
  margin: 0 auto;
  padding: 0 18px;
}

/* Grid Layout */
.custom-grid {
  display: grid;
  grid-template-columns: 1fr; /* Default: single column */
  gap: 70px;
}

/* Text Styling */
.text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.heading {
  font-size: 34px;
  font-weight: bold;
  line-height: 1.2;
  color: var(--dark-text-color);
}

.description {
  margin-top: 14px;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dark-text-color);
}

/* Image Styling */
.image-container {
  display: flex;
  justify-content: center;
}

.image {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Responsive Adjustments */
@media (min-width: 768px) {
  .custom-section {
      padding-bottom: 100px; /* Equivalent to md:pb-[100px] */
  }
  .custom-grid {
      grid-template-columns: 1fr 1fr; /* Two-column layout on medium screens */
      gap: 24px; /* Equivalent to md:gap-6 */
  }
  .text-container {
      padding-top: 32px;
      text-align: left;
  }
  .heading {
      font-size: 40px;
      max-width: 534px;
  }
  .description {
      font-size: 16px;
      max-width: 470px;
      line-height: 1.5;
  }
}

@media (min-width: 1024px) {
  .heading {
      font-size: 44px;
  }
}

@media (min-width: 1280px) {
  .heading {
      font-size: 60px;
      line-height: 65px;
  }
}

.button-container {
  display: flex;
  gap: 20px; /* Space between buttons */
  position: absolute;
  right: 5%; /* Adjust to move in from the right */
}

@media (max-width: 768px) {
  .button-container {
    right: 2%; /* Move left responsively */
  }
}

@media (max-width: 480px) {
  .button-container {
    right: 0; /* Align closer to the left on small screens */
  }
}

.w-6 {
    width: 1.5rem
  }

  .font-semibold {
    font-weight: 600
  }

  .right-2 {
    right: 0.5rem
  }

  .pb-3 {
    padding-bottom: 0.75rem
  }

  .leading-6 {
    line-height: 1.5rem
  }

  .mt-5 {
    margin-top: 1.25rem
  }

  .p-0 {
    padding: 0px
  }

  .mb-7 {
    margin-bottom: 1.75rem
  }

  .mt-3 {
    margin-top: 0.75rem
  }

  .relative {
    position: relative
  }

  .ml-1 {
    margin-left: 0.25rem
  }

  .pb-10 {
    padding-bottom: 2.5rem
  }

  .leading-none {
    line-height: 1
  }

  .mb-4 {
    margin-bottom: 1rem
  }

  .mt-4 {
    margin-top: 1rem
  }

  .transition-colors {
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
  }

  .pb-7 {
    padding-bottom: 1.75rem
  }

  .fa-solid,
  .items-start {
    align-items: flex-start
  }

  .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
  }

  .h-5 {
    height: 1.25rem
  }

  .gap-2 {
    gap: 0.5rem
  }

  .mx-auto {
    margin-left: auto;
    margin-right: auto
  }

  .h-20 {
    height: 5rem
  }

  :host,
  :root {
    --fa-style-family-sharp-duotone: "Font Awesome 6 Sharp Duotone";
    --fa-font-sharp-duotone-thin: normal 100 1em/1 "Font Awesome 6 Sharp Duotone"
  }

  img,
  video {
    max-width: 100%;
    height: auto
  }

  .resize-none {
    resize: none
  }

  button,
  input:where([type=button]),
  input:where([type=reset]),
  input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
  }

  .justify-end {
    justify-content: flex-end
  }

  .mb-5 {
    margin-bottom: 1.25rem
  }

  .top-10 {
    top: 2.5rem
  }

  .font-bold {
    font-weight: 700
  }

  .py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
  }

  .border {
    border-width: 1px
  }

  .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
  }

  .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
  }

  .top-0 {
    top: 0px
  }

  .italic {
    font-style: italic
  }

  .mb-3 {
    margin-bottom: 0.75rem
  }

  .mb-9 {
    margin-bottom: 2.25rem
  }

  .hidden {
    display: none
  }

  .items-end {
    align-items: flex-end
  }

  .gap-0 {
    gap: 0px
  }

  .leading-9 {
    line-height: 2.25rem
  }

  .text-base {
    font-size: 1rem;
    line-height: 1.5rem
  }

  .justify-between {
    justify-content: space-between
  }

  .py-11 {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem
  }

  .pt-24 {
    padding-top: 6rem
  }

  .gap-5 {
    gap: 1.25rem
  }

  .font-light {
    font-weight: 300
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0
  }

  .z-50 {
    z-index: 50
  }

  blockquote,
  dd,
  dl,
  figure,
  hr,
  p,
  pre {
    margin: 0
  }

  .mb-2 {
    margin-bottom: 0.5rem
  }

  .z-20 {
    z-index: 20
  }

  .max-w-full {
    max-width: 100%
  }

  :host,
  :root {
    --fa-font-sharp-light: normal 300 1em/1 "Font Awesome 6 Sharp"
  }

  .overflow-hidden {
    overflow: hidden
  }

  .flex-shrink-0 {
    flex-shrink: 0
  }

  .text-left {
    text-align: left
  }

  .leading-normal {
    line-height: 1.5
  }

  .px-8 {
    padding-left: 2rem;
    padding-right: 2rem
  }

  textarea {
    resize: vertical
  }

  .justify-start {
    justify-content: flex-start
  }

  .grid {
    display: grid
  }

  .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .flex-1 {
    flex: 1 1 0%
  }

  .gap-6 {
    gap: 1.5rem
  }

  .mt-9 {
    margin-top: 2.25rem
  }

  :host,
  :root {
    --fa-font-sharp-solid: normal 900 1em/1 "Font Awesome 6 Sharp"
  }

  .flex-wrap {
    flex-wrap: wrap
  }

  .w-5 {
    width: 1.25rem
  }

  .w-8 {
    width: 2rem
  }

  .w-full {
    width: 100%
  }

  .gap-3 {
    gap: 0.75rem
  }

  .py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem
  }

  .absolute {
    position: absolute
  }

  .w-20 {
    width: 5rem
  }

  .fa-regular,
  .border-b {
    border-bottom-width: 1px
  }

  .pb-6 {
    padding-bottom: 1.5rem
  }

  .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
  }

  .text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1))
  }

  .mt-6 {
    margin-top: 1.5rem
  }

  .font-medium {
    font-weight: 500
  }

  .pr-0 {
    padding-right: 0px
  }

  .flex-col {
    flex-direction: column
  }

  .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem
  }

  .w-11 {
    width: 2.75rem
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
  }

  .block {
    display: block
  }

  .mt-8 {
    margin-top: 2rem
  }

  code,
  kbd,
  pre,
  samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
  }

  .gap-4 {
    gap: 1rem
  }

  .pt-8 {
    padding-top: 2rem
  }

  .duration-500 {
    transition-duration: 500ms
  }

  body {
    margin: 0;
    line-height: inherit
  }

  .top-full {
    top: 100%
  }

  .gap-8 {
    gap: 2rem
  }

  .bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
  }

  .pb-5 {
    padding-bottom: 1.25rem
  }

  .left-0 {
    left: 0px
  }

  .px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
  }

  .h-11 {
    height: 2.75rem
  }

  .overflow-x-scroll {
    overflow-x: scroll
  }

  :root {
  --accent-color: #F4A261;
  --accent2-color: #E9C46A;
  --accent3-color: #F4F1DE;
  --accent4-color: #2E4053;
  --primary-color: #2A9D8F;
  --dark-text-color: #264653;
  --gray-text-color: #8D99AE;
  --button-padding-x: 16px;
  --button-padding-y: 10px;
  --font-family-body: 'Open Sans', sans-serif;
  --light-text-color: #FFFFFF;
  --dark-border-color: #34495E;
  --light-border-color: #DADADA;
  --font-family-heading: 'Nunito', sans-serif;
  --button-rounded-radius: 8px;
  --dark-background-color: #121212;
  --light-background-color: #E0F2EF;
  --medium-background-color: #C9E5DD;
  --primary-button-bg-color: #2A9D8F;
  --primary-button-text-color: #FFFFFF;
  --secondary-button-bg-color: #E76F51;
  --secondary-button-text-color: #FFFFFF;
  --primary-button-hover-bg-color: #1F7F6B;
  --primary-button-hover-text-color: #FFFFFF;
  --secondary-button-hover-bg-color: #C65D44;
  --secondary-button-hover-text-color: #FFFFFF;
}


  .px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem
  }

  .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
  }

  .border-t {
    border-top-width: 1px
  }

  .object-cover {
    object-fit: cover
  }

  .text-center {
    text-align: center
  }

  .pb-4 {
    padding-bottom: 1rem
  }

  .object-center {
    object-position: center
  }

  .p-8 {
    padding: 2rem
  }

  .mb-14 {
    margin-bottom: 3.5rem
  }

  .mb-6 {
    margin-bottom: 1.5rem
  }

  .rounded-full {
    border-radius: 9999px
  }

  .object-contain {
    object-fit: contain
  }

  .items-center {
    align-items: center
  }

  .font-normal {
    font-weight: 400
  }

  .text-balance {
    text-wrap: balance
  }

  .h-full {
    height: 100%
  }

  .pb-9 {
    padding-bottom: 2.25rem
  }

  :host,
  :root {
    --fa-font-sharp-regular: normal 400 1em/1 "Font Awesome 6 Sharp"
  }

  .border-solid {
    border-style: solid
  }

  .justify-center {
    justify-content: center
  }

  .cursor-pointer {
    cursor: pointer
  }

  .pb-8 {
    padding-bottom: 2rem
  }

  audio,
  canvas,
  embed,
  iframe,
  img,
  object,
  svg,
  video {
    display: block;
  }

  [role=button],
  button {
    cursor: pointer
  }

  .mb-11 {
    margin-bottom: 2.75rem
  }

  .mt-2 {
    margin-top: 0.5rem
  }

  button,
  select {
    text-transform: none
  }

  .pb-12 {
    padding-bottom: 3rem
  }

  :host,
  :root {
    --fa-font-sharp-duotone-solid: normal 900 1em/1 "Font Awesome 6 Sharp Duotone"
  }

  .mt-0 {
    margin-top: 0px
  }

  .ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
  }

  b,
  strong {
    font-weight: bolder
  }

  .flex-col-reverse {
    flex-direction: column-reverse
  }

  .pl-4 {
    padding-left: 1rem
  }

  a {
    color: inherit;
    text-decoration: inherit
  }

  .flex {
    display: flex
  }

  .outline-0 {
    outline-width: 0px
  }

  .flex-grow {
    flex-grow: 1
  }

  .pt-5 {
    padding-top: 1.25rem
  }

  .right-0 {
    right: 0px
  }

  .pb-0 {
    padding-bottom: 0px
  }

  :host,
  :root {
    --fa-style-family-sharp: "Font Awesome 6 Sharp";
    --fa-font-sharp-thin: normal 100 1em/1 "Font Awesome 6 Sharp"
  }

  menu,
  ol,
  ul {
    list-style: none;
    margin: 0;
    padding: 0
  }

  .ml-0 {
    margin-left: 0px
  }

  .bottom-0 {
    bottom: 0px
  }

  .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
  }
  table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f2f2f2;
}
th:nth-child(1) { width: 190px;} /* Item Name */
.centered-content {
    max-width: 95%;
    margin: 0 auto;
    padding: 20px;
}
.documentation-section {
    margin: 20px;
    padding: 20px;
    border: 1px solid #ccc;
}

.documentation-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.documentation-section h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.documentation-section h4 {
    font-size: 16px;
    margin-bottom: 5px;
}

.documentation-section p {
    margin-bottom: 10px;
}

.documentation-section ul {
    margin-bottom: 10px;
    padding-left: 20px;
}

.documentation-section li {
    margin-bottom: 5px;
}

.documentation-section pre {
    background-color: #f0f0f0;
    padding: 10px;
    border: 1px solid #ccc;
    overflow-x: auto;
    position: relative;
}

.documentation-section code {
    font-family: monospace;
}

.copy-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
}

.documentation-section.pro-css-usage {
    margin: 20px;
    padding: 20px;
    border: 2px solid #007bff; /* A strong border to distinguish the section */
    background-color: #f8f9fa; /* A light background color */
}

.documentation-section.pro-css-usage h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #007bff; /* A distinct color for the heading */
}

.documentation-section.pro-css-usage h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
}

.documentation-section.pro-css-usage p {
    margin-bottom: 10px;
}

.documentation-section.pro-css-usage ul {
    margin-bottom: 10px;
    padding-left: 20px;
}

.documentation-section.pro-css-usage li {
    margin-bottom: 5px;
}

.documentation-section.pro-css-usage pre {
    background-color: #e9ecef;
    padding: 10px;
    border: 1px solid #ced4da;
    overflow-x: auto;
    position: relative;
}

.documentation-section.pro-css-usage code {
    font-family: monospace;
}

.documentation-section.pro-css-usage .pro-css-example {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ced4da;
    background-color: #fff;
}

.documentation-section.pro-css-usage .pro-css-important {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #dc3545; /* A red border to indicate importance */
    background-color: #f8d7da; /* A light red background color */
    color: #721c24;
}

.code-block {
    background-color: #f4f4f4; /* Softer background */
    color: #333;
    padding: 10px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #ddd;
    font-family: monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 12px;
}
.copy-btn {
    display: inline-flex;
    align-items: center;
    background: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 3px;
}
.copy-btn:hover {
    background: #0056b3;
}
.copy-icon {
    margin-right: 5px;
}
.check-icon {
    display: none; /* Initially hidden */
    margin-left: 5px;
    color: green;
}
   /* Global Heading Styles */
    h1, h2, h3, h4, h5, h6 {
        font-family: Arial, sans-serif  !important;  /* Use a clean, readable font */
        font-weight: bold  !important;               /* Make headings stand out */
        margin-bottom: 10px  !important;             /* Add spacing below headings */
        padding: 20px;
    }

    /* Specific Styles for Each Heading */
    h1 {
        font-size: 32px  !important;
        color: #0074D9  !important; /* Blue */
    }

    h2 {
        font-size: 28px  !important;
        color: #005bb5  !important; /* Darker Blue */
    }

    h3 {
        font-size: 24px  !important;
        color: #003f80  !important; /* Even Darker Blue */
    }

    h4 {
        font-size: 20px  !important;
        color: #002855  !important;
    }

    h5 {
        font-size: 18px  !important;
        color: #001f3f  !important;
    }

    h6 {
        font-size: 16px  !important;
        color: #001233  !important;
    }
    .pricing-table {
        width: 80%;
        max-width: 800px;
        margin: auto;
        border-collapse: collapse;
        background: white;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #404040; /* Ensure table border is visible */
        outline: 1px solid #404040; /* Fix missing perimeter border */
    }
    
    .pricing-table th, 
    .pricing-table td {
        padding: 15px;
        text-align: center;
        border: 1px solid #404040; /* Ensure cell borders are visible */
    }
    
    .pricing-table th {
        background-color: #0074D9;
        color: white;
        font-size: 18px;
    }
    
    .pricing-table tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    
    .pricing-table tr:hover {
        background-color: #f1f1f1;
    }
    .price {
        font-size: 20px;
        font-weight: bold;
        color: #0074D9;
    }
    .calculator-container {
        background: white;
        width: 80%;
        max-width: 600px;
        margin: auto;
        padding: 20px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }
    label {
        font-weight: bold;
        display: block;
        margin-top: 10px;
    }
    select, input {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .result {
        margin-top: 20px;
        font-size: 18px;
        font-weight: bold;
        color: #0074D9;
    }
    .recommended-plan {
        margin-top: 10px;
        font-size: 20px;
        font-weight: bold;
        color: #005bb5;
    }