/* Fonts */
:root { --default-font: "Pretendard", sans-serif; --heading-font: "Pretendard", sans-serif; --nav-font: "Pretendard", sans-serif; } 
 
 /* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
 :root { --background-color: #ffffff; /* Background color for the entire website, including individual sections */
 --default-color: #222222; /* Default color used for the majority of the text content across the entire website */
 --heading-color: #222222; /* Color for headings, subheadings and title throughout the website */
 --accent-color: #106eea; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
 --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
 --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
 --text-color-dark: #1A1A1A; --text-color-light: #B3B3B3; --soft-gray: #aaa; --pale-gray: #F1F1F1; } 
 
 /* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
 
 :root { --nav-color: #222222; /* The default color of the main navmenu links */
 --nav-hover-color: #106eea; /* Applied to main navmenu links when they are hovered over or active */
 --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
 --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
 --nav-dropdown-color: #222222; /* Used for navigation links of the dropdown items in the navigation menu. */
 --nav-dropdown-hover-color: #106eea; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */ } 
 
 /* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
 
 .light-background { --background-color: #f5f9ff; --surface-color: #ffffff; } 
 .dark-background { --background-color: #060606; --default-color: #ffffff; --heading-color: #ffffff; --surface-color: #252525; --contrast-color: #ffffff; } 
 .sigClr {background:var(--signature-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold;}
 /* Smooth scroll */
 :root { scroll-behavior: smooth; } 
 
 /*--------------------------------------------------------------
 # General Styling & Shared Classes
 --------------------------------------------------------------*/
 body { color: var(--default-color); background-color: var(--background-color); font-family: var(--default-font); } 
 a { color: #000; text-decoration: none; transition: 0.3s; } 
 a:hover { text-decoration: none; } 
 ul, ol { list-style: none; } 

 /*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header { color: var(--default-color); transition: background-color 0.5s ease, box-shadow 0.5s ease; z-index: 997; position: fixed; width: 100%; top: 0; background-color: transparent; text-align: center; } 
.header .branding { background-color: transparent; min-height: 60px; padding: 10px 0; } 
.header .logo { line-height: 1; } 
.header .logo img { max-height: 90px; margin-right: 8px; } 
.header .logo h1 { font-size: 30px; margin: 0; font-weight: 700; color: var(--heading-color); } 
.open .header,
.scrolled .header { transition: none; background: var(--background-color, #fff); box-shadow: 0px 0 3px rgba(0, 0, 0, 0.2); } 
.mobileMenuBg { display: block; width: 66px; height: 66px; background: #fff; border-radius: 50%; position: absolute; left: calc(95% - 23px); top: 46px; z-index: 1; transform: translate(-50%, -50%) scale(0); transition: transform 0.8s ease-in-out; } 

#mobile-gnb { position: fixed; top: 70px; right: 0; width: 100%; height: 100vh; background: transparent; z-index: 1000; overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s; } 

body.open #mobile-gnb { visibility: visible; opacity: 1; transition: opacity 0.4s ease-in-out 500ms; } 


/*--------------------------------------------------------------
# Header Wrap & Navigation Menu
--------------------------------------------------------------*/
.header-wrap.container { position: relative; height: 90px; max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } 
#logo { flex-shrink: 0; } 
#gnb_1dul { position: absolute; left: 50%; transform: translateX(-50%); top: 0; display: flex; gap: 2.5vw; list-style: none; margin: 0; padding: 0; height: 90px; align-items: center; z-index: 10; } 
.gnb_1da { font-size: 18px; color: #fff; text-decoration: none; line-height: 90px; transition: color 0.3s; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);} 
.gnb_2dul { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-20px); width: 100vw; background: #f5f5f5; padding: 15px 0; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } 
.gnb_1dli:hover .gnb_2dul { display: block; opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; } 
.gnb_2dul_box { display: flex; justify-content: center; gap: 30px; margin: 0; padding: 0 20px; list-style: none; } 
.gnb_2dli { position: relative; padding: 0 30px; } 
.gnb_2dli:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #ccc; } 
.gnb_2da { font-size: 15px; color: #666; text-decoration: none; padding: 5px 10px; display: inline-block; transition: color 0.3s; } 
#lang { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 20; } 
#mobile-menu-toggle { display: none; } 
.gnb_1dli { margin: 0 1vw; } 

/*--------------------------------------------------------------
# Language List
--------------------------------------------------------------*/
.lang-list { display: none; position: absolute; top: 100%; left: -5px; padding-block: 0.4rem; margin-top: 0.5rem; border-radius: 7px; border: 1px solid #ddd; background: #fff; box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, .16); z-index: 1000; left: 50%;transform: translateX(-50%);} 
.lang-list.show { display: block; } 
.curr-lang { cursor: pointer; display: inline-block; padding: 5px; } 
.lang-list li { padding: 7px 20px; } 
.lang-list li a { color: #999; font-size: var(--micro-font);letter-spacing: 2px; } 
.lang-list li a.selected{color : var(--signature-color);}
/*--------------------------------------------------------------
# Mobile Menu - Desktop Breakpoint (Max Width: 1024px)
--------------------------------------------------------------*/
@media all and (max-width: 1024px){
 #mobile-menu-toggle { display: flex; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 999; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; height : 25px; } 
 #mobile-menu-toggle .bar { width: 25px; height: 2px; background-color: #fff; } 
 body.open #mobile-menu-toggle .bar,
 body.scrolled #mobile-menu-toggle .bar { background: #444; } 
 #gnb_1dul { display: none; } 

 #mobile-menu-toggle.open .bar { min-width : 25px; } 
 #mobile-menu-toggle.open .bar:nth-of-type(1) { transform-origin: top right; transform: rotate(-45deg); flex-shrink: 0; margin-top : -2px; } 
 #mobile-menu-toggle.open .bar:nth-of-type(2) { opacity: 0; } 
 #mobile-menu-toggle.open .bar:nth-of-type(3) { transform-origin: bottom right; transform: rotate(45deg); flex-shrink: 0; margin-top: 3px; } 
#lang {right: 55px;} 
}

/*--------------------------------------------------------------
# Mobile Menu Styles
--------------------------------------------------------------*/

/* #mobile-gnb { display: none; position: fixed; top: 0; right: 0; width: 100%; height: 100vh; background: #fff; z-index: 100; box-sizing: border-box; overflow-y: auto; } */
.mobile-gnb-menu { position: relative; width: 88%; max-width: 894px; margin: 0 auto; padding-top: 53px; } 
.mobile-menu-item>a { font-size: var(--large-font); display: block; font-weight: 600; } 
.mobile-submenu { list-style: none; } 
.mobile-submenu li a { display: block; padding: 8px 0; font-size: var(--small-font); } 
.mobile-menu-item { margin-bottom: 32px; padding-left: 34px; line-height: 0.8; } 
.mobile-menu-item::before { display: block; content: ""; width: 3px; height: 19px; position: absolute; left: 0; transition: all 0.4s; background: var(--sub-color); } 
.mobile-menu-item a { margin-bottom: 10px; } 
#mobile-menu-toggle .bar { transition: all 0.3s ease; } 

/*-------------------------------------------------------------- 
# Global Footer 
--------------------------------------------------------------*/
footer { background-color: #222222; margin-top: 150px; } 
footer .container { padding: 80px 0 0; } 
footer .footer-title.mb-3 { font-weight: 600; line-height: 1.3; color: #fff; margin-bottom: 3rem !important; } 
footer h4, footer h5 { font-weight: bold; } 
footer p { margin-bottom: 0.5rem; color: var(--text-color-dark); } 
footer button { background-color: transparent; border: 1px solid #fff; padding: 0.5rem 2rem; } 
footer.footer-logo { max-height: 50px; object-fit: contain; } 
footer .fab.fa-instagram { font-size: 30px; color: #000000; transition: color 0.3s ease; margin-right: 15px; } 
footer .row { justify-content: space-between; } 
footer .fab.fa-instagram:hover { color: #E1306C; cursor: pointer; } 
footer .row.mb-4 { margin-bottom: 200px !important; } 
footer .f-btns .dropdown {width: 100%;}
footer #familySiteDropdown, #companyBrochure { box-sizing: border-box; position: relative; width: 100%; height: 60px; font-size: var(--small-font); justify-content: space-between; align-items: center; display: flex;} 
#familySiteDropdown span,
#companyBrochure span { font-size : var(--small-font); } 
footer .dropdown-menu { width: 320px; padding: 0; background: #fff; } 
footer a.dropdown-item { padding: 20px 16px; } 
footer .text-md-end { text-align: right !important; display: flex; gap: 23px; justify-content: flex-end; align-items: center; } 
footer .footer-menu .footer-item { font-size: 36px; color: #666666; } 
footer h4.footer-title.mb-3 { font-size: 48px; } 
footer .footer-menu .footer-item.active { color: #fff; } 
footer .footer-content-item { display: none; } 
footer .footer-content-item.active { display: block; } 
footer .col-md-6.footer-column { width: 30%; } 
footer .f-location h5, footer .f-location p { color: #fff; } 
footer .f-btns { display: flex; max-width: 665px; gap: 10px; } 
footer .copyright { color: #666666; } 
footer .download-btn { background: var(--main-color); border: none; } 
footer .fab.fa-instagram { color: #fff; } 
footer .container-f { width: 90%; max-width: 1600px; margin: 0 auto; padding-top : 100px; } 
footer .col-md-6 h4.footer-title.mb-3 { font-weight: bold; } 
footer .contact-info { color: #fff; } 
footer .toggle-dropdown { transition: transform 0.2s ease; } 
 footer .toggle-dropdown.rotated { transform: rotate(180deg); } 
/*-------------------------------------------------------------- 
# Responsive Footer Styles 
--------------------------------------------------------------*/
@media screen and (max-width: 1024px){
 .row { flex-direction: column; } 
 footer .col-md-6 { width: 100%; } 
 footer .text-md-end { justify-content: space-between; text-align: left!important; } 
 footer .container { padding: 0; } 
 footer .row.mb-4 { gap: 3rem; margin-bottom: 80px !important; } 
 footer .col-md-4 { width: 100%; } 
 footer .f-location h5, footer .f-location p, footer .contact-group span { color: #d5d5d5; } 
 }

@media screen and (max-width: 768px) { 
 footer h4.footer-title.mb-3 { font-size: 40px; } 
 footer .container-f { margin: 50px auto 0; } 
 footer .f-btns button span, a.dropdown-item { font-size: var(--small-font); } 
 footer .f-location h5, footer .f-location p { font-size: var(--medium-font); } 
 footer .footer-menu .footer-item { font-size: var(--xlarge-font); } 
 footer { margin-top: 7.5rem; } 
 }

@media screen and (max-width: 480px) { footer { margin-top: 4rem; } 
 footer .f-btns { flex-direction: column; } 
 footer h4.footer-title.mb-3, footer .footer-menu .footer-item { font-size: var(--medium-font); } 
 footer .container-f { margin: 20px auto 0; } 
 footer #familySiteDropdown, footer #companyBrochure { height: 50px;} 
 footer button#familySiteDropdown, footer .dropdown-menu, footer #companyBrochure { width: 100%;}
 footer .footer-title.mb-3 { margin-bottom: 2rem!important; } 
 footer .row.mb-4 { gap: 1rem; } 
 footer .footer-content.f-location h5, .footer-content.f-location p, footer .f-btns button span, a.dropdown-item { font-size: var(--micro-font); } 
 footer .copyright { font-size: var(--micro-font); } 
 footer .fab.fa-instagram { font-size: 20px; } 
 footer svg { width: 132px; } 
 footer .row.mb-4 { margin-bottom: 0px!important; } 
 footer .row.footer-bottom.align-items-center { flex-direction: column-reverse; } 
 footer .col-md-6.text-md-end { flex-direction: row-reverse; } 
 footer .col-md-4 { width: 80%; } 
 footer .contact-group { font-size: var(--micro-font); } 
 footer .f-btns i {font-size: 18px;}
 }

 /*-------------------------------------------------------------- 
 # Preloader 
 --------------------------------------------------------------*/
#preloader { position: fixed; inset: 0; z-index: 9999; overflow: hidden; background-color: var(--background-color); transition: all 0.6s ease-out; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } 
#preloader div { width: 13px; height: 13px; background-color: var(--accent-color); border-radius: 50%; animation-timing-function: cubic-bezier(0, 1, 1, 0); position: absolute; left: 50%; } 
#preloader div:nth-child(1) { left: calc(50% + -27px); animation: animate-preloader-1 0.6s infinite; } 
#preloader div:nth-child(2) { left: calc(50% + -27px); animation: animate-preloader-2 0.6s infinite; } 
#preloader div:nth-child(3) { left: calc(50% + -3px); animation: animate-preloader-2 0.6s infinite; } 
#preloader div:nth-child(4) { left: calc(50% + 21px); animation: animate-preloader-3 0.6s infinite; } 
@keyframes animate-preloader-1 { 
 0% { transform: scale(0); } 100% { transform: scale(1); } 
 }
@keyframes animate-preloader-3 { 
 0% { transform: scale(1); } 100% { transform: scale(0); } 
 }
@keyframes animate-preloader-2 { 
 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } 
 }

/*-------------------------------------------------------------- 
# Scroll Top Button 
--------------------------------------------------------------*/
.scroll-top { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 60px; height: 60px; background: rgba(0,0,0,0.26); border-radius: 30px; position: fixed; right: 20px; bottom: 30px; z-index: 100; transition: background 0.5s, height 0.5s; visibility: visible; } 
.scroll-top i { font-size: 24px; color: var(--contrast-color); line-height: 0; transform: translateY(-16px); } 
.scroll-top:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 20%); height: 100px; background: #000; } 
.scroll-top.active { visibility: visible; opacity: 1; } 
.scroll-top:after { content: ''; display: block; width: 2.5px; height: 0; background: #fff; border-radius: 3px; margin-top: -32px; transition: height 0.6s cubic-bezier(.165,.84,.44,1); } 
.scroll-top .text_hidden { display: none; } 
.scroll-top:hover:after { height: 49px; } 
section { margin: 0px; padding: 0px; } 
ul { padding: 0; } 
p { margin: 0px; } 
.container { width: 90%; max-width: 1600px; margin: 0 auto; } 
@media (max-width: 1024px){
 .scroll-top { width: 45px; height: 45px; } 
 }
@media (max-width: 768px){
 .container { width: 95%; } .scroll-top { width: 35px; height: 35px; } .scroll-top:hover { height: 60px; } .scroll-top i { font-size: 16px; } 
 .scroll-top:hover:after { height: 20px; margin-top: -26px; } 
 }