/* =========== 
	Global Styles 
	========== */
@media screen and (max-width: 799px) {

	.accordion {
		padding: 4rem  1rem;
		grid-column: 1;
	}
	.accordion-button {
		width: 86%;
	}
	.benefits {
		padding: 2rem 1rem;
		grid-template-columns: 1fr;
		gap: 0
	}
	.benefits__title {
		grid-column: 1;
	}
	.blog {
		padding: 4rem 0rem;
	}
	.contact__form-container {
		grid-template-columns: 1fr;
		background-color: #000;
		background-repeat: no-repeat;
		padding: 1rem;
		background-size: cover;
	}
	.cards__services {
		grid-template-columns: 1fr;
	}
	.footer-container {
		padding: 2rem 0;
	}
	.footer-container__column {
		grid-column: 1;
	}
	.footer-container__list {
		grid-template-columns: 1fr;
	}
	.footer-container__list-item {
		margin-bottom: 1rem;
	}
	.intro {
		padding: 4rem 1rem;
		grid-template-columns: 1fr;
		gap: 1%;
	}
	.intro__about {
		padding: 4rem 1rem;
		grid-template-columns: 1fr;
		gap: 0
	}
	.intro__right {
		grid-column: 1;
	}
	.masthead__caption-container {
		width: 100%;
		grid-template-columns: 1rem 1fr;
	}
	.menu {
		background: rgba(255, 255, 255, 1.0);
		position: relative;
	}
	nav ul {
		background: rgba(255, 255, 255, .96);
		padding: 4rem 0;
		top: 0;
	}
	nav ul li {
		margin-left: 0;
		margin-bottom: 2rem;
	}
	.nav-toggle:checked ~ nav a {
		opacity: 1;
		transition: opacity 250ms ease-in-out 250ms;
		color: var(--green-100);
	}
}

@media screen and (min-width: 800px) {  
	.menu {
		background: rgba(255, 255, 255, .9);
		display: grid;
		grid-template-columns: 30% 1fr;
		padding: 0;
		justify-items: center;
	}
	.menu__btn {
		background: var(--orange-400);
	}
	.menu__btn a {
		color: var(--white-100)!important;
	}
	.menu__logo {
		width: 100%;
		max-width: 220px;
	}	
	.menu__logo-container {
		display: grid;
		justify-items: center;
	}
	.menu__member-login {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background: transparent;
		padding: 0 0 1rem 0;
	}
		nav {
		all: unset;
		position: relative;
		text-align: left;
		transition: none;
		transform: scale(1,1);
		background: none;
		top: 0rem;
		left: initial;   
		display: grid;
		margin: 0 0 0 0;
		justify-content: end;
		align-content: space-around;
	}
	.nav-toggle:checked ~ nav a {
		color: var(--black-200);
	}	
	nav a {
	  opacity: 1;
	  position: relative;
	  color: var(--black-200)!important;
	}	
	nav li a::before {
	  content: '';
	  display: block;
	  height: 2px;
	  background: var(--green-100);
	  position: absolute;
	  bottom: -.75em;
	  left: 0;
	  right: 0;
	  transform: scale(0, 1);
	  transition: transform ease-in-out 250ms;
	}	
	nav li a:hover::before {
	  transform: scale(1,1);
	}
	.nav-toggle-label {
	  display: none;
	}
	nav ul {
	  display: flex;                
	  background: transparent;
	}	
	nav ul li {
	  margin-left: 2em;
	  margin-bottom: 0;
	}
  }