/* General Body Styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffeee6;
    color: #333;
}

/* Content Wrapper */
.content-wrapper {
    display: grid;
    grid-template-columns: 300px 1fr 300px; /* 300px for left and right sidebars, 1fr for main content */
    gap: 5px;
    padding: 0px;
    max-width: 1500px;
    margin: 90px auto;
}

/* Sidebar Left */
.sidebar-left {
    background-color: #ffeee6;
    height: auto;
    border-radius: 0px;

}

/* Sidebar Right */
.sidebar-right {
    background-color: #ffeee6;
    height: auto;
    border-radius: 0px;
 
}

/* Main Content */
.main-content {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


h1 {
    text-align: center;
    color: #ad013d;
    margin: 10px auto;
}
h2 {
    text-align: left;
    color: #ad013d;
    margin: 10px auto;
}


h3 {
    text-align: left;
    color: #2b2b2b;
}

p {
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
    text-align: left
}

/* What We Offer Section */
.offer {
    margin: 40px 0;
}

.offer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.offer-item {
    background-color: #ffbfbf;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Why Choose Us Section */
.choose-us {
    margin: 40px 0;
}

.choose-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.choose-item {
    text-align: center;
    background-color: #ffbfbf;    
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.choose-item h3 {
    font-weight: bold;
    margin-bottom: 10px;
}

.choose-item p {
    color: #666;
}

/* Responsive Design */
@media (max-width: 1040px) {
    .sidebar-left {
        display: none; /* Hide left sidebar for medium screens */
    }

    .content-wrapper {
        grid-template-columns: 1fr 300px; /* Main content and right sidebar only */
    }
}

@media (max-width: 768px) {
    .sidebar-left, .sidebar-right {
        display: none; /* Hide both sidebars for small screens */
    }

    .content-wrapper {
        grid-template-columns: 1fr; /* Only main content */
    }
}

header {
    margin-bottom: 20px;
    margin-top:40px;
}

h1 {
    margin: 0;
    font-size: 2.2rem; /* Default font size for larger screens */
    color: #ad013d;
    font-family: comic sans ms;
    font-weight: bold;
}

p {
    font-size: 1rem; /* Default font size for larger screens */
    color: #000000;
}
#welcome {
    font-size: 1rem;
    font-weight: bold;
text-align: center;
}
#tool-text {
    font-size: 1rem;
    font-weight: bold;
text-align: center;
}
.container {
    margin-top: 20px;
    background: #ffbfbf;
    padding: 40px 20px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    width: 100%;
    max-width: 500px; /* Limit max-width for large screens */
}

/* Group row for inputs */
.input-group-row {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Space between columns */
    margin-bottom: 20px;
}

/* Ensure input fields take equal space */
.input-group {
    flex: 1;
    margin-bottom: 15px;
}

.input-group input {
    width: calc(100% - 22px);
    padding: 15px 0px 15px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Adjusting the input field to align calendar icon */
.input-group input[type="date"] {
    padding-right: 10px; /* Adjust space inside the input for the icon */
    position: relative;
}

.input-group input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 10px; /* Adjust this value to move the icon left */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 16px;
    height: 16px;
}



button {
    padding: 15px 25px;
    border: none;
    border-radius: 4px;
    background-color: #ad013d;
    color: white;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
    border-radius: 25px;
}

button:hover {
    background-color: #e04b4a;
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.popup-content {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 300px; /* Limit max-width for the popup */
    text-align: center;
    position: relative;
    z-index: 1;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

.close:hover {
    color: #ff5a5f;
}

.popup-content i {
    color: #ff5a5f;
    font-size: 40px;
    margin: 10px 0;
}

.popup-content p {
    font-size: 1rem; /* Adjusted for smaller screens */
    margin: 10px 0;
}

.falling-heart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.heart {
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: url('/src/heart.png');
    background-size: cover;
    opacity: 0;
    animation: fall 5s linear;
}

@keyframes fall {
    0% { transform: translateY(-100px); opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

/* Responsive Design */

/* Tablet View */
@media (max-width: 900px) {
    #welcome {
        font-size: 0.80rem;
    }
    
    .container {
        margin-top:20px;
        padding: 20px;
        max-width: 400px;
        width: 90%; /* Smaller max-width for tablets */
    }

    button {
        font-size: 14px;
        padding: 8px 16px;
    }
    h1{
    font-size: 2rem;
    }
    
}

/* Mobile View */
@media (max-width: 600px) {
    h1 {
        font-size: 1.5rem; /* Smaller font size for mobile */
    }

    p {
        font-size: 1rem; /* Smaller font size for mobile */
    }

    .container {
        margin-top:20px;
        padding: 15px;
        max-width: 400px;
        width: 85%; /* Adjust container width for mobile */
    } 

    input {
        width: calc(100% - 20px); /* Adjust input width */
    }

    button {
        font-size: 14px;
        padding: 8px 16px;
    }

    /* Adjust input-group-row for smaller screens */
    .input-group-row {
        display: flex;
        flex-direction: column;
        gap: 10px; /* Reduce gap for smaller screens */
    }
    
    .input-group {
        width: 100%; /* Ensure input fields span the full width */
    }
}

/* Extra content section styling*/
.extra-content {
    background-color: transparent; /* Remove background color for the extra content */
    border-radius: 12px;
    text-align: left;
    max-width: 800px;
    margin: 10px auto 40px auto;
    padding: 20px;
}

.extra-content h2, .extra-content h3{ 
    color: #ad013d;
    font-family: 'Comic Sans MS';
}

.extra-content p, .extra-content li {
    color: #000;
    font-size: 1rem;
    line-height: 1.5;
}

/* Accordion item */
.accordion-item {
    border-bottom: 2px solid #ad013d;
    margin-bottom: 5px;
}

/* Accordion header */
.accordion-header {
    cursor: pointer;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
    position: relative;
    outline: none; /* Remove default outline */
    transition: background-color 0.3s ease, padding 0.3s ease;
}

/* Focus state for accessibility */
.accordion-header:focus {
    outline: 2px dashed #ad013d; /* Add outline for keyboard users */
}

/* Toggle indicator */
.accordion-header::after {
    content: '+';
    position: absolute;
    right: 20px;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.accordion-header.active::after {
    content: 'x'; /* Toggle between + and x when active */
}

/* Hover effect */
.accordion-header:hover {
    background-color: #ffbfbf;
    color: #504f4f;
}

/* Accordion content */
.accordion-content {
    display: block; /* Initially set display to block */
    max-height: 0; /* Start with zero height */
    overflow: hidden; /* Hide overflow when closed */
    background-color: #fff;
    padding: 0 15px; /* Set padding to 0 initially for smooth transition */
    border-left: 2px solid #ad013d;
    font-size: 0.95rem;
    color: #333;
    transition: max-height 0.5s ease, padding 0.5s ease; /* Smooth transitions */
}

/* When the accordion is active, reveal content */
.accordion-header.active + .accordion-content {
    max-height: 500px; /* Set a reasonable max-height (adjust based on content) */
    padding: 10px 15px; /* Add padding when open */
}

/* Open the first FAQ by default */
.accordion-item:first-of-type .accordion-header.active + .accordion-content {
    display: block;
    max-height: 500px;
    padding: 10px 15px;
}
.tool{
    background: #ffbfbf;
    padding: 40px 20px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Tools Page Styling */
/* Flexbox layout for tools */
.tools-list {
    display: flex;
    flex-wrap: wrap; /* Allows the items to wrap to new lines when needed */
    justify-content: center; /* Center-aligns items horizontally */
    align-items: stretch; /* Aligns items vertically */
    gap: 20px; /* Adds some space between the items */
}

.tool-item {
    flex: 1 1 calc(33.333% - 20px); /* Makes each item take up 1/3 of the container minus the gap */
    background-color: #ffbfbf;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    min-width: 280px; /* Ensures the items are not too small */
    box-sizing: border-box;
    transition: transform 0.3s ease-in-out;
    display: flex; /* Ensures the content inside is flexible */
    flex-direction: column; /* Stacks child elements vertically */
    justify-content: center; /* Spaces the content evenly */
}

.tool-item:hover {
    transform: scale(1.05); /* Slightly enlarge the tool item when hovered */
}

.tool-item h2 {
    font-size: 1.5rem;
    color: #ad013d;
    margin-bottom: 10px;
}

.tool-item p {
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
}

.tool-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f3426b;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 25px;
    transition: background-color 0.3s ease;
}

.tool-link:hover {
    background-color: #ce0030;
    color: #fff;
}

footer {
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
    margin-top: 40px;
}

footer p {
    font-size: 0.9rem;
    color: #333;
}

.related-tool-text {

    margin-top: 10px;
    font-size: 1.2rem;
    color: #ad013d;
    font-family: comic sans ms;
    font-weight: bold;
    text-align: left;
    margin-left: 10px;
    margin-bottom: 10px;

}

.related-tool-container {
    display: flex;
    flex-wrap: wrap; /* Allows the items to wrap to new lines when needed */
    justify-content: space-between; /* Evenly space out the items */
    gap: 10px; /* Adds some space between the items */
    margin-bottom: 10px;
  }

  .related-tool-link {
    flex: 0 0 calc(33.333% - 8px); /* Ensure three buttons per row with consistent size */
    max-width: calc(33.333% - 8px); /* Consistent width across all buttons */
    height: 20px; /* Set fixed height for all buttons */
    background-color: #e75476;
    padding: 10px 0px;
    border-radius: 12px;
    text-align: center;
    display: flex; /* Flexbox for centering */
    justify-content: center; /* Horizontally center content */
    align-items: center; /* Vertically center content */
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional shadow for better look */
    text-decoration: none; /* Remove link underline */
    color: white; /* Set text color */
    font-weight: bold;
    font-size: 10px;
  }

  .related-tool-link:hover {
    transform: scale(1.05); /* Slightly enlarge the tool item when hovered */
    background-color: #dd0235;
  }

  /* Related Tools Responsiveness */
  @media (max-width: 939px) and (min-width: 769px) {
    .related-tool-link {
      flex: 0 0 calc(50% - 10px); /* Two columns */
      max-width: calc(50% - 10px); /* Set consistent width for two-column layout */
    }
  }

  /* One-column layout for screen widths ≤ 768px */
  @media (max-width: 768px) {
    .related-tool-link {
      flex: 0 0 100%; /* One column layout */
      max-width: 100%; /* Full width for smaller screens */
    }
  }