/* Mobile (max 576px) */

@media (max-width: 576px) {
  body {
    overflow-x: hidden; /* prevent sideways scroll */
  }
  
  
  #home.container {
    padding-top: 0.5rem; /* reduce top padding */
  }
  
  #home {
    margin-bottom: -30px !important; /* reduce bottom space */
  }

  .home-content {
    flex-direction: column;
    text-align: center;
	gap:20px;
	margin-top:-30px;
  }
  
  .home-content > *:first-child {
    order: 2; /* text goes second */
  }

  .home-content > *:last-child {
    order: 1; /* image goes first */
  }
  
  .hometext{
	  width:250px;	
  }

  .imgborder, .about-img, .rocket-img, .project-card {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
  }
  
   .imgborder {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 4px solid white; /* keep your style */
    overflow: hidden;
    aspect-ratio: 1 / 1; /* ensures it's always a square */
  }

  .imgborder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
  }

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

  h1, h2 {
    font-size: 1.3rem;
  }

  .timeline-section {
    padding: 20px;
  }
  
   #home h2 {
    font-size: 1.2rem; 
  }
   #home p {
    font-size: 0.8rem; 
	margin-top:1rem;
  }
  
 
  .about-img {
    width: 220px !important;  /* smaller container */
    height: 280px !important;
	margin: 0 auto; 
  }

  .about-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 30%;  /* keep your rounded corners */
  }
  
   /* Make About section stack vertically */
  

  /* Add gap below the image */
  .about-img {
    margin-bottom: 25px;
  }

  /* Reduce paragraph font size */
  #about p {
    font-size: 0.8rem;
  }

  /* Smaller button */
  #about .btn {
    width: 120px;
    height: 35px;
    font-size: 13px;
	display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  #rocket h1 {
    font-size: 1.5rem;
  }

  #rocket h2 {
    font-size: 1.1rem;
  }

  #rocket p,
  #rocket ul li {
    font-size: 0.8rem;
  }
  
  #rocket ul li {
    line-height: 1.5; /* tighter spacing */
  }
  
  #rocket p{
	  text-align:center;
  }
  
	#rocket .btn{
	width: 120px;
    height: 35px;
    font-size: 12px;
    display: flex;               
    align-items: center;        
    justify-content: center;     
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 20px;
    
	}
	
	#rocket .rocket-img {
  width: 100%;      /* make images fill the container width */
  max-width: 300px; /* max width to limit size */
  height: auto;     /* maintain aspect ratio */
  margin: 0 auto;   /* center horizontally */
  display: block;
}

	.skill-column {
    width: 75% !important;
    max-width: 75% !important;
  }
  
  .skill-column h3{
	  font-size:1rem;
  }
  
  .skill-column ul li{
	  font-size:0.8rem;
  }
  
    .salesforce p{
		font-size:1rem;
		
	}
	.salesforce img{
	width: 45px; !important;
	height: 45px; !important;
	margin-top: 10px; 
	}
	
	 .salesforce{
	     display: flex !important;
    flex-direction: column !important;
    align-items: center !important;  /* centers content horizontally */
    justify-content: center;
    margin: 20px auto 0 auto;        /* centers block and adds top spacing */
    text-align: center;  
	 }
	
	

#rocket h1 {
    font-size: 1.5rem;
  }
  
  #proj h2{
    font-size: 1.5rem;
  }
	
	.project-card h3{
		font-size: 1rem;
	}
	
	.project-card ul li{
		font-size: 0.7rem;
	}
	
	.project-card{
		 width: 75% !important;
		max-width: 75% !important;
	}
	
	.github p{
		font-size:1rem;
	}
	.github img{
	width: 40px;
	height: 40px;
	}
	
	#exp h2{
		font-size:1.5rem;
	}
	
	.timeline-item .timeline-content h3{
		font-size:0.9rem;
	}
		
	.timeline-item .timeline-content li{
		font-size: 0.7rem;
	}
	.timeline-item .timeline-date{
		font-size:0.7rem;
	
	}
	
	.timeline {
 
	border-left: 2px solid #7a1b38;
	}
	
	.timeline-dot {
	left: -7.5px;
	width: 12px;
	height: 12px;
	border: 2px solid white;
	}
	
	 .card {
        transform: scale(0.85); /* shrink everything proportionally */
        transform-origin: top center; /* so it scales from the top */
        margin: auto; /* keep it centered after scaling */
    }
	
	.contact h2 {
    font-size: 0.9rem;
  }

  .contact h3 {
    font-size: 0.8rem;
  }

  .contact-icons a {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .contact-icons a i {
    font-size: 20px;
    line-height: 36px;
  }






}












/* 💻 iPads/Tablets (577px – 992px) */
@media (min-width: 577px) and (max-width: 992px) {
  body {
    overflow-x: hidden;
  }

  .home-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .imgborder, .about-img, .rocket-img, .project-card {
    width: 90% !important;
    height: auto !important;
  }

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