/**
 * Content
 */

body {
	background-color: #fff;
	color: #000;
}

a:active {
	opacity: 0.7;
}

.page a.active {
	opacity: .4;
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 1em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(0, 0, 0, 0.15);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: .5em;
}

.gallery_image_caption {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	line-height: 1.3;	
}

/**
 * Loading Animation

 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.7rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.75);
	font-family: "Social Variable", Icons;
	font-style: normal;
	line-height: 1.3;
	font-variation-settings: 'wdth' 100, 'slnt' 0;
}

[data-predefined-style="true"] bodycopy a {
  
	color: rgba(0, 0, 0, 0.75);
	padding-bottom: 0.1em;
	text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {
color: #414274;
}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
	font-family: D-DIN, Icons;
	font-style: normal;
	font-weight: 700;
	padding: 0;
	margin: 0;
	font-size: 7.8rem;
	line-height: 0.9;
		color: #414274
	}

[data-predefined-style="true"] h1 a {
    border-bottom: 0em solid rgba(0, 0, 0, 0.75);
	color: rgba(0, 0, 0, 0.75);
}

[data-predefined-style="true"] h2 {
	font-family: "Social Variable", Icons;
	padding: 0;
	margin: 0;
	color: #414274;
	font-size: 2.4rem;
	line-height: 1.2;
	font-style: normal;
	font-weight: 400;
	font-variation-settings: 'wdth' 100, 'slnt' 0;
	}

[data-predefined-style="true"] h2 a {
    border-bottom: 0em solid rgba(0, 0, 0, 0.75);
	color: rgba(0, 0, 0, 0.85);
}

[data-predefined-style="true"] small {
 
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1.3;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif Bold", Icons;
	font-style: normal;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.75);
}

[data-predefined-style="true"] small a {
    border-bottom: 0em solid rgba(0, 0, 0, 0.75);
	color: rgba(0, 0, 0, 0.75);
}

/**
 * Breakpoints
 */


[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: auto /*!content_center*/;
	margin-right: auto /*!content_center*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] body {
	background-color: rgb(255, 255, 255) /*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 100% /*!content_center*/;
}

[data-css-preset] .content_padding {
	padding-top: 4.3rem /*!main_margin*/;
	padding-bottom: 4.3rem /*!main_margin*/;
	padding-left: 4.3rem /*!main_margin*/;
	padding-right: 4.3rem /*!main_margin*/;
}


[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: rgba(0, 0, 0, 0)/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 95%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 2.95rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -5.9rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 1.5rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -3rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 1px solid rgba(0,0,0,.12);
    outline-offset: -1px;
}

.thumbnails .title {
    margin-top: 1.7rem;
    margin-bottom: .3rem;
    font-size: 1.7rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.75);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, 'Sans Serif', Icons;
	font-style: normal;
	line-height: 1.1;
    text-align: left;
}

.thumbnails .tags {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 2.2rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: Quiosco, Icons;
	font-style: italic;
	line-height: 1.2;
    text-align: center;
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(0, 0, 0, 0.35);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: 0rem;
}

/**
 * Site Menu
 */

[data-css-preset] #site_menu_button {
    color: rgba(0, 0, 0, 0.75);
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding: 6px;
    line-height: 1;
    background: rgba(33, 32, 46, 0);
    position: fixed;
    top: 2rem /*!site_menu_button*/;
	right: 2rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
    font-size: 34px;
}

#site_menu_button.custom_icon {
	width: 40px;
    height: auto;
}

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 */

#site_menu {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	background: rgba(20, 20, 20, 0.95);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
	color: rgba(255, 255, 255, 0.75);
}

#site_menu .set-link > a {
	color: rgba(255, 255, 255, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
	opacity: .4;
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/*
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.75);
    background: transparent;
	font-size: 40px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	bottom: 3rem /*!shop_button*/;
	left: 3rem /*!shop_button*/;
}

#shop_button.text {
    font-family: Quiosco, Icons;
	font-style: normal;
	font-weight: 400;
	font-size: 3rem;
    padding: 0;
    line-height: 1.2;
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 46px;
}

/*
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 1.7rem;
    font-weight: 400;
	line-height: 1;
	color: rgba(0, 0, 0, 0.75);
    display: block;
    margin-bottom: 1rem;
}

.shop_product .dropdown {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-size: 1.7rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    background:  white url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 2.5rem .7rem 1rem;
}

.shop_product .button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 1.7rem;
    background: rgba(0, 0, 0, 0.75);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem .9rem;
}

/*
 * Image Zoom
 */

.content img.image-zoom:active {
	opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(255, 255, 255, 0.2) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1.3rem;
	font-style: normal;
	font-weight: 400;
    line-height: 1.3;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.4);
    color: white;
}


/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 1.5px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: transparent;
    stroke-width: 2.5px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 1.5px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: transparent;
    stroke-width: 2.5px;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
    stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}


/**
 * Feed
 */

.feed .content_container .page {
    border-bottom: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:last-child .page {
	border-bottom: 0;
}



/*
 * Audio Player
 */

.audio-player {
   max-width: 100px;
    height: 100px;
    outline: 2px solid rgba(255, 255, 255, 1);
  	border-radius: 50%;
    color: rgba(255, 255, 255, 1);
    background: transparent;
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
}
   

body.mobile .audio-player {
      max-width: 100px;
    height: 100px;
   
}

.audio-player .separator {
    width: 1px;
    background-color: transparent;
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(255, 255, 255, 1);
}

.audio-player .icon {
    fill: rgba(255, 255, 255, 1);
    padding: 15%;
    left: 0%;
    margin: auto;
    

}

.audio-player .buffer {
    background: transparent;
   
}

.audio-player .progress {
   background: transparent;
}

.audio-player .progress-indicator {
    border: 1px solid transparent;
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
     border-radius: 5px;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: transparent;
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}






/*
 * Archive Index Hover
 */

.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
    
}

.hover-image {
    visibility: hidden;
    
}

body:not(.mobile) .hover-title:hover + .hover-image {
    visibility: visible;
    pointer-events: none;
    
}

.hover-image {
    display: inline;
    position: inherit;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    

/* Change width and height to scale images */
    width: 90vw;
    height: 90vh;
    
}

.hover-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
   
}

.blue {
	position: fixed;
    background-color: #414274;
    height:800%;
    top: 0em; left: 0;
    z-index: -1; 
    opacity: 100%;
    width:33.3%;
}


.brown {
	position: fixed;
    background-color: #8f6b47;
    height:800%;
    top: 0em; left: 0;
    z-index: -1; 
    opacity: 100%;
    width:33.3%;
    left: 33.3%;
}

.collapsible {
  background-color: transparent;
  color: #f2e7dc;
  cursor: pointer;
  padding-bottom: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.7rem;
    line-height: 1.3;
    text-align: center;
}

.active, .collapsible:hover {
color: #8f6b47;
}

.workshopping {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  
}


.modal-iamge {
	scale: 100%;
    z-index: 50;
   position: relative;
filter: drop-shadow(5px 5px 5px #fff);
    
}

/* Modal styling */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0%;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(65, 66, 116, 0.45); /* Fallback color */
	
    
}

/* Modal Content */
.modal-content {
    background-color: transparent;
    margin: 8% auto; /* 15% from the top and centered */
    padding: 0px;
 	max-width: 30%;	
    font-size: 1.7rem;
	font-weight: 400;
	color: #fff;
	font-family: "Social Variable", Icons;
	font-style: normal;
	line-height: 1.3;
	font-variation-settings: 'wdth' 100, 'slnt' 0;

}

/* The Close Button */
.close {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
    z-index: 1000;
   

 
     
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.imghvr {
    display: inline;
}

.imghvr:hover {
opacity: 60%;
}

  .circle-button {
  	 width: 100px;
    height: 100px;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }

  /* Hover effect */
  .circle-button:hover {
    opacity: 0.5;
  }

  /* Inner lines styling */
  .circle-button .line {
  width: 60%;
    height: 2px;
    background-color: white;
    margin: 4px 0;
  }

.description-box {
	border: 2px solid;
    border-radius: 5px;
    border-color: #fff;
  
    background-color: rgba(255, 255, 255, 0.1);
}
 .mobile-warning {
      display: none;
    }

    /* Show on small screens (e.g., mobile) */
    @media (max-width: 768px) {
      .mobile-warning {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,0.8);
        color: white;
        justify-content: center;
        align-items: center;
        text-align: center;
        z-index: 9999;
        padding: 20px;
        box-sizing: border-box;
        font-family: Arial, sans-serif;
      }
    }

.layers {
    background-color: rgba(255, 255, 255, 0);
}

#layer1 {
	position: absolute;
    width: 6%;
    top: 13%;
    left: 30%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}



#layer2 {
	position: absolute;
    width: 6%;
    top: 80%;
    left: 36%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer3 {
	position: absolute;
    width: 6%;
    top: 25%;
    left: 15%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer4 {
	position: absolute;
    width: 6%;
    top: 32%;
    left: 36%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer5 {
	position: absolute;
    width: 6%;
    top: 40%;
    left: 23%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer6 {
	position: absolute;
    width: 6%;
    top: 59%;
    left: 27%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}



#layer7 {
	position: absolute;
    width: 6%;
    top: 70%;
    left: 13%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer8 {
	position: absolute;
    width: 6%;
    top: 70%;
    left: 30%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}


#layer9 {
	position: absolute;
    width: 6%;
    top: 80%;
    left: 10%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}



#layer10 {
	position: absolute;
    width: 6%;
    top: 30%;
    left: 10%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer11 {
	position: absolute;
    width: 6%;
    top: 30%;
    left: 45%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer12 {
	position: absolute;
    width: 6%;
    top: 60%;
    left: 35%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}

#layer13 {
	position: absolute;
    width: 6%;
    top: 10%;
    left: 50%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}



#layer14 {
	position: absolute;
    width: 6%;
    top: 30%;
    left: 55%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer15 {
	position: absolute;
    width: 6%;
    top: 28%;
    left: 65%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer16 {
	position: absolute;
    width: 6%;
    top: 40%;
    left: 40%;
    z-index: 1;
    scale: 50%;
   cursor: pointer;
}




#layer17 {
	position: absolute;
    width: 6%;
    top: 63%;
    left: 58%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer18 {
	position: absolute;
    width: 6%;
    top: 50%;
    left: 50%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}



#layer19 {
	position: absolute;
    width: 6%;
    top: 40%;
    left: 60%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer20 {
	position: absolute;
    width: 6%;
    top: 20%;
    left: 40%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}


#layer21 {
	position: absolute;
    width: 6%;
    top: 70%;
    left: 50%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}



#layer22 {
	position: absolute;
    width: 6%;
    top: 18%;
    left: 61%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer23 {
	position: absolute;
    width: 6%;
    top: 62%;
    left: 45%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer24 {
	position: absolute;
    width: 6%;
    top: 75%;
    left: 60%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}

#layer25 {
	position: absolute;
    width: 6%;
    top: 9%;
    left: 68%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}



#layer26 {
	position: absolute;
    width: 6%;
    top: 31%;
    left: 73%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer27 {
	position: absolute;
    width: 6%;
    top: 35%;
    left: 80%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer28 {
	position: absolute;
    width: 6%;
    top: 50%;
    left: 63%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer29 {
	position: absolute;
    width: 6%;
    top: 57%;
    left: 76%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer30 {
	position: absolute;
    width: 6%;
    top: 61%;
    left: 68%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}



#layer31 {
	position: absolute;
    width: 6%;
    top: 44%;
    left: 70%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer32 {
	position: absolute;
    width: 6%;
    top: 20%;
    left: 70%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}


#layer33 {
	position: absolute;
    width: 6%;
    top: 70%;
    left: 70%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}



#layer34 {
	position: absolute;
    width: 6%;
    top: 18%;
    left: 76%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer35 {
	position: absolute;
    width: 6%;
    top: 88%;
    left: 70%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}




#layer36 {
	position: absolute;
    width: 6%;
    top: 75%;
    left: 70%;
    z-index: -1;
    scale: 50%;
   cursor: pointer;
}

/* Live Image Assets */

#l1 {
	position: absolute;
    width: 100%;
   	top: -13%;
    left: -36%;
    z-index: -22;
    scale: 20%;
    cursor: pointer;
   
}


#l2-1 {
	position: absolute;
    width: 100%;
    top: 45%;
    left: -25%;
    z-index: -16;
    scale: 20%;
   cursor: pointer;
}



#l2-2 {
	position: absolute;
    width: 100%;
	top: 46%;
    left: -35%;
    z-index: -20;
    scale: 20%;
   cursor: pointer;
}



#l2-3 {
	position: absolute;
    width: 100%;
  	top: 18%;
    left: -38%;
    z-index: -21;
    scale: 19%;
   cursor: pointer;
}



#l2-4 {
	position: absolute;
    width: 100%;
 	top: -5%;
    left: 38%;
    z-index: -7;
    scale: 20%;
   cursor: pointer;
}



#l3-1 {
	position: absolute;
    width: 100%;
 	top: 15%;
    left: 40%;
    z-index: -6;
    scale: 15%;
   cursor: pointer;
}


#l3-2 {
	position: absolute;
    width: 100%;
  	top: -5%;
    left: -23%;
    z-index: -18;
    scale: 15%;
   cursor: pointer;
}


#l3-3 {
	position: absolute;
    width: 100%;
 	top: 38%;
    left: 35%;
    z-index: -5;
    scale: 16%;
   cursor: pointer;
}



#l4-1 {
	position: absolute;
    width: 100%;
   	top: 0%;
    left: 52%;
    z-index: -3;
    scale: 20%;
   cursor: pointer;
}



#l5-1 {
	position: absolute;
    width: 100%;
 	top: -15%;
    left: -10%;
    z-index: -19;
    scale: 15%;
   cursor: pointer;
}



#l5-2 {
	position: absolute;
    width: 100%;
 	top: 35%;
    left: 50%;
    z-index: -2;
    scale: 15%;
   cursor: pointer;
}



#l5-3 {
	position: absolute;
    width: 100%;
 	top: 22%;
    left: -9%;
    z-index: -15;
    scale: 22%;
   cursor: pointer;
}



#l6-1 {
	position: absolute;
    width: 100%;
 	top: -13%;
    left: 15%;
    z-index: -10;
    scale: 22%;
   cursor: pointer;
}


#l6-2 {
	position: absolute;
    width: 100%;
 	top: 23%;
    left: 10%;
    z-index: -11;
    scale: 18%;
   cursor: pointer;
}


#l7-1 {
	position: absolute;
    width: 100%;
 	top: 55%;
    left: -12%;
    z-index: -14;
    scale: 15%;
   cursor: pointer;
}



#l8-1 {
	position: absolute;
    width: 100%;
 	top: -15%;
    left: 48%;
    z-index: -4;
    scale: 15%;
   cursor: pointer;
}



#l9 {
	position: absolute;
    width: 100%;
 	top: 55%;
    left: 45%;
    z-index: -1;
    scale: 18%;
   cursor: pointer;
}



#l10 {
	position: absolute;
    width: 100%;
 	top: 18%;
    left: -25%;
    z-index: -17;
    scale: 20%;
   cursor: pointer;
}


#l11 {
	position: absolute;
    width: 100%;
 	top: 1%;
    left: 0%;
    z-index: -13;
    scale: 25%;
   cursor: pointer;
}



#l12 {
	position: absolute;
    width: 100%;
 	top: 15%;
    left: 25%;
    z-index: -9;
    scale: 28%;
   cursor: pointer;
}



#l13-1 {
	position: absolute;
    width: 100%;
 	top: 45%;
    left: 4%;
    z-index: -12;
    scale: 25%;
   cursor: pointer;
}


#l13-2 {
	position: absolute;
    width: 100%;
 	top: 50%;
    left: 25%;
    z-index: -8;
    scale: 25%;
   cursor: pointer;
}

/* process */

#p1 {
	position: absolute;
    width: 100%;
 	top: 71%;
    left: -19%;
    z-index: -17;
    scale: 55%;
    cursor: pointer;

  
   
}


#p2 {
	position: absolute;
    width: 100%;
 	top: -20%;
    left: -13%;
    z-index: -16;
    scale: 25%;
    cursor: pointer;
  
   
}


#p3-1 {
	position: absolute;
    width: 100%;
 	top: -15%;
    left: 48%;
    z-index: -4;
    scale: 25%;
    cursor: pointer;
 
   
}



#p3-2 {
	position: absolute;
    width: 100%;
 	top: 38%;
    left: 38%;
    z-index: -5;
    scale: 25%;
    cursor: pointer;

   
}



#p4-1 {
	position: absolute;
    width: 100%;
 	top: 22%;
    left: 4%;
    z-index: -11;
    scale: 25%;
cursor: pointer;
   
}



#p4-3 {
	position: absolute;
    width: 100%;
 	top: -10%;
    left: 18%;
    z-index: -9;
    scale: 25%;
cursor: pointer;
   
}



#p5-1 {
	position: absolute;
    width: 100%;
 	top: 45%;
    left: -18%;
    z-index: -14;
    scale: 25%;
cursor: pointer;
   
}



#p6-1 {
	position: absolute;
    width: 100%;
 	top: 17%;
    left: -38%;
    z-index: -18;
    scale: 25%;
 cursor: pointer;
}



#p6-2 {
	position: absolute;
    width: 100%;
 	top: 27%;
    left: 45%;
    z-index: -3;
    scale: 25%;
cursor: pointer;
   
}



#p7 {
	position: absolute;
    width: 100%;
 	top: -17%;
    left: 2%;
    z-index: -13;
    scale: 25%;
cursor: pointer;
   
}



#p8-1 {
	position: absolute;
    width: 100%;
 	top: 45%;
    left: 4%;
    z-index: -10;
    scale: 25%;
cursor: pointer;
}




#p8-2 {
	position: absolute;
    width: 100%;
 	top: -3%;
    left: 39%;
    z-index: -6;
    scale: 25%;
cursor: pointer;
   
}




#p8-3 {
	position: absolute;
    width: 100%;
 	top: -3%;
    left: -8%;
    z-index: -12;
    scale: 25%;
cursor: pointer;
   
}


#p8-4 {
	position: absolute;
    width: 100%;
 	top: 40%;
    left: 23%;
    z-index: -7;
    scale: 25%;
cursor: pointer;
   
}


#p9-1 {
	position: absolute;
    width: 100%;
 	top: -5%;
    left: -36%;
    z-index: -19;
    scale: 25%;
cursor: pointer;
   
}

#p9-2 {
	position: absolute;
    width: 100%;
 	top: 12%;
    left: 18%;
    z-index: -8;
    scale: 25%;
cursor: pointer; 
   
}



#p9-3 {
	position: absolute;
    width: 100%;
 	top: 23%;
    left: -18%;
    z-index: -17;
    scale: 25%;
cursor: pointer;  
   
}



/* store */

#s1-1 {
	position: absolute;
    width: 100%;
 	top: 10%;
    left: -30%;
    z-index: -16;
    scale: 28%;

  
   
}


#s1-2 {
	position: absolute;
    width: 100%;
 	top: -10%;
    left: 18%;
    z-index: -7;
    scale: 25%;
  
   
}


#s2-1 {
	position: absolute;
    width: 100%;
 	top: 43%;
    left: -14%;
    z-index: -11;
    scale: 25%;
 
   
}



#s2-2 {
	position: absolute;
    width: 100%;
 	top: 15%;
    left: 46%;
    z-index: -2;
    scale: 25%;
    

   
}



#s3 {
	position: absolute;
    width: 100%;
 	top: 32%;
    left: 30%;
    z-index: -5;
    scale: 25%;

   
}



#s4-1 {
	position: absolute;
    width: 100%;
 	top: 44%;
    left: 13%;
    z-index: -8;
    scale: 25%;

   
}



#s4-2 {
	position: absolute;
    width: 100%;
 	top: -18%;
    left: -22%;
    z-index: -14;
    scale: 25%;

   
}



#s4-3 {
	position: absolute;
    width: 100%;
 	top: -5%;
    left: 48%;
    z-index: -3;
    scale: 25%;
 
}



#s5-1 {
	position: absolute;
    width: 100%;
 	top: 6%;
    left: -18%;
    z-index: -13;
    scale: 25%;

   
}



#s5-2 {
	position: absolute;
    width: 100%;
 	top: -10%;
    left: -35%;
    z-index: -17;
    scale: 27%;

   
}



#s6-1 {
	position: absolute;
    width: 100%;
 	top: 40%;
    left: -38%;
    z-index: -15;
    scale: 25%;

}




#s6-2 {
	position: absolute;
    width: 100%;
 	top: 44%;
    left: 52%;
    z-index: -1;
    scale: 30%;

   
}




#s7-1 {
	position: absolute;
    width: 100%;
 	top: 20%;
    left: 10%;
    z-index: -9;
    scale: 26%;

   
}


#s7-2 {
	position: absolute;
    width: 100%;
 	top: -10%;
    left: 4%;
    z-index: -10;
    scale: 30%;

   
}


#s8-1 {
	position: absolute;
    width: 100%;
 	top: 27%;
    left: -12%;
    z-index: -12;
    scale: 27%;

   
}

#s8-2 {
	position: absolute;
    width: 100%;
 	top: 13%;
    left: 31%;
    z-index: -6;
    scale: 28%;
 
   
}



#s9-1{
	position: absolute;
    width: 100%;
 	top: -13%;
    left: 38%;
    z-index: -4;
    scale: 28%;
  
   
}

 /* Container holding all three sections */
  .three-column-scroll {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Prevent page scrolling */
  }

  /* Each column */
  .column {
    flex: 1;
    height: 100%;
    overflow-y: scroll;
    scroll-behavior: smooth;
    padding: 20px;
    box-sizing: border-box;
  }

  /* Optional: Add some visual separation */
  .column:nth-child(1) {
    background: #414274;
  }

  .column:nth-child(2) {
    background: #8f6b47;
  }

  .column:nth-child(3) {
    background: #f2e7dc;
  }

  /* Hide scrollbars (optional aesthetic) */
  .column::-webkit-scrollbar {
    width: 8px;
  }

  .column::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }

  /* 🔁 Responsive: stack columns on small screens */
  @media (max-width: 768px) {
    .three-column-scroll {
      flex-direction: column;
      height: auto;
    }

    .column {
      height: 100vh; /* Keep scroll per column even when stacked */
    }
  }