/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Cairo', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #ffffff;
    direction: rtl;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styles */
.header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}

.nav {
    padding: 1rem 0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-img {
    width: 40px;
    height: 40px;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #8B5CF6, #A855F7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

/* Styles for the demo video modal.  The modal is hidden by default and shown when the user clicks the
   "شاهد العرض التوضيحي" button.  It centers an iframe on the screen and dims the background. */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.video-modal .modal-content {
    position: relative;
    width: 100%;
    max-width: 800px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.video-modal .modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    cursor: pointer;
    color: #888;
    z-index: 1;
}

.video-modal .video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-modal .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.nav-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #8B5CF6;
}

.auth-buttons-desktop {
    display: flex;
    gap: 1rem;
}

.auth-buttons-desktop .btn {
    min-width: 120px;
    padding: 0.75rem 1.5rem;
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-menu-btn span {
    width: 25px;
    height: 3px;
    background: #333;
    margin: 3px 0;
    transition: 0.3s;
}

/* Button Styles */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.btn-primary {
    background: linear-gradient(135deg, #8B5CF6, #A855F7);
    color: white;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.btn-outline {
    background: transparent;
    color: #8B5CF6;
    border: 2px solid #8B5CF6;
}

.btn-outline:hover {
    background: #8B5CF6;
    color: white;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-full {
    width: 100%;
}

/* Small button variant for contact links */
.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Contact info link styles */
.contact-info .contact-link {
    color: #4f46e5; /* A purple hue consistent with theme */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.contact-info .contact-link:hover {
    color: #6d28d9;
}

/* Hero Section */
.hero {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-badge {
    display: inline-block;
    background: linear-gradient(135deg, #8B5CF6, #A855F7);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    animation: float 3s ease-in-out infinite;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #1e293b;
}

.gradient-text {
    background: linear-gradient(135deg, #8B5CF6, #A855F7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.2rem;
    color: #64748b;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.hero-stats {
    color: #64748b;
    font-size: 0.9rem;
}

.hero-image {
    text-align: center;
}

.chatbot-img {
    max-width: 100%;
    height: auto;
    animation: float 3s ease-in-out infinite;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Section Styles */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1e293b;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #64748b;
}

/* Features Section */
.features {
    padding: 80px 0;
    background: white;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(139, 92, 246, 0.1);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text */
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.2);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #8B5CF6, #A855F7);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem; /* Center icon */
    color: white;
}

.feature-icon svg {
    width: 30px;
    height: 30px;
}

.feature-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1e293b;
}

.feature-description {
    color: #64748b;
    line-height: 1.7;
    flex-grow: 1;
}

/* How It Works Section */
.how-it-works {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.step-card {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.step-card:hover {
    transform: translateY(-5px);
}

.step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #8B5CF6, #A855F7);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
}

.step-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1e293b;
}

.step-description {
    color: #64748b;
    line-height: 1.7;
}

/* Pricing Section */
.pricing {
    /* Reduce bottom padding to avoid excessive whitespace below the pricing section. */
    padding: 80px 0 60px;
    background: white;
}

/*
 * When toggling between monthly and yearly plan grids we want the grids to be
 * absolutely positioned on top of each other so that hiding one does not
 * create extra whitespace in the document flow.  The wrapper acts as a
 * container whose height is adjusted dynamically via script.js to match the
 * height of the currently visible grid.
 */
.pricing-grids-wrapper {
    position: relative;
    width: 100%;
    /* Provide a reasonable minimum height so that the content following the pricing section
       does not jump up before the JavaScript adjusts the height.  This prevents the
       "About" section from appearing under the pricing section momentarily on page load. */
    min-height: 700px;
}

/* Each pricing-grid inside the wrapper should fill the full width and be
   absolutely positioned at the top left.  This allows the hidden grid to
   not contribute to layout while preserving the grid layout for its
   children. */
.pricing-grids-wrapper .pricing-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.pricing-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
    background-color: #f0f4f8;
    border-radius: 10px;
    padding: 5px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.toggle-btn {
    background: none;
    border: none;
    padding: 10px 20px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.toggle-btn.active {
    background: linear-gradient(135deg, #8B5CF6, #A855F7);
    color: white;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    /* Always animate opacity and transform changes when toggling plans */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Transition classes for pricing plan toggling */
.pricing-grid.hidden {
    opacity: 0;
    /* Slide horizontally when hiding to create a dynamic feel similar to commercial
       pricing pages.  We move it to the left for RTL layouts. */
    transform: translateX(100px);
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.pricing-grid.visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.pricing-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Adjust min-height to allow cards to fit content without creating excessive whitespace */
    min-height: 620px;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.pricing-card-popular {
    border-color: #8B5CF6;
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.2);
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #8B5CF6, #A855F7);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.pricing-header {
    margin-bottom: 2rem;
}

.pricing-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.pricing-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1e293b;
}

.pricing-subtitle {
    color: #64748b;
}

.pricing-price {
    margin-bottom: 2rem;
}

.price {
    font-size: 3rem;
    font-weight: 700;
    color: #8B5CF6;
}

.currency {
    font-size: 1rem;
    color: #64748b;
}

.pricing-features {
    list-style: none;
    margin-bottom: 2rem;
    text-align: right;
}

.pricing-features li {
    padding: 0.5rem 0;
    color: #64748b;
    position: relative;
    padding-right: 1.5rem;
    white-space: nowrap; /* Keep content on one line */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis for overflow */
}

.pricing-features li::before {
    content: "✓";
    position: absolute;
    right: 0;
    color: #8B5CF6;
    font-weight: bold;
}

/* About Section */
.about {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

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

.about-description {
    font-size: 1.2rem;
    color: #64748b;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.stat-item {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(139, 92, 246, 0.1);
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.2);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #8B5CF6;
    margin-bottom: 0.5rem;
}

.stat-text {
    color: #64748b;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Contact Section */
.contact {
    padding: 80px 0;
    background: white;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.info-item {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(139, 92, 246, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.2);
}

.info-item h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.info-item p {
    color: #64748b;
    font-size: 1.1rem;
}

.contact-form {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid rgba(139, 92, 246, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #1e293b;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #8B5CF6;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Enhance the layout of form groups so that labels appear cleanly above inputs on all screen sizes */
.form-group {
    display: flex;
    flex-direction: column;
}
.form-group label {
    margin-bottom: 0.25rem;
    text-align: right;
}
.form-group input,
.form-group textarea {
    margin-top: 0;
}

/* Input with icon styling */
.input-with-icon {
    position: relative;
}
.input-with-icon input,
.input-with-icon textarea {
    padding-left: 2.5rem;
}
.input-with-icon i {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: #8B5CF6;
    pointer-events: none;
    font-size: 1rem;
}

/* Footer */
.footer {
    background: #1e293b;
    color: white;
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.footer-description {
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.footer-links h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

.footer-links ul {
    list-style: none;
}

.footer-links ul li {
    margin-bottom: 0.5rem;
}

.footer-links ul li a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links ul li a:hover {
    color: #8B5CF6;
}

.footer-social h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

.social-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-icon:hover {
    color: #8B5CF6;
}

.social-icon img {
    width: 24px;
    height: 24px;
}

.footer-bottom {
    border-top: 1px solid #334155;
    padding-top: 2rem;
    text-align: center;
    color: #94a3b8;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .hero {
        padding: 100px 0 60px;
        min-height: auto;
    }
    
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        display: flex;
        flex-direction: column;
    }
    
    .hero-text-content {
        order: 1;
    }
    
    .hero-image {
        order: 2;
    }
    
    .hero-title {
        font-size: 2.2rem;
        line-height: 1.3;
    }
    
    .hero-description {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .feature-card {
        min-height: auto;
        padding: 1.5rem;
    }
    
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .pricing-card {
        min-height: auto;
        padding: 2rem;
    }
    
    .pricing-card-popular {
        transform: none;
        margin-bottom: 1rem;
    }
    
    .pricing-features li {
        white-space: normal;
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .contact-content {
        /* Stack the contact form and info vertically on mobile. Reduce the gap so the form fills more of the screen */
        grid-template-columns: 1fr;
        gap: 1.25rem;
        display: flex;
        flex-direction: column-reverse;
    }

    .contact-form {
        /* Make the form take up the full width on mobile and reduce side padding */
        padding: 1.5rem 1rem;
        width: 100%;
    }

    .contact-info {
        /* Ensure the contact info spans full width when stacked */
        width: 100%;
    }

    .contact .container {
        /* Reduce horizontal padding in the contact section to let the form expand */
        padding: 0 10px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .footer-section {
        margin-bottom: 1.5rem;
    }
    
    .footer-section h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .contact-item {
        justify-content: center;
    }
    
    .social-icons {
        justify-content: center;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

/* Modal popup for contact form thank-you message */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal-content {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    max-width: 420px;
    width: calc(100% - 40px);
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.modal-content p {
    font-size: 1.1rem;
    color: #1e293b;
    margin-bottom: 1.5rem;
}

.modal-content button {
    margin-top: 0;
}
    
    .auth-buttons-desktop {
        display: none;
    }

    .auth-buttons-mobile {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 1rem;
        margin-top: 1rem;
    }

    .auth-buttons-mobile .btn {
        min-width: unset;
        padding: 0.75rem 1.5rem;
        width: 100%;
    }

    .mobile-menu-btn {
        display: flex;
        z-index: 1001;
        position: relative;
    }

    .nav-links {
        flex-direction: column;
        position: fixed;
        top: 80px;
        right: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(15px);
        padding: 2rem 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        transition: right 0.3s ease;
        justify-content: flex-start;
        align-items: center;
        overflow-y: auto;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        margin-bottom: 0.75rem;
        width: 100%;
        text-align: center;
    }

    .nav-links li:last-child {
        margin-bottom: 0;
    }
    
    .nav-link {
        font-size: 1rem;
        padding: 0.4rem 0.8rem;
        display: block;
        border-radius: 8px;
        transition: all 0.3s ease;
    }
    
    .nav-link:hover {
        background: rgba(139, 92, 246, 0.1);
        color: #8B5CF6;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .steps-grid {
        grid-template-columns: 1fr;
    }
    
    .feature-card {
        padding: 1.25rem;
    }
    
    .step-card {
        padding: 1.5rem;
    }
    
    .pricing-card {
        padding: 1.5rem;
    }
    
    .contact-form {
        /* Tighter padding on extra small devices so fields occupy more space */
        padding: 1.25rem 0.75rem;
        width: 100%;
    }

    .contact-content {
        gap: 1rem;
    }

    .contact-info {
        width: 100%;
    }

    .contact .container {
        padding: 0 5px;
    }
    
    .footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-content {
        gap: 1.5rem;
    }
    
    .footer-section h4 {
        font-size: 1.1rem;
    }
    
    .footer-logo .logo-text {
        font-size: 1.5rem;
    }
    
    .social-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
}

@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none;
    }
    .auth-buttons-mobile {
        display: none;
    }
}

/* Floating Animation for Robot */
@keyframes floating {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

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

.floating {
    animation: floating 3s ease-in-out infinite;
}

/* -------------------------------------------------------------------- */
/* Tablet responsiveness: apply the mobile navigation styles to tablets as well.
   This ensures that on devices with widths up to 1024px (such as iPads and
   landscape tablets) the header collapses the navigation into a mobile
   overlay menu and hides the desktop authentication buttons. */
@media (max-width: 1024px) {
    .auth-buttons-desktop {
        display: none;
    }
    .auth-buttons-mobile {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 1rem;
        margin-top: 1rem;
    }
    .mobile-menu-btn {
        display: flex;
        z-index: 1001;
        position: relative;
    }
    .nav-links {
        flex-direction: column;
        position: fixed;
        top: 80px;
        right: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(15px);
        padding: 2rem 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        transition: right 0.3s ease;
        justify-content: flex-start;
        align-items: center;
        overflow-y: auto;
    }
    .nav-links.active {
        right: 0;
    }
    .nav-links li {
        margin-bottom: 0.75rem;
        width: 100%;
        text-align: center;
    }
    .nav-links li:last-child {
        margin-bottom: 0;
    }
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    animation: floating 3s ease-in-out infinite;
    filter: drop-shadow(0 10px 30px rgba(139, 92, 246, 0.3));
}

/* Enhanced Robot Animation */
.hero-image img:hover {
    animation: pulse 0.5s ease-in-out;
}


/* Professional Footer Styles */
.footer {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #ffffff;
    padding: 4rem 0 2rem;
    margin-top: 4rem;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-section {
    display: flex;
    flex-direction: column;
}

.footer-brand {
    max-width: 350px;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.footer-logo .logo-img {
    width: 45px;
    height: 45px;
    margin-left: 12px;
}

.footer-logo .logo-text {
    font-size: 1.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-description {
    color: #cbd5e1;
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.footer-section h4 {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-section h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #8b5cf6, #a855f7);
    border-radius: 1px;
}

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

.footer-section ul li {
    margin-bottom: 0.8rem;
}

.footer-section ul li a {
    color: #e2e8f0;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    display: inline-block;
    position: relative;
}

.footer-section ul li a:hover {
    color: #8b5cf6;
    transform: translateX(5px);
}

.footer-section ul li a::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 1px;
    background: #8b5cf6;
    transition: width 0.3s ease;
}

.footer-section ul li a:hover::before {
    width: 10px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-item {
    display: flex;
    align-items: center;
    color: #e2e8f0;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.contact-item:hover {
    color: #8b5cf6;
    transform: translateX(5px);
}

.contact-item i {
    color: #8b5cf6;
    margin-left: 12px;
    width: 18px;
    text-align: center;
    font-size: 1rem;
}

.social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    position: relative;
    overflow: hidden;
}

.social-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.social-icon.facebook {
    background: linear-gradient(135deg, #1877f2, #42a5f5);
    color: white;
}

.social-icon.instagram {
    background: linear-gradient(135deg, #e4405f, #f77737, #fccc63);
    color: white;
}

.social-icon:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4);
}

.social-icon:hover::before {
    opacity: 0.2;
    background: rgba(255, 255, 255, 0.2);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom-content p {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 0;
}

/* Footer link inside copyright text */
.footer-link {
    text-decoration: underline;
    color: inherit;
    cursor: pointer;
}
.footer-link:hover {
    color: var(--primary-color);
}

/* Responsive Footer */
@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .footer-brand {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .footer {
        padding: 3rem 0 1.5rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .footer-section h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .contact-item {
        justify-content: center;
    }
    
    .social-icons {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-content {
        gap: 1.5rem;
    }
    
    .footer-section h4 {
        font-size: 1.1rem;
    }
    
    .footer-logo .logo-text {
        font-size: 1.5rem;
    }
    
    .social-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
}