/* Custom Scrollbar Styles */
::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
}
  
::-webkit-scrollbar-track {
    background: #333; /* Color of the scrollbar track */
}

::-webkit-scrollbar-thumb {
    background: #D8BFD8; /* Color of the scrollbar thumb */
    border-radius: 6px; /* Rounded corners on the scrollbar thumb */
    border: 3px solid #333; /* Creates a border between thumb and track */
}

::-webkit-scrollbar-thumb:hover {
    background: #DA70D6; /* Color of the scrollbar thumb on hover */
}

/* Optional: add a box-shadow or glow to the scrollbar thumb */
::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); /* Subtle inset shadow to add depth */
}

html {
    scroll-behavior: smooth;
}

/* Reset some default styles */
body, h1, h2, p, ul {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Navigation styles */
.navbar {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center-align the flex items */
    padding: 1rem 2rem;
    background-color: #333; /* Lighter shade of black */
    color: #fff;
    border-bottom: 5px solid #D8BFD8; /* Subtle neon accent */
}

.nav-links {
    z-index: 10; /* Higher z-index to ensure it's on top */
    list-style: none; /* Remove bullet points from list */
    padding: 0; /* Remove default padding */
    margin-top: -40px; /* Move nav-links closer to the logo */
}

.nav-links li {
    display: inline; /* Keep links inline but below the logo */
    margin: 0 20px; /* Spacing between links */
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.nav-links a:hover, .nav-links a:focus {
    color: #D8BFD8; /* Light purple color for the text */
    outline: none; /* Remove focus outline */
}

/* Glowing effect on hover and focus */
.nav-links a:hover::after, .nav-links a:focus::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px; /* Optional: adds rounded corners to the glow */
    box-shadow: 0 0 15px #D8BFD8, /* Outer glow */
                 0 0 5px #DA70D6; /* Inner glow */
    opacity: 0.7; /* Glow effect opacity */
    z-index: -1; /* Place the glow effect behind the text */
}

@keyframes rockLogo {
    0%, 100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(-10deg);
    }
    50% {
      transform: rotate(10deg);
    }
    75% {
      transform: rotate(-10deg);
    }
}
  
.logo img {
    z-index: 1; /* Lower z-index to ensure it doesn't overlap the nav links */
    max-width: 100%;
    height: auto;
    max-height: 150px;
    margin-top: -30px;
    animation: rockLogo 3s ease-in-out forwards;
}

/* Hero section */
.hero {
    background-color: #f4f4f4;
    text-align: center;
    padding: 2rem 1rem;
}

/* Keyframes for the pulsing neon effect */
@keyframes neonPulse {
    from {
      text-shadow:
        0 0 6px rgba(77, 166, 255, 0.75),
        0 0 10px rgba(77, 166, 255, 0.75),
        0 0 14px rgba(77, 166, 255, 0.75),
        0 0 20px rgba(77, 166, 255, 0.75),
        0 0 30px rgba(77, 166, 255, 0.75),
        0 0 40px rgba(77, 166, 255, 0.75);
    }
    to {
      text-shadow:
        0 0 2px rgba(77, 166, 255, 1),
        0 0 4px rgba(77, 166, 255, 1),
        0 0 6px rgba(77, 166, 255, 1),
        0 0 10px rgba(77, 166, 255, 1),
        0 0 15px rgba(77, 166, 255, 1),
        0 0 20px rgba(77, 166, 255, 1);
    }
}

/* Product grid */
.featured-products {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background-color: #f4f4f4; /* Light grey off-white, giving a clean modern look */
    text-align: center; /* This will center the text inside the .h1-container */
}

.h1-container {
    margin-top: 40px;
    background-image: url('logos/freightFreak_F_WonderWoman.png');
    background-repeat: no-repeat;
    background-position: center;
    justify-content: center; /* This centers the h1 horizontally */
    background-size: contain;
    display: inline-block; /* Or block if you want it to take the full width */
    text-align: center;
    align-items: center; /* This centers the h1 vertically if you set a height */
    padding: 20px; /* Or any other value to give space around the text */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.h1-container h1 {
    text-align: center;
    font-size: 2.0em;
    color: #fff; /* White text color */
    animation: neonPulse 2s ease-in-out infinite alternate, fadeIn 4.5s ease-in-out forwards;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    justify-content: center;
    padding: 1rem;
}

.product-grid a.product-card {
    background: #f3f3f3; /* Eggshell color */
    color: #333; /* Dark text for contrast */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center-align children */
    text-decoration: none; /* Remove underline from links */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: pulseGlow 2s infinite alternate ease-in-out;
}

.product-grid a.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    text-decoration: none; /* Ensure no underline appears on hover */
}

.product-card {
    background: #f3f3f3; /* Eggshell color */
    color: #333;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center-align children */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: pulseGlow 2s infinite alternate ease-in-out;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    cursor: pointer; /* Change cursor on hover */
}

/* Improved h3 styling for better readability and emphasis */
.product-card h3 {
    margin: 0.5rem;
    text-align: center;
    color: #333; /* Darker color for better contrast */
    font-size: 1.05em; /* Slightly larger font size */
    font-weight: bold;
}

/* Price tag styling */
.product-card p {
    margin: 0.5rem;
    text-align: center;
    font-weight: bold;
    color: #66cc66; /* A more noticeable yet still soft green */
}

.product-image-slider {
    position: relative;
}

.product-image-slider img {
    width: 100%;
    display: block; /* Remove inline element spacing */
    border-bottom: 3px solid #D8BFD8; /* Accent border at the bottom */
}

/* Button styling for centered appearance */
.btn-primary {
    background-color: #007bff; /* Brand primary color */
    color: #fff;
    padding: 10px 20px;
    margin: 10px 0; /* Add margin on top and bottom */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
    width: 80%; /* Set a width for the button */
    align-self: center; /* Align button to the center of the flex container */
}

.btn-primary:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

.special-card .product-image-slider {
    margin-bottom: 30px;
}

.special-card h3 {
    margin-top: 40px;
}

/* Pulsing glow effect for the card */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 10px #D8BFD8;
    }
    50% {
        box-shadow: 0 0 20px #D8BFD8, 0 0 10px #BA55D3;
    }
}

.product-card {
    animation: pulseGlow 2s infinite alternate ease-in-out;
}

/* Button styling for "Shop Now" */
.shop-now-btn {
    display: block; /* Ensure the link is a block element to center it */
    width: 200px; /* Set a fixed width */
    margin: 2rem auto; /* Center the button */
    padding: 10px 0; /* Vertical padding */
    background-color: #DA70D6; /* A purple-pink shade for the button */
    color: #fff; /* White text */
    text-align: center; /* Center the text inside the button */
    border: none; /* No border */
    border-radius: 30px; /* Rounded corners */
    font-size: 1.2em; /* Larger font size */
    font-weight: bold; /* Bold font */
    cursor: pointer; /* Pointer cursor on hover */
    text-decoration: none; /* Remove underline from text */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effects */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.shop-now-btn:hover, .shop-now-btn:focus {
    background-color: #BA55D3; /* Slightly darker shade on hover/focus */
    transform: translateY(-2px); /* Lift the button on hover/focus */
    text-decoration: none; /* Ensure no underline on focus */
    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.3); /* Enhanced shadow for hover/focus effect */
}

/* About Us section styles */
.about-us {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    text-align: center;
    padding: 3rem;
    background-color: #1e1e1e; /* Dark background for contrast */
    color: #fff;
}

.about-us .about-content {
    max-width: 800px;
    margin: 0 auto;
}

@keyframes neonPurpleGlow {
    0%, 100% {
        text-shadow:
          0 0 3px #D8BFD8,
          0 0 6px #D8BFD8,
          0 0 9px #DA70D6,
          0 0 12px #DA70D6;
      }
      50% {
        text-shadow:
          0 0 2px #D8BFD8,
          0 0 3px #D8BFD8,
          0 0 4px #DA70D6,
          0 0 5px #DA70D6;
      }
}

.about-us h2 {
    font-size: 2.2em;
    color: #D8BFD8; /* Pick up a color from the logo */
    margin: 1rem auto; /* Added auto to center the h2 */
    animation: neonPurpleGlow 2s ease-in-out infinite alternate;
}

.about-us p {
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.about-us .instagram-qr img {
    display: block;
    width: 128px; /* Default size */
    margin: 0 auto; /* Center the image */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px; /* Slight rounding of corners */
}

.about-us .instagram-qr:hover img {
    transform: scale(1.1); /* Scale up slightly on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

/* Stay Connected Section Styles */
.stay-connected {
    margin-top: -15px;
    text-align: center;
    padding: 2rem;
    background-color: #1e1e1e; /* Dark background for contrast */
    color: #333;
}

/* Enhancements for Stay Connected text */
.stay-connected h3 {
    font-size: 1.5em;
    color: #d7327a; /* This sets the color of the h3 tag */
    text-shadow: 0 0 8px rgba(216, 191, 216, 0.7); /* Subtle glow to match the neon theme */
    margin-bottom: -0.5rem;
}

.stay-connected p {
    font-size: 1.1em;
    color: #fff; /* White to stand out on darker backgrounds */
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    max-width: 600px; /* For better readability */
    margin-left: auto;
    margin-right: auto;
}

.social-icons {
    background-color: rgba(249, 249, 249, 0.8); /* Off-white background with slight transparency for a frosted glass look */
    border-radius: 50px; /* Pill-shaped rounded corners */
    padding: 10px 30px; /* Slim vertical padding with more horizontal padding */
    display: flex; /* Keeps icons in a row */
    justify-content: center; /* Centers icons horizontally */
    align-items: center; /* Centers icons vertically */
    gap: 15px; /* Space between icons */
    margin: 2rem auto; /* Top and bottom margin with automatic horizontal centering */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    max-width: fit-content; /* Ensure the background only takes as much space as needed */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.social-icons:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Slightly deeper shadow on hover for a lifting effect */
    background-color: rgba(249, 249, 249, 0.95); /* Less transparency on hover */
}

.social-icons a {
    display: inline-flex; /* Flex container for centering the icons */
    justify-content: center;
    align-items: center;
}

.social-icons a.coming-soon {
    position: relative;
    z-index: 1; /* Ensure the link is above the pseudo-element */
}

.social-icons a.coming-soon::before {
    content: 'Coming Soon';
    position: absolute;
    bottom: 100%; /* Position it above the icon */
    left: 50%; /* Start from the middle */
    transform: translateX(-50%) translateY(-10px) scale(0); /* Center it and hide it initially */
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 0.75em;
    white-space: nowrap; /* Prevent the text from wrapping */
    opacity: 0;
    pointer-events: none; /* Prevent the tooltip from being clickable */
    z-index: 2; /* Make sure it's above the link */
    transition: all 0.3s ease;
}

.social-icons a.coming-soon:hover::before,
.social-icons a.coming-soon:focus::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-15px) scale(1);
}

.social-icons a.coming-soon.active::after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

.social-icons a.click-here {
    position: relative;
    z-index: 1; /* Ensure the link is above the pseudo-element */
}

.social-icons a.click-here::before {
    content: 'Click Here';
    position: absolute;
    bottom: 100%; /* Position it above the icon */
    left: 50%; /* Start from the middle */
    transform: translateX(-50%) translateY(-10px) scale(0); /* Center it and hide it initially */
    background-color: #333;
    color: #f13d6a;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 0.75em;
    white-space: nowrap; /* Prevent the text from wrapping */
    opacity: 0;
    pointer-events: none; /* Prevent the tooltip from being clickable */
    z-index: 2; /* Make sure it's above the link */
    transition: all 0.3s ease;
}

.social-icons a.click-here:hover::before,
.social-icons a.click-here:focus::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-15px) scale(1);
}

.social-icons a.click-here.active::after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

.social-icons img {
    height: auto;
    width: auto; /* Adjust width automatically to maintain aspect ratio */
    max-width: 40px; /* Maximum icon width */
    transition: transform 0.3s ease; /* Smooth icon scale transition */
}

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

/* Payments Accepted Section Styles */
.payments-accepted {
    background-color: #fff; /* Light background to keep it clean and crisp */
    text-align: center;
    padding: 2rem;
    color: #333;
}

.payments-accepted h3 {
    color: #d7327a; /* Tie in the color from your 'Stay Connected' section */
    font-size: 1.8em; /* Slightly larger for emphasis */
    text-shadow: 0 0 5px rgba(216, 191, 216, 0.7); /* Subtle glow for consistency */
    margin-bottom: 1rem;
    transition: text-shadow 0.3s ease; /* Smooth transition for text shadow */
}

.payments-accepted h3:hover {
    text-shadow: 0 0 10px rgba(216, 191, 216, 0.9); /* Increased glow on hover */
}

.payments-accepted p {
    color: #333; /* Darker text for readability */
    font-size: 1.1em; /* Match your existing paragraph size for consistency */
    margin-bottom: 2rem; /* Spacing before logos */
    max-width: 600px; /* Consistent with your 'Stay Connected' section */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6; /* Slightly tighter line-height for a cleaner look */
}

.payment-logos a {
    display: inline-block; /* Treat each link as a block for hover effects */
    margin: 0 10px; /* Space out the logos */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for effects */
}

.payment-logos a:hover {
    transform: translateY(-2px); /* Slight lift effect on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.payment-logos img {
    cursor: pointer;
    border-radius: 8px; /* Soft rounded corners for all logos */
    transition: transform 0.3s ease; /* Smooth scaling transition */
}

.payment-logos img:hover {
    transform: scale(1.05); /* Slightly increase size on hover */
}

.stripe-notice {
    font-size: 1em; /* Make the font size larger for better readability */
    color: #333; /* A darker color for important information */
    background-color: rgba(215, 233, 255, 0.7); /* A light, brand-related color for the background with some transparency for subtlety */
    padding: 1rem; /* Add padding to create space around the text */
    border-radius: 10px; /* Rounded corners for a modern, friendly look */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    display: inline-block; /* Center it in the section */
    margin-top: 1rem; /* Space from the logos */
    margin-bottom: 2rem; /* Space before the next section */
    transition: background-color 0.3s ease; /* Transition for interactive hover effect */
}

.stripe-notice:hover {
    background-color: rgba(215, 233, 255, 0.9); /* Slightly less transparency on hover for emphasis */
}

.stripe-icon {
    border-radius: 10px; /* Adjust the pixel value to the desired border-radius */
}

/* Footer */
footer {
    background-color: #333;
    color: #fff;
    padding: 2rem 0;
    font-size: 0.9em;
    border-top: 5px solid #D8BFD8; /* Subtle neon accent */
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer-section h4 {
    color: #D8BFD8;
    margin-bottom: 1rem;
}

.footer-section ul {
    list-style-type: none;
    padding: 0;
}

.footer-section ul li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.footer-section ul li a:hover {
    color: #D8BFD8;
}

.footer-section p {
    margin: 0.5rem 0;
}

.social-icons img {
    width: 30px; /* Adjust the size to match the footer aesthetics */
}

.footer-bottom {
    text-align: center;
    margin-top: 1rem;
    border-top: 1px solid #484848; /* Subtle border for separation */
    padding-top: 1rem;
}

.developer-info {
    margin-top: 1rem;
}

.developer-info a {
    display: inline-block; /* Ensures the link area matches the image size */
    transition: transform 0.3s ease; /* Smooth transformation on hover */
}

.developer-info a:hover {
    transform: scale(1.05); /* Slightly enlarges the logo on hover */
}

.dev-logo {
    width: 50px; /* Adjust according to the actual logo size */
    margin-top: 0.5rem;
}

/* Modal styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
}
  
.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* Reduce the percentage to move the modal up */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 600px; /* Maximum width */
    border-radius: 10px; /* Rounded corners for modal */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow for 3D effect */
    position: relative;
}

/* Modal H2 enhancement with a lighter lightning blue */
.modal-content h2 {
    color: #31B2FC; /* Lighter lightning blue color */
    text-shadow: 0 0 5px rgba(49, 178, 252, 0.8), /* Soft glow effect */
                 0 0 10px rgba(49, 178, 252, 0.6); /* Deeper glow effect */
    font-weight: 600; /* Semi-bold weight for more emphasis */
    transition: transform 0.3s ease, text-shadow 0.3s ease; /* Smooth transitions for interaction */
}

.modal-content h2:hover {
    transform: scale(1.05); /* Slight increase in size on hover for engagement */
    text-shadow: 0 0 8px rgba(49, 178, 252, 1), /* Enhanced glow effect on hover */
                 0 0 12px rgba(49, 178, 252, 0.8); /* Deeper glow effect on hover */
}

/* Animation for gentle pulsing effect with lighter lightning blue */
@keyframes gentlePulseBlue {
    0%, 100% {
        text-shadow: 0 0 5px rgba(49, 178, 252, 0.8),
                     0 0 10px rgba(49, 178, 252, 0.6);
    }
    50% {
        text-shadow: 0 0 8px rgba(49, 178, 252, 1),
                     0 0 12px rgba(49, 178, 252, 0.8);
    }
}
.modal-content h2 {
    animation: gentlePulseBlue 2s infinite ease-in-out; /* Apply the pulsing blue animation */
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
  
.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
  
.modal-body {
    text-align: center;
}
  
.model-image img {
    max-width: 100%; /* Responsive image */
    height: auto; /* Maintain aspect ratio */
    margin-top: 20px; /* Space above the image */
}

/* Style the input field and submit button */
#emailForm input[type=email] {
    width: 70%;
    padding: 10px;
    margin-top: 20px;
    border: none;
    border-radius: 5px;
}

#emailForm input[type=submit] {
    width: 60%; /* Shorter width for the button */
    padding: 10px;
    margin: 20px auto; /* Centers the button and adds space from the input field */
    display: block; /* Allows margin auto to work */
    background-image: linear-gradient(to top, #DA70D6, #E39AD6); /* Shiny gloss gradient */
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* Slightly deeper shadow for a 3D effect */
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
    position: relative; /* To allow pseudo-elements to be positioned relative to this element */
    overflow: hidden; /* Ensures the pseudo-elements are clipped to the button's rounded corners */
}

#emailForm input[type=submit]:before {
    content: '';
    position: absolute;
    top: -50%; /* Start from above the visible area */
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent); /* Glossy shine effect */
    transition: top 0.3s;
    border-radius: 20px; /* Rounded corners */
}

#emailForm input[type=submit]:hover:before {
    top: 100%; /* Slide the glossy effect down */
}

#emailForm input[type=submit]:active {
    background-image: linear-gradient(to top, #C25AB6, #D381C3); /* Adjust gradient for active state */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#emailForm input[type=submit]:hover {
    box-shadow: 0 5px 8px rgba(0,0,0,0.2); /* Slightly larger shadow on hover */
}

@media (max-width: 400px) {
    .nav-links {
        padding-left: 15px; /* Slightly more padding to move links right on smaller screens */
    }
    
    .nav-links li a {
        padding: 7px 10px; /* Slightly smaller padding for smaller screens */
        font-size: 0.75rem; /* Slightly smaller font size for smaller screens */
    }

    /* Add this to resize the h2 within the modal */
    .modal-content h2 {
        font-size: 1.1em; /* Even smaller font size for h2 in the modal */
        margin-top: 0.5rem; /* Adjust top margin if needed */
    }
}

@media (max-width: 480px) {
    .navbar {
        padding: 0.5rem; /* Adjusted padding */
        flex-direction: column; /* Stack logo and nav-links vertically */
    }
  
    .logo img {
        max-height: 50px; /* Adjust the logo size as needed */
        width: auto; /* Maintain aspect ratio */
        order: -1; /* Position the logo above the nav-links */
        margin-bottom: 10px; /* Space between logo and nav-links */
    }
  
    .nav-links {
        width: 100%; /* Full width to utilize available space */
        justify-content: flex-start; /* Align nav-links to the left */
        padding-left: 20px; /* Move nav-links slightly to the right */
    }
  
    .nav-links li {
        display: block; /* Stack nav-links vertically */
        text-align: left; /* Align text to the left */
    }
  
    .nav-links li a {
        padding: 8px 12px; /* Adjust padding to fit small screens */
        font-size: 0.8rem; /* Adjust font size to fit small screens */
    }

    /* Add this to resize the h2 within the modal */
    .modal-content h2 {
        font-size: 1.1em; /* Smaller font size for h2 in the modal */
        margin-top: 0.5rem; /* Adjust top margin if needed */
    }

    .featured-products .h1-container {
        margin-top: 10px; /* Further reduced margin-top for mobile screens */
    }
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: row; /* Change to row direction for navbar */
        justify-content: space-between; /* Align items on the space-between */
        padding: 0.5rem 1rem;
    }

    .logo {
        flex: 1; /* Assign space for the logo */
        display: flex;
        justify-content: flex-start; /* Align logo to the start */
    }

    .logo img {
        max-height: 60px; /* Adjust logo size */
        margin-top: 0; /* Reset margin top */
    }

    .nav-links {
        flex: 2; /* Assign space for nav links */
        display: flex;
        justify-content: flex-end; /* Align links to the end */
        margin-top: 0; /* Reset margin top */
    }

    .nav-links li {
        display: inline-block; /* Inline block for horizontal list */
    }

    .nav-links li a {
        padding: 5px 10px; /* Add padding for tap targets */
        font-size: 0.8rem; /* Adjust font size */
    }

    /* Possibly hide the text of the links and show a hamburger icon instead */
    .nav-toggle {
        display: none; /* Show toggle button only when needed */
    }

    .featured-products .h1-container {
        margin-top: -15px; /* Reduced margin-top for smaller screens */
    }

    .shop-now-btn {
        width: 250px; /* Slightly larger button on smaller screens */
    }

    .about-us h2 {
        font-size: 1.8em; /* Smaller font size for the h2 tag */
    }

    .about-us .instagram-qr img {
        width: 150px; /* Larger size for the QR code */
        margin-top: 1rem; /* Add space above the QR code */
    }

    .social-icons img {
        width: 35px; /* Slightly smaller icons for mobile */
    }

    .payment-logos img {
        max-width: 80px; /* Smaller logos on mobile */
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-section {
        margin-bottom: 2rem;
    }

    .social-icons img {
        width: 35px;
    }

    .dev-logo {
        width: 40px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .footer-container {
        justify-content: space-between;
    }

    .developer-info, .footer-bottom {
        flex-basis: 100%;
        text-align: center;
    }

    .dev-logo {
        width: 45px;
    }
}

/* Product grid centering for larger screens */
@media (min-width: 1024px) {
    .featured-products {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .featured-products .h1-container {
        margin-top: -30px;
        margin-bottom: 60px; /* Increased space below the h1 tag */
    }

    .featured-products .h1-container h1 {
        position: relative;
        top: 50px;
        left: 9px;
    }

    .featured-products .product-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* Four columns for larger screens */
        gap: 4rem;
        margin: 0 auto; /* This will center the grid if there is a specified width */
        max-width: 1200px; /* Adjust the max-width as per your design */
    }

    .product-grid .product-card {
        max-width: 250px; /* Adjust the maximum width of product cards */
        margin: 0 auto; /* Center the product cards in their grid column */
    }

    .shop-now-btn {
        margin-top: 2.5rem; /* Increased space above the button */
        margin-bottom: -5px;
    }

    .about-us {
        display: block; /* Switch to block for normal document flow */
        text-align: center;
        padding: 3rem;
        background-color: #1e1e1e;
        color: #fff;
    }

    .about-us h2 {
        margin-bottom: 2rem; /* Add some space below the h2 */
    }

    .about-us .content-container {
        display: flex; /* Enables flex context for direct children */
        justify-content: center; /* Horizontally centers the flex items */
        align-items: center; /* Vertically centers the flex items */
    }

    .about-us .about-content {
        flex: 1; /* Allows the text to grow */
        padding-right: 2rem; /* Space between text and QR code */
        text-align: left; /* Text aligned to the left */
    }

    .about-us .instagram-qr {
        flex-shrink: 0; /* Prevents the QR code from shrinking */
        padding-left: 2rem; /* Space between text and QR code */
        margin-left: 2rem; /* Additional space to the left of the QR code */
        border-left: 2px solid #fff; /* Separator for styling */
    }

    .about-us .instagram-qr img {
        width: 250px; /* Adjust the size of the QR code */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer; /* Change cursor on hover */
        border-radius: 10px; /* Smooth the edges */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25); /* Shadow for depth */
    }

    .about-us .instagram-qr:hover img {
        transform: scale(1.05); /* Slight increase in size on hover */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); /* Increase shadow on hover */
    }

    .stay-connected {
        padding: 3rem;
        background-color: #1e1e1e;
        color: #fff;
    }

    .social-icons a {
        margin: 0 15px;
    }

    .social-icons img {
        width: 50px; /* Larger icons for desktop */
    }

    /* Adjust the size of the CashApp logo only for larger screens */
    .logo-cashapp {
        max-width: 125px; /* Adjust to match the size of other logos */
    }

    .footer-container {
        justify-content: space-evenly;
    }

    .footer-section {
        text-align: left;
    }
}