/* General Styles */
body {
    font-family: 'Tajawal', sans-serif;
    margin: 0;
    padding: 0;
    text-align: right;
    direction: rtl;
    background-color: #f9f9f9;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}


h1, h2, h3 {
    color: #2c3e50;
}

h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    position: relative; /* Required for positioning the pseudo-element */
    padding-right: 1rem; /* Adds space between text and vertical line */
}

h2::after {
    content: '';
    position: absolute;
    right: 0; /* Positions the line on the right */
    top: 0;
    bottom: 0;
    width: 4px; /* Thickness of the vertical line */
    background-color: #333; /* Color of the vertical line */
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* Product Section */
.product {
    padding: 2rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    max-width: 800px;
}

.product h1{
    font-size: 1.5rem;
}

.product-description {
    margin-top: 1.5rem;
}


/* Main Container */
.container {
    width: 100%;
    max-width: 450px; /* Mobile width */
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Top Bar */
.top-bar {
    background: #da0000;
    color: #fff;
    text-align: center;
    padding: 5px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Header Section */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #333; /* Dark background for contrast with white logo */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Logo */
.logo img {
    height: 40px; /* Adjust based on your logo size */
}

/* Hamburger Icon */
.hamburger {
    display: flex; /* Always visible */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1000; /* Ensure it's above the menu */
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #fff; /* White color for the icon */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Navigation Menu */
.nav {
    position: absolute;
    top: 100%;
    right: 0;
    background: #333;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 999; /* Ensure it's below the hamburger icon */
}

.nav.active {
    max-height: 300px; /* Adjust based on content */
}

.nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 1rem 0;
}

.nav ul li {
    font-size: 1rem;
    font-weight: 600;
}

.nav ul li a {
    text-decoration: none;
    color: #fff; /* White text for contrast */
    transition: color 0.3s ease;
}

.nav ul li a:hover {
    color: #d30000; /* Red color on hover */
}
/* Hero Section */
.hero {
    padding: 2rem 1rem;
    text-align: center;
    background: linear-gradient(135deg, #f9f9f9, #ffffff); /* Subtle gradient background */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Very light border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Soft shadow for depth */
}

.hero h1 {
    font-size: 1.3rem;
    color: #333;
    font-weight: 600;
    margin-bottom: 1.5rem;
    animation: fadeIn 1s ease-in-out; /* Fade-in animation */
}

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

/* Countdown */
.countdown {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 1.5rem 0;
    font-weight: 600;
}

.countdown-item {
    background: #d30000;
    color: white;
    padding: 0.5rem 1.2rem;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.countdown-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

.countdown-item span {
    display: block;
    text-align: center;
}

.countdown-item span:first-child {
    font-size: 1.5rem;
    font-weight: 700;
}

.countdown-item span:last-child {
    font-size: 1rem;
    font-weight: 500;
}

.product-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 1.5rem 0;
    text-align: center;
}

/* Quality */
.quality {
    font-size: 1rem;
    color: #555;
    text-align: center;
    margin: 0.5rem 0;
}

/* CTA Button */
.cta-button {
    background-color: #c00000;
    font-family: 'Tajawal', sans-serif;
    color: #fff;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
    margin: 1.5rem 0;
    width: 100%;
    font-weight: 600;
}

.cta-button:hover {
    background: #e64a19;
}

/* Review Stars Section */
.review-stars {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    background: #f9f9f9;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 100%;
    margin: 1rem 0;
}

.review-stars:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Stars */
.stars {
    font-size: 1rem;
    color: #ffc107; /* Gold color for stars */
    display: flex;
    align-items: center;
    gap: 5px;
}

.rating {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

/* Review Text */
.review-text {
    font-size: 1rem;
    color: #555;
    margin: 0;
    text-align: right;
    flex-grow: 1;
}
/* Stock Wrapper */
.stock-wrapper {
    margin: 1.5rem 0;
    text-align: center;
}

.stock {
    font-size: 1rem;
    color: #d30000;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.stock strong {
    color: #333;
}

/* Progress Bar */
.progress-bar {
    width: 100%;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress {
    width: 20%; /* Adjust based on stock level */
    height: 100%;
    background: #d30000;
    border-radius: 4px;
    animation: progress-pulse 1.5s infinite;
}

@keyframes progress-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Special Offer */
.special-offer {
    font-size: 1rem;
    color: #d30000;
    font-weight: 600;
    text-align: center;
    margin: 1rem 0;
    animation: flash 1.5s infinite;
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Product Details */
.product-details {
    padding: 2rem;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Thin transparent border */
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.product-details h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.price {
    font-size: 1.25rem;
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.original-price {
    text-decoration: line-through;
    color: #777;
    font-size: 1rem;
}

.discounted-price {
    color: #d30000;
    font-weight: 700;
    font-size: 1.2rem;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}


.sold, .viewers, .shipping, .return, .delivery {
    font-size: 1rem;
    color: #333; /* Dark text for better contrast */
    background-color: #ffffff; /* White background */
    padding: 12px 20px; /* Slightly larger padding */
    border-radius: 12px; /* Softer rounded corners */
    margin: 0.75rem 0;
    display: flex;
    align-items: center;
    text-align: right;
    gap: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Deeper shadow for a "floating" effect */
    border: 1px solid rgba(175, 0, 0, 0.1); /* Subtle border */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Smooth transitions */
}

.sold:hover, .viewers:hover, .shipping:hover, .return:hover, .delivery:hover {
    transform: translateY(-4px); /* Slightly larger lift on hover */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
    background-color: #f9f9f9; /* Light gray background on hover */
}

.sold strong, .viewers strong {
    color: #d30000; /* Red color for emphasis */
    font-weight: 700;
    margin-left: 0.5rem; /* Add space between text and strong elements */
}

/* Emoji Styling */
.sold::before, .viewers::before, .shipping::before, .return::before {
    font-size: 1.2rem;
    display: inline-block;
}

/* Flashing Effect */
.sold::before {
    content: "🔥";
    animation: flash 1s infinite;
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Heartbeat Effect */
.viewers::before {
    content: "👀";
    animation: heartbeat 1.2s infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Floating Effect */
.shipping::before {
    content: "📦";
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}


/* Floating Effect */
.delivery::before {
    content: "🚀";
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

/* Rotating Effect */
.return::before {
    content: "🔄";
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Product Description */
.description {
    padding: 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Thin transparent border */
}

.description h2 {
    font-size: 1.5rem;
    color: #333;
}

.description ul {
    list-style-type: disc;
    padding-right: 1.5rem;
}

.description li {
    margin-bottom: 0.5rem;
}

/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

/* Slideshow Container */
.slideshow {
    width: 100%;
    margin: 1rem auto;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    border: 1px solid #da0000; /* Thin transparent border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    direction: ltr;
}

/* Slides Wrapper */
.slides {
    display: flex;
    transition: transform 0.5s ease; /* Smooth slide transition */
}

/* Individual Slide */
.slides img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover; /* Ensure images fill the container */
    flex: 0 0 100%; /* Each image takes full width */
}

/* Pagination Dots */
.pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #b40000; /* Orange color for active dot */
}

/* Review Section */
#customer-reviews {
    padding: 3rem 2rem;
    background: #ffeee0;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    direction: rtl;
}

.customer-reviews-heading {
    font-size: 1.75rem;
    color: #333;
    margin-bottom: 2rem;
    font-weight: 700;
}

.reviews-carousel-container {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
}

.review-card {
    display: none;
    padding: 1.5rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: opacity 0.5s ease;
}

.review-card.active-review {
    display: block;
}

.review-rating-stars {
    font-size: 1.5rem;
    color: #ffc107; /* Gold color for stars */
    margin-bottom: 1rem;
}

.review-content-text {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.review-author-name {
    font-size: 1rem;
    color: #333;
    font-weight: 600;
}

/* Pagination */
.reviews-pagination-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.pagination-dot {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.pagination-dot.active-dot {
    background: #a70600; /* Red color for active dot */
}

/* Sticky Buttons Container */
.sticky-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

/* Sticky Order Now Button */
.sticky-order-button {
    position: fixed;
    bottom: 0px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    background: #be0000;
    color: #fff;
    border: none;
    padding: 15px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 0px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 1000;
    font-family: 'Tajawal', sans-serif;
}

.sticky-order-button:hover {
    background: #003b7e;
    transform: translateX(-50%) scale(1.05);
}

/* Sticky Go to Top Button */
.sticky-top-button {
    display: none; /* Hidden by default */
    background: #333;
    color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, transform 0.3s ease;
}

.sticky-top-button:hover {
    background: #555;
    transform: scale(1.1);
}

/* Show Go to Top Button when Header is Not Visible */
.sticky-top-button.visible {
    display: block;
}

/* Hide Go to Top Button on Mobile Devices */
@media (max-width: 768px) {
    .sticky-top-button {
        display: none !important; /* Force hide on mobile */
    }
}

/* Hide Order Now Button by Default */
.sticky-order-button {
    display: none; /* Hidden by default */
}

/* Show Order Now Button When Needed */
.sticky-order-button.visible {
    display: flex;
}

/* FAQs Section */
.faqs-section {
    padding: 2rem;
    background: #f9f9f9;
    max-width: 800px;
    margin: 0rem auto;
}

.faqs-section h2 {
    font-size: 1.75rem;
    color: #333;
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

/* FAQ Item */
.faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: rgba(0, 0, 0, 0.05);
}

.faq-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

/* FAQ Answer */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 1rem;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
    padding: 1rem 0;
}

/* Active State */
.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-item.active .faq-answer {
    max-height: 200px; /* Adjust based on content */
    padding: 0 1rem 1rem;
}

/* Sales Boost Section */
.sales-boost {
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    background: linear-gradient(135deg, #ad0e0e, #fe7b7b); /* Gradient background */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 0rem auto;
    max-width: 100%;
}

.sales-boost-content {
    flex: 1;
    text-align: right;
}

.sales-boost-content h2 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 1rem;
    font-weight: 700;
}

.sales-boost-content p {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.sales-boost-content .cta-button {
    background: #fff;
    color: #d30000;
    border: none;
    padding: 12px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.sales-boost-content .cta-button:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

/* Optional Image */
.sales-boost-image {
    flex: 1;
    text-align: left;
}

.sales-boost-image img {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .sales-boost {
        flex-direction: column;
        text-align: right;
    }

    .sales-boost-content {
        text-align: right;
    }

    .sales-boost-image {
        margin-top: 1.5rem;
    }
}

.sales-boost-image2 {
    flex: 1;
    text-align: left;
}

.sales-boost-image2 img {
    max-width: 100%;
}


.trust-badges {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #ffe6e6;
    padding: 25px;
    margin: 0 auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 120px;
}

.badge img {
    width: 50px;
    height: 50px;
}

.badge p {
    font-size: 14px;
    color: #333;
    font-weight: bold;
}
/* Order Form Section */
.order-form {
    background: #ffffff;
    max-width: 400px;
    margin: 0 auto;
    text-align: right;
    font-family: 'Tajawal', sans-serif;
    width: 100%; /* Ensure it takes full width up to max-width */
    box-sizing: border-box; /* Prevent content overflow */
}

/* Heading with Thin Dashed Line at Bottom */
.order-form h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-align: right;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #ddd;
}

/* Form Elements */
.order-form form {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: 1.0rem;
}

.order-form label {
    font-size: 1rem;
    color: #555;
    font-weight: 600;
    display: block;
}

/* Select Dropdown Styling */
.order-form select {
    width: 100%;
    height: 50px;
    padding: 0.75rem 0.75rem 0.75rem 2rem !important;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
    box-sizing: border-box;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    background-size: 12px;
    font-family: 'Tajawal', sans-serif;
}

/* Input Field Styling */
.order-form input[type="text"], .order-form input[type="tel"] {
    width: 100%;
    height: 50px;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    font-family: 'Tajawal', sans-serif;
}

/* Focus States */
.order-form select:focus,
.order-form input[type="text"]:focus,
.order-form input[type="tel"]:focus {
    border-color: #0066da;
    box-shadow: 0 0 8px rgba(211, 0, 0, 0.2);
    outline: none;
}

/* Textarea Styling */
.order-form textarea {
    width: 100%;
    min-height: 120px;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
    box-sizing: border-box;
    resize: vertical;
    overflow: hidden;
    line-height: 1.5;
    font-family: 'Tajawal', sans-serif;
}

/* Focus State */
.order-form textarea:focus {
    border-color: #0066da;
    box-shadow: 0 0 8px rgba(211, 0, 0, 0.2);
    outline: none;
}

/* Total Price with Thin Dashed Lines at Top and Bottom */
.order-form .total {
    font-size: 1.2rem;
    color: #333;
    font-weight: 700;
    text-align: right;
    margin: 1rem 0;
    padding: 1rem 0;
    border-top: 1px dashed #ddd;
    border-bottom: 1px dashed #ddd;
}

.order-form .total strong {
    color: #d30000;
}

/* CTA Button */
.order-form .cta-button {
    background: #d30000;
    color: #fff;
    border: none;
    padding: 1rem;
    height: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-form .cta-button:hover {
    background: #b20000;
    transform: translateY(-2px);
}

/* Phone Input Container */
.phone-input {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
    padding: 0.75rem;
    box-sizing: border-box;
}

/* Country Flag */
#country-flag {
    font-size: 1.2rem;
    margin-right: 8px;
}

/* Country Code */
#country-code {
    font-size: 1rem;
    color: #555;
    margin-right: 8px;
}

/* Phone Input */
#phone {
    flex: 1;
    padding: 0.5rem;
    font-size: 1rem;
    border: none;
    background: transparent;
    outline: none;
    box-sizing: border-box;
}

/* Responsive Design */
@media (max-width: 768px) {
    .order-form {
        padding: 1rem; /* Padding adjustment */
        width: 100%; /* Ensure full width on smaller screens */
    }

    .order-form h2 {
        font-size: 1.5rem; /* Adjust heading size for mobile */
    }

    .order-form input[type="text"],
    .order-form input[type="tel"],
    .order-form select {
        padding: 0.5rem;
        font-size: 0.9rem; /* Smaller font size */
    }

    .order-form .cta-button {
        font-size: 1rem;
        padding: 0.75rem;
    }

    /* Adjust form layout on smaller screens */
    .order-form form {
        width: 100%;
    }
}

/* General Styles */
.order-steps {
    padding: 2rem;
    background-color: #f9f9f9;
    text-align: center;
}

.order-steps h2 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 2rem;
}

.steps-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.step {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #860000;
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 50%;
    flex-shrink: 0;
}

.step-content {
    text-align: right;
}

.step-content h3 {
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.step-content p {
    font-size: 1rem;
    color: #666;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .step {
        flex-direction: column;
        text-align: center;
    }

    .step-content {
        text-align: center;
    }
}

footer {
    background-color:rgb(44, 44, 43);
    color:rgb(255, 240, 217);
    text-align: center;
    padding: 20px;
    margin-top: 0; /* Remove space above the footer */
}

footer p {
    font-size: 1rem;
}

footer a {
    color: #dd0000;
    text-decoration: none;
}

        
        
/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    overflow: auto;
    padding-top: 60px;
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 450px;
    color: #666; /* Set the text color to grey */
    text-align:right;
}

.close {
    color: #aaa;
    float: left;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.social-media-links {
    margin-top: 10px;
}

.social-icon {
    width: 30px;
    height: 30px;
    margin: 0 10px;
    transition: all 0.3s;
    margin-bottom: 30px ;
}

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

/* Responsive Styles */

/* For devices with a max-width of 768px (tablets and smaller) */
@media (max-width: 768px) {
    /* Top Bar */
    .top-bar p{
        font-size: 0.9rem;
        padding: 4px;
    }

    /* Product Name */
    .product-name {
        font-size: 1.4rem;
        margin: 1rem 0;
    }

    /* CTA Button */
    .cta-button {
        font-size: 1.1rem;
        padding: 0.8rem 1.5rem;
        border-radius: 6px;
    }

    /* Sales Boost Content */
    .sales-boost-content h2 {
        font-size: 1.5rem;
        margin-bottom: 0.8rem;
    }
}

/* For devices with a max-width of 480px (mobile phones) */
@media (max-width: 480px) {
    /* Top Bar */
    .top-bar p{
        font-size: 0.9rem;
        padding: 3px;
    }

    /* Product Name */
    .product-name {
        font-size: 1.2rem;
        margin: 0.8rem 0;
    }

    /* CTA Button */
    .cta-button {
        font-size: 1.0rem;
        padding: 0.7rem 1rem;
        border-radius: 4px;
    }

    /* Sales Boost Content */
    .sales-boost-content h2 {
        font-size: 1.2rem;
        margin-bottom: 0.6rem;
    }
}