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

            body{
            font-family: sans-serif;
            font-weight: 500;
            background:#1e293b;
            color:white;
            line-height:1.6;
            }

            body h2{
                text-align: center;
                text-decoration: underline;
                text-underline-position: under;
                text-decoration-color: #00FFD9;
                text-decoration-thickness: 0.25rem;
                
            }

            /* NAVBAR */

            nav{
            display:flex;
            justify-content:space-between;
            align-items:center;
            padding:20px 10%;
            background:#1e293b !important;
            /* position:sticky; */
            top:0;
            z-index:1000;
            }

            nav ul{
            display:flex;
            gap:25px;
            list-style:none;
            }

            nav a{
            color:white !important;
            text-decoration:none;
            }

            .nav-link:hover{
            text-decoration: underline;
            text-underline-position: under;
            text-decoration-color: #00FFD9;
            text-decoration-thickness: 0.1rem;
            }
            .navbar-toggler{
                color: transparent !important;
            }

            .bi-list{
                font-size: 2rem;
                font-weight: bold;
            }
            .merc {
                color: #00FFD9;
                background-image: linear-gradient(45deg, #00FFD9 , #58d6d0 50%, #b3dfc5 100%) ;
                background-clip: text !important;
                -webkit-background-clip: text !important;
                -webkit-text-fill-color: transparent !important;
            }
            .redmerc {
                color: #ff0000;
                background-image: linear-gradient(45deg, #ff0000 , #d65858 50%, #dfb3b3 100%) ;
                background-clip: text !important;
                -webkit-background-clip: text !important;
                -webkit-text-fill-color: transparent !important;
            }
            /* HERO */
            .hero{
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:120px 10%;
            gap:40px;
            background-image: url("../images/imgdev2.jpg") !important;
            }

            .hero-text{
            max-width:600px;
            }

            .hero h1{
            font-size:48px;
            margin-bottom:20px;
            }

            .hero p{
            margin-bottom:30px;
            }

            .btn{
            background-color: #00FFE1;
            color:black;
            padding:14px 30px;
            border-radius:8px;
            font-weight:600;
            text-decoration:none;
            }

            .btn:hover{
            background:#7df0f6;
            }

            /* TECH BADGES */

            .stack{
            padding:60px 10%;
            text-align:center;
            color:#fefefe;
            background:#020617;
            }

            .stack h2{
            color: white;
            font-weight: bold !important;
            margin-bottom: 40px;
            }

            .badges{
            display:flex;
            flex-wrap:wrap;
            gap:15px;
            justify-content:center;
            }

            .badge{
            background:#1e293b;
            padding:10px 18px;
            border-radius:8px;
            color: #00FFE1;
            }

            /* SERVICES */

            .services{
            padding: 60px 10%;
            background:#ffffff;
            }

            .services h2{
            text-align:center;
            color: black;
            font-weight: bold !important;
            margin-bottom: 40px;
            }

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

            .card{
            background:#1e293b;
            padding:30px;
            border-radius:12px;
            }

            .card h3{
            margin-bottom:10px;
            color:#00FFE1;
            }
            
            .card p{
                color: white;
            }

            .card i{
                text-align:center;
                color:white;
            }

            /* EXPERIENCE */

            .experience{
            padding:100px 10%;
            }

            .timeline{
            border-left:2px solid #38bdf8;
            padding-left:30px;
            }

            .timeline-item{
            margin-bottom:30px;
            }

            .timeline-item h4{
            color:#38bdf8;
            }

            /* PORTFOLIO */

            .portfolio{
            padding: 60px 10%;
            background:#020617;
            }

            .portfolio h2{
                margin-bottom: 40px;
                font-weight: bold;
            }
            .projects{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
            gap:30px;
            }

            .project{
            background:#1e293b;
            border-radius:12px;
            overflow:hidden;
            }

            .project img{
            width:100%;
            height:200px;
            object-fit:cover;
            }

            .project-content{
            padding:20px;
            }

            /* STATS */

            .stats{
            /* display:flex;
            justify-content:center; */
            gap:80px;
            padding:80px 10%;
            text-align:center;
            background:white;
            }

            .stat h3{
            font-size:40px;
            color:#38bdf8;
            }

            .stat p{
                color: rgb(49, 49, 49);
            }

            /* PROCESS */

            .process{
            padding:100px 10%;
            background:#020617;
            }

            .steps{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
            gap:30px;
            margin-top:40px;
            }

            .step{
            background:#1e293b;
            padding:25px;
            border-radius:10px;
            }

            /* CONTACT */
            
            .contact{
            padding:60px 10%;
            text-align:center;
            background:#020617;
            }

            .contact h2{
                margin-bottom: 40px;
                font-weight: bold;
            }

            form{
            max-width:600px;
            margin:auto;
            display:flex;
            flex-direction:column;
            gap:20px;
            }

            input[type="text"],input[type="email"],textarea{
            width: 25rem;
            padding:15px;
            border-radius:8px;
            border:none;
            background:#9abfbc;
            color:black;
            }

            button{
            display: inline-block;
            text-align: center;
            border:none;
            background:#00FFE1;
            font-weight:600;
            color: black;
            }
            @media (max-width: 768px) {
                input[type="text"],input[type="email"],textarea {
                    width: 17rem !important;
                }
                .col-tech{
                    margin-bottom: 3rem;
                }
            }

            /* FOOTER */

            footer{
            padding:40px;
            text-align:center;
            background:#020617;
            margin-top:80px;
            }