@media (min-width: 768px) and (max-width: 1300px) {
  .container {
    max-width: 90%;
  }

  .landing-header {
    font-size: 2.7em;
  }

  .landing-p {
    font-size: 1.3em;
    width: 80%;
  }

  .landing-image {
    float: right;
    width: 40%;
    height: 370px;
    position: absolute;
    top: -440px;
    right: 200px;
    z-index: -1;
  }
}

@media (max-width: 990px) {
  .nav-links {
    display: none;
  }
  .nav-overlay {
    display: flex;
  }

  .hamburger {
    display: block;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
  }

  .switch-mobile {
    display: block;
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
  }

  .landing-image {
    width: 240px;
    top: -380px;
  }

  .project-row {
    flex-direction: column;
  }

  .project-1,
  .project-2,
  .project-3,
  .project-4 {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }

  .project-text-container {
    padding: 25px;
    height: fit-content;

  }

  .project-image {
    height: 300px;
  }

  .project-row-2 {
    margin-top: 0;
  }

  .contact-wrapper {
    padding: 50px 0px 80px 0px; 
    margin-top: -30px; 
  }

  .contact-container {
    flex-direction: column; 
  }

  .contact-text-section,
  .contact-form-section {
    width: 100%;
    margin-right: 0;
  }

  .contact-text-section {
    margin-bottom: 40px; 
    text-align: center; 
  }

  .contact-form-section {
    padding: 20px; 
  }

  .contact-text-header {
    font-size: 2em; 
  }

  .contact-text-p {
    font-size: 1em; 
  }

  .footer-container {
    flex-direction: column; 
    width: 90vw; 
    padding: 20px 0;
  }

  .footer-col {
    width: 100%; 
    text-align: center; 
    margin-bottom: 20px; 
  }

  .footer-col:last-child {
    margin-bottom: 0; 
  }

  .col-1, .col-3 {
    text-align: center; 
  }

  .timeline-horizontal {
    flex-direction: column;
    align-items: center;
  }

  .timeline-horizontal::before {
    display: none;
  }

  .timeline-dot {
    display: none;
  }

  .timeline-item {
    margin-bottom: 30px;
  }


}

@media (min-width: 991px) {
  .nav-links {
    display: flex;
  }
  .nav-overlay {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 85%;
  }

  .landing-image {
    top: -400px;
    right: 190px !important;
    width: 260px;
    position: absolute;
    z-index: 0;
  }

  .landing-text {
    width: 100%;
  }

  .landing-text h2 {
    font-size: 6vw !important;
  }

  .landing-text p {
    width: 100%;
  }

  .landing-container {
    height: 770px !important;
    overflow: hidden;
  }

  .about-me-container {
    margin-top: -90px !important;
  }

  .about-me-split {
    flex-direction: column;
  }

  .about-me-photo-panel {
    max-width: 100%;
    height: 280px; /* Square height */
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    position: relative;
  }

  .about-me-full-photo {
    width: 100%;
    height: 340px !important;
    object-fit: cover;
    object-position: center 40%;
  }
  .about-me-text-panel {
    padding: 100px 70px;
  }

  .about-me-text-panel h2 {
    font-size: 2.2em;
    margin-bottom: 1rem;
  }

  .about-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .about-buttons a {
    width: 100%;
  }

  .about-buttons button {
    width: 100%;
  }

}

@media (max-width: 480px) {

  .landing-image {
    top: -390px;
    right: 140px !important;
    width: 200px;
    position: absolute;
    z-index: 0;
  }

  .about-me-container {
    margin-top: -130px !important;
  }

  .landing-p {
    font-size: 1.1em;
  }

  .section-header{
    font-size: 1.8em!important;
  }

  .about-me-text-panel {
    padding: 60px 40px;
  }





}