body {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
}
/* Customizing the navbar to add margin */
nav.navbar {
    margin: 0 20px; /* Updated to simplify margin setting */
    justify-content: center; /* Centers the content in a flex container */
    border-radius: 5px; /* Optional: Adds rounded corners */
}

/* Assuming social icons are wrapped in a .navbar-nav or similar container */
.navbar-nav {
    justify-content: center; /* Center the social icons within the navbar-nav */
    flex-grow: 1; /* Allows the navbar-nav to take up as much space as available */
}

/* Custom icon size */
.nav-link i {
    font-size: 1.5rem;
}

/* Custom icon colors */
.bi-facebook { color: #3b5998; }
.bi-twitter { color: #1da1f2; }
.bi-instagram { color: #e1306c; } /* Instagram icon color */

a:link, a:visited, a:hover, a:active {
    text-decoration: none;
}

.product-section {
    padding: 20px;
    background-color: #f5f5f5; /* Adjust the background color as needed */
    border-radius: 8px;
    margin-top: 20px; /* Spacing from the top of the page or the preceding element */
}

.product-section h1 {
    color: #007bff; /* Adjust the heading color as needed */
    text-align: center;
    padding-bottom: 15px;
    font-size: 50px;
    font-weight: bold;
}

.product-section .btn {
    display: block;
    width: 200px;
    margin: 10px auto; /* Center the button */
    font-size: 20px;
}

.product-section marquee p{
    font-size: 20px;
}

.product-section img {
    width: 100%;
    margin-bottom: 20px; /* Added margin bottom to the image */
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adding a subtle shadow to the cards */
    transition: all 0.2s ease-in-out; /* Smooth transition for hover effect */
}

.product-section img:hover {
    transform: scale(1.05); /* Slightly enlarge the card on hover */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Increase shadow size on hover */
}

.product-section .product-image {
    text-align: center; /* Center the product image */
    margin-top: 20px;
    margin-bottom: 50px;
}

.product-item {
    position: relative;
}

.product-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Hide icons by default */
}

.product-item:hover .product-icons {
    display: flex; /* Show icons on hover */
    justify-content: center;
    align-items: center;
}

.product-icons a {
    color: #007bff; /* Icon color */
    background-color: white; /* Background color */
    border-radius: 50%; /* Circular shape */
    padding: 15px; /* Adjust padding to make the icon bigger */
    margin: 5px;
    text-decoration: none;
    font-size: 24px; /* Adjust font size to make the icon visually bigger */
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
    display: inline-flex; /* Ensures the icon is properly centered */
    align-items: center; /* Center align icon vertically */
    justify-content: center; /* Center align icon horizontally */
}

.product-icons a:hover, .product-icons a:focus {
    background-color: white; /* Darker shade for hover/focus */
    color: #007bff;
    transform: scale(1.1); /* Slightly enlarge the icon on hover */
}


@keyframes fadeInScaleUp {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.product-icons.show {
    animation: fadeInScaleUp 0.5s ease forwards;
}


#productSelectionContainer {
    display: none; 
}

/* Review Section */
h2 {
    font-size: 2rem; /* Heading size for the review section */
    color: #333; /* Heading color for the review section */
}

.card {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adding a subtle shadow to the cards */
    transition: all 0.2s ease-in-out; /* Smooth transition for hover effect */
}

.card:hover {
    transform: scale(1.05); /* Slightly enlarge the card on hover */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Increase shadow size on hover */
}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Spacing out the content inside the card */
}

.card-text {
    font-size: 1rem; /* Adjust text size as needed */
    color: #555; /* Text color for the card */
    margin-bottom: 1.5rem; /* Spacing below the card text */
    direction: rtl;
}

.blockquote-footer {
    font-style: italic; /* Style for the citation */
}


/* Additional styles for form */
.border {
    border: 2px dotted #0056b3 !important; /* Change the border as per the design */
}

.form-control {
    margin-bottom: 15px; /* Spacing between form inputs */
    direction: rtl;
}

.btn-primary {
    background-color: #0056b3; /* Adjust the button color as needed */
    border: none;
    border-radius: 30px;
}

.divider {
    margin: 10px 0; /* Adjust spacing around the divider as needed */
    color: #333; /* Divider text color */
    font-weight: bold; /* Make the divider text bold */
}

/* Style for the icons list */
.bi {
    font-size: 1.5rem; /* Icon size */
    color: #0056b3; /* Icon color - match your site theme */
}

.badge {
    padding: 0.5em 0.75em;
    font-size: 1rem;
    font-weight: 500;
}

/* Add more custom styles if needed */

/* Styles for badges */
.badge {
    margin: 0 5px; /* Spacing between badges */
}

/* Styles for social media buttons */
.btn-outline-primary {
    color: #0056b3;
    border-color: #0056b3;
}

/* .btn-outline-primary i {
    Adjust icon styles if needed
} */

/* Optional: Custom styling for the Scroll to Top Button */
#scrollTopBtn {
    width: 50px;
    height: 50px;
    line-height: 46px; /* Adjust the line height to vertically center the icon */
    text-align: center;
    font-size: 20px; /* Adjust the font size of the icon */
}

/* Custom styles for the static bottom button */
.pulsing-button {
    width: 80%; /* Adjust the width as needed */
    border-radius: 25px; /* Rounded corners */
    background-color: #0056b3; /* Background color */
    padding: 15px 30px; /* Padding inside the button */
    font-size: 1.25rem; /* Font size */
    color: #fff; /* Text color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Shadow effect */
    border: none; /* No border */
    margin: 0 auto; /* Centering the button */
    animation: pulse 2s infinite; /* Pulsing animation */
}

/* Pulsing animation keyframes */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

/* whatsapp icon */
.whatsapp-container {
    position: fixed;
    bottom: 85px;
    right: 20px;
    display: flex;
    align-items: center;
    z-index: 100;
}

#whatsappBtn {
    font-size: 40px;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    border: none;
    align-items: center;
    background-color: #25d366;
    color: #fff;
}

.whatsapp-message {
    background-color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
    margin-right: 10px; /* Adjust space between message and button */
    display: none; /* Initially hidden */
}


/* Optional: add hover effect */
.whatsapp-button:hover .help-text{
    background-color: #25d366;
    color: #fff;
    display: block;
}

.footer {
    border-top: 1px solid #eaeaea;
    padding: 40px 0; /* Increased padding for larger space */
    background: white; /* Adjusted background color to match the image */
    color: white; /* Footer text color */
    position: relative; /* For positioning the footer at the bottom */
}

.footer-logo {
    max-height: 100px; /* Adjust to control the size of the logo */
    width: auto; /* Keep the aspect ratio */
    margin-bottom: 20px; /* Space between logo and text */
}

.footer-text {
    font-size: 0.75rem; /* Adjust to match your design */
    letter-spacing: 1px; /* Optional: styling for letter spacing */
    color: black;
}


/* FAQ Section */
.faq-button {
    background-color: #20BDB3; /* Example background color */
    color: white; /* Text color */
    text-align: start; /* Align text to the start */
}

.accordion-icon {
    display: inline-block; /* Needed for spacing */
    transition: transform 0.2s; /* Smooth transition for the icon */
}

/* Rotate icon when accordion is open */
.accordion-button:not(.collapsed) .accordion-icon {
    transform: rotate(45deg); /* Rotates the '+' icon to an 'x' */
}

/* Space between accordion items */
.accordion-item {
    margin-bottom: 1rem; /* Adjust as needed */
}

/* More styles here */

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-section .btn {
        width: 100%;
    }
    .btn {
        width: 100%;
        margin-bottom: 10px; /* Spacing below buttons on small screens */
    }
    .pulsing-button {
        width: 95%; /* Larger width on smaller screens */
    }
}