#intro {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-image: url(../img/alien-rogue-incursion-evolved-edition-hero-update-XL@2x.webp) top center / cover no-repeat;
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}

#top-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#bottom-row-mobile-options{
	display: none;
}

#desktop-hero-header,
#desktop-platform-logos,
#desktop-hero-buttons,
section-hero-buttons {
	display: flex;
}

#mobile-hero-header,
#mobile-platform-logos,
#mobile-hero-buttons {
	display: none;
}

.hero-row-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 20px;
}

.hero-col {
  flex: 1 1 45%;
  max-width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

.left-col-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.right-col-content{
	display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero-logo {
  max-width: 500px;
  width: 100%;
  padding-top: 100px;	
}

.release-date {
  font-family: 'Oxanium', sans-serif;
  font-weight: 500;
  font-size: 27px;
  letter-spacing: 6pt;
  color: var(--red);
  text-align: center;
	padding-top: 40px;
	padding-bottom: 20px;	
}

.platform-logos {
  	max-width: 500px;
  	width: 100%;
	padding-bottom: 60px;
}

.section-platform-logos {
	max-width: 500px;
  	width: 100%;
	padding-bottom: 10px;
}

.hero-button-row {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-button img {
  width: 210px;
  transition: opacity 0.3s ease-in-out;
}

.section-button-row {
  display: flex;
  gap: 15px;
  justify-content: left;
  flex-wrap: wrap;
}

.wishlist-btn:hover img {
  content: url('../img/btn-wishlist-now-ee-hover.svg');
}

.wish-btn:hover img {
  content: url('../img/btn-wish-now-ee-hover.svg');
}

.buy-now-btn:hover img {
  content: url('../img/btn-buy-now-ee-hover.svg');
}

.trailer-btn:hover img {
  content: url('../img/btn-watch-trailer-ee-hover.svg');
}

#bottom-row {
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#hero-platforms {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  margin: 0 auto;
  padding-bottom: 20px;
}

#arrow-down-icon {
  width: 50px;
  height: auto;
  margin: 0 auto;
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

@media (max-width: 1920px) {
	.hero-logo {
 	width: 440px;
	}
	.release-date {
  	font-size: 24px;
	padding-top: 50px;	
	}
	.platform-logos {
  	max-width: 390px;
	padding-bottom: 50px;
	}
	.hero-button img {
  	max-width: 190px;
	}
}

@media (max-width: 1600px) {
	.hero-logo {
 	width: 410px;
  	padding-top: 90px;	
	}
	
	.release-date {
  	font-size: 22px;
	padding-top: 45px;	
	}
	
	.platform-logos {
  	max-width: 400px;
	padding-bottom: 45px;
	}
	
	.hero-button img {
  	max-width: 185px;
	}
	
	.section-button-row .btn-drawer{
		min-width: 167px;
	}
}

/* Responsive: stack columns */
@media (max-width: 1180px) {
	#intro{
		min-height: 1280px;
	}
	
  #desktop-hero-header,
#desktop-platform-logos,
#desktop-hero-buttons {
	display: none;
}

#mobile-hero-header,
#mobile-platform-logos,
#mobile-hero-buttons {
	display: flex;
}
	.hero-row-top {
    flex-direction: column;
  }
	
	#top-row {
    align-items: start;
		padding-top: 70px;
	}
	
	#top-row-desktop-options{
		display: none;
	}
	
	#bottom-row {
    height: auto !important;
		    padding-bottom: 20px;
	}
	
	.hero-logo{
		padding-top: 70px;
		display: none;
	}

  .hero-col {
    max-width: 100%;
    flex: 1 1 100%;
  }
	
	.hero-button-row {
    gap: 20px;
	}
	
	.hero-button img {
  	max-width: 160px;
	}
	
	#mobile-hero-header{
		padding-bottom: 20px;
	}
	
	#mobile-hero-buttons{
		padding-bottom: 50px;
	}
	
	.section-platform-logos{
		max-width: 300px;
	}
}

@media (max-width: 820px) {
	#arrow-down-icon{
	width: 40px;
	}
	.hero-button img {
        max-width: 160px;
	}
}

@media (max-width: 650px) {
	#intro{
		min-height: 1080px;
	}
	.hero-logo {
 	width: 320px;
  	padding-top: 60px;	
	}
	
	    .release-date {
        font-size: 17px;
	}
	
	.platform-logos {
        max-width: 340px;
	}
	
	#arrow-down-icon{
	width: 30px;
	}
}

@media (max-width: 480px) {
	#intro{
		min-height: 920px;
	}
	.hero-logo {
 	width: 250px;
  	padding-top: 30px;	
	}
	
	    .release-date {
        font-size: 15px;
	}
	
	.platform-logos {
        max-width: 200px;
		padding-bottom: 35px;
	}
	#mobile-platform-logos{
		max-width: 275px;
	}
	
	#mobile-hero-buttons {
        padding: 0 25px 40px 25px;
    }
	
	#mobile-hero-buttons .btn-drawer {
        min-width: 150px;
		line-height: 55px;
        font-size: 11px;
	}
	
	.hero-button-row {
        gap: 10px;
    }
	
	    .hero-button img {
        max-width: 160px;
	}
}

@media (max-width: 390px) {
	#intro{
		min-height: 760px;
	}
	#arrow-down-link{
	display: none;
	}
	.trailer-btn{
	display: none;	
	}
	.section-button-row .btn-drawer {
        min-width: 150px;
		line-height: 55px;
        font-size: 11px;
    }
}