/* css Document */
@media screen and (min-width: 768px) {


.dedication-section {
  background: url("../img/tree-bkrd.jpg") no-repeat center/cover;
  padding: 100px 20px;
}

.cards-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.quote-card {
  display: flex;
  justify-content: center;
  align-items: center;
}
	
.quote-card img {
  max-width: 320px;
  height: auto;
  display: block;
}

@media (max-width: 768px) {

  .cards-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .quote-card img {
    width: 100%;
    max-width: 420px;
  }
}
	
#logo{
  padding-top: 0px;
}
	
#badge{
  padding-top: 250px;
}
	
	
/* Container */
.hero {
  position: relative;
  height: 100vh; /* Full screen height */
  width: 100%;
  overflow: hidden;
}

/* Background Video */
.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
}

/* Content Overlay */
.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Optional dark overlay for readability */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* PNG Images */
.hero__image {
  position: absolute;
  height: auto;
}

/* Positioning examples */
.hero__image--left {
	top: -6%;
	left: 17%;
	max-width: 200px;
}

.hero__image--right {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 350px;
	height: auto;
	max-width: 350px;
	transform: translate(-50%, -50%);
}
	
@media (max-width: 768px) {
  .hero {
    height: 70vh;
  }

  .hero__image {
    max-width: 120px;
  }
}	
	
	
	
	
	

a img {
  /* Necessary for the router to work properly if the developer puts an A tag around an IMG */
  pointer-events: none;
}
	

	.content {
	max-width: 920px;
	height: auto;
	margin: 0 auto;
	padding: 0 25px;
	}

	.content-narrow {
		padding: 0 60px;
	}

	.img_content {
	max-width: 100%;
	margin: 0;
	padding: 0;
	}

	section {
	padding: 50px 0;
	}

	#main-content{
	margin: auto;
	padding: 0 220px;
	}
	
	.blackbg{
	background-color: black;
	padding: 30px 80px;
	}
	
	.blackbg2{
	background-color: black;
	padding: 30px 212px;
	}
		
	iframe {
	width: 100%;
	/* height: 70%; */
	display: block;
	margin: 80px auto;
	max-width: 1110px;
	/*max-height: 1259px;*/
	}
				

	#video-fpo {
	display: flex;
	justify-content: center;
	}

	#video-fpo img{
	margin:0;
	padding:50px 0 0 0;
	max-width:640px;
	}
	
	.text-section {
		margin: 48px 0;
	}
	
	hr {
		border: 1px solid #F6B0BD;
		width: 100%;
	}

	.sbs{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	}
			
	.darkgray {
	background-color: black;
	padding: 0;
	}

	.lightgray{
	background-color: black;
	padding: 20px 150px;
	}

	

	#header img{
		padding:10px 0 55px;
		margin: 0;
		width: 255px;
		height:auto;
	}
	
	#header #adlarity-logo {
		width: 255px;
		height: auto;
	}

	#mobileStack{
		min-height: initial;
	}

	#mobileStack .adlarity-header-text{
	font-family: 'museo-sans', sans-serif;
	font-weight:700;
	font-size:54px;
	line-height:54px;
	}
	
	#mobileStack br.tmp{
		display:initial;
	}
	
	#header{
		/*padding:0 0 100px 0;
		max-height: 830px;*/
		background-image: url(../img/header.jpg);
		background-color: #000000;
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
		min-height: initial;
	   }
	

	#banners {
	max-width:45%;
	}
	
	#banners-image img {
		max-width: 482px;
	}
	
	#visualaid-image{
	margin: auto;
	}
	
	#visualaid-image img {
		max-width: 634px;
	}
	
	#adwebsite {
		width: 60%;
	}
	#adwebsite2 {
		width: 60%;
	}
	#adimage {
		width: auto;
	}
	#adimage img {
		max-width: 500px;
		padding: 0;
	}
	#adimage2 {
		width: auto;
	}
	#adimage2 img {
		max-width: 500px;
		padding: 0;
	}
	
	#visualaid-image {
		width: 60%;
	}
	#visualaid-text {
		width: 40%;
	}
	
	#collateral img {
		max-width: none;
	}
	
	#banners {
		width: 50%;
	}
	#banners-image {
		width: 50%;
	}
	
	#pinkbox {
		width: 114px;
		height: 6px;
		background-color: #F6B0BD;
		margin-bottom: 30px;
	}

	#pinkbox2 {
		width: 114px;
		height: 6px;
		background-color: #F6B0BD;
		margin: 20px auto;
	}
	
	#pinkbox3 {
		width: 114px;
		height: 6px;
		background-color: #F6B0BD;
		margin-bottom: 30px;
	}
	
	.hero {
  position: relative;
  background: url("../img/tree-bkrd.jpg") no-repeat center/cover;
  height: 500px;
		margin: 0 auto;
}

.overlay {
  position: absolute;
  max-width: 350px;
}

.img1 { top: 120px; left: 120px; }
.img2 { top: 120px; left: 500px; }
.img3 { top: 120px; left: 880px; }
	
	
	@media (max-width: 768px) {
  .hero {
    height: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: cover;
  }

  .overlay {
    position: static;
    margin-bottom: 15px;
    max-width: 80%;
  }
}
	
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
	.blackbg {
		padding: 30px 40px;
	}
	.content {
		max-width: 1200px;
	}
	iframe {
		max-height: none;
	}
}