@media (max-width: 600px) {
    .menu-icon {
        display: flex;
    }

     .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 20px;
        background: palevioletred;
        width: 100px;
        padding: 07px;
        text-align: center;
        border-radius: 5px;
        border: 1px solid rgba(0, 0, 0, 0.1); /* Softer border */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.55), 
                0 6px 6px rgba(0, 0, 0, 0.7); /* Multi-layered soft shadow */
    } 


    .nav-links li {
        background-color: palevioletred; 
        transition: background-color 0.4s ease; 
      
        border-radius: 5px;
    }
    
    .nav-links li:hover {
        background-color: #FFF4EB; 
    }

    .nav-links.active {
        display: flex;

    }

                                                                    /* Hamburger turns into cross */
    .menu-icon.open .bar1 {
        transform: rotate(40deg) translate(10px, 10px);
    }

    .menu-icon.open .bar2 {
        opacity: 0;
    }

    .menu-icon.open .bar3 {
        transform: rotate(-45deg) translate(5px, -5px);
    }
     .bar {
    height: 3.3px;
    background-color: black;
    border-radius: 5px;
    transition: 0.3s ease-in-out;
     }

                                                                                        /* image and intro */
#main-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

#little h1{
    font-size: 5rem;
}



                                                                                           /* 3 divs */

#services{
    display: flex;
flex-direction: column;
   justify-content: end;
   align-items: center;

}
.three h4{
    padding-right: 50px;
    padding-left: 50px;
    padding-bottom: 25px;
}

                                                                                                   /* icons spin */

.one:hover #icon ion-icon {
    animation: spinOnce 0.6s ease-in-out 1;
}

@keyframes spinOnce {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.two:hover #icon ion-icon {
    animation: spinOnce 0.6s ease-in-out 1;
}

@keyframes spinOnce {

    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.three:hover #icon ion-icon {
    animation: spinOnce 0.6s ease-in-out 1;
}

@keyframes spinOnce {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}



#the-end {
    height: 400px;
    margin-top: 100px;
    padding-top: 50px;
    }




.projects-container {

  justify-content: center;
  margin-bottom: 30px;
  
}

























}































@media (max-width: 600px) {
    /* Adjust the height of the about section */
    .about {
        height: auto; /* Allow flexibility */
        padding: 20px; /* Add some padding for smaller screens */
    }

    /* Adjust font size and alignment for p */
    p {
        font-size: 1.1rem; /* Smaller font for readability */
        margin-top: 15px;
        line-height: 1.5;
    }

    /* Little text section */
    #little {
        font-size: 2.5rem; /* Smaller font */
        padding: 30px;
    }

    /* About section */
    #aboutme {
        height: auto; /* Make it flexible for smaller screens */
        padding: 40px 20px;
    }

    /* Adjust services positioning */
    #services {
        position: relative;
        top: 40px; /* Adjust position for mobile */
        display: flex;
        justify-content: center;
        flex-direction: column; /* Stack boxes vertically */
        gap: 20px; /* Add spacing between the boxes */
        
    }

    /* Adjust width and layout of the service boxes */
    .one, .two, .three {
        width: 90%; /* Full width for smaller screens */
    
        height: auto; /* Adjust height based on content */
        padding: 15px; /* Reduce padding for mobile screens */
        
    }

    /* Reduce icon size */
    #icon {
        width: 70px;
        height: 70px;
    }

    /* Reduce icon font size */
    #icon ion-icon {
        font-size: 35px;
    }

    /* Adjust heading and description */
    h2 {
        font-size: 20px; /* Smaller font for headings */
    }

    h4 {
        font-size: 14px; /* Smaller font for paragraphs */
    }

    /* Hover effect for service boxes */
    .one:hover, .two:hover, .three:hover {
        transform: translateY(-10px); /* Reduce lift effect */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    /* Adjust the spin animation for smaller screens */
    .one:hover #icon ion-icon,
    .two:hover #icon ion-icon,
    .three:hover #icon ion-icon {
        animation: spinOnce 0.6s ease-in-out 1;
    }

    @keyframes spinOnce {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }



.simple {

  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  
    background-color: palevioletred;
  
    
    width: 100%;
}

















}
@media (max-width: 600px) {
    /* Adjust the positioning and layout of the .first class */
    .first {
        margin-top: 50px; /* Reduce top margin for mobile */
        display: flex;
        justify-content: center; /* Center content */
        flex-direction: column; /* Stack items vertically */
    }

    /* Adjust the .second class to be mobile-friendly */
    .second {
        height: auto; /* Allow dynamic height based on content */
        width: 90%; /* Full width for smaller screens */
        margin-left: 0; /* Remove the left margin */
        margin-right: 0; /* Add the right margin for full width */
        font-size: 1.3rem; /* Adjust font size */
        padding: 20px; /* Add padding to make the content more readable */
    }
    .projects-container {

  justify-content: center;
  margin-bottom: 10px;
  
}

}





@media (max-width: 1180px) {
   .second{
    font-weight: bolder;
   }
}