@media (min-width: 768px) and (max-width: 1024px) {
  .archive .img-grid .project-grid {
    grid-template-columns: repeat(2, 1fr);
    margin: 30px;
  }
  .archive .img-grid .project-grid .project-name {
    position: static;
    opacity: 1;
    background: unset;
    padding: 10px 0;
    span {
      color: black;
      font-size: 1.8rem;
    }
    .country {
      font-size: 14px;
    }
  }
	
	.single .section1, .single .section2, .single .section3, .single .section4, .single .section5{
		margin-bottom:50px;
	}
	
	.single .section1,
	.single .section2{
		flex-direction:column;
	}
	
	.single .section1 .content{
		width: 100%;
		padding-left: 0;
		padding-bottom: 0;
	}
	.single .section1 .img-section{
		width: 100%;
	}

	.single .section2 div.content{
		width: 100%;
		padding: 0;
	}
	.single .section2 .img-section{
		width:100%;
	}
	.single .section2 .img-section img{
		height:80vh;
	}
	
	.single .section4 p{
		width:100%;
	}
	
	.single .section5{
		flex-direction:column;
	}
	.single .section5 .img-section{
		width:100%;
	}
	.single .section5 div.img-section img{
		height:80vh;
	}
	
	
}

@media (min-width: 320px) and (max-width: 767px) {
	.section-four {
		a{
			color:#fff;
		}
		svg#world-map {
			height: 100%;
		}
	}
	
	.project-detail-banner .heading h1 .letter{
		    font-size: 2rem!important;
	}
  .custom-logo-link {
    vertical-align: text-top;
  }
  #site-navigation {
    display: flex;
    justify-content: end;
  }

  header:has(nav.toggled) {
    background-color: white;
  }
	
	.single header:has(nav.toggled) img,
	.home header:has(nav.toggled) img{
		filter:unset
	}

  #site-navigation.toggled {
    .menu-menu-1-container {
      position: absolute;
      height: auto;
      display: block;
      width: 100%;
      left: 0;
      z-index: 2;
      background-color: white;
      top: 65px;
      padding: 1rem;
      ul {
		  display: flex;
		  flex-direction: column;
		  gap: 3rem;
      }
    }
  }

  .slider-counter {
    flex-direction: column;
  }

  .home header,
  .single header {
    & nav {
      ul {
        display: none;
        a {
          color: black;
        }
      }
    }
  }
  header.site-header {
    padding: 1rem;
    .menu-toggle {
      background-color: unset;
      border: unset;
      border-radius: unset;
      padding: 0;
      img {
        width: 25px;
      }
    }
  }

  .home .section-two .inner-div {
    display: block;
    .left-side,
    .right-side {
      width: 100%;
      padding: 0 1rem;
    }
    .right-side img {
      width: 100%;
      margin-top: 5rem;
    }
  }
  #modal-overlay {
    .modal {
      padding: 2rem;
    }
    form {
      width: auto;
    }
  }
  footer {
    padding: 2rem !important;
    div.inner-info {
      gap: 2rem;
      flex-wrap: wrap;
    }
  }

  .archive .img-grid .project-grid {
    grid-template-columns: repeat(1, 1fr);
    margin: 15px;
  }
  .archive .img-grid .project-grid .project-name {
    position: static;
    opacity: 1;
    background: unset;
    padding: 10px 0;
    span {
      color: black;
      font-size: 1.8rem;
    }
    .country {
      font-size: 14px;
    }
  }
	
	.project-detail-banner{
		margin-bottom:50px;
	}

  	.single .section1, .single .section2, .single .section3, .single .section4, .single .section5{
		    margin: 0 50px 50px 50px;
	}
	
	.single .section1,
	.single .section2{
		flex-direction:column;
	}
	
	.single .section1 .content{
		width: 100%;
		padding-left: 0;
		padding-bottom: 0;
	}
	.single .section1 .img-section{
		width: 100%;
	}

	.single .section2 div.content{
		width: 100%;
		padding: 0;
	}
	.single .section2 .img-section{
		width:100%;
	}
	.single .section2 .img-section img{
		height:auto;
	}
	
	.single .section4 p{
		width:100%;
	}
	
	.single .section5{
		flex-direction:column;
	}
	.single .section5 .img-section{
		width:100%;
	}
	.single .section5 div.img-section img{
		height:auto;
	}
}