.centered-image {
    display: block; /* Images are inline by default; make it block to apply margin: auto */
    margin-left: auto; /* Centers the image horizontally */
    margin-right: auto; /* Centers the image horizontally */
    /* Optional: Add some top/bottom margin if you want space around it */
    margin-top: 20px;
    margin-bottom: 20px;
}

main img.home-page-image {
    display: block; /* Prevent any potential extra spacing below the image */
    margin-bottom: 20px; /* Add some space between the image and the following text */
    width: 100%; /* Ensure it takes the full width of its container */
    height: auto; /* Maintain aspect ratio */
}

main figure {
    float: right; /* Keep the figure (image and caption) floated right */
    margin-left: 20px;
    margin-bottom: 20px;
    max-width: 300px; /* Adjust the maximum width of the figure as needed */
}

main figure img.profile-image {
    display: block; /* Prevent extra space below inline images */
    width: 100%; /* Make the image scale within the figure's width */
    height: auto;
    margin-bottom: 5px; /* Add a little space between the image and caption */
}

main figure figcaption {
    font-size: 0.9em; /* Slightly smaller font size for the caption */
    color: #777; /* Light gray color for the caption text */
    text-align: center; /* Center the caption text below the image */
}

main figure figcaption a {
    color: #007bff; /* Link color for the caption link */
    text-decoration: underline; /* Underline the link */
}

main figure figcaption a:hover {
    color: #0056b3; /* Darker link color on hover */
}

header {
    background-color: #f8f8f8; /* Light gray background */
    text-align: center; /* Center the content within the header */
    padding: 2rem 0;
    border-bottom: 1px solid #eee; /* Subtle bottom border */
    display: flex; /* Add flexbox to the header */
    flex-direction: column; /* Stack the h1 and p vertically */
    align-items: center; /* Center items horizontally in the flex container */
}

header h1 {
    display: flex; /* To easily align items within the h1 */
    align-items: center; /* Vertically align the logo and text */
    margin-bottom: 0.5rem; /* Keep the existing margin */
    font-size: 2rem; /* Keep the existing font size */
    color: #222; /* Keep the existing color */
}

header h1 img.logo-in-title {
    height: 30px; /* Adjust the height as needed */
    margin-right: 10px; /* Add some spacing between the logo and text */
}

header p {
    text-align: center; /* Ensure the paragraph text is also centered */
}

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

.tally-embed {
    border: none;
    width: 100%; /* It's generally a good idea to set the width in CSS */
}

body {
     font-family: sans-serif;
     margin: 0;
     padding: 0;
     line-height: 1.6;
     color: #333; /* Dark gray text for readability */
 }
 
 header {
     background-color: #f8f8f8; /* Light gray background */
     text-align: center;
     padding: 2rem 0;
     border-bottom: 1px solid #eee; /* Subtle bottom border */
 }
 
 header h1 {
     margin-bottom: 0.5rem;
     font-size: 2rem;
     color: #222; /* Darker heading color */
 }
 
 nav {
     text-align: center;
     margin-top: 1rem;
 }
 
 nav a {
     text-decoration: none;
     color: #007bff; /* Primary blue color for links */
     margin: 0 1rem;
     padding: 0.5rem 1rem;
     border-radius: 4px;
     transition: background-color 0.3s ease;
 }
 
 nav a:hover {
     background-color: #e0f0ff; /* Light blue on hover */
 }
 
 main {
     padding: 2rem;
     max-width: 800px;
     margin: 0 auto; /* Center main content */
 }
 
 footer {
     text-align: center;
     padding: 2rem 0;
     background-color: #f8f8f8;
     border-top: 1px solid #eee; /* Subtle top border */
     color: #777; /* Light gray footer text */
 }
 
 footer a {
     color: #007bff; /* Link color */
     text-decoration: none; /* Remove underline */
     margin-left: 10px; /* Add space between copyright and link */
 }
 
 footer a:hover {
     text-decoration: underline; /* Add underline on hover */
 }
 
 /* Responsive adjustments */
 @media (max-width: 600px) {
     main {
         padding: 1rem;
     }
 
     nav a {
         margin: 0 0.5rem;
         padding: 0.3rem 0.6rem;
     }
 }
 
/* Dropdown styles */
.dropdown {
    position: relative; /* Needed to position the dropdown content */
    display: inline-block;
}

.dropbtn {
    background-color: #007bff;
    color: white;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin: 0 1rem;
}

.dropdown-content {
    display: none;
    position: absolute; /* Position it relative to the .dropdown container */
    background-color: #f9f9f9;
    min-width: 300px; /* Keep the minimum width */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 4px;
    left: 50%; /* Position the left edge at the center of the container */
    transform: translateX(-50%); /* Shift it back by half of its width */
    top: 100%; /* Position it below the button */
    margin-top: 0.2rem; /* Add a small gap between the button and the dropdown */
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #0056b3;
}

/* --------------------------------------- Follow.it Styles ------------------------------------------------------ */



/* New Wrapper for the entire form including "Powered by" */
.followit-white-box-wrapper {
    background-color: rgb(255, 255, 255); /* White background */
    border-style: solid;
    border-width: 1px;
    border-color: rgb(204, 204, 204); /* Light grey border */
    border-radius: 6px; /* Rounded corners */
    box-shadow: 0 5px 25px rgba(34, 60, 47, 0.25); /* Subtle shadow */
    padding: clamp(17px, 5%, 40px) clamp(17px, 7%, 50px); /* Padding inside the box */
    margin-top: 10px; /* Adjust top margin as needed for spacing in your sidebar */
    max-width: none; /* Ensure it takes available width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    display: flex; /* Use flexbox to easily stack content inside */
    flex-direction: column; /* Stack items vertically */
}

/* --- Adjustments to the existing Follow.it CSS for .form-preview --- */
/* This section removes the inner styling you don't want */
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin-top: 0 !important; /* Set to 0 to prevent extra space */
    padding: 0 !important; /* Remove padding as the wrapper now handles it */
    max-width: none !important;
    border-radius: 0 !important; /* Remove inner border-radius */
    box-shadow: none !important; /* Remove inner box-shadow */
    background-color: transparent !important; /* Make background transparent */
    border: none !important; /* Remove inner border */

    /* Inline styles moved from .form-preview div */
    /* position: relative; - This was on the div with style="position: relative;" */
    /* The border-style, border-width, border-color, background-color are handled by the wrapper */
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview,
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview * {
    box-sizing: border-box !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-heading {
    width: 100% !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-heading h5 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    /* Inline styles moved from h5 */
    font-family: Arial !important; /* from h5 */
    font-weight: bold !important; /* from h5 */
    color: rgb(0, 0, 0) !important; /* from h5 */
    font-size: 16px !important; /* from h5 */
    text-align: center !important; /* from h5 */
    text-transform: none !important; /* from h5 */
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field {
    margin-top: 20px !important;
    width: 100% !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input {
    width: 100% !important;
    height: 40px !important;
    border-radius: 6px !important;
    border: 2px solid #e9e8e8 !important;
    background-color: #fff;
    outline: none !important;

    /* Inline styles moved from input */
    font-family: Arial !important; /* from input */
    font-weight: normal !important; /* from input */
    color: rgb(0, 0, 0) !important; /* from input */
    font-size: 14px !important; /* from input */
    text-align: center !important; /* from input */
    background-color: rgb(255, 255, 255) !important; /* from input */
    text-transform: none !important; /* from input */
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input:-ms-input-placeholder {
    color: #000000 !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input::-ms-input-placeholder {
    color: #000000 !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-submit-button {
    margin-top: 10px !important;
    width: 100% !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-submit-button button {
    width: 100% !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 6px !important;
    line-height: 0px !important;

    /* Inline styles moved from button */
    font-family: Arial !important; /* from button */
    font-weight: bold !important; /* from button */
    color: rgb(255, 255, 255) !important; /* from button */
    font-size: 16px !important; /* from button */
    text-align: center !important; /* from button */
    background-color: rgb(0, 0, 0) !important; /* from button */
    text-transform: none !important; /* from button */
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-submit-button button:hover {
    cursor: pointer !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .powered-by-line {
    color: #231f20 !important;
    font-family: "Montserrat" !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 25px !important;
    text-align: center !important;
    text-decoration: none !important;
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 10px !important; /* Keep this to separate from the form above it */
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .powered-by-line img {
    margin-left: 10px !important;
    height: 1.13em !important;
    max-height: 1.13em !important;
}



/* ------------------------------------- Iframe Styles ------------------------------------------ */

/* Default styles for the iframe container */
.iframe-container {
  width: 100%;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

/* Default styles for the iframe to fill the container */
.iframe-container iframe {
  display: block;
  width: 100%;
  border: none;
}

/* Specific heights for each iframe container */
.iframe-container iframe[src*="kurtastarita.github.io/Calorie-Calculator-TDEE/"] {
  height: 1120px; /* Adjust as needed for Calorie Calculator */
  margin-bottom: 10px;
}

.iframe-container iframe[src*="kurtastarita.github.io/Macro-Calculator/"] {
  height: 750px; /* Adjust as needed for Macro Calculator */
      margin-bottom: 10px;
}

.iframe-container iframe[src*="kurtastarita.github.io/Protein-Calculator/"] {
  height: 900px; /* Adjust as needed for Protein Calculator */
}

.iframe-container iframe[src*="kurtastarita.github.io/One-Rep-Max-Calculator/"] {
  height: 700px; /* Adjust as needed for 1-Rep Max Calculator */
}

.iframe-container iframe[src*="kurtastarita.github.io/Advanced-BMI-Calculator/"] {
  height: 1200px; /* Adjust as needed for BMI Calculator */
}

.iframe-container iframe[src*="kurtastarita.github.io/Ultimate-Workout-Generator/"] {
  height: 35500px; /* Adjust as needed for Workout Generator */
}

.iframe-container iframe[src*="kurtastarita.github.io/Ultimate-Meal-Log/"] {
  height: 1200px; /* Adjust as needed for Meal Log */
}

.iframe-container iframe[src*="kurtastarita.github.io/Ultimate-Shopping-Log/"] {
  height: 1200px; /* Adjust as needed for Shopping Log */
}

.iframe-container iframe[src*="kurtastarita.github.io/Ultimate-Workout-Log/"] {
  height: 1500px; /* Adjust as needed for Workout Log */
}

.iframe-container iframe[src*="kurtastarita.github.io/Advanced-Body-Fat-Percentage-Calculator/"] {
  height: 1250px; /* Adjust as needed for Body Fat Calculator */
}

.iframe-container iframe[src*="kurtastarita.github.io/whole-foods-data-finder/"] {
  height: 2800px; /* Adjust as needed for Body Fat Calculator */
}

.iframe-container iframe[src*="kurtastarita.github.io/fitness-course/"] {
  height: 1500px; /* 
}

.iframe-container iframe[src*="https://us9.list-manage.com/contact-form?u=7296814d35dc763b0f265f514&form_id=33f77d77be23557fbd5b0d35b9b83878"] {
  height: 1000px; /* Adjust as needed for Body Fat Calculator */
}



/* ----------------------- Responsive adjustments ----------------------------- */

@media (max-width: 600px) {
  main {
    padding: 1rem;
  }

  nav a {
    margin: 0 0.5rem;
    padding: 0.3rem 0.6rem;
  }

  /* Styles for Ultimate Meal Log on small screens */
  iframe[src*="kurtastarita.github.io/Ultimate-Meal-Log/"] #meal-log .meal-entry {
    display: block;
  }

  iframe[src*="kurtastarita.github.io/Ultimate-Meal-Log/"] #meal-log .meal-entry input {
    width: 100%;
    margin-bottom: 5px;
  }

  iframe[src*="kurtastarita.github.io/Ultimate-Meal-Log/"] #meal-log .header {
    display: none;
  }

  /* Styles for Advanced Body-Fat Calculator on small screens */
  iframe[src*="kurtastarita.github.io/Advanced-Body-Fat-Percentage-Calculator/"] #body-fat-calculator-container .input-group {
    display: block; /* Example: Make input groups stack */
    margin-bottom: 10px;
  }

  iframe[src*="kurtastarita.github.io/Advanced-Body-Fat-Percentage-Calculator/"] #calculate-button {
    width: 100%; /* Example: Make button full width */
  }

  /* Styles for Ultimate Workout Generator on small screens */
  iframe[src*="kurtastarita.github.io/Ultimate-Workout-Generator/"] .form-control {
    width: 100%; /* Example: Make form controls full width */
    margin-bottom: 8px;
  }

  /* Styles for Ultimate Workout Log on small screens */
  iframe[src*="kurtastarita.github.io/Ultimate-Workout-Log/"] .exercise-row {
    display: block; /* Example: Stack workout log rows */
  }

  iframe[src*="kurtastarita.github.io/Ultimate-Workout-Log/"] .exercise-input {
    width: 100%; /* Example: Make exercise inputs full width */
    margin-bottom: 5px;
  }

  /* Styles for Ultimate Shopping Log on small screens */
  iframe[src*="kurtastarita.github.io/Ultimate-Shopping-Log/"] .item {
    display: block; /* Example: Stack shopping list items */
  }

  iframe[src*="kurtastarita.github.io/Ultimate-Shopping-Log/"] .item-name {
    width: 100%; /* Example: Make item names full width */
  }

  /* Styles for Calorie Calculator (TDEE) on small screens */
  iframe[src*="kurtastarita.github.io/Calorie-Calculator-TDEE/"] .input-field {
    width: 100%; /* Example */
    margin-bottom: 10px;
  }

  /* Styles for MACRO Calculator on small screens */
  iframe[src*="kurtastarita.github.io/Macro-Calculator/"] .macro-input {
    width: 100%; /* Example */
    margin-bottom: 10px;
  }

  /* Styles for 1-Rep Max Calculator on small screens */
  iframe[src*="kurtastarita.github.io/One-Rep-Max-Calculator/"] .rm-input {
    width: 100%; /* Example */
    margin-bottom: 10px;
  }

  /* Styles for Protein Calculator on small screens */
  iframe[src*="kurtastarita.github.io/Protein-Calculator/"] .protein-input {
    width: 100%; /* Example */
    margin-bottom: 10px;
  }

   /* Styles for Ultimate Meal Log on small screens */
  iframe[src*="kurtastarita.github.io/fitness-course/"] #meal-log .meal-entry {
    display: block;
  }

  iframe[src*="kurtastarita.github.io/fitness-course/"] #meal-log .meal-entry input {
    width: 100%;
    margin-bottom: 5px;
  }

  iframe[src*="kurtastarita.github.io/fitness-course/"] #meal-log .header {
    display: none;
  }
    
}

/* ---------------- Contact Form Styling ------------------------- */

#contact-form-container {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .form-group {
    margin-bottom: 15px;
  }

  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }

  input[type="text"],
  input[type="email"],
  textarea {
    width: calc(100% - 12px);
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
  }

  button[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1em;
  }

  button[type="submit"]:hover {
    background-color: #0056b3;
  }

/* --------------- Social Share Botton Style --------------------- */

.social-share {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
}

.social-share h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.social-share ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-share ul li a {
    display: block;
}

.social-share ul li a img {
    width: 32px; /* Adjust size as needed */
    height: 32px;
    border-radius: 5px; /* Optional: for rounded icons */
    opacity: 0.7; /* Optional: to make them slightly less prominent */
    transition: opacity 0.3s ease-in-out;
}

.social-share ul li a img:hover {
    opacity: 1;
}

.social-share {
  margin-top: 2em;
  padding: 1em;
  border: 1px solid #eee;
  border-radius: 5px;
  background-color: #f9f9f9;
  text-align: center;
}

.social-share h3 {
  margin-top: 0;
  color: #333;
  font-size: 1.2em;
  margin-bottom: 0.5em;
}

.social-share ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block; /* To center the list */
}

.social-share li {
  display: inline-block;
  margin: 0 0.5em;
}

.social-share li a {
  display: block;
}

.social-share img {
  width: 32px; /* Adjust size as needed */
  height: 32px;
  border-radius: 5px; /* Optional: circular icons */
  transition: transform 0.2s ease-in-out;
}

.social-share img:hover {
  transform: scale(1.1);
}

/* ................. Back To Top Button ........................ */

/* CSS (back-to-top.css) */
#back-to-top-btn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed positioning relative to the viewport */
    bottom: 20px;
    right: 20px;
    z-index: 99; /* Ensure it's on top of other elements */
    border: none;
    outline: none;
    background-color: #007bff; /* Blue color like the tools button */
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    font-size: 1rem;
    opacity: 0.8;
    transition: background-color 0.3s ease, opacity 0.3s ease-in-out; /* Added transition for background color */
}

#back-to-top-btn:hover {
    opacity: 1;
    background-color: #0056b3; /* Darker shade of blue on hover */
}

#back-to-top-btn svg {
    width: 1.2em;
    height: 1.2em;
    display: block;
    margin: 0 auto;
    fill: white; /* Ensure the SVG arrow is white */
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ------------------ Home Page Grid ---------------------- */

.tools-grid {
    display: grid;
    /* This creates two columns of equal width */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px; /* Space between grid items */
    padding: 20px;
    max-width: 1200px; /* Adjust as needed for your page width */
    margin: 20px auto; /* Center the grid */
    justify-items: center; /* Center items within their grid cell */
}

.tool-item {
    border: 1px solid #ddd; /* Example border */
    padding: 15px;
    text-align: center;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
    display: flex; /* Use flexbox for vertical alignment */
    flex-direction: column;
    justify-content: space-between; /* Pushes content and button apart */
    align-items: center; /* Centers content horizontally */
}

.tool-item img {
    max-width: 100%; /* Ensures images don't overflow */
    width: auto; /* Allow image to scale automatically */
    height: auto;
    display: block; /* Removes extra space below image */
    margin-bottom: 10px; /* Space between image and text */
}

.tool-item h3 {
    margin-top: 10px;
    margin-bottom: 5px;
    color: #333; /* Darker text for headings */
}

.tool-item p {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 15px;
    flex-grow: 1; /* Allows paragraph to take up available space */
}

/* Basic button style (you likely have this already) */
.button {
    display: inline-block;
    background-color: #007bff; /* Example blue */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

#center {
    text-align: center; /* This will center the text within the h2, h3, h4, etc, element */
}

/* Media Query for smaller screens (e.g., typical mobile devices) */
@media (max-width: 768px) {
    .tools-grid {
        grid-template-columns: 1fr; /* Force a single column for screens up to 768px wide */
        padding: 10px; /* Slightly less padding on smaller screens */
    }

    .tool-item {
        padding: 10px; /* Slightly less padding for individual items */
    }
}

/* You might want an intermediate breakpoint too, for tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .tools-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns for tablet sizes */
    }
}