.banner {
  width: 100%;
  height: 100vh;
  max-height: 800px;
  background-image: url(../images/StudioBGWallFloor.png);
  background-size: cover;
  background-position: center;
}
.banner-logo {
  position: absolute;
  width: 22.5%;
  top: 5%;
  left: 39%;
}
.banner-title h1 {
  font-family: "Bebas Neue", sans-serif;
  background: linear-gradient(90deg, #ff557c 30%, #f3823c);
  background-clip: text;
   -webkit-background-clip: text;
  color: transparent;
  margin: 35px 20px 0px 0px !important;
}
.card-section {
  background-image: url(../images/card-bg.png);
  background-size: 100%;
  width: 100%;
  height: 100%;
  position: relative;
  transition: background-size 0.5s ease-out;
  background-position: center;
}
.card-section div > h2 {
  color: var(--global-color-pink);
}
.arcade-card {
  position: relative;
  text-align: left;
  color: #fff;
  transition: border 0.3s ease;
}

.arcade-card img,
.arcade-card-2 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.arcade-card:hover img {
  transform: scale(1.05);
}

.card-section .arcade-card-1:hover {
  border-bottom: 2px solid var(--global-color-text);
}
.card-section .arcade-card-2:hover {
  border-bottom: 2px solid var(--global-color-pink);
}
.card-section .arcade-card-3:hover {
  border-bottom: 2px solid var(--global-color-accent);
}

.card-section .arcade-card-4:hover {
  border-bottom: 2px solid var(--global-color-blue);
}

.arcade-title {
  margin-top: 0.4rem;
  font-weight: bold;
}

.arcade-subtitle {
  color: #fff;
}
.arcade-card-1 .arcade-title {
  color: var(--global-color-text);
}
.arcade-card-2 .arcade-title {
  color: var(--global-color-pink);
}

.arcade-card-3 .arcade-title {
  color: var(--global-color-accent);
}
.arcade-card-4 .arcade-title {
  color: var(--global-color-blue);
}

.card-section-2,
.footer-section {
  width: 100%;
  height: auto;
  background-image: url(../images/stars.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 30px;
  padding-bottom: 30px;

}
.card-section-2 h2 {
  color: var(--global-color-blue);
}
.iframe-section h2 {
  color: var(--global-color-text);
}
.stack {
  background: transparent;
  height: 400px !important;
}
.stack-1 {
  border: 5px solid var(--global-color-text);
}
.stack-2 {
  border: 5px solid var(--global-color-blue);
  top: -17px;
  left: -17px;
}
.stack-3 {
  border: 5px solid var(--global-color-accent);
  top: 17px;
  left: 15px;
}

.banner-wrapper {
  background-size: cover;
  background-image: url(../images/banner.png);
  background-position: 0px;
  height: 100vh;
}
.footer {
  /* padding-top: 80px; */
  /* padding-bottom: 80px; */
  position: relative;
}
.home-footer-wrapper {
  padding-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.home-footer-wrapper h4 {
  color: var(--global-color-green);
}
.home-footer-wrapper p {
  color: var(--global-color-text);
}
.home-footer-wrapper .number {
  color: #007aff;
}
.home-footer-wrapper .email {
  color: var(--global-color-pink);
}
.home-footer-wrapper-left {
  padding-right: 180px;
}

.img-move {
  position: absolute;
  z-index: var(--z-index-img-move);
  /* top: 100; */
}

.img-move img,
.upper-img img {
  width: 100px;
  height: 100px;
  transition: transform 0.4s linear;
  will-change: transform;
}


@media screen and (max-width: 991px){
  .banner img{
    display: none;
  }
  .banner-title{
    padding-right: 30px !important;
  }
  .home-footer-wrapper-right > div{
    margin-left: 35% !important;
  }
  .iframe-section .col-lg-8{
    order: -1;
  }
}
@media screen and (max-width: 768px){
 .card-section-2{
  padding-inline: 0px !important;
 } 
 .stack{
  /* width: 90% !important; */
 }
}
@media screen and (max-width:650px){
 .stack-container{
  height: 300px !important;
  margin-left: 54px !important;
 }
  .stack{
  height: 300px !important;
 }
}
@media screen and (max-width:500px){
 .stack-container{
  height: 260px !important;
  margin-left: 54px !important;
 }
  .stack{
  height: 260px !important;
 }
}
@media screen and (max-width:425px){
 .stack-container{
  height: 200px !important;
  margin-left: 40px !important;
 }
  .stack{
  height: 200px !important;
 }
 .home-footer-wrapper {
    padding-top: 100px !important;
    padding-bottom: 30px !important;
}
.home-footer-wrapper-right{
  padding-right: 0px !important;
}
.email{
  font-size: 9px !important;
}
}
@media screen and (max-width: 330px) and (min-width:320px){
    .navbar-brand {
        left: 7px !important;
    }
    .banner-title {
        padding-right: 2px !important;
    }
}

/* banner text animation */
.animated-title {
  line-height: 0.9;
  margin: 0;
}
.animated-title span {
  display: block;
  margin: 0;
  opacity: 0;
  transform: translateY(-100%);
  animation: dropIn 0.8s ease forwards;
  background: linear-gradient(90deg, #ff557c 30%, #f3823c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.animated-title span:nth-child(4) {
  font-size: clamp(56px, 11.5vw, 125px);
  animation-delay: 0s;
}
.animated-title span:nth-child(3) {
  font-size: clamp(42px, 8.2vw, 87px);
  animation-delay: 0.3s;
}
.animated-title span:nth-child(2) {
  font-size: clamp(36px, 7vw, 76px);
  animation-delay: 0.6s;
}
.animated-title span:nth-child(1) {
  font-size: clamp(26px, 5vw, 55px);
  animation-delay: 0.9s;
}

@keyframes dropIn {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.banner-title h1 {
  font-family: "Bebas Neue", sans-serif;
  /* background: linear-gradient(90deg, #ff557c 30%, #f3823c);
  background-clip: text;
   -webkit-background-clip: text;
  color: transparent; */
  margin: 35px 20px 0px 0px !important;
}