/* General Body Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* Light background */
    color: #334155; /* Dark text */
    line-height: 1.6;
}
/* Arabic font and direction for RTL */
body.lang-ar {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    text-align: right;
}

/* Google Fonts - ensure font-display: swap for better performance */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

/* Apply font-display: swap to ensure text is visible during webfont load */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: local('Inter Regular'), local('Inter-Regular'), url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQsPF.woff2) format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    src: local('Cairo Regular'), local('Cairo-Regular'), url(https://fonts.gstatic.com/s/cairo/v14/SLXGc1nY6HgpU-z_zT_g.woff2) format('woff2');
    font-display: swap;
}


/* Gradient Background */
.gradient-bg {
    background: linear-gradient(to right, #6366f1, #8b5cf6); /* Purple-blue gradient */
}

/* Primary Button Styles */
.btn-primary {
    background-color: #2563eb; /* Blue-600 */
    color: white;
    font-weight: bold;
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
    transition: all 0.3s ease; /* transition duration-300 */
    transform: scale(1); /* Initial scale for hover effect */
}
.btn-primary:hover {
    background-color: #1d4ed8; /* Blue-700 */
    transform: scale(1.05); /* hover:scale-105 */
}

/* Outline Button Styles */
.btn-outline {
    border: 2px solid #2563eb; /* border-2 border-blue-600 */
    color: #2563eb; /* text-blue-600 */
    font-weight: bold;
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: all 0.3s ease; /* transition duration-300 */
    transform: scale(1); /* Initial scale for hover effect */
}
.btn-outline:hover {
    background-color: #2563eb; /* hover:bg-blue-600 */
    color: white; /* hover:text-white */
    transform: scale(1.05); /* hover:scale-105 */
}

/* Feature Card Styles */
.feature-card {
    background-color: white;
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: all 0.3s ease; /* transition duration-300 */
    text-align: center;
}
.feature-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
}

/* Feature Icon Styles */
.feature-icon {
    font-size: 3rem; /* text-5xl (adjust as needed, 5xl is quite large) */
    margin-bottom: 1rem; /* mb-4 */
    color: #9333ea; /* purple-600 */
    margin-left: auto;
    margin-right: auto;
    width: fit-content; /* Center emojis */
}

/* Input Field Styles */
.input-field {
    width: 100%;
    padding: 0.75rem; /* p-3 */
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #d1d5db; /* border border-gray-300 */
    outline: none; /* focus:outline-none */
}
.input-field:focus {
    border-color: #3b82f6; /* focus:ring-2 focus:ring-blue-500 (visual feedback) */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* Custom focus ring */
}


/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Modal Content */
.modal-content {
    background-color: white;
    padding: 40px;
    border-radius: 1rem;
    text-align: center;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.modal-overlay.show .modal-content {
    transform: translateY(0);
    opacity: 1;
}

/* Confetti animation */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #f0f; /* Pink */
    border-radius: 50%;
    opacity: 0;
    animation: confetti-fall 3s ease-out forwards;
}
.confetti:nth-child(2n) { background-color: #0ff; /* Cyan */ }
.confetti:nth-child(3n) { background-color: #ff0; /* Yellow */ }
.confetti:nth-child(4n) { background-color: #f00; /* Red */ border-radius: 0; transform: rotate(45deg); }
.confetti:nth-child(5n) { background-color: #0f0; /* Green */ }

/* Different start positions and delays for confetti */
.confetti:nth-child(1) { left: 10%; top: 0; animation-delay: 0s; }
.confetti:nth-child(2) { left: 25%; top: -10px; animation-delay: 0.2s; }
.confetti:nth-child(3) { left: 40%; top: 0; animation-delay: 0.4s; }
.confetti:nth-child(4) { left: 55%; top: -5px; animation-delay: 0.6s; }
.confetti:nth-child(5) { left: 70%; top: 0; animation-delay: 0.8s; }
.confetti:nth-child(6) { left: 85%; top: -15px; animation-delay: 1s; }
.confetti:nth-child(7) { left: 5%; top: -20px; animation-delay: 0.1s; }
.confetti:nth-child(8) { left: 20%; top: -25px; animation-delay: 0.3s; }
.confetti:nth-child(9) { left: 35%; top: -30px; animation-delay: 0.5s; }
.confetti:nth-child(10) { left: 50%; top: -35px; animation-delay: 0.7s; }
.confetti:nth-child(11) { left: 65%; top: -40px; animation-delay: 0.9s; }
.confetti:nth-child(12) { left: 80%; top: -45px; animation-delay: 1.1s; }

@keyframes confetti-fall {
    0% { transform: translateY(-100px) rotateZ(0deg); opacity: 1; }
    100% { transform: translateY(500px) rotateZ(720deg); opacity: 0; }
}

/* Screenshot specific styles for 2:1 aspect ratio */
.screenshot-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 50%; /* For 2:1 aspect ratio (height is 50% of width) */
    max-width: 800px; /* Limit max width of the container */
    margin: 0 auto;
    background-color: #e0e7ff; /* Placeholder background */
}
.screenshot-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers the area */
}

/* Mobile Navigation Overlay */
#mobile-menu-overlay {
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%); /* Start off-screen to the right */
}
#mobile-menu-overlay.open {
    transform: translateX(0); /* Slide in */
}
/* For RTL, slide from left */
body.lang-ar #mobile-menu-overlay {
    transform: translateX(-100%); /* Start off-screen to the left */
}
body.lang-ar #mobile-menu-overlay.open {
    transform: translateX(0); /* Slide in */
}