/*
Theme Name: Skelementor Child
Theme URI: https://wp-themes.com/skelementor
Author: ChildThemeWP.com
Author URI: https://childthemewp.com
Description: My WordPress Skelementor child theme.
Template: skelementor
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Version: 1.0.0
Text Domain: skelementor-child
*/

/*-------- DO NOT PUT STYLES HERE -------------*/
/*--------請將您的CSS寫在main.css的文件 ----------*/
/* 
.mask-wrapper {
  width: 100vw;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;

  --maskSize: 1000000px;

  -webkit-mask-image: url('https://lomacasa.globalsense.com.tw/wp-content/uploads/2025/07/CHI-SIAMO.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: var(--maskSize);

  mask-image: url('https://lomacasa.globalsense.com.tw/wp-content/uploads/2025/07/CHI-SIAMO.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--maskSize);
}

.masked-content {
  width: 100%;
  height: 100%;
  background: url('/wp-content/uploads/2025/07/007916-2.jpg') center/cover no-repeat;
}


.show {
    display: flex;
    flex-direction: column;
    align-items: center;
	padding-top: 30px;
}

.show .title {
    color: #FFF;
    text-align: center;
	margin: auto;
	display:flex;
	flex-direction: row;
}

.show p {
    color: #FFF;
    text-align: center;
    max-width: 600px;
	margin: 30px 0 30px 0;
}

[data-slide="1"] {
  position: relative; 
  z-index: 20; 
}

.projects {
    display: flex;
    justify-content: center;
    align-items: center;
}

.projects-img {
    height: 100vh;
}

.projects-img .img-track {
	width: 800px;
	height:auto;
	max-width:none!important;
	margin: 0 auto;
	display: flex;
	overflow: hidden;
}

.img-track img{
	object-fit: cover;
}

.img-track {
	display: flex;
	width: calc(100vw * 3);
	justify-content: flex-end;
}



.slider-container {
	height:100vh;
	width: 100%;
	max-width:100%;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}

.slide-show {
	height:100vh;
  display: flex;
  width: 100%;
  will-change: transform;
}

.slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  background: #eee;
  text-align: center;
  font-size: 24px;
  user-select: none;
}

.slide img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	position: absolute;
    bottom: 50px;
    right: 50%;
    transform: translateX(50%);
	align-items: flex-end;
}

.dot {
  width: 150px;
  height: 84px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease, border 0.3s ease;
  border: 2px solid white;
	position: relative;
}

.dot.active {
  opacity: 1;
}

.dot-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.dot.active .dot-overlay {
  opacity: 0;
}

.gsap-section {
  position: relative;
}

.slider-container-wrapper {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.proxy-trigger {
  position: absolute;
  top: 200vh;
  height: 1px;
}

.slider-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.next-section {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(0);
  box-sizing: border-box;
  padding: 2rem;
}


.next-section .content {
  max-width: 800px;
  text-align: center;
}
 */