@font-face {
    font-family: "Pretendard";
    src:
        url("/assets/hrms/fonts/Pretendard/Pretendard-Bold.subset.woff2") format("woff2"),
        url("/assets/hrms/fonts/Pretendard/Pretendard-Bold.subset.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
	--glovis-navbar-height: 58px;
}
/* Change the Login Button Color */
.btn-primary {
  /* Glovis Dark */
  /* background-color: #004181 !important;  */
  background-color: #072549 !important;
  border-color: #004181 !important; /* Glovis Dark */
  color: #ffffff !important; /* Text Color */
}

/* Change the Navigation Bar Color */
.navbar {
  /* background-color:#004181 !important; Glovis Dark */
  background-color: #072549 !important;
  border-bottom: 0px !important;
  padding: 12px 24px;
  font-family: "Pretendard", sans-serif;
}

/* Login page only */
body[data-path="login"] .navbar,
[data-path="login"] .navbar {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backface-visibility: visible !important;
}

/* Change link color in the navbar if needed (help, notifications) */

.navbar .nav-link {
    color: #ffffff !important;
}

/* top left navigation employee > ga18014  color */
#navbar-breadcrumbs a {
    color : #ffffff !important;
}

#navbar-breadcrumbs a::before {
    fill : #ffffff !important;
}



/* For icons that are SVGs (common in Frappe v15), use the --icon-stroke variable or the filter property */
.navbar svg,
.top-bar svg {
    stroke: #ffffff !important; /* Changes the SVG stroke color to white */
    fill: #f9f9f9 !important; /* Changes the SVG fill color to white */
}


/* For cards and shortcuts background color*/
/* .widget.links-widget-box , .widget.shortcut-widget-box , .widget.dashboard-widget-box{
    background-color: #f9f9f9 !important;
} */

/* Card Type Widgets */
.widget.links-widget-box {
     box-shadow: 4px 16px 10px rgba(0, 0, 0, 0.1); 
    
}

.widget-head .widget-label{
    box-shadow: -10px 16px 10px rgba(0, 0, 0, 0.1); 
    
}

.widget.links-widget-box .widget-head .ellipsis {
    color: #004181 !important; /* Glovis Dark */
    font-weight: bold;
}


/* After opening doc show filter left side labels color */
.standard-sidebar-item > a {
    /* color: #81a1c8 !important; */
    /* color: #405989 !important; Glovis Dark */
    color: #004181 !important; /* Glovis Dark Light */
    font-weight: bold;
}

/* Change default text color */
.sidebar-nav .nav-link {
    color: #004181 !important; /* Glovis Dark */
}

/* Change color on hover */
.sidebar-nav .nav-link:hover {
    color: #004181 !important; /* Glovis Dark */
}

/* Change active menu item text color */
.sidebar-nav .nav-link.active {
    color: #ffffff;
}

.grid-body .grid-static-col[data-fieldtype=Button] .field-area button {
    height: 24px;
    background: #004181 !important;
    color: #ffffff !important;
}




@media (min-width: 1400px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1500px !important;
    }
}

@media (min-width: 1600px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1800px !important;
    }
}


/* =========================================================
   HOMEPAGE CINEMATIC HERO
   ========================================================= */

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	overflow-x: hidden;
}

.web-section:has(#gia-cinematic-hero),
.page_content:has(#gia-cinematic-hero),
#gia-cinematic-hero,
#gia-cinematic-hero .container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.gia-cinematic-hero {
	--gia-blue: #072549;
	--gia-dark-blue: #000c4f;
	--gia-white: #ffffff;

	position: relative;
	width: 100%;
	min-height: 320vh;
	background: var(--gia-blue);
	overflow: visible;
}

.gia-sticky-stage {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	min-height: 620px;
	overflow: hidden;
	background: var(--gia-blue);
	isolation: isolate;
}


/* =========================================================
   INTRO SCREEN — PERFECTLY ALIGNED LETTER REVEAL
   ========================================================= */

.gia-intro-screen {
	position: absolute;
	inset: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gia-blue);
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	transition:
		opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 1200ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 900ms;
}

.gia-intro-content {
	position: relative;
	width: min(900px, 84vw);
	text-align: center;
	color: var(--gia-white);
}

.gia-logo-intro-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(1040px, 90vw);
}

.gia-svg-logo-wrapper {
	position: relative;
	width: min(900px, 82vw);
	opacity: 1;
	transform: scale(1);
	transition:
		transform 1000ms cubic-bezier(0.16, 1, 0.3, 1) 1550ms,
		filter 900ms ease 1550ms;
}

.gia-hyundai-glovis-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Force the logo artwork to white on the blue background */
.gia-hyundai-glovis-svg .gia-logo-letter,
.gia-hyundai-glovis-svg .gia-logo-letter path {
	fill: #ffffff !important;
}

/*
	IMPORTANT:
	We never animate transform on the SVG letters.
	Their original SVG transform matrices remain untouched,
	so every letter stays perfectly aligned.
*/
.gia-hyundai-glovis-svg .gia-logo-letter {
	opacity: 0;
	filter: blur(8px);
	transition:
		opacity 520ms ease,
		filter 720ms ease;
	transition-delay: var(--gia-letter-delay, 0ms);
	will-change: opacity, filter;
}

/* HYUNDAI: H → Y → U → N → D → A → I */
.gia-hyundai-h { --gia-letter-delay: 80ms; }
.gia-hyundai-y { --gia-letter-delay: 160ms; }
.gia-hyundai-u { --gia-letter-delay: 240ms; }
.gia-hyundai-n { --gia-letter-delay: 320ms; }
.gia-hyundai-d { --gia-letter-delay: 400ms; }
.gia-hyundai-a { --gia-letter-delay: 480ms; }
.gia-hyundai-i { --gia-letter-delay: 560ms; }

/* GLOVIS: G → L → O → V → I → S */
.gia-glovis-g { --gia-letter-delay: 780ms; }
.gia-glovis-l { --gia-letter-delay: 870ms; }
.gia-glovis-o { --gia-letter-delay: 960ms; }
.gia-glovis-v { --gia-letter-delay: 1050ms; }
.gia-glovis-i { --gia-letter-delay: 1140ms; }
.gia-glovis-s { --gia-letter-delay: 1230ms; }

.gia-cinematic-hero.gia-intro-visible
.gia-hyundai-glovis-svg .gia-logo-letter {
	opacity: 1;
	filter: blur(0);
}

/* Gentle logo settling after all letters are visible */
.gia-cinematic-hero.gia-intro-visible .gia-svg-logo-wrapper {
	transform: scale(1.035);
	filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.16));
}

/* Soft shine moving across the finished logo */
.gia-svg-logo-wrapper::before {
	content: "";
	position: absolute;
	inset: -6% -12%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		105deg,
		transparent 37%,
		rgba(255, 255, 255, 0.08) 45%,
		rgba(255, 255, 255, 0.70) 50%,
		rgba(255, 255, 255, 0.08) 55%,
		transparent 63%
	);
	transform: translateX(-135%);
	opacity: 0;
	mix-blend-mode: screen;
}

/* .gia-cinematic-hero.gia-intro-visible .gia-svg-logo-wrapper::before {
	animation: gia-logo-shine 1100ms ease 1480ms forwards;
} */

@keyframes gia-logo-shine {
	0% {
		transform: translateX(-135%);
		opacity: 0;
	}

	18% {
		opacity: 1;
	}

	82% {
		opacity: 1;
	}

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

/* ANANTAPUR */
.gia-intro-location {
	margin-top: clamp(22px, 3vh, 38px);
	overflow: hidden;
}

.gia-intro-location span {
	display: block;
	font-family: "Pretendard", sans-serif;
	font-size: clamp(24px, 3.2vw, 54px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.19em;
	color: var(--gia-white);
	opacity: 0;
	transform: translateY(115%);
	transition:
		transform 1000ms cubic-bezier(0.16, 1, 0.3, 1) 1420ms,
		opacity 650ms ease 1420ms;
}

.gia-cinematic-hero.gia-intro-visible .gia-intro-location span {
	opacity: 1;
	transform: translateY(0);
}

.gia-intro-bar {
	width: 0;
	height: 6px;
	margin: 38px auto 0;
	background: var(--gia-white);
	transition:
		width 1000ms cubic-bezier(0.22, 1, 0.36, 1) 1750ms,
		opacity 500ms ease;
}

.gia-cinematic-hero.gia-intro-visible .gia-intro-bar {
	width: min(170px, 28vw);
}

.gia-cinematic-hero.gia-intro-complete .gia-intro-screen {
	opacity: 0;
	visibility: hidden;
	transform: scale(1.08);
	pointer-events: none;
}


/* =========================================================
   VIDEO SCENES
   ========================================================= */

.gia-video-scene {
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	background: var(--gia-dark-blue);
}

.gia-background-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.gia-video-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		90deg,
		rgba(0, 9, 63, 0.66) 0%,
		rgba(0, 9, 63, 0.16) 52%,
		rgba(0, 9, 63, 0.18) 100%
	);
}

.gia-video-caption {
	position: absolute;
	z-index: 5;
	left: clamp(28px, 7vw, 130px);
	bottom: clamp(70px, 12vh, 150px);
	color: #ffffff;
	opacity: 0;
	transform: translateY(60px);
	transition:
		opacity 800ms ease,
		transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gia-caption-label {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.24em;
}

.gia-video-caption h2 {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(44px, 6.3vw, 104px);
	font-weight: 700;
	line-height: 0.96;
	letter-spacing: -0.03em;
	color: rgb(183, 183, 183);
}


/* =========================================================
   VIDEO 1
   ========================================================= */

.gia-video-scene-one {
    --video-one-opacity: 0;
    --video-one-scale: 0.82;

    clip-path: inset(46% 44% 46% 44% round 100px);
    transform: scale(var(--video-one-scale));
    opacity: var(--video-one-opacity);
    transition:
        clip-path 1500ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 1500ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 700ms ease;
}

.gia-cinematic-hero.gia-video-one-visible .gia-video-scene-one {
    clip-path: inset(0 0 0 0 round 0);
    --video-one-opacity: 1;
    --video-one-scale: 1;
}

.gia-cinematic-hero.gia-video-one-visible .gia-caption-one {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 700ms;
}


/* =========================================================
   VIDEO 2
   ========================================================= */

.gia-video-scene-two {
    z-index: 10;
    pointer-events: none;
    background: transparent;
}

.gia-video-two-mask {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gia-dark-blue);

    clip-path: circle(var(--video-two-circle, 0%) at 50% 50%);

    transform:
        translate(-50%, -50%)
        scale(var(--video-two-scale, 0.72));

    opacity: var(--video-two-opacity, 0);
    will-change: clip-path, transform, opacity;
}

.gia-video-two-overlay {
    background: linear-gradient(
        90deg,
        rgba(0, 9, 63, 0.7) 0%,
        rgba(0, 9, 63, 0.15) 55%,
        rgba(0, 9, 63, 0.08) 100%
    );
}

.gia-caption-two {
    opacity: var(--caption-two-opacity, 0);
    transform: translateY(var(--caption-two-y, 60px));
}


/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.gia-scroll-indicator {
    position: absolute;
    z-index: 40;
    right: clamp(20px, 4vw, 70px);
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    opacity: 0;
    transition: opacity 600ms ease;
}

.gia-scroll-indicator span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    writing-mode: vertical-rl;
}

.gia-scroll-line {
    width: 1px;
    height: 58px;
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 100%
    );
    background-size: 100% 200%;
    animation: gia-scroll-line 1.8s linear infinite;
}

.gia-cinematic-hero.gia-video-one-visible .gia-scroll-indicator {
    opacity: 1;
}

.gia-cinematic-hero.gia-second-video-active .gia-scroll-indicator {
    opacity: 0;
}

@keyframes gia-scroll-line {
    0% {
        background-position: 0 100%;
    }

    100% {
        background-position: 0 -100%;
    }
}


/* =========================================================
   VIDEO CONTROL
   ========================================================= */

.gia-video-control {
    position: absolute;
    z-index: 50;
    right: clamp(20px, 4vw, 70px);
    top: clamp(80px, 12vh, 120px);
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(8px);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 500ms ease,
        background-color 300ms ease;
}

.gia-video-control:hover {
    background: rgba(0, 0, 0, 0.35);
}

.gia-cinematic-hero.gia-video-one-visible .gia-video-control {
    opacity: 1;
    visibility: visible;
}

.gia-pause-icon::before,
.gia-pause-icon::after {
    content: "";
    position: absolute;
    top: 15px;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: #ffffff;
}

.gia-pause-icon::before {
    left: 17px;
}

.gia-pause-icon::after {
    right: 17px;
}

.gia-video-control.is-paused .gia-pause-icon::before {
    left: 18px;
    top: 14px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #ffffff;
    border-radius: 0;
    background: transparent;
}

.gia-video-control.is-paused .gia-pause-icon::after {
    display: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
    .gia-cinematic-hero {
        height: 270vh;
    }

    .gia-sticky-stage {
        min-height: 560px;
    }

    .gia-intro-line span {
        font-size: clamp(42px, 14vw, 70px);
    }

    .gia-line-3 span {
        font-size: clamp(18px, 6vw, 30px);
        letter-spacing: 0.1em;
    }

    .gia-video-caption {
        left: 24px;
        right: 24px;
        bottom: 80px;
    }

    .gia-video-caption h2 {
        font-size: clamp(40px, 12vw, 66px);
    }

    .gia-caption-label {
        font-size: 10px;
        line-height: 1.5;
    }

    .gia-video-control {
        top: 80px;
        right: 20px;
        width: 42px;
        height: 42px;
    }

    .gia-pause-icon::before,
    .gia-pause-icon::after {
        top: 13px;
        height: 16px;
    }

    .gia-pause-icon::before {
        left: 14px;
    }

    .gia-pause-icon::after {
        right: 14px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .gia-intro-screen,
    .gia-intro-line span,
    .gia-intro-bar,
    .gia-video-scene-one,
    .gia-video-caption {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }

    .gia-scroll-line {
        animation: none;
    }
}



/* =========================================================
   LOGIN PAGE OPENING ANIMATION
   Reuses homepage intro-line classes
   ========================================================= */

body[data-path="login"] {
    --gia-blue: #072549;
    --gia-white: #ffffff;
}

/* Full-screen intro placed above the login video/card */
body[data-path="login"] .gia-login-intro {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--gia-blue);
    opacity: 1;
    visibility: visible;
    transform: scale(1);

    transition:
        opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 700ms;
}

body[data-path="login"] .gia-login-intro-content {
    width: min(900px, 84vw);
    color: var(--gia-white);
    text-align: center;
}

/* Initial text state */
body[data-path="login"] .gia-login-intro .gia-intro-line {
    overflow: hidden;
    line-height: 0.88;
}

body[data-path="login"] .gia-login-intro .gia-intro-line span {
    display: block;

    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(44px, 7.2vw, 118px);
    font-weight: 800;
    line-height: 0.88;
    letter-spacing: 0.03em;

    opacity: 0;
    transform: translateY(115%);

    transition:
        transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 550ms ease;
}

/* Shift GLOVIS slightly toward the right */
body[data-path="login"] .gia-login-intro .gia-line-2 {
    transform: translateX(45px);
}

body[data-path="login"] .gia-login-intro .gia-line-2 span {
    transition-delay: 120ms;
}

body[data-path="login"] .gia-login-intro .gia-line-3 span {
    margin-top: 22px;
    font-size: clamp(26px, 3.2vw, 54px);
    font-weight: 700;
    letter-spacing: 0.19em;
    transition-delay: 240ms;
}

body[data-path="login"] .gia-login-intro .gia-intro-bar {
    width: 0;
    height: 6px;
    margin: 38px auto 0;
    background: #ffffff;

    transition:
        width 750ms cubic-bezier(0.22, 1, 0.36, 1) 420ms,
        opacity 400ms ease;
}

/* Intro enters */
body[data-path="login"] .gia-login-intro.gia-login-intro-visible
.gia-intro-line span {
    opacity: 1;
    transform: translateY(0);
}

body[data-path="login"] .gia-login-intro.gia-login-intro-visible
.gia-intro-bar {
    width: min(170px, 28vw);
}

/* Intro exits */
body[data-path="login"] .gia-login-intro.gia-login-intro-complete {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.06);
    pointer-events: none;
}

/* Hide login UI during opening animation */
body[data-path="login"] .page-content-wrapper {
    opacity: 0;
    transform: translateY(28px);

    transition:
        opacity 700ms ease,
        transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reveal login UI after intro */
body[data-path="login"].gia-login-ready .page-content-wrapper {
    opacity: 1;
    transform: translateY(0);
}

/* Video starts slightly dark, then becomes visible */
body[data-path="login"] #bgvid {
    opacity: 0;
    transform: scale(1.04);

    transition:
        opacity 900ms ease,
        transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-path="login"].gia-login-ready #bgvid {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 767px) {
    body[data-path="login"] .gia-login-intro .gia-intro-line span {
        font-size: clamp(42px, 14vw, 70px);
    }

    body[data-path="login"] .gia-login-intro .gia-line-2 {
        transform: translateX(22px);
    }

    body[data-path="login"] .gia-login-intro .gia-line-3 span {
        font-size: clamp(18px, 6vw, 30px);
        letter-spacing: 0.1em;
    }
}


body[frappe-session-status="logged-out"] {
	height: auto !important;
	min-height: 100vh !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}