@media(max-width:768px){


    .hero{
    
    
        flex-direction:column-reverse;
    
    
        text-align:center;
    
    
    }
    
    
    .profile-container{
    
    
        width:250px;
    
        height:250px;
    
    
    }
    
    
    .hero-buttons{
    
    
        justify-content:center;
    
    
    }
    
    
    .hero-content h1{
    
    
        font-size:2rem;
    
    
    }
    
    
    }
    @media(max-width:768px){


        .hero-buttons{
        
        
            flex-direction:column;
        
        
            width:100%;
        
        
        }
        
        
        .btn{
        
        
            justify-content:center;
        
        
        }
        
        
        }
        @media(max-width:768px){


            .footer-container{
            
            
                flex-direction:column;
            
            
                text-align:center;
            
            
                gap:30px;
            
            
            }
            
            
            }
            @media(max-width:768px){


                .contact-container{
                
                
                grid-template-columns:1fr;
                
                
                }
                
                
                }
                @media (max-width:768px){

                    .menu-toggle{
                
                        display:block;
                
                        z-index:1001;
                
                    }
                
                    .nav-menu{
                
                        position:fixed;
                
                        top:0;
                
                        right:-100%;
                
                        width:230px;
                
                        height:100vh;
                
                        background:#0f172a;
                
                        display:flex;
                
                        flex-direction:column;
                
                        justify-content:center;
                
                        align-items:center;
                
                        gap:20px;
                
                        transition:.35s ease;
                
                        z-index:1000;
                
                        box-shadow:-5px 0 25px rgba(0,0,0,.4);
                
                    }
                
                    .nav-menu.active{
                
                        right:0;
                
                    }
                    .nav a{
                        align-items: center;
                        justify-content: center;
                        margin: 8px;
                    }
                
                }
                .overlay{

                    position:fixed;
                
                    inset:0;
                
                    background:rgba(0,0,0,.5);
                
                    opacity:0;
                
                    visibility:hidden;
                
                    transition:.3s;
                
                    z-index:999;
                
                }
                
                .overlay.active{
                
                    opacity:1;
                
                    visibility:visible;
                
                }