@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');

@font-face {
font-family: 'Sweet';
src: url(/-global-assets/fonts/Sweet-Cupcake-demo.ttf);
font-weight: 700;
font-display: auto;
}

@font-face {
font-family: 'Uhudscript';
src: url('/-global-assets/fonts/Uhudscript-Demo.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;.slide2 .slide-content
}

@font-face {
font-family: 'Galano';
src: url('/-global-assets/fonts/GalanoGrotesqueRegular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Galano';
src: url('/-global-assets/fonts/GalanoGrotesque-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Galano-Bold';
src: url('/-global-assets/fonts/GalanoGrotesqueDEMO-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}



/* ===========================
RESET
=========================== */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}

.careers-wrapper {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

:root {
--text-gradient: linear-gradient(
90deg,
#02bcdd 0%,
#06d1e5 30%,
#64eda8 68%,
#d0f88d 100%
);
}

/* ===========================
CUSTOM FONTS
=========================== */

@font-face {
font-family: "Galano";
src: url("/-global-assets/fonts/GalanoGrotesqueRegular.otf")
format("opentype");
font-weight: 300;
font-style: normal;
font-display: swap;
}

/* ===========================
PAGE Desktop only 
=========================== */
@media screen and (min-width: 1370px) {
.site-header {
display: none !important;
}
}

.careers-page {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: #02253d;
}

.hidden {
display: none !important;
}

/* ===========================
INTRO VIDEO
=========================== */

.intro-video-screen {
position: fixed;
inset: 0;
z-index: 99;
background: #000;
}

.intro-video-screen video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

/* ===========================
CAREERS WRAPPER
=========================== */

.careers-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

.careers-main {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}

/* =========================== BANNER =========================== */

.banner-screen {
position: absolute;
inset: 0;
overflow: hidden;
}

.banner-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

/* Text Position */
.banner-content {
position: absolute;
top: 28%;
left: 50%;
transform: translateY(-50%);
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
/* gap: 4px; */
text-align: center;
}

.banner-content h1 {
margin: 0;
font-weight: 400;
line-height: 1.18;
font-size: 32px;
color: #fff;
font-family: "itim", cursive;
}

.banner-content h1 span {
background: var(--text-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Galano' !important;
font-size: 38px;
font-weight: 700;
display: inline-block;
line-height: 1.22;
padding-bottom: 1px;
}

.banner-content h2 {
margin: 0;
font-weight: 400;
line-height: 1.18;
font-size: 32px;
color: #fff;
font-family: "itim", cursive;
}

/* ===========================
SLIDESHOW
=========================== */

.slideshow {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

/* ===========================
SLIDES TRACK
=========================== */

.slides-track {
display: flex;
width: max-content;
height: 100%;
will-change: transform;
transition: transform 600ms ease-in-out;
}

/* ===========================
COMMON SLIDE
=========================== */

.slide {
position: relative;
flex: 0 0 100vw;
width: 100vw;
height: 100%;
overflow: hidden;
background: #02253d;
flex-shrink: 0;
}

/* ===========================
SLIDE BACKGROUND
=========================== */

.slide-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}

/* ===========================
MAIN IMAGE
=========================== */

.slide-main-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

/* ===========================
SLIDE CONTENT
=========================== */

.slide-content {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
font-family: "Galano";
}

/* ===========================
INDIVIDUAL SLIDES
=========================== */

/* Slide 1 */
.slide1 .slide-main-image {
object-position: center;
}

/* Slide 2 */
.slide2 .slide-main-image {
object-position: center;
}

/* Slide 3 */
.slide3 .slide-main-image {
object-position: center;
}

/* Slide 4 */
.slide4 .slide-main-image {
object-position: center;
}

/* Slide 5 */
.slide5 .slide-main-image {
object-position: center;
}

/* Slide 6 */
.slide6 .slide-main-image {
object-position: center;
}

/* Slide 7 */
.slide7 .slide-main-image {
object-position: center;
}

/* Slide 8 */
.slide8 .slide-main-image {
object-position: center;
}

/* Slide 9 */
.slide9 .slide-main-image {
object-position: center;
}

/* Slide 10 */
.slide10 .slide-main-image {
object-position: center;
}

/* Slide 11 */
.slide11 .slide-main-image {
object-position: center;
}

/* Slide 12 */
.slide12 .slide-main-image {
object-position: center;
}

/* ===========================
DOOR REFERENCE
=========================== */

.door-wrapper {
position: absolute;
left: 42%;
top: 48%;
width: 1px;
height: 1px;
z-index: 50;
}

/* ===========================
HINT ICON
=========================== */

.hint {
position: absolute;
top: -50px;
left: 40px;
}

.hint-icon {
display: block;
width: 40px;
height: auto;
cursor: pointer;
}

.hint-icon {
animation: hintSwing 1.6s ease-in-out infinite;
transform-origin: center;
}

@keyframes hintSwing {
0% {
transform: translateX(0px);
}
25% {
transform: translateX(-8px);
}
50% {
transform: translateX(0px);
}
75% {
transform: translateX(0px);
}
100% {
transform: translateX(0px);
}
}

/* ===========================
BELL ICON =========================== */

.bell {
position: absolute;
top: -3px;
left: -2px;
}

.bell::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 58px;
height: 58px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(94, 236, 236, 0.35);
filter: blur(12px);
z-index: -1;
animation: bellGlow 2s ease-in-out infinite;
}

.bell-icon {
display: block;
width: 45px;
height: auto;
cursor: pointer;
position: relative;
z-index: 2;
}

@keyframes bellGlow {
0%,
100% {
opacity: 0.45;
transform: translate(-50%, -50%) scale(1.12);
}

50% {
opacity: 0.9;
transform: translate(-50%, -50%) scale(1.9);
}
}

/* ===========================
HINT POPUP
=========================== */

.hint-popup {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
justify-content: center;
align-items: center;
background: rgba(2, 37, 61, 0.85);
backdrop-filter: blur(8px);
cursor: pointer;
}

.hint-popup img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
object-position: center;
}

@media (max-height: 650px) {
.hint-icon,
.bell-icon {
width: 35px;
}
.bell {
top: -15px;
}
.door-wrapper {
left: 43%;
top: 51%;
}
}

/* ===================================
SLIDE 7
=================================== */

.slide7 .slide-content {
position: absolute;
inset: 0;
z-index: 2;
}

/* ===================================
BEAMS ROW
=================================== */

.beams-row {
position: absolute;
top: -5%;
left: 50%;
transform: translateX(-50%);
width: min(92%, 1700px);
display: flex;
justify-content: space-between;
align-items: flex-start;
z-index: 3;
}

/* ===================================
COMMON BEAM STYLE
=================================== */

.beam1-wrapper,
.beam2-wrapper,
.beam3-wrapper,
.beam4-wrapper,
.beam5-wrapper {
position: relative;
width: clamp(230px, 11vw, 300px);
display: flex;
justify-content: center;
align-items: flex-start;
}

.beam {
/* width: 100%; */
width: 250%;
height: auto;
display: block;
}

/* ===================================
TEXT INSIDE BEAM
=================================== */

.beam1-wrapper h3,
.beam2-wrapper h3,
.beam3-wrapper h3,
.beam4-wrapper h3,
.beam5-wrapper h3 {
position: absolute;
left: 50%;
bottom: 60%;
transform: translateX(-50%);
width: 72%;
margin: 0;
color: #fff;
text-align: center;
font-size: 22px;
line-height: 1.3;
font-weight: 500;
font-family: "itim", cursive;
}

.beam3-wrapper h3 {
bottom: 66%;
}
/* ===================================
ARC SHAPE
=================================== */

.beam1-wrapper {
margin-top: 60px;
}

.beam2-wrapper {
margin-top: 20px;
}

.beam3-wrapper {
margin-top: 60px;
}

.beam4-wrapper {
margin-top: 20px;
}

.beam5-wrapper {
margin-top: 50px;
}

/* ===================================
CENTER CONTENT
=================================== */

.banner-text-wrapper {
position: absolute;
left: 50%;
top: 48%;
transform: translate(-50%, -50%);
width: min(90%, 900px);
text-align: center;
z-index: 5;
}

.banner-text-wrapper h1 {
margin: 0;
font-size: 48px;
color: transparent;
padding: 0 0 6px 0;
line-height: 1;
font-weight: 700;
background: var(--text-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Galano';
display: inline-block;
}

.banner-text-wrapper p {
color: #fff;
font-size: 26px;
line-height: 1.5;
font-weight: 500;
margin-top: 4px;
font-family: "itim", cursive;
}

/* ===================================
LARGE DESKTOPS
=================================== */

@media (min-width: 1920px) {
.beams-row {
width: 1700px;
}

.beam1-wrapper,
.beam2-wrapper,
.beam3-wrapper,
.beam4-wrapper,
.beam5-wrapper {
width: 300px;
}
}

/* ===================================
1024px - 1280px
=================================== */

@media (max-width: 1280px) {
.beam1-wrapper {
margin-top: 50px;
}

.beam2-wrapper {
margin-top: 20px;
}
.beam3-wrapper {
margin-top: 50px;
}

.beam4-wrapper {
margin-top: 20px;
}

.beam5-wrapper {
margin-top: 50px;
}

.beam1-wrapper h3,
.beam2-wrapper h3,
.beam3-wrapper h3,
.beam4-wrapper h3,
.beam5-wrapper h3 {
width: 78%;
bottom: 64%;
}

.banner-text-wrapper {
top: 48%;
}
}

/* ===================================
SLIDE 8
=================================== */

.slide8 {
position: relative;
overflow: hidden;
}

.slide8 .slide-content {
position: absolute;
inset: 0;
z-index: 5;
width: min(90%, 1700px);
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: clamp(60px, 6vw, 180px);
}

/* ===================================
LEFT SIDE
=================================== */

.slide8-left {
position: relative;
flex: 0 0 42%;
max-width: 42%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

/* BEAM */

.slide8-beam {
position: absolute;
width: 100%;
left: 68%;
top: -50%;
transform: translateX(-50%);
pointer-events: none;
}

.slide8-beam .beam {
width: 100%;
display: block;
}

/* HEADING */

.slide8-heading {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 42%;
text-align: center;
transform: translateX(28%);
}

.slide8-heading h2 {
margin: 0;
color: #fff;
font-weight: 400;
line-height: 1.05;
font-size: 32px;
font-family: "itim", cursive;
}

.slide8-heading h1 {
margin: 0.12em 0 0;
padding: 0 0 20px 0;
line-height: 0.95;
font-size: 48px;
font-weight: 700;
background: var(--text-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
white-space: nowrap;
}

/* ===================================
RIGHT SIDE
=================================== */

.slide8-right {
flex: 0 0 45%;
max-width: 35%;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: -14%;
}

.slide8-right p {
margin: 0;
color: #fff;
font-weight: 400;
line-height: 1.4;
font-size: 26px;
text-align: center;
font-family: "itim", cursive;
}

.slide8-right button {
margin-top: clamp(24px, 2vw, 42px);
}

.orange-btn {
border: none;
cursor: pointer;
color: #fff;
font-weight: 700;
font-size: clamp(20px, 1.35vw, 28px);
padding: 12px 24px;     
border-radius: 50px;
background: #b8611c;
border-style: solid;
border-width: 0 7px 7px 0;
border-color: #994615;
box-shadow: none;
transition: 0.3s ease;
font-family: 'Galano';
display: flex;  
align-items: center;          
justify-content: center;        
margin: 0 auto;
letter-spacing: 2px;
line-height: 1;
text-transform: uppercase;
min-width: clamp(220px, 15vw, 310px);
min-height: clamp(56px, 4vw, 70px);
text-align: center; 
}

.orange-btn:hover {
transform: translateY(-3px);
background: #c9721e;
}

.slide8-right button:hover {
transform: translateY(-3px);
}

/* ===================================
1920+
=================================== */

@media (min-width: 1920px) {
.slide8 .slide-content {
width: min(88%, 1850px);
}

.slide8-beam {
width: 55%;
top: -25%;
}
}

/* ===================================
2560+
=================================== */

@media (min-width: 2560px) {
.slide8 .slide-content {
width: min(85%, 2200px);
}

.slide8-beam {
width: 50%;
top: -28%;
}
}

/* ===================================
TABLET
=================================== */

@media (max-width: 1024px) {
.slide8 .slide-content {
flex-direction: column;
justify-content: center;
text-align: center;

gap: 40px;
}

.slide8-left,
.slide8-right {
flex: none;
width: 100%;
max-width: 100%;
}

.slide8-right {
align-items: center;
}

.slide8-beam {
width: 220px;
left: 50%;
top: -120px;
}
}

/* ==================================================
SLIDE 10
================================================== */

.slide10 {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

.slide10 .slide-bg,
.slide10 .slide-main-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}

.slide10 .slide-main-image {
object-fit: cover;
}

/* ==========================================
CONTENT LAYER
========================================== */

.slide10-overlay {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
display: flex;
justify-content: center;
align-items: flex-start;
}

.slide10-content {
position: relative;
width: min(55vw, 1050px);
/*margin-top: 12%;*/
margin-top: 11%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-family: 'Galano';
}

/* ==========================================
BEAM
========================================== */

.slide10-beam {
width: clamp(90px, 7vw, 140px);
margin-bottom: clamp(10px, 1vw, 18px);
}

.slide10-beam img {
width: 100%;
height: auto;
display: block;
position: absolute;
display: none;
}

/* ==========================================
HEADING
========================================== */

.slide10-title {
margin: 0;
font-weight: 700;
line-height: 0.95;
font-size: 48px;
background: var(--text-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 0 0 6px 0;
font-family: 'Galano';
display: inline-block;
}

/* ==========================================
SUB HEADING
========================================== */

.slide10-subtitle {
color: #ffffff;
font-weight: 400;
line-height: 1.4;
font-size: 26px;
max-width: 900px;
font-family: "itim", cursive;
/* margin: 0.3rem 0 0 0;  */
}
.slide10-content .slide10-subtitle:last-of-type {
margin-bottom: 1rem;
}

/* ==========================================
LARGE DESKTOPS
========================================== */

@media (min-width: 1800px) {
.slide10-content {
width: 60%;
margin-top: 40px;
}

.slide10-title {
font-size: 40px;
}

.slide10-subtitle {
font-size: 2.4rem;
}
}

/* ==========================================
1366-1600
========================================== */

@media (max-width: 1600px) {
.slide10-content {
width: 58%;
}
}

/* ==========================================
1280-1365
========================================== */

@media (max-width: 1365px) {
.slide10-content {
width: 60%;
}

.slide10-title {
font-size: 44px;
}
}

/* ====================================
SLIDE 11
==================================== */

.slide11 {
position: relative;
overflow: hidden;
}

.slide11 .slide-content {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}

/* LEFT & RIGHT */
.slide11-left,
.slide11-right {
flex: 0 0 20%;

display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.slide11-left {
transform: translate(60%, 0);
}
.slide11-right {
transform: translate(-60%, -70px);  
}
.slide11-small-text {
color: #fff;
font-size: 24px;
font-weight: 400;
line-height: 1.8;
font-family: "itim", cursive;
}

/* CENTER */

.slide11-center {
flex: 0 0 60%;
display: flex;
flex-direction: column;
align-items: center;
transform: translate(0, -250%);
text-align: center;
}

.slide11-center h1 {
padding: 0 0 4px 0;
margin: 0;
font-size: 48px;
font-weight: 700;
line-height: 1.15;
background: var(--text-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}

.slide11-center h2 {
color: #fff;
font-size: 26px;
font-weight: 400;
line-height: 1.3;
font-family: "itim", cursive;
}

/* Button Width Control */
.slide11 .orange-btn {
min-width: clamp(220px, 18vw, 350px);
font-size: 18px;
}

/* ====================================
LARGE DESKTOPS
==================================== */

@media (min-width: 1920px) {
.slide11 .slide-content {
padding-inline: 8%;
}
}

/* ===================================
SLIDE 9
=================================== */

.slide9 .slide-content {
position: absolute;
inset: 0;
display: grid;
grid-template-rows:
auto /* beam */
auto /* heading */
1fr; /* tv */
justify-items: center;
align-content: center;
padding-inline: 2rem;
}

.clear-things-up-heading span:not(.text-aqua) {
color: #fff;
font-size: 36px !important;
max-width: 900px;
line-height: 1.2;
font-weight: 400;
font-family: "itim", cursive !important;
margin-top: -5px;
}

.clear-things-up-heading .text-aqua {
background: linear-gradient(90deg, #02bcdd 0%, #06d1e5 30%, #64eda8 68%, #d0f88d 100%);
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 74px !important;
font-weight: 700;
text-transform: none !important;
line-height: 1.35;
font-family: 'Galano';
}

/* ===================================
BEAM
=================================== */

.beam-above-tv {
width: clamp(150px, 25vw, 500px);
/* margin-top: -2.5%; */
margin-bottom: -16%;
pointer-events: none;
/*width: clamp(140px, 12vw, 220px);*/
/*margin-top: 0.5%;*/
/*margin-bottom: -1.5%;*/
/*pointer-events: none;*/
}

/* ===================================
HEADINGS
=================================== */

.slide9-heading {
display: flex;
flex-direction: column;
align-items: center;
transform: translate(0, -15px);
}

.slide9-heading h2 {
margin: 0;
padding: 0 0 5px 0;
font-size: 44px;
font-weight: 700;
line-height: 1.05;
background: var(--text-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}

.slide9-heading h3 {
margin: .3em 0 0;
font-size: 30px;
font-weight: 400;
color: #ffffff;
font-family: "itim", cursive;
}

/* ===================================
TV WRAPPER
=================================== */
.tv-wrapper {
position: relative;
width: clamp(700px, 70vw, 1300px);
aspect-ratio: 16/10;
margin-inline: auto;
}

.tv-frame {
position: absolute;
inset: 0;

width: 100%;
height: 70%;
top: -10px;
object-fit: contain;
}

/* SCREEN AREA */
.tv-screen {
position: absolute;
inset: 14% 34% 52% 34%;
}

.tv-screen iframe {
width: 100%;
height: 100%;
border: none;
}

/* VIDEO TV  */
.tv-video {
position: absolute;
top: 10%;
left: 13%;
width: 74%;
height: 60%;
border: none;
}

.video-screen {
position: absolute;
top: 12%;
left: 15%;
width: 70%;
height: 58%;
}

.video-screen iframe {
width: 100%;
height: 100%;
border: none;
}

/* ===================================
LARGE DESKTOPS
=================================== */

@media (min-width: 1400px) {
.tv-wrapper {
width: min(70vw, 1250px);
}
}

@media (min-width: 1800px) {
.tv-wrapper {
width: min(65vw, 1350px);
}
}

@media (min-width: 2200px) {
.tv-wrapper {
width: min(60vw, 1450px);
}
}

/* ===================================
SLIDE 12
=================================== */

.slide12 .slide-content {
position: absolute;
inset: 0;
z-index: 2;
}

/* ===================================
HEADINGS
=================================== */

.slide12-heading {
position: absolute;
top: 8%;
left: 50%;
transform: translateX(-50%);
text-align: center;
width: 90%;
}

.slide12-heading h1 {
margin: 0;
font-size: 48px;
font-weight: 700;
line-height: 1.1;
background: var(--text-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Galano';
display: inline-block;
}

.slide12-heading h2 {
margin-top: 0.3rem;
color: #fff;
font-size: 26px;
font-weight: 400;
font-family: "itim", cursive;
}

/* ===================================
APPLY BTN
=================================== */

.apply-btn {
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
width: clamp(260px, 24vw, 450px);
aspect-ratio: 2.2/1;
border: none;
outline: none;
background: transparent;
color: #fff;
font-size: clamp(1.5rem, 2vw, 3rem);
font-weight: 700;
cursor: pointer;
z-index: 3;
}

/* ===================================
EXIT BTN
=================================== */

.exit-btn {
position: absolute;
top: 33%; 
right: 19%;
border: none;
background: transparent;
cursor: pointer;
z-index: 3;
}

/* Glow Layer */
.exit-btn::before {
content: "";
position: absolute;
inset: -25px;
border-radius: 50%;
background: rgba(0, 238, 255, 0.7);
filter: blur(35px);
animation: exitGlow 2s ease-in-out infinite alternate;
z-index: -1;
}

.exit-btn img {
display: block;
width: clamp(90px, 10vw, 120px);
height: auto;
}

/* Glow Animation */
@keyframes exitGlow {
from {
transform: scale(0.9);
opacity: 0.5;
}

to {
transform: scale(1.2);
opacity: 1;
}
}

/* ===================================
EXPLORE PAGE
=================================== */

.explore-page {
z-index: -1;

position: fixed;
inset: 0;

width: 100%;
height: 100vh;

display: block; 
overflow: hidden;

opacity: 0;
visibility: hidden;
pointer-events: none;

transform: scale(1.05);

transition:
opacity 0.8s ease,
transform 0.8s ease,
visibility 0s linear 0.8s;
}

.explore-page.active {
opacity: 1;
z-index: 9999;
visibility: visible;
pointer-events: auto;

transform: scale(1);

transition:
opacity 0.8s ease,
transform 0.8s ease,
visibility 0s;
}

.explore-page.door-reveal-active {
opacity: 1;
z-index: 9999;
visibility: visible;
pointer-events: none;
transform: scale(1);
transition: none;
clip-path: inset(
var(--door-reveal-top, 0px)
var(--door-reveal-right, 0px)
var(--door-reveal-bottom, 0px)
var(--door-reveal-left, 0px)
);
-webkit-clip-path: inset(
var(--door-reveal-top, 0px)
var(--door-reveal-right, 0px)
var(--door-reveal-bottom, 0px)
var(--door-reveal-left, 0px)
);
will-change: clip-path;
}

/* ===================================
BACKGROUND IMAGE
=================================== */

.explore-bg {
position: absolute;
inset: 0;
z-index: 1;
}

.explore-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}

/* ===================================
BALLOONS
=================================== */

.balloon {
position: absolute;
border: none;
background: none;
padding: 0;
cursor: pointer;
z-index: 5;
transition: transform 0.3s ease;
}

.balloon img {
width: 100%;
height: auto;
display: block;
pointer-events: none;
}

/* hover */

.balloon:hover {
transform: translateY(-8px);
}

/* ===================================
POSITIONS
=================================== */

/* HOME */

.home-balloon {
width: clamp(150px, 11vw, 220px);
top: 6%;
left: 14%;
animation: float1 5s ease-in-out infinite;
}

/* STORY */

.story-balloon {
width: clamp(120px, 9vw, 170px);
top: 22%;
left: 31%;
animation: float2 4.5s ease-in-out infinite;
}

/* SOLUTIONS */

.solutions-balloon {
width: clamp(220px, 15vw, 330px);
top: 4%;
left: 50%;
transform: translateX(-50%);
animation: float3 6s ease-in-out infinite;
}

/* CULTURE */

.culture-balloon {
width: clamp(120px, 9vw, 170px);
top: 19%;
right: 25%;
animation: float2 5s ease-in-out infinite reverse;
}

/* CONTACT */

.team-balloon {
width: clamp(150px, 11vw, 220px);
top: 4%;
right: 14%;
animation: float1 5.5s ease-in-out infinite;
}

/* ===================================
FLOATING ANIMATION
=================================== */

@keyframes float1 {
0% {
transform: translateX(0);
}

50% {
transform: translateX(15px);
}

100% {
transform: translateX(0);
}
}

@keyframes float2 {
0% {
transform: translateX(0);
}

50% {
transform: translateX(-12px);
}

100% {
transform: translateX(0);
}
}

@keyframes float3 {
0% {
transform: translateX(-50%);
}

50% {
transform: translateX(calc(-50% + 18px));
}

100% {
transform: translateX(-50%);
}
}

/* ==========================
SLIDE 6
========================== */

.slide6 .slide-content {
position: absolute;
inset: 0;
z-index: 2;
}

/* ===================================
PROJECTOR SCREEN - SLIDE 6
=================================== */

.slide6 .projector-screen {
position: absolute;
top: 10%;
left: 60%;
width: clamp(540px, 33vw, 660px);
transform: translateX(-50%);
}

.slide6 .projector-screen-img {
width: 100%;
display: block;
}

.slide6 .projector-content {
position: absolute;
top: 20%;
left: 50%;
width: 76%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.slide6 .projector-text {
color: #1e3554;
font-size: 24px;
line-height: 1.5;
margin-bottom: 25px;
font-family: "itim", cursive;
}

.slide6 .orange-btn {
margin-top: 1.8rem;
}

.slide6 .open-doiter-popup {
fill: #ffffff;
color: #ffffff;
background: #b8611c !important;
border-style: solid;
border-width: 0 7px 7px 0;
border-color: #994615;
border-radius: 50px;
padding: 12px 24px;
box-shadow: none;
text-transform: uppercase;
}

/* ===================================
DOITER POPUP
=================================== */

.doiter-popup {
position: fixed;
inset: 0;
display: none;
justify-content: center;
align-items: center;
background: #000;
backdrop-filter: none;
-webkit-backdrop-filter: none;
z-index: 999999;
}

.doiter-popup.active {
display: flex;
}

/* ===================================
POPUP WRAPPER
=================================== */

.doiter-popup-wrapper {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

/* ===================================
PROJECTOR SCREEN
=================================== */

.doiter-screen {
position: relative;
width: 100vw;
height: 100vh;
flex-shrink: 0;
}

.doiter-screen-bg {
display: block;
width: 100%;
height: 100%;
object-fit: fill;
object-position: center;
position: relative;
z-index: 1;
}
/* ===================================
CONTENT INSIDE SCREEN
=================================== */
.doiter-screen-content {
position: absolute;
top: 24%;
left: 50%;
transform: translateX(-50%);
width: min(32vw, 760px);
text-align: center;
z-index: 3;
}

.doiter-title {
margin: 0;
color: transparent;
font-size: 42px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.1;
font-family: 'Galano';
background: var(--text-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.doiter-description {
margin-top: 1.8rem;
color: #17304d;
font-size: 32px;
line-height: 1.4;
font-family: "itim", cursive;
font-weight: 400;
}

.doiter-image-wrapper {
width: 100%;
height: 150px;
margin-top: 46px;
display: flex;
justify-content: center;
align-items: center;
}

.doiter-illustration {
width: 135px;
height: auto;
object-fit: contain;
}

.doiter-illustration.is-large {
width: 155px;
}

/* ===================================
DOITER PILLS
=================================== */

.doiter-nav {
position: absolute;
top: 50%;
right: 19.3vw;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 4;
}

.doiter-tab {
width: 88px;
height: 60px;
border: none;
border-radius: 0 999px 999px 0;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 2rem;
font-weight: 800;
color: #17304d;
background: linear-gradient(180deg, #7fffc8 0%, #53e6a8 100%);
box-shadow:
inset 0 -4px 0 rgba(0, 0, 0, 0.18),
0 4px 14px rgba(0, 0, 0, 0.18);
}

.doiter-tab.active {
width: 124px;
background: #fff;
}

.doiter-tab:hover {
background: #fff;
}

/* ===================================
CLOSE BUTTON
=================================== */

.doiter-close-btn {
position: fixed;
top: 30px;
right: 30px;
width: 56px;
height: 56px;
border: none;
border-radius: 50%;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 2rem;
font-weight: 700;
z-index: 9999999;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
transition: 0.3s ease;
}

.doiter-close-btn:hover {
transform: rotate(90deg);
}

/* ==========================
SLIDE 2
========================== */

.slide2 .slide-content {
position: absolute;
/*top: 82%;*/
top: 78%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
text-align: center;
z-index: 2;
}

.slide2 .slide-content h2 {
margin: 0;
color: #ffffff;
font-size: 32px;
font-weight: 400;
font-family: "itim", cursive;
line-height: 1.05;
}

.slide2 .slide-content h1 {
display: inline-block;
background: var(--text-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Galano' !important;
font-size: 42px;
font-weight: 700;
line-height: 1.1;
display: inline-block;
}

/* ==========================
SLIDE 3
========================== */

.slide3 .slide-content {
position: absolute;
top: 8%;
left: 50%;
transform: translateX(-50%);
width: 90%;
text-align: center;
z-index: 2;
}

.slide3 .slide-content h1 {
margin: 0;
color: #ffffff;
font-size: 32px;
font-weight: 400;
font-family: "itim", cursive;
line-height: 1.05;
}

.slide3 .slide-content h2 {
margin: 0;
display: inline-block;
background: var(--text-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Galano' !important;
font-size: 42px;
font-weight: 700;
line-height: 1.1;
}

/* ======================================================
REMOTE WORKING POPUP
====================================================== */

.remote-popup {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 999999;
opacity: 0;
visibility: hidden;
transition: 0.35s;
}

.remote-popup.active {
opacity: 1;
visibility: visible;
}

.remote-popup.active {
opacity: 1;
visibility: visible;
}

/* ==========================
BACKDROP
========================== */
.remote-popup-backdrop {
position: absolute;
inset: 0;
background: rgba(3, 8, 18, 0.72);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}

/* ==========================
MODAL
========================== */

.remote-popup-modal {
position: relative;
width: min(1500px, 94%);
height: min(860px, 90vh);
background: transparent;
box-shadow: none;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}

/* ==========================
CLOSE
========================== */

.remote-close-btn {
position: fixed;
top: 35px;
right: 40px;
width: 65px;
height: 65px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.15);
background: rgba(20, 20, 20, 0.55);
backdrop-filter: blur(15px);
color: #fff;
font-size: 38px;
cursor: pointer;
z-index: 999999;
transition: 0.3s;
}

.remote-close-btn:hover {
transform: rotate(90deg);
background: white;
color: black;
}

.remote-close-btn:hover {
background: #fff;
color: #000;
}

/* ==========================
SWIPER
========================== */
.remoteSwiper {
width: 100%;
height: 100%;
}

.remoteSwiper .swiper-wrapper {
height: 100%;
}

.remoteSwiper .swiper-slide {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.remoteSwiper .swiper-slide img {
width: 70%;
height: auto;
max-width: 800px;
object-fit: contain;
display: block;
margin: auto;
margin-bottom: 60px;
}

/* ==========================
HEADING
========================== */

.remote-slide-content {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 90%;
text-align: center;
z-index: 100;
}

.remote-slide-content h2 {
color: #fff;
font-size: 28px;
font-family: "itim", cursive;
font-weight: 400;
}

.remote-slide-content p {
margin-top: 16px;
color: rgba(255, 255, 255, 0.78);
font-size: 20px;
line-height: 1.6;
}

/* ==========================
ARROWS
========================== */
.remote-prev,
.remote-next {
width: 70px !important;
height: 70px !important;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(8px);
transition: 0.3s;
}

.remote-prev {
left: 20px;
}

.remote-next {
right: 20px;
}

.remote-prev::after,
.remote-next::after {
color: #00fff5;
font-size: 26px !important;
font-weight: bold;
}

.remote-prev:hover,
.remote-next:hover {
background: rgba(255, 255, 255, 0.12);
}

.swiper-button-disabled {
opacity: 0 !important;
}

/* ==========================
PAGINATION
========================== */

.remote-pagination {
bottom: 18px !important;
}

.remote-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
opacity: 1;
background: #5f7086;
transition: 0.35s;
}

.remote-pagination .swiper-pagination-bullet:hover {
background: #00fff0;
}

.remote-pagination .swiper-pagination-bullet-active {
background: #fff;
width: 12px;
transform: scale(1.3);
}

/* ==========================
IMAGE ANIMATION
========================== */

.remoteSwiper .swiper-slide-active img {
animation: popupZoom 0.6s ease;
}

@keyframes popupZoom {
0% {
opacity: 0;
transform: scale(0.95);
}

100% {
opacity: 1;
transform: scale(1);
}
}
/* ======================================================
BOTTOM NAVIGATION
====================================================== */

.remote-nav {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
padding: 26px 30px 32px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
z-index: 30;
}

/* ==========================
BUTTONS
========================== */

.remote-tab {
position: relative;
padding: 14px 30px;
border: none;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.72);
font-size: 16px;
font-weight: 600;
cursor: pointer;
overflow: hidden;
transition: 0.35s;
backdrop-filter: blur(10px);
}

.remote-tab::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, #00f0ff, #00c3ff, #3f87ff);
opacity: 0;
transition: 0.35s;
z-index: -1;
}

.remote-tab:hover {
color: #fff;
transform: translateY(-2px);
}

.remote-tab:hover::before {
opacity: 1;
}

.remote-tab.active {
background: #fff;
color: #000;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
}

.remote-tab.active::before {
display: none;
}

/* ==========================
MODAL ANIMATION
========================== */

.remote-popup-modal {
transform: scale(0.94);
transition:
transform 0.4s ease,
opacity 0.4s ease;
}

.remote-popup.active .remote-popup-modal {
transform: scale(1);
}

/* ==========================
SCROLLBAR
========================== */

.remote-popup *::-webkit-scrollbar {
width: 6px;
}

.remote-popup *::-webkit-scrollbar-thumb {
background: #3f87ff;
border-radius: 20px;
}

/* ==========================
1600px
========================== */

@media (max-width: 1600px) {
.remote-popup-modal {
width: 94%;
height: 85vh;
}

.remote-slide-content h2 {
font-size: 28px;
font-family: "itim", cursive;
}

.remote-pagination {
bottom: 30px !important;
}
}

/* ==========================
1440px
========================== */

@media (max-width: 1440px) {
.remote-slide-content {
top: 0;
}

.remote-slide-content h2 {
font-size: 28px;
font-family: "itim", cursive;
}

.remote-nav {
gap: 14px;
}

.remote-tab {
padding: 12px 24px;
}
}

/* ==========================
1366px
========================== */

@media (max-width: 1366px) {
.remote-popup-modal {
width: 95%;
}

.remote-slide-content {
top: 0;
}

.remote-slide-content h2 {
font-size: 28px;
font-family: "itim", cursive;
}

.remote-prev {
left: 18px !important;
}

.remote-next {
right: 18px !important;
}
}

/* ==========================
1280px
========================== */

@media (max-width: 1280px) {
.remote-slide-content {
width: 90%;
}

.remote-slide-content h2 {
font-size: 28px;
font-family: "itim", cursive;
}

.remote-nav {
padding: 22px;
gap: 12px;
}

.remote-tab {
font-size: 15px;
}
}

/* ==========================
1024px
========================== */
@media (max-width: 1024px) {
.remote-popup-modal {
width: 96%;

height: 92vh;
}

.remote-slide-content {
top: 32px;
}

.remote-slide-content h2 {
font-size: 28px;
font-family: "itim", cursive;
}

.remote-prev,
.remote-next {
width: 52px !important;
height: 52px !important;
}

.remote-prev::after,
.remote-next::after {
font-size: 20px !important;
}

.remote-pagination {
bottom: 30px !important;
}

.remote-nav {
gap: 10px;
}

.remote-tab {
padding: 10px 18px;

font-size: 14px;
}
}

/* ==========================
HIDE POPUP
========================== */
.remote-popup:not(.active) {
pointer-events: none;
}

.remote-popup.active {
pointer-events: auto;
}

/* ===================================
Hiring Popup
=================================== */
.hiring-popup {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: 0.3s;
z-index: 99999;
}

.hiring-popup.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

/* Popup */
.hiring-popup-container {
position: relative;
max-height: 90vh; /* height ki jagah max-height */
height: auto;
background: #fff;
border-radius: 28px;
padding: 30px 45px 40px;
display: flex;
flex-direction: column;
align-items: center;
animation: popupShow 0.35s ease;
}

/* Heading */
.hiring-popup-heading {
margin: 0 0 20px;
font-size: clamp(32px, 2.6vw, 56px);
font-weight: 700;
color: #0a2948;
text-align: center;
line-height: 1.2;
font-family: 'Galano';
}

/* Image Wrapper */
.hiring-popup-image-wrapper {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

/* Image */
.hiring-popup-image {
width: 100%;
max-width: 70vw;
height: 72vh;
display: block;
}

/* Close */
.hiring-popup-close {
position: absolute;
top: 18px;
right: 22px;
border: none;
background: transparent;
color: #ff2d2d;
font-size: 44px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition:
transform 0.3s ease,
color 0.3s ease;
}

.hiring-popup-close:hover {
transform: rotate(90deg);
color: #d90000;
}

/* Hover */
.hiring-popup-close:hover {
transform: rotate(90deg) scale(1.1);
}

/* Animation */
@keyframes popupShow {
from {
opacity: 0;
transform: scale(0.92);
}

to {
opacity: 1;
transform: scale(1);
}
}

/* ===================================
FAQ POPUP
=================================== */
.faq-popup {
position: fixed;
inset: 0;
display: none;
background: rgb(0 0 0 / 95%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 999999;
}

.faq-popup.active {
display: grid;
place-items: center;
}

/* ============================= */
.faq-popup-wrapper {
position: relative;
width: fit-content;
height: fit-content;
max-width: 96vw;
max-height: 96vh;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
}

/* ============================= */
.faq-popup-container {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
width: fit-content;
height: fit-content;
}

/* ============================= */
.faq-grid-container {
display: inline-flex;
justify-content: center;
align-items: center;
}

/* ============================= */
.faq-popup-close {
position: fixed;
top: 24px;
right: 30px;
width: 58px;
height: 58px;
border: none;
background: transparent;
font-size: 52px;
line-height: 1;
color: #ff2b2b;
cursor: pointer;
transition: transform 0.3s ease;
z-index: 1000000;
}
.faq-popup-close:hover {
transform: rotate(90deg);
}

/* Hiring popup compact sizing + visible close icon */
.hiring-popup .hiring-popup-container {
width: min(66vw, 1120px) !important;
max-width: calc(100vw - 180px) !important;
max-height: 82vh !important;
padding: 24px 38px 30px !important;
border-radius: 26px !important;
overflow: visible !important;
}

.hiring-popup .hiring-popup-heading {
margin-bottom: 12px !important;
font-size: clamp(32px, 2.35vw, 48px) !important;
}

.hiring-popup .hiring-popup-image {
width: 100% !important;
max-width: 58vw !important;
height: auto !important;
max-height: 58vh !important;
object-fit: contain !important;
}

.hiring-popup .hiring-popup-close {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: absolute !important;
top: 18px !important;
right: 22px !important;
z-index: 20 !important;
color: #0a2948 !important;
-webkit-text-fill-color: #0a2948 !important;
font-size: 34px !important;
font-weight: 700 !important;
opacity: 1 !important;
visibility: visible !important;
}
.cursor-arrow {
position: fixed;
left: 0;
top: 0;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 999999;
transform: translate(-50%, -50%);
transition:
transform 0.18s ease,
opacity 0.25s ease;
}

.cursor-arrow::after {
content: "";
position: absolute;
left: calc(50% - 3px);
top: 50%;
width: 13px;
height: 13px;
border-top: 3px solid #ffffff;
border-right: 3px solid #ffffff;
transform: translate(-50%, -50%) rotate(45deg);
transform-origin: center;
margin: 0;
pointer-events: none;
}

.cursor-arrow-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25))
drop-shadow(0 0 15px rgba(255, 255, 255, 0.15));
}

/* ===================================
SLIDE 12 CAMERA
=================================== */
.slide12 {
position: relative;
overflow: hidden;
}

.slide12-camera {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
will-change: transform, filter, opacity;
transform-origin: 82% 52%;
z-index: 2;
}

/* ===========================
DEFAULT (Desktop)
=========================== */
.desktop-view {
display: block;
width: 100%;
height: 100%;
position: relative;
}

.mobile-view {
display: none;
}

/* ===========================
Mobile + Tablet
=========================== */
@import url("https://fonts.googleapis.com/css2?family=Itim&display=swap");

@media (max-width: 1024px) {
.desktop-view {
display: none !important;
}

html,
body {
width: 100%;
height: auto;
overflow-x: hidden;
overflow-y: auto;
}

.careers-page {
width: 100%;
height: auto;
min-height: 100vh;

overflow: visible;
}

.mobile-view {
display: flex;
flex-direction: column;

width: 100%;
min-height: 100vh;

overflow: visible;
}
}

/* ===================================
MOBILE + TABLET VIEW
=================================== */
.mobile-view {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
background: #04263a;
overflow-x: hidden;
}

/* ===================================
HERO
=================================== */
.mobile-hero {
width: 100%;
}

.mobile-hero-image {
width: 100%;
}

.mobile-hero-image img {
display: block;
width: 100%;
height: auto;
}

/* ===================================
WELCOME
=================================== */
.mobile-welcome {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
position: relative;
overflow: hidden;
padding: 40px 20px 30px;
}

.mobile-welcome-heading h1 {
background: var(--text-gradient);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
margin: 0;
font-size: 44px;
text-align: center;
font-family: 'Galano';
}

.mobile-welcome-character {
width: min(240px, 70vw);
}

.mobile-welcome-character img {
width: 100%;
display: block;
}
/* ===================================
WELCOME BUTTERFLIES
=================================== */
.mobile-butterfly {
position: absolute;
width: clamp(35px, 8vw, 65px);
height: auto;
pointer-events: none;
z-index: 1;
}

.mobile-butterfly-left {
top: 55px;
left: 8%;
}

.mobile-butterfly-right {
top: 15px;
right: 8%;
transform: scaleX(-1);
}

/* ===================================
MESSAGE
=================================== */
.mobile-message {
display: flex;
justify-content: center;
padding: 0 20px 50px;
}

.mobile-message-card {
position: relative;
width: min(100%, 600px);
}

.mobile-message-card-bg {
display: block;
width: 100%;
height: auto;
}

.mobile-message-content {
position: absolute;

top: 8%;
left: 10%;
right: 20%;

z-index: 2;
}

.mobile-message-content h2 {
margin-bottom: 24px;
font-size: 34px;
line-height: 1.4;
margin-bottom: 34px;
font-family: 'Galano';
}

.mobile-message-content p {
font-family: "itim", cursive;
margin-bottom: 22px;
line-height: 1.5;
}
/* ===================================
TABLET
=================================== */
@media (min-width: 768px) and (max-width: 1024px) {
.mobile-message-card {
margin: 0 auto;
}

.mobile-message-card-bg {
display: block;
width: 100%;
height: 70%;
}

.mobile-message-content p {
font-size: 26px;
line-height: 1.5;
margin-bottom: 40px;
}

.mobile-message-content {
top: 12%;
left: 12%;
right: 18%;
}

.mobile-message-content h2 {
font-size: 38px;
line-height: 1.4;
margin-bottom: 34px;
font-family: 'Galano';
}

.mobile-welcome {
padding: 60px 40px 40px;
}
.mobile-butterfly {
width: 55px;
}

.mobile-butterfly-left {
left: 10%;
top: 65px;
}

.mobile-butterfly-right {
right: 10%;
top: 20px;
}
}

.slide9 .tv-wrapper {
position: absolute;
left: 50%;
top: 27%;
transform: translateX(-50%);
z-index: 10;
}

.slide9-heading {
position: relative;
z-index: 11;
}

/* Slide 9: fit YouTube iframe cleanly inside the TV frame */
.slide9 .tv-screen {
position: absolute;
width: 400.5px !important;
height: 246px !important;
inset: auto !important;
left: 50% !important;
top: 28% !important;
transform: translate(-50%, -50%) !important;
overflow: hidden;
z-index: 12;
clip-path: polygon(0 0, 100% 0, 97.5% 100%, 2.9% 100%);
}

.slide9 .tv-screen iframe {
display: block;
width: 400.5px !important;
height: 246px !important;
border: 0;
}

.faq-popup {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}

.faq-popup-wrapper,
.faq-popup-container {
width: 100%;
height: 100%;
overflow: hidden;
}

.faq-column-2,
.faq-column-3,
.faq-column-4 {
min-height: 410px !important;
}

@media (max-height: 900px) {
.faq-popup #faqs-placeholder {
transform: scale(0.9) !important;
transform-origin: center center !important;
}
}

@media (max-height: 800px) {
.faq-popup #faqs-placeholder {
transform: scale(0.85) !important;
transform-origin: center center !important;
}
}

@media (max-height: 700px) {
.faq-popup #faqs-placeholder {
transform: scale(0.7) !important;
transform-origin: center center !important;
}
}


/* ===================================
SLIDE 6
=================================== */
.slide6 {
position: relative;
}

/* Light Beam */
.slide6 .lamp-beam {
position: absolute;
top: 2%;
width: 650px;
height: auto;
z-index: 2;
pointer-events: none;
}

/* Left Heading */
.slide6 .doiter-heading {
position: absolute;
top: 200px;
left: 250px;
z-index: 3;
text-align: center;
}

.slide6 .doiter-heading h2 {
margin: 0;
color: #ffffff;
font-family: "itim", cursive;
font-size: 32px;
font-weight: 400;
line-height: 1.2;
}

.slide6 .doiter-heading h1 {
margin: -10px 0 0;
font-family: 'Galano', sans-serif;
font-size: 54px;
font-weight: 700;
line-height: 1.5;
background: linear-gradient(
90deg,
#00cfff 0%,
#1fd4ff 40%,
#bfff6d 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

/* Projector Area */
.slide6 .slide-content {
position: absolute;
inset: 0;
z-index: 3;
}

.slide6 .projector-screen {
position: absolute;
top: 70px;
left: 50%;
width: clamp(540px, 33vw, 660px);
transform: translateX(-10%);
}

.slide6 .projector-screen-img {
width: 100%;
display: block;
}

.slide6 .projector-content {
position: absolute;
top: 80px;
left: 50%;
width: 380px;
transform: translateX(-50%);
text-align: center;
}

.slide6 .projector-text {
color: #1e3554;
font-size: 26px;
line-height: 1.5;
margin-bottom: 25px;
font-family: "itim", cursive;
}

@media (max-width: 768px) {
.mobile-message-content {
padding: 50px 20px 50px;
}

.mobile-message-content h2 {
font-size: 34px;
line-height: 1.4;
margin-bottom: 34px;
font-family: 'Galano';
}

.mobile-message-content p {
font-size: 26px;
line-height: 1.5;
margin-bottom: 40px;
}

.mobile-message-content p:last-child {
margin-bottom: 0;
}
}

@media (max-width: 390px) {
.mobile-message-content {
padding: 30px 20px 50px;
}
}

@media (max-width: 390px) {
.mobile-message-content {
padding: 30px 20px 50px;
}
}

@media (min-width: 1025px) {

.footer-bottom {
background: rgba(180, 190, 190, 0.2) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
box-shadow: none !important;
}

.footer-bottom,
.footer-bottom p,
.footer-bottom a,
.footer-bottom .footer-terms,
.footer-bottom p a {
color: #02253D !important;
text-decoration: none !important;
}

.footer-bottom .footer-media a {
background: transparent !important;
border: 1px solid #02253D !important;
color: #02253D !important;
}

.footer-bottom .footer-media a i {
color: #02253D !important;
}

}
/* ===================================
POPUP CONTROL POLISH
=================================== */

.remote-popup-modal {
position: relative;
}

.remote-slide-content {
width: min(92%, 980px) !important;
}

.remote-slide-content h2 {
margin: 0;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-size: clamp(28px, 2vw, 42px);
line-height: 1.15;
font-family: 'Galano', sans-serif;
font-weight: 700;
text-align: center;
pointer-events: none;
}

.remote-heading-main {
display: inline-block;
font-family: 'Galano', sans-serif;
font-size: clamp(34px, 2.6vw, 56px);
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.02em;
text-transform: none !important;
background: linear-gradient(90deg, #00cfff 0%, #20e0c7 48%, #b9ff7a 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

.remote-heading-sub {
display: inline-block;
font-family: "itim", cursive;
font-size: clamp(28px, 2.2vw, 50px);
font-weight: 400;
line-height: 1.15;
color: #ffffff;
}

.remoteSwiper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
/* padding-top: clamp(26px, 4vh, 58px); */
}

.remoteSwiper .swiper-slide img {
max-height: calc(100% - clamp(190px, 24vh, 260px));
object-fit: contain;
}

.remote-pagination {
bottom: 4px !important;
}

.remote-prev::after,
.remote-next::after {
color: #ffffff !important;
font-size: 32px !important;
transition: 0.28s ease;
}

.remote-prev,
.remote-next {
background: transparent !important;
backdrop-filter: none !important;
box-shadow: none !important;
}

.remote-prev:hover::after,
.remote-next:hover::after {
background: linear-gradient(90deg, #00f0ff, #40ffd2, #8eff7b);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent !important;
}

.doiter-close-btn,
.remote-close-btn,
.hiring-popup-close,
.faq-popup-close {
width: 38px !important;
height: 38px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
color: #ffffff !important;
font-size: 38px !important;
line-height: 1 !important;
font-weight: 700 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
transition: transform 0.3s ease, color 0.3s ease;
}

.doiter-close-btn:hover,
.remote-close-btn:hover,
.hiring-popup-close:hover,
.faq-popup-close:hover {
transform: rotate(90deg) !important;
background: transparent !important;
background-image: linear-gradient(90deg, #00f0ff, #40ffd2, #8eff7b) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}

/* FINAL: hiring popup should stay compact and the close icon must be visible on white */
.hiring-popup .hiring-popup-container {
width: min(66vw, 1120px) !important;
max-width: calc(100vw - 180px) !important;
max-height: 82vh !important;
padding: 24px 38px 30px !important;
border-radius: 26px !important;
overflow: visible !important;
}

.hiring-popup .hiring-popup-heading {
margin-bottom: 12px !important;
font-size: clamp(32px, 2.35vw, 48px) !important;
}

.hiring-popup .hiring-popup-image {
width: 100% !important;
max-width: 58vw !important;
height: auto !important;
max-height: 58vh !important;
object-fit: contain !important;
}

.hiring-popup .hiring-popup-close {
position: absolute !important;
top: 18px !important;
right: 22px !important;
z-index: 20 !important;
color: #0a2948 !important;
-webkit-text-fill-color: #0a2948 !important;
font-size: 34px !important;
font-weight: 700 !important;
opacity: 1 !important;
visibility: visible !important;
}

/* FINAL: remote popup close should sit slightly higher and closer to the right edge */
.remote-popup .remote-close-btn,
.remote-close-btn {
top: 22px !important;
right: 24px !important;
z-index: 1000001 !important;
}

/* FINAL: hiring journey popup narrow layout + outside white close icon */
.hiring-popup .hiring-popup-container {
width: min(60vw, 1040px) !important;
max-width: calc(100vw - 360px) !important;
max-height: 82vh !important;
padding: 24px 34px 30px !important;
overflow: visible !important;
}

.hiring-popup .hiring-popup-image {
max-width: 54vw !important;
max-height: 56vh !important;
}

.hiring-popup .hiring-popup-close {
top: -48px !important;
right: -48px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 38px !important;
font-weight: 700 !important;
z-index: 30 !important;
}

.hiring-popup .hiring-popup-close:hover {
transform: rotate(90deg) !important;
background-image: linear-gradient(90deg, #00f0ff, #40ffd2, #8eff7b) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}

/* FINAL: hiring popup narrower box + FAQ-style close placement */
.hiring-popup .hiring-popup-container {
width: min(52vw, 940px) !important;
max-width: calc(100vw - 460px) !important;
padding: 24px 32px 30px !important;
}

.hiring-popup .hiring-popup-image {
max-width: 47vw !important;
max-height: 56vh !important;
}

.hiring-popup .hiring-popup-close {
position: fixed !important;
top: 24px !important;
right: 30px !important;
z-index: 1000000 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 52px !important;
width: 58px !important;
height: 58px !important;
}

/* FINAL: FAQ popup background + top lamp beam */
.faq-popup {
background: radial-gradient(
118.38% 101.85% at 50% 25.09%,
#01243C 44.82%,
#000000 92.63%
) !important;
}

.faq-popup-lamp {
position: fixed;
top: 0;
left: 50%;
width: 370px;
height: auto;
transform: translateX(-50%);
pointer-events: none;
z-index: 1;
}

.faq-popup-wrapper {
position: relative;
z-index: 2;
}

/* FINAL: hiring popup close icon as clean white X */
.hiring-popup .hiring-popup-close {
font-size: 0 !important;
line-height: 0 !important;
position: fixed !important;
}

.hiring-popup .hiring-popup-close::before,
.hiring-popup .hiring-popup-close::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 42px;
height: 5px;
border-radius: 999px;
background: #ffffff;
transform-origin: center;
}

.hiring-popup .hiring-popup-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}

.hiring-popup .hiring-popup-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}

/* FINAL: FAQ + hiring close icons use the same clean X and gradient hover */
.faq-popup-close,
.hiring-popup .hiring-popup-close {
font-size: 0 !important;
line-height: 0 !important;
}

.faq-popup-close::before,
.faq-popup-close::after,
.hiring-popup .hiring-popup-close::before,
.hiring-popup .hiring-popup-close::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 42px;
height: 5px;
border-radius: 999px;
background: #ffffff;
transform-origin: center;
transition: background 0.3s ease;
}

.faq-popup-close::before,
.hiring-popup .hiring-popup-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}

.faq-popup-close::after,
.hiring-popup .hiring-popup-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}

.faq-popup-close:hover::before,
.faq-popup-close:hover::after,
.hiring-popup .hiring-popup-close:hover::before,
.hiring-popup .hiring-popup-close:hover::after {
background: linear-gradient(90deg, #00f0ff, #40ffd2, #8eff7b);
}

/* FINAL: career FAQ answer modal desktop overrides */
@media screen and (min-width: 1025px) {
.careers-page .faq-popup .faq-modal-overlay {
background: rgba(0, 12, 26, 0.01) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}

.careers-page .faq-popup .faq-modal-content,
.careers-page .faq-popup .faq-modal-title,
.careers-page .faq-popup .faq-modal-text-wrapper,
.careers-page .faq-popup .faq-modal-text-wrapper p {
font-family: "Galano", Arial, sans-serif !important;
font-style: normal !important;
letter-spacing: 0 !important;
}

.careers-page .faq-popup .faq-modal-title {
font-weight: 800 !important;
line-height: 1.15 !important;
}

.careers-page .faq-popup .faq-modal-text-wrapper p {
font-weight: 400 !important;
color: #334155 !important;
line-height: 1.6 !important;
}

.careers-page .faq-popup .faq-modal-text-wrapper p:last-child {
margin-bottom: 0 !important;
}
}

/* FINAL: last slide Apply Now CTA with shared text + arrow link */
.slide12 .apply-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: clamp(14px, 1.2vw, 24px) !important;
min-width: clamp(340px, 24vw, 500px) !important;
min-height: clamp(150px, 11vw, 220px) !important;
padding: clamp(24px, 2vw, 38px) clamp(34px, 3vw, 58px) !important;
border: 0 !important;
border-radius: 50% !important;
background:
radial-gradient(120% 80% at 50% 28%, rgba(255, 180, 54, 0.45), transparent 42%),
linear-gradient(165deg, #bf6816 0%, #9b4e10 100%) !important;
color: #ffffff !important;
font-family: "Itim", cursive !important;
font-size: clamp(62px, 4vw, 82px) !important;
font-weight: 600 !important;
line-height: 0.92 !important;
letter-spacing: 0 !important;
text-align: center !important;
text-decoration: none !important;
text-transform: none !important;
box-shadow:
inset 0 8px 0 rgba(111, 52, 7, 0.36),
inset 0 -10px 0 rgba(87, 39, 6, 0.22),
0 12px 24px rgba(0, 0, 0, 0.16) !important;
cursor: pointer !important;
}

.slide12 .apply-btn span {
display: block;
color: #ffffff;
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.16);
}

.slide12 .apply-btn-icon {
display: block;
width: clamp(58px, 4.6vw, 86px);
height: clamp(58px, 4.6vw, 86px);
flex: 0 0 auto;
object-fit: contain;
}

.slide12 .apply-btn:hover {
transform: translateY(-4px) scale(1.02);
}

/* FINAL: Apply CTA sits on the wooden board already present in the image */
.slide12 .apply-btn {
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
width: clamp(110px, 8vw, 160px) !important;
height: clamp(90px, 7vw, 130px) !important; 
padding: 0 !important;
gap: clamp(14px, 1vw, 22px) !important;
color: #ffffff !important;
text-shadow: none !important;
}

.slide12 .apply-btn span {
color: #ffffff !important;
font-family: "Itim", cursive !important;
font-size: clamp(30px, 2.4vw, 46px) !important;  
font-weight: 400 !important;
line-height: 1.05 !important;
white-space: normal !important;
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.18) !important;
}

.slide12 .apply-btn-icon {
width: clamp(58px, 4.2vw, 82px) !important;
height: clamp(58px, 4.2vw, 82px) !important;
}

.slide12 .apply-btn:hover {
transform: scale(1.03) !important;
}

/* FINAL: Apply CTA hover changes only the text color */
.slide12 .apply-btn:hover {
transform: translate(-50%, -50%) scale(1.03) !important;
}

.slide12 .apply-btn:hover span {
background: var(--text-gradient) !important;
background-clip: text !important;
-webkit-background-clip: text !important;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
}

/* Tablet Landscap Settings */
@media screen and (min-width: 1025px) and (max-width: 1368px) and (orientation: landscape) {

.careers-page {
position: relative;
width: 100vw;
height: 100vh;
overflow: scroll;
background: #02253d;
}
.desktop-view {
display: none !important;
}
.mobile-view {
display: flex !important;
flex-direction: column;
width: 100%;
min-height: 100vh;
}

.mobile-message-card-bg {
display: none;
}

.mobile-message-card {
position: relative;
width: 700px;
min-height: 400px;
margin: 0 auto;
padding: 50px;
background: #fff;
border-radius: 36px;
overflow: hidden;
box-shadow: inset -2px -2px 4px rgba(0,0,0,.18),
0 12px 28px rgba(0,0,0,.25);
margin-bottom: 100px;
}

.mobile-message-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 14px;
background: linear-gradient(
90deg,
#0baae6 0%,
#70f0a4 40%,
#fae806 63%,
#fbb413 73%,
#f778d6 86%,
#c37ce9 100%
);
}

.mobile-message-content {
position: relative;
top: 0;
left: 0;
right: 0;
z-index: 2;
}

.mobile-welcome-character {
width: min(300px, 70vw);
}

.mobile-message-content p {
font-family: "itim", cursive;
margin-bottom: 22px;
line-height: 1.5;
font-size: 28px;
}
/* Footer */
.footer-bottom {
background: var(--navy) !important;
box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.5) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}

.footer-bottom,
.footer-bottom p,
.footer-bottom a,
.footer-bottom .footer-terms,
.footer-bottom p a {
color: #fff !important;
text-decoration: none !important;
}

/* Social Icons */
.footer-bottom .footer-media a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 35px !important;
height: 35px !important;
padding: 1px !important;

border: double 1px transparent !important;
border-radius: 50% !important;

background: transparent !important;
background-image:
linear-gradient(#01243d, #01243d),
linear-gradient(180deg, #000, #01758a) !important;
background-origin: border-box !important;
background-clip: content-box, border-box !important;

color: #fff !important;
font-size: 16px !important;
cursor: pointer !important;
}

.footer-bottom .footer-media a i {
color: #fff !important;
}
}


/* Medium phones */
@media (max-width: 480px) {
.mobile-message-content p {
font-size: 26px;
line-height: 1.5;
margin-bottom: 32px;
}
}


/* Extra small devices */
@media (max-width: 395px) {
.mobile-message-content p {
font-size: 24px;
line-height: 1.4;
margin-bottom: 24px;
}
}

@media (max-width: 365px) {
.mobile-message-content p {
font-size: 20px;
line-height: 1.4;
margin-bottom: 24px;
}
}

a {
text-decoration: none !important;
}