/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styling */
body {
    font-family: 'Roboto', sans-serif;
    direction: ltr; /* Default direction (left to right) */
    text-align: left; /* Default text alignment */
    background-color: #ffffff; /* Light background for the site */
}

/* RTL Support */
body[lang="ar"] {
    direction: rtl; /* Right to left for Arabic */
    text-align: right; /* Right align text in RTL */
}

/* Header Section */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: linear-gradient(to right, #ffffff, #ffffff);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin-bottom: 0; /* Remove bottom margin */
}

/* Logo Styling */
header .logo img {
    height: 150px; /* Adjusted logo height for consistency */
}

/* Navigation Menu */
header nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
    padding: 0;
}

/* Navigation Links */
header nav ul li a {
    color: #F34838;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 15px;
    transition: color 0.3s, background-color 0.3s;
    border-radius: 5px; /* Rounded corners for better aesthetics */
}

header nav ul li a:hover {
    color: #ffffff;
    background-color: #F34838; /* Hover effect */
}

/* Language Switcher */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 15px;
    position: absolute;
    top: 10px;
    right: 10px;
}

.language-switcher img {
    width: 30px;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s;
}

.language-switcher img:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}
/* Header Container */
.header-container {
    display: flex;
    align-items: center; /* Vertically align logo, nav, and language switcher */
    justify-content: space-between; /* Space out logo, nav, and language switcher */
    padding: 0 20px; /* Horizontal padding */
}

/* Logo Styling */
.logo img {
    max-height: 120px; /* Adjust logo size */
    margin-right: 150px; /* Add space between logo and nav */
}

/* Navigation Bar Styling */
nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px; /* Reduce gap between nav items */
}

nav ul li a {
    text-decoration: none;
    font-size: 20px;
    color: #333;
    font-weight: bold;
    transition: color 0.9s ease;
}

nav ul li a:hover {
    color: #F44336; /* Change color on hover */
}

/* Language Switcher Styling */
.language-switcher {
    position: relative;
    display: flex;
    align-items: center; /* Align with navigation */
}

#toggle-language {
    background-color: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.language-dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    top: 40px; /* Adjust dropdown positioning */
    right: 0;
    background-color: #fff;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    z-index: 1000;
}

.language-dropdown img {
    width: 25px;
    margin: 5px;
    cursor: pointer;
}
/* Icon (V-shaped caret) style */
#dropdown-icon {
    font-size: 18px; /* Size of the icon */
    margin-left: 5px; /* Space between the flag and the icon */
    transition: transform 0.3s ease-in-out; /* Smooth rotation transition */
}

/* Rotate the dropdown icon when the menu is active (open) */
#toggle-language.active #dropdown-icon {
    transform: rotate(180deg); /* Rotates the caret icon */
}


#toggle-language.active + .language-dropdown {
    display: flex; /* Show dropdown on toggle */
    flex-direction: column;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column; /* Stack items on smaller screens */
        align-items: flex-start; /* Align items to the left */
    }

    nav ul {
        gap: 10px; /* Reduce spacing for smaller screens */
    }

    .language-switcher {
        margin-top: 10px; /* Add space on smaller screens */
    }
}

/* Hero Section */
.hero {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff; /* Light background */
    margin: 0; /* Remove margin */
    padding: 0; /* Remove padding */
}

/* Slideshow Container */
.slideshow-container {
    width: 80%; /* Center the slideshow */
    height: 70%; /* Maintain a consistent aspect ratio */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px; /* Rounded corners for slideshow */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Shadow for depth */
}

/* Slide Images */
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: fadeSlide 6s infinite; /* Smooth fade animation */
}

/* Animation for Slides */
@keyframes fadeSlide {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* Hero Text */
.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.4;
    text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-text {
        font-size: 1.8rem;
    }

    .slideshow-container {
        width: 95%;
        height: 60%;
    }
}

/* Service Section */
.services {
    position: relative;
    text-align: center; /* Center text within the section */
    margin: 0; /* Remove margin */
    padding: 20px 0; /* Minimal padding */
}

/* Ribbon Effect */
.ribbon-container {
    display: inline-block;
    background: linear-gradient(45deg, #F34838); 
    padding: 20px 40px;
    position: relative;
    z-index: 1;
    border-radius: 5px;
}

.ribbon-container h2 {
    font-size: 24px;
    color: #333; /* Text color */
    font-weight: bold;
    margin: 0;
}

/* General Section Styling */
.services {
    padding: 20px;
    background-color: #ffffff;
}

/* Ribbon Heading */
.ribbon-container h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
    color: #333;
}

/* Service Rows */
.service-row {
    display: flex;
    align-items: flex-start; /* Align items at the top */
    margin-bottom: 30px; /* Add spacing between rows */
}


/* Service Icon */
.service-icon {
    flex: 0 0 10%; /* Adjust icon width */
    text-align: center;
    margin-right: 10px; /* Space between icon and service blocks */
}

.service-icon img {
    width: 60px; /* Icon size */
    height: auto;
}

/* Service Blocks */
.service-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
    gap: 20px; /* Space between service cards */
    width: 70%;
}

/* Service Card */
.service-card {
    position: relative;
    width: 80%;
    height: 80%; /* Ensures the card adjusts properly */
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: flex-end; /* Align text at the bottom */
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; /* Transition on hover */
    cursor: pointer;
}

/* Square shape adjustment */
.service-card {
    aspect-ratio: 1; /* Ensures the card maintains a square shape */
}

/* Hover Effect on Service Card */
.service-card:hover {
    transform: scale(1.5); /* Slight zoom effect */
}

/* Text Inside Service Card */
.service-card span {
    position: relative; /* Ensure text stays above the dimming overlay */
    z-index: 2; /* Above the dimming layer */
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.8); /* Highlight the text */
    color: #333; /* Dark text for contrast */
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    text-align: center;
    transition: opacity 0.3s ease-in-out;
   
}

/* Remove Border (If Needed) */
.service-card {
    border: none; /* Remove border if needed */
}

/* Blur Effect when Card is Clicked */
.service-card.clicked {
    filter: blur(4px); /* Blurs the image when clicked */
}

/* Show Text on Hover (Optional) */
.service-card:hover span {
    opacity: 1; /* Text appears on hover too */
}



/* Ribbon Container Styling */
.ribbon-container {
    display: inline-block;
    background: #F44333; /* Ribbon background color */
    padding: 10px 30px; /* Adjust padding for visual balance */
    position: relative;
    z-index: 1;
    border-radius: 5px; /* Smooth edges for the ribbon */
    margin-bottom: 20px; /* Add spacing under the ribbon */
    text-align: center; /* Center align content */
}

/* Ribbon Heading Text */
.ribbon-container h2 {
    font-size: 24px; /* Adjust font size */
    color: ffffff; /* Text color */
    font-weight: bold;
    margin: 0;
    position: relative;
}

/* Ribbon Ends Effect */
.ribbon-container::before,
.ribbon-container::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; /* Adjust the length of ribbon ends */
    height: 20px; /* Adjust the height */
    background: #F44333; /* Match ribbon color */
    z-index: 0;
}

.ribbon-container::before {
    left: -40px; /* Position the left ribbon */
    clip-path: polygon(100% 0, 0 50%, 100% 100%); /* Create triangular shape */
}

.ribbon-container::after {
    right: -40px; /* Position the right ribbon */
    clip-path: polygon(0 0, 100% 50%, 0 100%); /* Create triangular shape */
}


/* Successful Stories Section Styling */
.stories {
    padding: 40px 20px;
    background-color: #f8f8f8; /* Optional background color */
}

.ribbon-container {
    text-align: center;
}

.ribbon-container h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #ffffff;
}

/* Testimonials Layout (Row) */
.testimonials {
    display: flex; /* Display testimonials in a row */
    justify-content: space-between; /* Space between testimonials */
    gap: 20px; /* Add space between items */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    margin-top: 20px;
}

/* Individual Testimonial Styling */
.testimonial {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #ffffff;
    color: #333333;
    border-radius: 10px;
    padding: 20px;
    width: 300px; /* Set width for each testimonial */
    box-shadow: 0 4px 8px rgba(245, 243, 243, 0.1);
    transition: transform 0.3s ease-in-out;
    margin-bottom: 30px; /* Add space between testimonials */
}

.testimonial:hover {
    transform: translateY(-5px); /* Adds a hover effect */
}

/* Testimonial Image */
.testimonial-image {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Makes the image circular */
    overflow: hidden;
}

.testimonial-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fits inside the circle */
}

/* Testimonial Content */
.testimonial-content {
    max-width: 200px;
}

/* Responsive Media Queries */

/* Small Screens (768px and below) */
@media (max-width: 768px) {
    .testimonials {
        flex-direction: column; /* Stack testimonials on small screens */
    }

    .testimonial {
        flex: 1 1 100%; /* Make testimonials full-width on smaller screens */
        max-width: 100%; /* Ensure full width on mobile */
    }
}


/* Footer Content Styling */
.footer-content {
    display: flex;
    justify-content: space-between; /* Spread sections across */
    align-items: flex-start; /* Align to the top */
    padding: 20px; /* Add spacing */
    flex-wrap: wrap; /* Wrap content on smaller screens */
    gap: 20px; /* Add space between sections */
    background-color: #F34838; /* Footer background color */
}

/* Individual Footer Section Styling */
.footer-info, .footer-qr, .footer-links, .footer-subscribe {
    flex: 1; /* Ensure equal spacing */
    min-width: 250px; /* Prevent shrinking too much */
    color: #ffffff; /* Default text color */
}

/* Footer Info Section */
.footer-info {
    text-align: left; /* Left-align content */
}
.footer-info h3 {
    font-size: 20px; /* Larger heading font size */
    margin-bottom: 10px; /* Space below heading */
    color: #ffffff; /* Ensure white text color */
}
.footer-info p {
    line-height: 1.6; /* Increase readability */
    margin: 5px 0; /* Add spacing between lines */
}
.footer-info a {
    color: #ffffff; /* Link color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s; /* Smooth hover effect */
}
.footer-info a:hover {
    color: #ff7f7f; /* Add hover effect for links */
}

/* Footer QR Section */
.footer-qr {
    text-align: center; /* Center-align QR section */
    margin: 20px auto;
    color: #ffffff; /* Ensure text is white */
}
.footer-qr h3 {
    font-size: 18px;
    margin-bottom: 10px;
}
.qr-code-box {
    background-color: #ffffff; /* White background for QR code */
    padding: 20px; /* Padding around QR code */
    display: inline-block; /* Center-align QR box */
    border-radius: 8px; /* Add rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow */
}
.qr-code-box img {
    width: 150px; /* Size of QR image */
    height: auto; /* Maintain aspect ratio */
}

/* Footer Links Section */
.footer-links {
    text-align: center; /* Center-align links */
    flex: 2; /* Take up more space */
}
.footer-links a {
    display: block; /* Stack links vertically */
    margin: 5px 0;
    font-weight: bold;
    color: #ffffff; /* Link color */
    text-decoration: none;
    transition: color 0.3s;
}
.footer-links a:hover {
    color: #F44333; /* Hover effect for links */
}

/* Footer Subscribe Section */
.footer-subscribe {
    text-align: center;
    margin-bottom: 20px;
}
.follow-us-text {
    font-size: 18px; /* Heading size */
    font-weight: bold; /* Make it bold */
    margin-bottom: 10px;
    color: #ffffff; /* Match footer text color */
}
.social-media a {
    color: #ffffff;
    font-size: 20px; /* Size for icons */
    margin: 0 10px;
    text-decoration: none;
    transition: color 0.3s;
}
.social-media a:hover {
    color: #F44333; /* Hover effect */
}

/* Footer Bottom Section */
.footer-bottom {
    text-align: center;
    padding: 15px 0;
    border-top: 1px solid #ccc; /* Add a subtle top border */
    color: #ffffff;
    font-size: 14px;
    background-color: #F34838; /* Same background color as the rest of the footer */
}

/* Responsive Media Queries */

/* Large Screens (1200px and below) */
@media (max-width: 1200px) {
    .footer-content {
        justify-content: space-between; /* Adjust alignment */
    }
}

/* Medium Screens (992px and below) */
@media (max-width: 992px) {
    .footer-content {
        flex-direction: column; /* Stack footer sections */
        align-items: center; /* Center align */
    }
    .footer-info, .footer-qr, .footer-links, .footer-subscribe {
        min-width: 100%; /* Full width */
    }
}

/* Small Screens (768px and below) */
@media (max-width: 768px) {
    .footer-info, .footer-qr, .footer-links, .footer-subscribe {
        text-align: center; /* Center align on small screens */
    }
    .footer-qr img {
        width: 100px; /* Adjust QR code size */
    }
}

/* Extra Small Screens (480px and below) */
@media (max-width: 480px) {
    .footer-info, .footer-qr, .footer-links, .footer-subscribe {
        min-width: 100%; /* Full width */
        padding: 10px; /* Reduce padding */
    }
    .footer-content {
        padding: 10px; /* Reduce footer padding */
    }
    .qr-code-box img {
        width: 80px; /* Smaller QR code */
    }
}