/*over 1200 up to 1400 laptops and desktops fullsize*/
@media screen and (max-width: 1400px) {
  #profile {
    height: 80vh;
    margin-bottom: 6rem;
  }
  .about-containers {
    flex-wrap: wrap;
  }
  #contact,
  #projects {
    height: fit-content;
  }
}
/*over 600 but under 1200 - tablets*/

@media screen and (max-width: 1200px) {
  #desktop-nav {
    display: none;
  }
  #hamburger-nav {
    display: flex;
  }
  #experience,
  .experience-details-container {
    margin-top: 2rem;
  }
  #profile,
  .section-container {
    display: block;
    height: 53vh;
    
  }

  .contact-info-upper-container
  {
    flex-wrap: wrap;
  }
  
  .arrow {
    display: none;
  }
  section,
  .section-container {
    height: fit-content;
  }
  section {
    margin: 0 5%;
  }
  .section__pic-container {
    width: 275px;
    height: 275px;
    margin: 0 auto 2rem;
    justify-content: center;
  }
  .about-containers {
    margin-top: 0;
  }
}

/*under 600 but above 0 - mainly for phones*/
@media screen and (max-width: 600px) {
  #contact,
  footer {
    height: 40vh;
  }
  #profile {
    height: 53vh;
    margin-bottom: 0;
  }
  article {
    font-size: 1rem;
  }
  footer nav {
    height: fit-content;
    margin-bottom: 2rem;
  }
  .about-containers,
  .contact-info-upper-container,
  .btn-container {
    flex-wrap: wrap;
  }
  .contact-info-container {
    margin: 15px;
    padding: 15px;
  }

  .contact-inputs-inner::placeholder{
    padding: 7px;
  }
  
  @keyframes blink-caret {
    0% {
      caret-color: black;
    }
    50% {
      caret-color: transparent;
    }
    100% {
      caret-color: black;
    }
  }
  
  .contact-inputs-inner {
    padding: 10px;
    caret-color: transparent; /* Hides the default caret */
    outline: none;
    
    animation: blink-caret 1s step-end infinite; /* Blinking border effect */
  }
  
  .contact-inputs-inner:focus {
    caret-color: black; /* Show the caret when the field is in focus */
    border-color: black;
    border: 2px solid black;
  }
  .contact-info-container p,
  .nav-links li a {
    font-size: 1rem;
  }
  .experience-sub-title {
    font-size: 1.25rem;
  }
  .logo {
    font-size: 1.5rem;
  }
  .nav-links {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  .section__pic-container {
    width: auto;
    height: 46vw;
    justify-content: center;
  }
  .section__text__p2 {
    font-size: 1.25rem;
  }
  .title {
    font-size: 2rem;
  }
  .text-container {
    text-align: justify;
  }

  .title1{
    text-align: center;
  }
  
  .title2{
    text-align: center;
  }
  
  #eventCode::placeholder {
    /* Your styles here */
  text-align: center;
  font-size: 16px;
  }
  
  #eventCode{
    height: 30px;
    font-size: 16px;
  }
  
  #searchInput::placeholder {
    /* Your styles here */
  text-align: center;
  font-size: 16px;
  }
  
  #searchInput{
    height: 30px;
    font-size: 16px;
  }
}