/* Google Fonts - Outfit */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary-color: #5f2deb;
    --primary-dark: #460dc1;
    --secondary-color: #ff3c78;
    --text-color: #555555;
    --heading-color: #0b0b2b;
    --white: #ffffff;
    --light-bg: #f4f5f8;
    --dark-bg: #0b0b2b;
    --border-color: #e5e5e5;
    --gradient-primary: linear-gradient(90deg, #5f2deb 0%, #b23afc 100%);
    --gradient-hero: linear-gradient(135deg, #0b0b2b 0%, #2a1b5c 100%);

    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 15px 40px rgba(95, 45, 235, 0.1);

    --border-radius: 8px;
    --transition: all 0.3s ease;
}

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

body {
    font-family: 'Outfit', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    font-size: 16px;
    background-color: var(--white);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

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

.section-padding {
    padding: 100px 0;
}

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

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-50 {
    margin-bottom: 50px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 14px 35px;
    background: var(--gradient-primary);
    color: var(--white);
    font-weight: 600;
    border-radius: 50px;
    text-transform: capitalize;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(95, 45, 235, 0.3);
    border: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s ease;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(95, 45, 235, 0.4);
    color: var(--white);
}

/* Pulse Animation for Primary Buttons */
.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s ease;
    opacity: 0;
}

.btn:active::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: 0s;
}

.btn-secondary {
    background: var(--white);
    color: var(--primary-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover {
    background: var(--light-bg);
    color: var(--primary-dark);
}

/* Header */
header {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 20px 0;
    transition: var(--transition);
}

header.sticky {
    position: fixed;
    background: var(--white);
    padding: 15px 0;
    box-shadow: var(--shadow-soft);
    animation: slideDown 0.5s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-icon {
    width: 45px;
    height: 45px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 22px;
    box-shadow: 0 4px 15px rgba(95, 45, 235, 0.3);
    transform: rotate(-5deg);
    transition: var(--transition);
}

.logo:hover .logo-icon {
    transform: rotate(0deg) scale(1.1);
}

.logo-text {
    font-size: 24px;
    font-weight: 800;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    display: flex;
    flex-direction: column;
}

.logo-text span {
    color: var(--secondary-color);
}

.logo-text small {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 2px;
}

header.sticky .logo-text {
    color: var(--heading-color);
}

header.sticky .logo-text small {
    color: var(--text-color);
}

.main-menu ul {
    display: flex;
    gap: 30px;
}

.main-menu ul li a {
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
    padding: 10px 0;
    position: relative;
}

.main-menu ul li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--secondary-color);
    transition: width 0.3s ease;
}

.main-menu ul li a:hover::before {
    width: 100%;
}

header.sticky .main-menu ul li a {
    color: var(--heading-color);
}

.header-btn .btn {
    padding: 10px 25px;
    font-size: 14px;
}

.mobile-toggle {
    display: none;
    color: var(--white);
    font-size: 24px;
    cursor: pointer;
}

header.sticky .mobile-toggle {
    color: var(--heading-color);
}

/* Hero Section */
.hero-area {
    background: linear-gradient(135deg, rgba(11, 11, 43, 0.8) 0%, rgba(42, 27, 92, 0.7) 100%), url('https://www.devsnews.com/template/netfix-prev/assets/imgs/slider/slider_bg01.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    padding-top: 150px;
    position: relative;
    overflow: hidden;
    color: var(--white);
    display: flex;
    align-items: center;
}

.hero-content {
    animation: fadeInUp 1s ease-out;
}

.hero-content h5 {
    color: var(--secondary-color);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: fadeInUp 1s ease-out 0.2s backwards;
}

.hero-content h1 {
    font-size: 65px;
    line-height: 1.1;
    margin-bottom: 30px;
    color: var(--white);
    animation: fadeInUp 1s ease-out 0.4s backwards;
}

.hero-content p {
    font-size: 18px;
    margin: 0 auto 40px;
    opacity: 0.9;
    max-width: 600px;
    animation: fadeInUp 1s ease-out 0.6s backwards;
}

.hero-btns {
    animation: fadeInUp 1s ease-out 0.8s backwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Features/Services Preview */
.features-area {
    background-color: var(--white);
}

.section-title span {
    color: var(--primary-color);
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.section-title h2 {
    font-size: 40px;
    margin-bottom: 20px;
}

.feature-card {
    background: var(--white);
    padding: 40px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    height: 100%;
    text-align: center;
}

.feature-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-card);
    transform: translateY(-10px);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: var(--light-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    font-size: 30px;
    color: var(--primary-color);
    transition: transform 0.5s ease, background 0.3s ease;
}

.feature-card:hover .feature-icon {
    background: var(--primary-color);
    color: var(--white);
    transform: rotateY(180deg);
}

.feature-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

/* Scroll Animation Classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Pricing Section */
.pricing-area {
    background: var(--light-bg);
}

.pricing-card {
    background: var(--white);
    border-radius: 15px;
    padding: 50px 40px;
    position: relative;
    transition: var(--transition);
    border: 1px solid transparent;
    margin-top: 30px;
}

.pricing-card:hover,
.pricing-card.active {
    box-shadow: var(--shadow-card);
    border-color: var(--primary-color);
    transform: translateY(-10px);
}

.pricing-header h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.price-value {
    font-size: 45px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}

.price-value::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(95, 45, 235, 0.2);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
}

.pricing-card:hover .price-value::after {
    transform: scaleX(1);
    transform-origin: left;
}

.price-value span {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
}

.pricing-features li {
    margin-bottom: 15px;
    color: var(--text-color);
    font-weight: 500;
}

.pricing-features li i {
    color: var(--secondary-color);
    margin-right: 10px;
}

/* Footer */
footer {
    background: var(--dark-bg);
    color: rgba(255, 255, 255, 0.7);
    padding-top: 80px;
}

.footer-widget h4 {
    color: var(--white);
    font-size: 22px;
    margin-bottom: 30px;
}

.footer-links li {
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.footer-links li:hover {
    transform: translateX(10px);
}

.footer-links li a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px 0;
    margin-top: 70px;
}

.social-links a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--primary-color);
    transform: rotate(360deg);
}

/* Page Headers (common for non-home pages) */
.page-header {
    background: var(--gradient-hero);
    padding: 180px 0 100px;
    text-align: center;
    color: var(--white);
    animation: fadeIn 1s;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

/* Page Specific Banners */
.page-header.about-bg {
    background: linear-gradient(rgba(11, 11, 43, 0.8), rgba(42, 27, 92, 0.8)), url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=1920&auto=format&fit=crop');
}

.page-header.services-bg {
    background: linear-gradient(rgba(11, 11, 43, 0.8), rgba(42, 27, 92, 0.8)), url('https://images.unsplash.com/photo-1558494949-ef2bb25427d6?q=80&w=1920&auto=format&fit=crop');
}

.page-header.pricing-bg {
    background: linear-gradient(rgba(11, 11, 43, 0.8), rgba(42, 27, 92, 0.8)), url('https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1920&auto=format&fit=crop');
}

.page-header.contact-bg {
    background: linear-gradient(rgba(11, 11, 43, 0.8), rgba(42, 27, 92, 0.8)), url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?q=80&w=1920&auto=format&fit=crop');
}

.page-header.get-started-bg {
    background: linear-gradient(rgba(11, 11, 43, 0.8), rgba(42, 27, 92, 0.8)), url('https://images.unsplash.com/photo-1432888498266-38ffec3eaf0a?q=80&w=1920&auto=format&fit=crop');
}

/* Ensure text is readable over images */
.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.page-header h1 {
    color: var(--white);
    font-size: 48px;
    margin-bottom: 15px;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.breadcrumb {
    color: rgba(255, 255, 255, 0.8);
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

/* Contact Form */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--light-bg);
    transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(95, 45, 235, 0.1);
}

/* Responsive */
@media (max-width: 991px) {
    .mobile-toggle {
        display: block;
        order: 3;
        /* Move to right */
        position: relative;
        z-index: 1002;
    }

    .logo {
        order: 1;
        /* Left */
        position: relative;
        z-index: 1002;
    }

    .header-btn {
        order: 2;
        /* Middle */
        margin-left: auto;
        /* Push towards center/right but keep gap */
        margin-right: 20px;
        position: relative;
        z-index: 1002;
    }

    .nav-wrapper {
        justify-content: space-between;
        position: relative;
        z-index: 1002;
    }

    .main-menu {
        position: fixed;
        top: 85px;
        /* Start below the header */
        left: 0;
        width: 100%;
        height: calc(100vh - 85px);
        /* Full height below header */
        min-height: 0;
        background: var(--white);
        z-index: 999;
        /* Below header if header z-index is 1000 */
        padding: 20px;
        /* Remove extra top padding */
        transition: all 0.5s ease;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transform: translateX(-100%);
        /* Slide from Left */
        opacity: 1;
        /* Make visible but off-screen */
        visibility: visible;
    }

    /* Move header z-index higher to stay on top of menu */
    header {
        z-index: 1000;
        background-color: var(--white);
        /* Ensure header has background so menu slides "under" or looks separate */
    }

    /* Add a specific rule for non-sticky header background on mobile to prevent transparency issues */
    @media (max-width: 991px) {
        header {
            background-color: #0b0b2b;
            /* Dark background to match hero if transparent,
                                          but usually on inner pages it's absolute.
                                          Let's standardise to dark or white relative to design.
                                          Actually style.css has header absolute.
                                          Let's give it a background on mobile so separation is clear. */
            background: linear-gradient(135deg, #0b0b2b 0%, #2a1b5c 100%);
            /* Match hero gradient for consistency */
        }

        header.sticky {
            background: var(--white);
        }
    }

    .main-menu.active {
        transform: translateX(0);
        /* Slide to position */
    }

    .main-menu ul {
        flex-direction: column;
        text-align: center;
    }

    .main-menu ul li a {
        color: var(--heading-color);
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .hero-content h1 {
        font-size: 45px;
    }
}