@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap");

.smg55-video-full{
  position:relative;
  overflow:hidden;
  background:url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/confetti.svg") center 18px / 82% auto no-repeat,
    url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/55andbeyond-bg.svg") calc(100% - 48px) 10% / 200px auto no-repeat,
    url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/left-skyline.png") left calc(100% + 12px) / 30% auto no-repeat,
    url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/right-skyline.png") right calc(100% + 12px) / 24% auto no-repeat,
    linear-gradient(90deg, #fffaf3 0%, #fffaf7 48%, #fff3f1 100%);
  font-family:"Lato", Arial, Helvetica, sans-serif;
}

.smg55-video-full__card{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:58px;
  min-height:370px;
  padding:48px 0 54px;
}

.smg55-video-full__content,
.smg55-video-full__media{
  position:relative;
  z-index:2;
}

.smg55-video-full__content{
  flex:0 0 34%;
  max-width:360px;
  margin-left:20px;
}

.smg55-video-full__title{
  margin:0;
  color:#111;
  font-size: 33px;
  font-weight:600;
  line-height:1.14;
}

.smg55-video-full__title span{
  display:block;
}

.smg55-video-full__script{
  margin-top:4px;
  color:#bb0000;
  font-family:"Dancing Script", cursive;
  font-size:48px;
  font-weight:700;
  line-height:.98;
}

.smg55-video-full__desc{
  max-width:330px;
  margin:16px 0 0;
  color:#4a4a4a;
  font-size: 15px;
  font-weight:400;
  line-height:1.45;
}

.smg55-video-full__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  margin-top:22px;
  padding:0 22px;
  border-radius:999px;
  background:#bb0000;
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  transition:background-color .2s ease, transform .2s ease;
}

.smg55-video-full__cta:hover,
.smg55-video-full__cta:focus{
  background:#df1f26;
  color:#fff;
  text-decoration:none;
  transform:translateY(-1px);
}

.smg55-video-full__cta .material-symbols-outlined{
  font-size:18px;
  line-height:1;
}

.smg55-video-full__media{
  flex:0 1 595px;
  margin-right:118px;
}

.smg55-video-full__frame{
  position:relative;
  width:100%;
  overflow:hidden;
  border:12px solid #fff;
  border-radius:14px;
  background:#111;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.smg55-video-full__frame::before{
  content:"";
  display:block;
  padding-top:56.25%;
}

.smg55-video-full__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

@media only screen and (max-width:1199px){
  .smg55-video-full{
    background:url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/confetti.svg") center 16px / 1500px auto no-repeat,
      url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/55andbeyond-bg.svg") calc(100% - 22px) 50% / 260px auto no-repeat,
      url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/left-skyline.png") left calc(100% + 10px) / 32% auto no-repeat,
      url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/right-skyline.png") right calc(100% + 10px) / 32% auto no-repeat,
      linear-gradient(90deg, #fffaf3 0%, #fffaf7 48%, #fff3f1 100%);
  }

  .smg55-video-full__card{
    gap:42px;
  }

  .smg55-video-full__content{
    margin-left:0;
  }

  .smg55-video-full__media{
    flex-basis:540px;
    margin-right:74px;
  }
}

@media only screen and (max-width:991px){
  .smg55-video-full{
    background:url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/confetti.svg") center 14px / 1260px auto no-repeat,
      url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/55andbeyond-bg.svg") calc(100% + 76px) 18px / 198px auto no-repeat,
      url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/left-skyline.png") left calc(100% + 8px) / 38% auto no-repeat,
      url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/right-skyline.png") right calc(100% + 8px) / 38% auto no-repeat,
      linear-gradient(90deg, #fffaf3 0%, #fffaf7 48%, #fff3f1 100%);
  }

  .smg55-video-full__card{
    gap:30px;
    min-height:330px;
  }

  .smg55-video-full__content{
    flex-basis:36%;
  }

  .smg55-video-full__title{
    font-size:26px;
  }

  .smg55-video-full__script{
    font-size:40px;
  }

  .smg55-video-full__media{
    flex-basis:460px;
    margin-right:28px;
  }
}

@media only screen and (max-width:767px){
  .smg55-video-full{
    background:url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/confetti.svg") center 10px / 920px auto no-repeat,
      url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/55andbeyond-bg.svg") calc(80% + 46px) 18px / 120px auto no-repeat,
      url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/left-skyline.png") left calc(100% + 6px) / 56% auto no-repeat,
      url("https://cdn-smg55.starmediagroup.my/Themes/img/smg55video/right-skyline.png") right calc(100% + 6px) / 56% auto no-repeat,
      linear-gradient(180deg, #fffaf3 0%, #fff6f4 100%);
  }

  .smg55-video-full__card{
    display:block;
    min-height:0;
    padding:34px 0 84px;
  }

  .smg55-video-full__content{
    max-width:none;
    margin:0 0 22px;
    padding:0 8px;
  }

  .smg55-video-full__title{
    max-width:270px;
    font-size:25px;
  }

  .smg55-video-full__script{
    font-size:42px;
  }

  .smg55-video-full__desc{
    max-width:310px;
  }


  .smg55-video-full__media{
    margin:0;
  }

  .smg55-video-full__frame{
    border-width:8px;
    border-radius:12px;
    box-shadow:0 8px 18px rgba(0,0,0,.16);
  }
}