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

        * {
            padding: 0;
            margin: 0;
            border: none;
            box-sizing: border-box;
        }

        img {
            width: 100%;
            display: flex;
        }

        a {
            text-decoration: none;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: #18181B;
        }

        nav {
            max-width: 1000px;
            margin-top: 0.1rem auto;
            margin-left: 10rem;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            height: 9rem;
        }

        .nav-logo {
            max-width: 14rem;
        }

        .nav-links {
            list-style: none;
            display: flex;
            align-items: center;
            gap: 3rem;
        }

        nav .nav-links .link {
            color: #fff;
            transition: 2s;
        }

        nav .nav-links .link:hover {
            transform: scale(1.09);
            color: #970399;
        }

        nav .nav-links .link a {
            color: white;
        }

        nav .nav-links .link a:hover {
            color: #d5a5d6;
        }

        .btn {
            padding: 1rem 2rem;
            font-size: 1rem;
            color: #fff;
            background-color: #9b0bd4;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn:hover {
            background-color: #a60ee2a9;
            transform: scale(1.09);
        }

        .container {
            max-width: 1200px;
            margin: auto;
            padding: 5rem 2rem;
        }

       

        .blur {
            position: absolute;
            box-shadow: 0 0 1000px 50px #fdfdfd;
            z-index: -100;
        }

    

        section .techs{
            margin-top: 4rem;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
        }

        section .grid-techs{
            margin-top: 1rem;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 1rem;
            margin-left: 15rem;
        }

        .techs img{
            width: 8rem;
            transition: 1s;
        }

        .techs img:hover{
            transform: scale(1.06);
        }





        header {
            position: relative;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            align-items: center;
        }

        header .content h1 {
            color: #fff;
            margin-bottom: 1rem;
            font-size: 3rem;
            font-weight: 700;
            line-height: 4rem;
            margin-left: 13rem;
        }

        header .content h1 span {
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke: 1px #fff;
        }

        header .content p {
            margin-bottom: 2rem;
            color: #ccc;
            margin-left: 13rem;
        }

        header .image {
            position: relative;
            border: 5px solid #9b0bd4;
            border-radius: 20rem;
            border-right: none;
            border-top: none;
            border-bottom: none;
            margin-left: 3rem;
        }

        header .image img {
            max-width: 700px;
            margin-left: 5rem;
        }

        header .btn {
            margin-left: 8rem;
        }

        section .header {
            color: #fff;
            text-align: center;
            font-size: 2.25rem;
            font-weight: 600;
        }

        .container ul li {
            list-style-type: none;
            justify-content: center;
            display: flex;
            align-items: center;
        }

        .features {
            margin-top: 4rem;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
        }

        .features .card {
            background-color: #27272a;
            padding: 1rem;
            border: 2px solid transparent;
            border-radius: 15px;
            transition: all 0.3s ease;
        }

        .features .card:hover {
            background-color: #323232;
            border-color: #fff;
        }

        .features .card span {
            display: inline-block;
            background-color: #9b0bd4;
            padding: 2px 9px;
            margin-bottom: 1rem;
            font-size: 1.75rem;
            color: #fff;
            border-radius: 5px;
        }

        .features .card h4 {
            margin-bottom: 0.5rem;
            color: #fff;
            font-size: 1.2rem;
            font-weight: 600;
        }

        .features .card p {
            color: #ccc;
            margin-bottom: 1rem;
        }

        .features .card a {
            color: #fff;
            transition: all 0.3s ease;
        }

        .features .card a:hover {
            color: #b395be;
        }

        .sub-header {
            max-width: 900px;
            margin: 2rem 7rem;
            text-align: center;
            color: #ccc;
        }

        .copyright {
            max-width: 1200px;
            margin:auto;
            padding: 5rem 2rem;
            color: #fff;
            font-size: 0.8rem;
            text-align: center;
            height: 1rem;
        }

        .image img {
            width: 21rem;
            height: 25rem;
            border-radius: 20rem;
        }

        footer {
            line-height: 6rem;
            text-align: center;
        }

        footer h1 {
            color: #fff;
            text-align: center;
            transition: 3s;
        }

        footer ul {
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: center;
            gap: 2rem;
        }

        footer ul li {
            display: flex;
            align-items: center;
        }

        footer ul li a {
            color: #fff;
            text-align: center;
            transition: 2s;
        }

        footer ul li a:hover {
            transform: scale(1.09);
            color: #d5a5d6;
        }

        footer ul li i {
            display: inline-block;
            width: 20px;
        }

        @media (max-width: 800px) {
            /* Navbar */
            nav {
                flex-direction: column;
                align-items: stretch;
                height: auto;
                padding: 10px;
                gap: 10px;
            }

            .nav-logo img{
                margin-left: -75px;

            }
        
            .nav-links {
                flex-direction: column;
                align-items: center;
                gap: 10px;
                display: none; /* Esconder links do menu principal */
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background-color: #27272a;
                padding: 10px;
            }
        
            .nav-links.active {
                display: flex;
            }
        
            .nav-links .link {
                text-align: center;
            }
        
            .btn {
                margin-top: 10px;
                width: 80%;
                margin-left: -50px;
            }
        
            /* Header */
            header {
                display: flex;
                text-align: center;
                justify-content: center;
            }
        
            header .content h1 {
                width: 20rem;
                font-size: 2.5rem;
                margin-left: 3rem;
            }
        
            header .content p {
                margin-left: 3rem;
            }
        
            header .image img {
                display: none;
            }
        
            /* Sections */
            .section {
                padding: 20px;
            }
        
            section .techs{
                margin-top: 4rem;
                display: grid;
                grid-template-columns: repeat(2, 2fr);
                gap: 2rem;
            }
    
            section .grid-techs{
                margin-top: 1rem;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 2rem;
                max-width: 0.2rem;
                margin-left: 2rem;
            }

            section .grid-techs .techs img{
                width: 7rem;
            }
    
        
            .features {
                grid-template-columns: repeat(1, 1fr);
                gap: 20px;
                margin-left: 2rem;
            }
        
            .features .card {
                padding: 20px;
                width: 18rem;
            }

           .sub p{
            width: 23rem;
            display: flex;
            margin-left: -0.5rem;
            
           }


          
        
            /* Footer */
            footer {
                padding: 20px;
            }
        
            footer ul {
                gap: 15px;
            }
        }