section[data-cattype="320"] .video-wrap, section[data-cattype="320"] .video-keeper{ position: relative; } section[data-cattype="320"] .video-keeper{ position: relative; } section[data-cattype="320"] .section-title{ position: relative; z-index: 3; } section[data-cattype="320"] .white-feather{ position: absolute; left: 0; right: 0; bottom: 0; height: 35vh; pointer-events: none; z-index: 2; background: linear-gradient( to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.98) 20%, rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.4) 70%, rgba(255,255,255,0.15) 85%, rgba(255,255,255,0) 100% ); } @media (max-width: 767px){ section[data-cattype="320"] .white-feather{ height: 28vh; } } section[data-cattype="320"] .section-title{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); margin: 0; padding: 0.25em 0.7em; font-size: 48px; line-height: 1.1; color: #fff; text-align: center; z-index: 3; pointer-events: none; text-shadow: 0 2px 8px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.25); white-space: nowrap; } section[data-cattype="320"] #starshine{ position: absolute; inset: 0; z-index: 4; pointer-events: none; } @media (max-width: 767px){ section[data-cattype="320"] .section-title{ font-size: clamp(22px, 7vw, 36px); padding: 0.2em 0.6em; } } section[data-cattype="320"] .section-title.has-bg{ background: rgba(0,0,0,.18); border-radius: 12px; backdrop-filter: blur(2px); } section[data-cattype="320"]{ position: relative; overflow: hidden; height: 780px; padding: 0; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border: 0; box-shadow: none; } section[data-cattype="320"]{ position: relative; z-index: 0; } section[data-cattype="320"] .video-wrap, section[data-cattype="320"] .video-keeper { position: absolute; top: -50px; left: 0; width: 100%; height: 107%; margin: 0; padding: 0; overflow: hidden; z-index: 1 !important; } section[data-cattype="320"]::before{ z-index: 0; } section[data-cattype="320"] .table-box { position: relative; z-index: 5; } section[data-cattype="320"] .video-wrap, section[data-cattype="320"] .video-keeper{ z-index: 2; } section[data-cattype="320"] .video-poster{ z-index: 1; } section[data-cattype="320"] #starshine{ position: absolute; inset: 0; z-index: 4; pointer-events: none; } section[data-cattype="320"] .table-box{ position: relative; z-index: 5; } section[data-cattype="320"] .video-wrap, section[data-cattype="320"] .video-keeper{ position: absolute; top: -65px; left: 0; width: 100%; height: 107%; margin: 0; padding: 0; overflow: hidden; z-index: 1; } section[data-cattype="320"] .video-wrap iframe{ position: absolute; left: -1736px; width: 280vw; height: 130%; border: 0; object-fit: cover; pointer-events: none; z-index: 1 !important; } section[data-cattype="320"] .video-poster{ position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 1; transition: opacity .6s ease; z-index: 0 !important; pointer-events: none; } section[data-cattype="320"].is-playing .video-poster{ opacity: 0; } section[data-cattype="320"] .table-box{ position: relative; z-index: 998 !important; } section[data-cattype="320"] #starshine{ position: absolute; inset: 0; z-index: 999 !important; pointer-events: none; } section[data-cattype="320"] .table-box{ position: relative; z-index: 3; display: table; width: 100%; height: 100%; text-align: center; } section[data-cattype="320"] .table-cell{ display: table-cell; vertical-align: middle; } section[data-cattype="320"] h1.section-title{ color: #fff; font-size: 42px; font-weight: 700; } @media (max-width: 767px){ section[data-cattype="320"]{ height: 360px; } section[data-cattype="320"] h1.section-title{ font-size: 32px; } } @media(max-width:1450px){ section[data-cattype="320"] .video-wrap, section[data-cattype="320"] .video-keeper{ position: absolute; top: -60px; left: 0; width: 100%; height: 107%; margin: 0; padding: 0; overflow: hidden; z-index: 1; } section[data-cattype="320"] .video-wrap iframe{ position: absolute; left: -1200px; width: 280vw; height: 110%; border: 0; object-fit: cover; pointer-events: none; } } @media (max-width: 767px){ section[data-cattype="320"] .white-feather { height: 17vh; } section[data-cattype="320"] .white-feather { background: linear-gradient( to top, rgb(255, 255, 255) 0%, rgba(255,255,255,0.98) 30%, rgba(255,255,255,0.9) 40%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.4) 70%, rgba(255,255,255,0.15) 85%, rgba(255,255,255,0) 100% ); } } @media (max-width: 758px){ section[data-cattype="320"] .hand-left{ top: 0; } section[data-cattype="320"] .hand-right{ top: 0; } } section[data-cattype="320"] #starshine .template.shine{ display: none; } section[data-cattype="320"] #starshine .shine{ position: absolute; background-image: url('https://www.entertop.com.my/data/repo534/images/contact/star_2_.png'); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; will-change: transform, opacity; filter: drop-shadow(0 0 6px rgba(255,220,120,.6)); mix-blend-mode: screen; z-index: 2; animation: glitter var(--dur, 6s) linear infinite; } section[data-cattype="320"] #starshine .shine.small{ width:16px; height:16px; } section[data-cattype="320"] #starshine .shine.medium{ width:24px; height:24px; } section[data-cattype="320"] #starshine .shine.large{ width:36px; height:36px; } @keyframes glitter{ 0% { transform: scale(.6) rotate(0); opacity:0; } 18% { transform: scale(1) rotate(180); opacity:1; } 50% { transform: scale(.7) rotate(360); opacity:.1; } 100% { transform: scale(.6) rotate(0); opacity:0; } } section[data-cattype="320"] .table-cell .heading, section[data-cattype="320"] .table-cell h2{ font-size: 25px; font-family: 'Public Sans', sans-serif; font-weight: 200; line-height: 1.2; color: #f7941e; } section[data-cattype="320"] h1.section-title { color: #ffffff !important; } @media screen and (max-width: 1450px) { section[data-cattype="320"] .table-box, section[data-cattype="320"] { min-height: 590px; } } @media screen and (min-width: 1200px) { [data-cattype="320"] h1.section-title, [data-cattype="320"] .section-title{ font-size: 48px; } section[data-cattype="320"] .table-cell .heading, section[data-cattype="320"] .table-cell h2{ font-size: 32px; } } @media screen and (max-width: 767px) { section[data-cattype="320"] .table-box, section[data-cattype="320"] { min-height: inherit; height: 200px; } section[data-cattype="320"] .table-box{ width: 100%; } section[data-cattype="320"] .table-cell{ padding: 30px 20px; } section[data-cattype="320"] .video-wrap iframe { left: 0; width: 280vw; height: 100%; } section[data-cattype="320"] .video-wrap, section[data-cattype="320"] .video-keeper{ top: -10px; } section[data-cattype="320"] .video-keeper { position: absolute; top: -30px; left: 0px; width: 104%; height: 120%; } }