/* Resume and Contact Section */
#resume-contact {
  color: #0cceff;
    padding: 30px 20px;
    text-align: center;
}

.resume-contact-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; 
}


#resume-contact h2 {
    font-size: 2.5rem;
    color: #0cceff;
    font-family: "Century Schoolbook", "Georgia", serif;
}

/* .resume-contact-content {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
} */

.resume, .contact {
    flex: 1;
    min-width: 200px;
}

.resume h3, .contact h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-family: "Century Schoolbook", "Georgia", serif;
}
.linkedin-btn{
  margin-top: 60px;
}
.education {
   margin-top: 30px;
   font-family: "Century Schoolbook", "Georgia", serif;
}

.degree-container {
  display: flex;
  justify-content: center; 
  gap: 60px; 
  flex-wrap: wrap; 
  margin-top: 10px; 
  margin-bottom: -50px; 
}

.resume-contact-content {
  margin-top: 0; 
  padding-top: 0; 
}



.degreeImg {
  max-width: 300px; 
}

/* Contact Us Section */
#contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 50vh; 
}
/* center piece */
.bm-pl {
	position: relative;
	width: 12em;
	height: 12em;
}
.bm-pl__blob {
	animation: moveR 8s linear infinite;
	border-radius: 50%;
	mix-blend-mode: screen;
	position: absolute;
	top: 0;
	left: 0;
	width: 9em;
	height: 9em;
}
.bm-pl__blob--r {
	background: hsl(196, 90%, 55%);
}
.bm-pl__blob--g {
	animation-name: moveG;
	background: hsl(240, 90%, 55%);
}
.bm-pl__blob--b {
	animation-name: moveB;
	background: hsl(210, 90%, 55%);
}

/* Animation */
@keyframes moveR {
	from, to {
		border-radius: 54% 79% 75% 58% / 70% 66% 71% 47%;
		transform: translate(0,0) rotate(-35deg) scale(0.875,1);
	}
	33% {
		border-radius: 79% 43% 56% 67% / 58% 64% 61% 60%;
		transform: translate(2.75em,0) rotate(0) scale(0.75,0.875);
	}
	67% {
		border-radius: 55% 77% 56% 67% / 58% 64% 61% 60%;
		transform: translate(1.25em,-0.5em) rotate(0) scale(1.125,0.875);
	}
}
@keyframes moveG {
	from, to {
		border-radius: 60% 59% 51% 58% / 69% 64% 52% 55%;
		transform: translate(2.25em,1em) rotate(45deg) scale(1.125,0.875);
	}
	33% {
		border-radius: 51% 95% 72% 59% / 75% 98% 54% 75%;
		transform: translate(0,0.5em) rotate(0) scale(1,1);
	}
	67% {
		border-radius: 74% 85% 63% 87% / 81% 100% 62% 82%;
		transform: translate(1em,2em) rotate(0) scale(0.75,0.875);
	}
}
@keyframes moveB {
	from, to {
		border-radius: 52% 59% 50% 58% / 56% 80% 40% 59%;
		transform: translate(1.75em,3em) rotate(0) scale(1,1);
	}
	25% {
		border-radius: 71% 58% 100% 43% / 68% 53% 85% 68%;
		transform: translate(-0.75em,3em) rotate(10deg) scale(0.75,1);
	}
	50% {
		border-radius: 99% 62% 87% 69% / 93% 92% 79% 75%;
		transform: translate(2em,2em) rotate(0) scale(0.7,0.7);
	}
	75% {
		border-radius: 78% 98% 100% 73% / 75% 76% 100% 91%;
		transform: translate(3.5em,2em) rotate(0) scale(0.875,0.875);
	}
}


/* Mobile Styles */
@media (max-width: 600px) {
    #resume-contact {
      padding: 20px 10px;
    }
  
    #resume-contact h2 {
      font-size: 1.8rem;
    }
  
    .resume-contact-content {
      flex-direction: column;
      gap: 30px;
    }
  
    #butterflySVG {
      width: 200px;
    }
  
    .resume, .contact {
      width: 100%;
      text-align: center;
    }
  
    .resume h3, .contact h3 {
      font-size: 1.3rem;
    
    }
    .resume h3 {
      
      margin-top: 60px;
    }
    #contact {
      padding: 20px 10px;
      min-height: auto;
    }
  
    .bm-pl {
      width: 10em;
      height: 10em;
    }
  
    .bm-pl__blob {
      width: 7.5em;
      height: 7.5em;
    }
  }
  
  
  /* Tablet Styles */
  @media (min-width: 601px) and (max-width: 1024px) {
    #resume-contact {
      padding: 30px 15px;
    }
  
    #resume-contact h2 {
      font-size: 2rem;
    }
  
    .resume-contact-content {
      flex-direction: column;
      align-items: center;
      gap: 40px;
    }
  
    #butterflySVG {
      width: 250px;
    }
  
    .resume, .contact {
      width: 80%;
      text-align: center;
    }
  
    .resume h3, .contact h3 {
      font-size: 1.4rem;
    }
    .resume h3 {
      
      margin-top: 80px;
    }
  
    #contact {
      padding: 30px 20px;
      min-height: auto;
    }
  
    .bm-pl {
      width: 11em;
      height: 11em;
    }
  
    .bm-pl__blob {
      width: 8.5em;
      height: 8.5em;
    }
  }