/*****************************************************************
Navigation (SKP 202507)
******************************************************************/
/**Universal**/
:root { --logo-img-url: url("../../images/skplogo.gif"); }
.navi-logo .logo-img { background-image: var(--logo-img-url); background-size: auto; background-repeat: no-repeat; background-position: center; display: block; width: 200px; height: 50px; }
.flexArea { display: flex; }
.f-between { justify-content: space-between; }
.f-around { justify-content: space-around; }
.f-txtVC { align-items: center; justify-content: center; }
.f-txtC{align-items: center;}
.f-end {justify-content: flex-end;}
.f-flex {display:flex;}
.f-block {display:block;}
.border-navi {-webkit-box-shadow: 0 4px 3px -3px #15315D;box-shadow: 0 4px 3px -3px #15315D;border-bottom: 1px solid #15315D;}
/**Navigation:Flex**/
.hi-50 { height: 50px; }.hi-100{height:100px;}
.right-side { flex: 2; }
.left-side { flex: 1; }
.navi-logo, .navi-logo a { display: flex; justify-content: center; align-items: center; }
.naviFlex { display: flex; }
.naviFlex li { display: flex; justify-content: center; align-items: center; }
/**Navigation:Flex Fill on Hover**/
.naviFlex.fill li > a { display: flex; align-items: center; justify-content: center; height: 100%; }
/**Navigation:Roll and Scroll**/
header.rollNavi {position: fixed;top: 0;z-index: 10;-webkit-transition: top 0.2s ease-in-out;-o-transition: top 0.2s ease-in-out;transition: top 0.2s ease-in-out;width: 100%;}
.scroll-sticky{top:0 !important;}
#naviScroll {transition: top 0.3s;} /*Smooth out Navigation*/ 
#naviScroll-sub.fullOn{top:25px;position:fixed;} /*Ensures Hamburger Not Scrolled*/
#naviScroll-link li:last-child,#naviScroll-link li:last-child a {width:100%;display:flex;align-items:center;justify-content:center;height:100%;}
/**Navigation: Dropdown Column Submenu**/
#naviDrop-link li .dropdown-toggle {display:flex;align-items:center;justify-content:center;height:100%;width:125px;background:none;font:inherit;border:none;cursor:pointer;transition:background-color 0.3s,color 0.3s;}
.dropdown {position:relative;}
.dropdown-menu {position:absolute;top:100%;left:0;min-width:125px;visibility:hidden;opacity:0;transform:translateY(-2px);transition:opacity 0.2s,transform 0.2s,visibility 0.2s;z-index:1000;margin:0;padding:0;}
.dropdown:hover .dropdown-menu {visibility:visible;opacity:1;transform:translateY(0);}
.dropdown-menu li a {display:block;text-decoration:none;background-color:transparent;width:125px;padding:0.75rem 1rem;color:#4B7DCD;}

/************************************************************************************
Full Menu Navigation
*************************************************************************************/
.menuSwitch { cursor: pointer; display: inline-block; position: relative; z-index: 2000; }
.menuSwitch .line { display: block; margin: 8px auto; width: 42px; height: 5px; background-color: #FFCC00; transition: all 0.3s ease-in-out; }
.fullMenu, .sideMenu { position: fixed; top: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s ease; }
.fullMenu { left: 0; width: 100%; visibility: hidden; background: pink; transition: opacity 0.5s ease, visibility 0.5s ease; }
.fullMenu.is-active { opacity: 1; visibility: visible; }
.sideMenu { right: 0; width: 250px; transform: translateX(100%); background: skyblue; transition: transform 0.5s ease, opacity 0.5s ease; }
.sideMenu.is-active { opacity: 1; transform: translateX(0); }
.menuSwitch.is-active .line:nth-child(1) { transform: translateY(13px) rotate(45deg); }
.menuSwitch.is-active .line:nth-child(2) { opacity: 0; }
.menuSwitch.is-active .line:nth-child(3) { transform: translateY(-13px) rotate(-45deg); }
/************************************************************************************
Rail Yard: Line System (A Flexible Grid Story)
*************************************************************************************/
.line { width: 100%; max-width: 100%; margin:0 auto; display: flex; flex-wrap: wrap; justify-content: center; list-style: none; box-sizing: border-box;}
.line:not([class*="pL"]):not([class*="pR"]):not([class*="pLR"]) { padding-left: var(--pad-default); padding-right: var(--pad-default); }
.line:not([class*="carTB"]) li {padding-top: var(--pad-default); padding-bottom: var(--pad-default);}
.line li{margin-bottom:15px;}
.d-hidden{visibility: hidden;}
/**Universal Settings: Use on UL line**/
.noGap > li {margin-bottom:0;}
.smGap > li {margin-bottom:2px;}
.mdGap > li { margin-bottom: 16px; }
.lgGap > li { margin-bottom: 24px; }
.xlGap > li { margin-bottom: 32px; }
.xxLGap > li{ margin-bottom: 48px; }
.col-txtVC > li { display: flex; align-items: center; }
.col-txtC > li { display: flex; justify-content: center; }
.removePL0 > LI {padding-left:0px;}
.fullLink li a {padding:10px;}
/**Over Ride: Remove default margin-bottom if GAP used**/
.line[class*="gap-"] li {margin-bottom: 0 !important;}
/**Train Line: Style**/
.line.carLR-0 li { padding-left: var(--pad-0); padding-right: var(--pad-0); }
.line.carLR-1 li { padding-left: var(--pad-1); padding-right: var(--pad-1); }
.line.carLR-2 li { padding-left: var(--pad-2); padding-right: var(--pad-2); }
.line.carLR-3 li { padding-left: var(--pad-3); padding-right: var(--pad-3); }
.line.carLR-4 li { padding-left: var(--pad-4); padding-right: var(--pad-4); }
.line.carLR-5 li { padding-left: var(--pad-5); padding-right: var(--pad-5); }
.line.carTB-0 li { padding-top: var(--pad-0); padding-bottom: var(--pad-0); }
.line.carTB-1 li { padding-top: var(--pad-1); padding-bottom: var(--pad-1); }
.line.carTB-2 li { padding-top: var(--pad-2); padding-bottom: var(--pad-2); }
.line.carTB-3 li { padding-top: var(--pad-3); padding-bottom: var(--pad-3); }
.line.carTB-4 li { padding-top: var(--pad-4); padding-bottom: var(--pad-4); }
.line.carTB-5 li { padding-top: var(--pad-5); padding-bottom: var(--pad-5); }
/**Train Line Border**/
.line.border-all li { border: var(--border-width-sm) solid var(--border-color, var(--black)); }
.line.border-all-lo li { border: var(--border-width-lo) solid var(--border-color, var(--black)); }
.line.border-all-md li { border: var(--border-width-md) solid var(--border-color, var(--black)); }
.line.border-all-hi li { border: var(--border-width-hi) solid var(--border-color, var(--black)); }
/**Rail Yard: Border Color**/
.border-black { --border-color: var(--black); }
.border-red { --border-color: var(--red); }
.border-blue { --border-color: var(--blue); }
.border-pink { --border-color: var(--pink); } /* Added for consistency */
/**Rail Yard: Between Cars**/
.gap-0 { gap: var(--gap-0); --gap: var(--gap-0); }
.gap-1 { gap: var(--gap-1); --gap: var(--gap-1); }
.gap-2 { gap: var(--gap-2); --gap: var(--gap-2); }
.gap-3 { gap: var(--gap-3); --gap: var(--gap-3); }
.gap-4 { gap: var(--gap-4); --gap: var(--gap-4); }
.gap-5 { gap: var(--gap-5); --gap: var(--gap-5); }
/*******************************
RailYard: Universal Master Code
********************************/
[class*="col-"] { position: relative; width: 100%; padding-left: var(--pad-default); padding-right: var(--pad-default); box-sizing: border-box; flex: 0 0 auto; }
/**Smartphone:Initialize**/
.col-sm,.col-md,.col-lg,.col-xl {flex: 0 0 100%;}
.col-1 { flex: 0 0 calc(8.333333% - var(--gap, 0px)); max-width: calc(8.333333% - var(--gap, 0px)); }
.col-2 { flex: 0 0 calc(16.666667% - var(--gap, 0px)); max-width: calc(16.666667% - var(--gap, 0px)); }
.col-3 { flex: 0 0 calc(25% - var(--gap, 0px)); max-width: calc(25% - var(--gap, 0px)); }
.col-4 { flex: 0 0 calc(33.333333% - var(--gap, 0px)); max-width: calc(33.333333% - var(--gap, 0px)); }
.col-5 { flex: 0 0 calc(41.666667% - var(--gap, 0px)); max-width: calc(41.666667% - var(--gap, 0px)); }
.col-6 { flex: 0 0 calc(50% - var(--gap, 0px)); max-width: calc(50% - var(--gap, 0px)); }
.col-7 { flex: 0 0 calc(58.333333% - var(--gap, 0px)); max-width: calc(58.333333% - var(--gap, 0px)); }
.col-8 { flex: 0 0 calc(66.666667% - var(--gap, 0px)); max-width: calc(66.666667% - var(--gap, 0px)); }
.col-9 { flex: 0 0 calc(75% - var(--gap, 0px)); max-width: calc(75% - var(--gap, 0px)); }
.col-10 { flex: 0 0 calc(83.333333% - var(--gap, 0px)); max-width: calc(83.333333% - var(--gap, 0px)); }
.col-11 { flex: 0 0 calc(91.666667% - var(--gap, 0px)); max-width: calc(91.666667% - var(--gap, 0px)); }
.col-12 { flex: 0 0 100%; max-width: 100%; }
/**Offset:Shift COLUMN instead of empty LI**/
.offset-0 { margin-left: 0; }
.offset-1 { margin-left: calc(8.333333% - var(--gap, 0px)); }
.offset-2 { margin-left: calc(16.666667% - var(--gap, 0px)); }
.offset-3 { margin-left: calc(25% - var(--gap, 0px)); }
.offset-4 { margin-left: calc(33.333333% - var(--gap, 0px)); }
.offset-5 { margin-left: calc(41.666667% - var(--gap, 0px)); }
.offset-6 { margin-left: calc(50% - var(--gap, 0px)); }
.offset-7 { margin-left: calc(58.333333% - var(--gap, 0px)); }
.offset-8 { margin-left: calc(66.666667% - var(--gap, 0px)); }
.offset-9 { margin-left: calc(75% - var(--gap, 0px)); }
.offset-10 { margin-left: calc(83.333333% - var(--gap, 0px)); }
.offset-11 { margin-left: calc(91.666667% - var(--gap, 0px)); }
/************************************************************************************
Rail Yard: Individual Cars 
*************************************************************************************/
.car { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: var(--white); background-clip: border-box;}
.car-header { padding: var(--pad-2) var(--pad-3); margin-bottom: 0; border-bottom: var(--border-width-sm) solid rgba(0, 0, 0, 0.125); }
.car-header:first-child { border-radius: var(--border-radius) var(--border-radius) 0 0; }
.car-body { padding: var(--pad-3); flex: 1 1 auto; }
.car-title { margin-bottom: var(--pad-2); }
.car-text:last-child { margin-bottom: 0; }
.car-footer { padding: var(--pad-2) var(--pad-3); border-top: var(--border-width-sm) solid rgba(0, 0, 0, 0.125); margin-top: auto; }
.car-footer:last-child { border-radius: 0 0 var(--border-radius) var(--border-radius); }
/**Individual Cars: Style**/
.car-t-round { width: 100%; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); overflow: hidden; }
.car-b-round { width: 100%; border-bottom-right-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); overflow: hidden; }
.car-img-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); padding: var(--pad-3); display: flex; flex-direction: column; justify-content: flex-end; transition: background-color 0.3s ease; }
.car-img-overlay:hover { background-color: rgba(0, 0, 0, 0.8); }
/**Flip: Reverse Settings**/
.flip-col{flex-direction:column-reverse;}
.line.flip-row{flex-direction: column-reverse; }
.line.flip-md-row{flex-direction: column-reverse; }
.line.flip-lg-row{flex-direction: column-reverse; }
/************************************************************************************
Grids: System Container
*************************************************************************************/	
.grid-container { display: grid; gap: 10px; padding: 10px; }
/*****************************************************************
Buttons: General
******************************************************************/
/** Initialize for iOS Displayed Buttons **/
button {-webkit-appearance: none;appearance: none;border: none;outline: none;cursor: pointer;border-radius: 5px;transition: background-color 0.3s ease;}

/**Buttons: Core**/
.button { display: flex; padding: 12px; width: 100%; font-weight: 600; transition: background-color 0.3s ease, color 0.3s ease; cursor: pointer; align-items: center; justify-content: center; background-color: var(--btn-bg); color: var(--btn-text); border: var(--border-width-lo) solid var(--btn-border, transparent); border-radius: var(--radius-md); }
.button:hover {background-color: var(--btn-hover-bg); color: var(--btn-hover-text);}
/**Buttons: Modifiers**/
.button--solid--blue { --btn-bg: var(--cool-blue); --btn-text: var(--cloud); --btn-hover-bg: var(--cloud); --btn-hover-text: var(--cool-blue); --btn-border: var(--cool-blue); }
.button--outline--refresh { --btn-border: var(--electric-red); --btn-text: var(--electric-red); --btn-bg: var(--cloud); --btn-hover-bg: var(--electric-red); --btn-hover-text: var(--cloud); }
.button--outline--add { --btn-border: var(--green-tea); --btn-text: var(--green-tea); --btn-bg: var(--cloud); --btn-hover-bg: var(--green-tea); --btn-hover-text: var(--cloud); }
.button--outline--generate { --btn-border: var(--cool-blue); --btn-text: var(--cool-blue); --btn-bg: var(--cloud); --btn-hover-bg: var(--cool-blue); --btn-hover-text: var(--cloud); }
.button--outline--black { --btn-border: var(--ftBlack-fade); --btn-text: var(--ftBlack-fade); --btn-bg: var(--cloud); --btn-hover-bg: var(--ftBlack-fade); --btn-hover-text: var(--cloud); }
.button--solid--black { --btn-bg: var(--ftBlack-fade); --btn-text: var(--cloud); --btn-hover-bg: var(--cloud); --btn-hover-text: var(--ftBlack-fade); --btn-border: var(--ftBlack-fade); }
/** Animation: Button Down **/ 
.animate-btn-down {display: inline-block; transition: transform 0.2s ease-in-out;} 
.animate-btn-down:hover {transform: scale(0.95); will-change: transform;}
/**Garage Door Button Styles**/
.garageDoor {position: relative; width: 100%; border-radius: 0; border: none; text-align: left; outline: none; cursor: pointer; padding: 18px; transition: background-color 0.4s, color 0.4s;}
/**On Click Door Switch**/
.garageDoor:after {content: "\002B";float: right; margin-left: 5px;}
.garageDoor.active:after {content: "\2212";}
/* Collapsible Panel Styles – NO GAPS */
.inGarage {max-height: 0; overflow: hidden; opacity: 0; padding: 0 10px; margin: 0; transition: max-height 0.5s ease-out, opacity 0.3s ease-in, padding-top 0.5s ease-out, padding-bottom 0.5s ease-out;}
.inGarage.open {opacity: 1; padding: 10px 10px;}
.inGarage p {margin-top:0;}
/*****************************************************************
BR Effects: Responsive Line Breaks 
******************************************************************/
.br {display: none;} .br--SP {display: block;}
/************************************************************************************
Viewport Tool: viewStatus + viewport + seeWatch + boxWide
*************************************************************************************/	
.boxWide {border: 2px solid; position: relative; min-height: 50px;}
.boxWide:nth-child(1) { border-color: red; }
.boxWide:nth-child(2) { border-color: blue; }
.boxWide:nth-child(3) { border-color: green; }
.boxWide:nth-child(4) { border-color: purple; }
.boxWide:nth-child(5) { border-color: orange; }
.show-boxWide {position: fixed; display: none; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 5px 10px; border-radius: 5px; font-size: 14px; pointer-events: none; z-index: 9999;}
.viewport-output {position: fixed; bottom: 0; left: 0; background: red; color: white; padding: 5px; font-size: 11px; opacity: 0.7;}
/*****************************************************************
Notifications
******************************************************************/
/**Tool Tip Notification: Long and Short**/
.tooltip-box { position: absolute; background: #000; color: #fff; padding: 4px 8px; border-radius: 0.25rem; font-size: 0.875rem; z-index: 1000; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; }
.tooltip-box.show { opacity: 1; visibility: visible; }
.tooltip-box.tooltip-box-short { white-space: nowrap; }
.tooltip-box.tooltip-box-long { max-width: 250px; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; }
.tooltip-box::after { content: ""; position: absolute; border: 5px solid transparent; }
.tooltip-box[data-position="top"]::after { bottom: -10px; left: 50%; transform: translateX(-50%); border-top-color: #000; }
.tooltip-box[data-position="bottom"]::after { top: -10px; left: 50%; transform: translateX(-50%); border-bottom-color: #000; }
[data-bs-toggle="tooltip"] { cursor: pointer; }
/**Copied Notification**/
.copy-notification { position: fixed; bottom: 20px; left: 20px; background-color: #333; color: #fff; padding: 10px 15px; border-radius: 5px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; z-index: 9999; font-size: 0.9rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
.copy-notification.show { opacity: 1; visibility: visible; }
/*****************************************************************
Hero:Basic BG Full
******************************************************************/
.hero-bg {display:flex; height:50vh; position:relative;justify-content:center;}
.imgBG {background-size: cover;background-position: center;padding: 0;margin: 0;width: 100%;}
/**Hero:Flex Full Hero Image**/
.hero-flex {display:flex;align-items:center;justify-content: center;overflow:hidden;max-height:100vh;height:100%;}
.hero-flex img,.hero-flex picture {width: 100%;height: 100%;object-fit: cover;}
/**Hero: Text Location**/
.hero-content {position:absolute;}
/*****************************************************************
Hero: Universal
******************************************************************/
.hero-VC{position: absolute;top: 50%;transform: translate(0%, -50%);}
.hero-top{position:absolute;top:0;}
.hero-bottom {position:absolute;bottom:0;}
.hero-C {width:100%;text-align:center;}
/*****************************************************************
Hero: Parallax
******************************************************************/
/**Parallax:Base**/
.para-page{width:100%;display:flex;}
.para-fix{position:fixed; z-index:-1;width:100%;background-size: cover;background-repeat:no-repeat;background-attachment:scroll;background-position:top;background-position: top center;}
.para-gap{height:calc(100vw + 50px);}
/**Parallax:Multi**/
.heroPage-mp {top:0;}
.sticky-p {margin-top: -100vh;height:100vh;position:sticky;top: 0;z-index:0;}
.mp-gap {position: relative;width:100%;height:calc(100vw + 50px);
  z-index: 2;}
.mp {position:relative;width: 100%;min-height:100vh;z-index: 1}
/**Parallax:Footer End**/
.para-end {position: relative;z-index: 100;}
.paraFoot {position: fixed;z-index: 0;min-height: 36rem;width: 100%;bottom: -100px;display: block;}
.para-clear {height: 70vh;}
.para-footH {height: 60vh;} /*Provide empty container to see footer*/
/**Full Page Flex**/
.flex-page {display: flex;flex-direction: column; min-height: 100vh;}
.full-page {flex:1;}
/*****************************************************************
PDF: Overlay
******************************************************************/
/** Disable scroll only when modal is open **/
.pdf-noscroll {overflow: hidden;}
/** PDF: Overlay **/
.pdf-overlay {display: none; position: fixed; z-index: 1000; left: 0; top: 0;width: 100vw; height: 100vh; overflow: hidden;background-color: rgba(0,0,0,0.9);}
/** PDF: iFrame Content Setting **/
.pdf-content {margin: auto; display: block; width: 86%; height: 100vh;border: none;}
.pdf-close {color: white; position: absolute; top: 15px; right: 35px;font-size: 40px; font-weight: bold; cursor: pointer;}
/*****************************************************************
SingleXpress: Doubles
******************************************************************/
.doubleFont-header{font-size:34px;line-height:55px;margin-top:0px; margin-bottom:26px;}
.doubleFont-clamp{font-size: clamp(1.0625rem, 1.5000vw, 1.3125rem)}
.side-clamp{font-size: clamp(1.0625rem, 1.5000vw, 1.3125rem);line-height:29px;}
.xpress-TB01 {padding-top:2.5%;padding-bottom:2.5%;}
/************************************************************************************
Layout: Smart Home
*************************************************************************************/
.smartHome {display: flex; min-height: 100vh;}
/**MAIN Container**/
.smart-main {flex: 1 1 auto; max-width: 400px; margin: 0 auto; }
/**Expand: Outside the MAIN Container**/
.main-expand {width: 100vw; margin-left: calc(-50vw + 50%); padding: 20px; box-sizing: border-box; text-align: center;}
/**Outside of the MAIN Content**/
.smart-sidebar {display: none; flex: 1 0 300px; padding: 20px; position: sticky; top: 0; height: 100vh;}
.smart-footer {width: 100%; overflow-x: hidden;}

/* Subtle breathing animation */
@keyframes pulse-fade {0% {box-shadow:0 0 0 0 rgba(230, 0, 18, 0.5);} 70% {box-shadow:0 0 0 10px rgba(230, 0, 18, 0);} 100% {box-shadow:0 0 0 0 rgba(230, 0, 18, 0);}}
.lang-btn {position:fixed; display:inline-block; padding:0.6em 1em; font-size:1rem; font-weight:bold; border:2px solid #e60012; border-radius:6px; text-decoration:none; transition:all 0.3s ease; animation:pulse-fade 2s infinite ease-in-out;}
.lang-btn-red {color: #e60012; background-color: #fff;}
.lang-btn-red :hover { background-color: #e60012; color: white; transform: scale(1.05);}
.lang-btn-blue {color: #00509D; background-color: #fff;}
.lang-btn-blue :hover { background-color: #00509D; color: white; transform: scale(1.05);}
.scrolling-banner {position: fixed; top: 40%; right: -100%; white-space: nowrap; font-size: 6rem; font-weight: bold; color: rgba(0, 100, 0, 0.1); z-index: 1; animation: scroll-left 10s linear infinite; pointer-events: none;}
@keyframes scroll-left {from {transform: translateX(0);} to {transform: translateX(calc(-100vw - 100%));} }

/*****************************************************************
Forms: Inputs and Style
******************************************************************/
input[type="text"], input[type="number"], input[type="tel"] { font-size: 1rem; padding: 0.5rem; width: 100%; }
textarea { width: 100%; font-family: Arial, sans-serif; font-size: 1rem; padding: 0.5rem; resize: vertical; }
select { background-image: url(../../images/selectDown.png), linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); margin-top: 7px; margin-bottom: 7px; padding-top: 12px; padding-bottom: 12px; overflow: hidden; border: 1px solid #CCCCCC; border-radius: 5px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); padding-inline-end: 0; padding-inline-start: 15px; user-select: none; text-overflow: ellipsis; white-space: nowrap; background-position: 97% center; background-repeat: no-repeat; width: 100%; appearance: none; cursor: pointer; }
/** Inputs: No Spinner **/
input.no-spinner[type="number"]::-webkit-inner-spin-button, input.no-spinner[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input.no-spinner[type="number"] { -moz-appearance: textfield; }
ul.no-spinner input[type="number"]::-webkit-inner-spin-button, ul.no-spinner input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}
/**TextBoxes: Disabled State**/
input[disabled] {background-color: #E9ECEF;color: #6C757D;cursor: not-allowed;border:1px solid #CED4DA;}
/**Line Generator: Spin Toggle**/
.section-toggle {float: right;font-size: 1.2em;border: none; background: transparent;cursor: pointer;transition: transform 0.3s ease;color: var(--toggle-color, black);}
.section-toggle.rotate {transform: rotate(180deg);}

/************************************************************************************
SlideIt: Slideshows
*************************************************************************************/	
.swiper-container { width: 100%; margin: 0 auto; overflow: hidden; position: relative; }
.swiper-wrapper { display: flex; align-items: center; }
.swiper-slide { position: relative; width: 100%; height: auto; flex-shrink: 0; }
.slide-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 20px; font-weight: bold; background: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; }
.swiper-slide img { width: 100%; height: auto; object-fit: cover; display: block; }
.swiper-button-next, .swiper-button-prev { color: #ffffff; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(0, 0, 0, 0.5); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.swiper-button-prev { left: 10px; }
.swiper-button-next { right: 10px; }
.swiper-pagination-bullet-active { background: #ffffff; }
/*****************************************************************
Animations: Group
******************************************************************/
/**No-JavaScript Fallback**/
.no-js .group-fade p:not(.always-show), .no-js .group-fade li:not(.always-show), .no-js .group-flip p:not(.always-show), .no-js .group-flip li:not(.always-show), .no-js .group-moveUp p:not(.always-show), .no-js .group-moveUp li:not(.always-show), .no-js .group-slideL p:not(.always-show), .no-js .group-slideL li:not(.always-show), .no-js .group-slideR p:not(.always-show), .no-js .group-slideR li:not(.always-show) { opacity: 1; transform: none; }
/**Group: Fade**/
.group-fade p:not(.always-show), .group-fade li:not(.always-show) { opacity: 0; transition: opacity 2s ease; transition-delay: var(--delay, 0s); }
.group-fade p.always-show, .group-fade li.always-show { opacity: 1; }
.group-fade p.targetInsight, .group-fade li.targetInsight { opacity: 1; }
.group-fade.animation-delay p:nth-child(1), .group-fade.animation-delay li:nth-child(1) { --delay: 0s; }
.group-fade.animation-delay p:nth-child(2), .group-fade.animation-delay li:nth-child(2) { --delay: 2s; }
.group-fade.animation-delay p:nth-child(3), .group-fade.animation-delay li:nth-child(3) { --delay: 4s; }
.group-fade.animation-delay p:nth-child(4), .group-fade.animation-delay li:nth-child(4) { --delay: 6s; }
.group-fade.animation-delay p:nth-child(5), .group-fade.animation-delay li:nth-child(5) { --delay: 8s; }
/**Group: Flip**/
.group-flip p:not(.always-show), .group-flip li:not(.always-show) { opacity: 0; transform: rotateY(-180deg); transform-origin: center; transition: opacity 1s ease-in-out, transform 1s ease-in-out; transition-delay: var(--delay, 0s); }
.group-flip p.always-show, .group-flip li.always-show { opacity: 1; transform: none; }
.group-flip p.targetInsight, .group-flip li.targetInsight { opacity: 1; transform: rotateY(0deg); }
.group-flip.animation-delay p:nth-child(1), .group-flip.animation-delay li:nth-child(1) { --delay: 0s; }
.group-flip.animation-delay p:nth-child(2), .group-flip.animation-delay li:nth-child(2) { --delay: 5s; }
.group-flip.animation-delay p:nth-child(3), .group-flip.animation-delay li:nth-child(3) { --delay: 10s; }
.group-flip.animation-delay p:nth-child(4), .group-flip.animation-delay li:nth-child(4) { --delay: 15s; }
.group-flip.animation-delay p:nth-child(5), .group-flip.animation-delay li:nth-child(5) { --delay: 20s; }
/**Group: Move Up**/
.group-moveUp p:not(.always-show), .group-moveUp li:not(.always-show) { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; transition-delay: var(--delay, 0s); }
.group-moveUp p.always-show, .group-moveUp li.always-show { opacity: 1; transform: translateY(0); }
.group-moveUp p.targetInsight, .group-moveUp li.targetInsight { opacity: 1; transform: translateY(0); }
.group-moveUp.animation-delay p:nth-child(1), .group-moveUp.animation-delay li:nth-child(1) { --delay: 0s; }
.group-moveUp.animation-delay p:nth-child(2), .group-moveUp.animation-delay li:nth-child(2) { --delay: 2s; }
.group-moveUp.animation-delay p:nth-child(3), .group-moveUp.animation-delay li:nth-child(3) { --delay: 4s; }
.group-moveUp.animation-delay p:nth-child(4), .group-moveUp.animation-delay li:nth-child(4) { --delay: 6s; }
.group-moveUp.animation-delay p:nth-child(5), .group-moveUp.animation-delay li:nth-child(5) { --delay: 8s; }
/**Group: Slide Left**/
.group-slideL p:not(.always-show), .group-slideL li:not(.always-show) { opacity: 0; transform: translateX(-100%); transition: opacity 1s ease, transform 1s ease; transition-delay: var(--delay, 0s); }
.group-slideL p.always-show, .group-slideL li.always-show { opacity: 1; transform: translateX(0); }
.group-slideL p.targetInsight, .group-slideL li.targetInsight { opacity: 1; transform: translateX(0); }
.group-slideL.animation-delay p:nth-child(1), .group-slideL.animation-delay li:nth-child(1) { --delay: 0s; }
.group-slideL.animation-delay p:nth-child(2), .group-slideL.animation-delay li:nth-child(2) { --delay: 3s; }
.group-slideL.animation-delay p:nth-child(3), .group-slideL.animation-delay li:nth-child(3) { --delay: 6s; }
.group-slideL.animation-delay p:nth-child(4), .group-slideL.animation-delay li:nth-child(4) { --delay: 9s; }
.group-slideL.animation-delay p:nth-child(5), .group-slideL.animation-delay li:nth-child(5) { --delay: 12s; }
.group-slideL { overflow: hidden; }
/**Group: Slide Right**/
.group-slideR p:not(.always-show), .group-slideR li:not(.always-show) { opacity: 0; transform: translateX(100%); transition: opacity 1s ease, transform 1s ease; transition-delay: var(--delay, 0s); }
.group-slideR p.always-show, .group-slideR li.always-show { opacity: 1; transform: translateX(0); }
.group-slideR p.targetInsight, .group-slideR li.targetInsight { opacity: 1; transform: translateX(0); }
.group-slideR.animation-delay p:nth-child(1), .group-slideR.animation-delay li:nth-child(1) { --delay: 0s; }
.group-slideR.animation-delay p:nth-child(2), .group-slideR.animation-delay li:nth-child(2) { --delay: 3s; }
.group-slideR.animation-delay p:nth-child(3), .group-slideR.animation-delay li:nth-child(3) { --delay: 6s; }
.group-slideR.animation-delay p:nth-child(4), .group-slideR.animation-delay li:nth-child(4) { --delay: 9s; }
.group-slideR.animation-delay p:nth-child(5), .group-slideR.animation-delay li:nth-child(5) { --delay: 12s; }
.group-slideR { overflow: hidden; }