@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800;900&family=Montserrat:wght@800;900&display=swap');

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden !important;
}
p{
  font-family: "Poppins", serif !important;
}

/* HullGuard Title Styling - updated styles */

/* Ensure header container has proper height */
header.bg-hero .container.h-100 {
  height: 100vh !important;
  min-height: 100vh !important;
  position: relative !important;
}

header.bg-hero .row.h-100 {
  height: 100% !important;
  min-height: 100vh !important;
  position: relative !important;
}

header.bg-hero .col-lg-12 {
  height: 100% !important;
  min-height: 100vh !important;
  position: relative !important;
}

/* Remove any margins from container elements */
header.bg-hero .container,
header.bg-hero .row,
header.bg-hero .col-lg-12 {
  margin: 0 !important;
  padding: 0 !important;
}

header.bg-hero {
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove box/border around header image */
header.bg-hero img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

header.bg-hero #hero-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  position: absolute !important;
  top: 15% !important;
  left: 10% !important;
  transform: none !important;
  z-index: 100 !important;
  width: auto !important;
  max-width: 80% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: inherit !important;
  font-weight: normal !important;
  color: transparent !important; /* Make h1 text transparent, let spans show */
  pointer-events: none !important;
}

header.bg-hero #hero-title .hullguard-title,
header.bg-hero #hero-title .hullguard-subtitle {
  pointer-events: auto !important;
}

header.bg-hero #hero-title .hullguard-title {
  font-family: 'Nunito', 'Montserrat', 'Poppins', sans-serif !important;
  font-size: clamp(72px, 12vw, 180px) !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  /* Single color shading effect - more layers, thicker shadows offset bottom-left */
  text-shadow: 
    -2px 2px 0 #1a3d73,
    -3px 3px 0 #1a3d73,
    -4px 4px 0 #1a3d73,
    -5px 5px 0 #1a3d73,
    -6px 6px 0 #1a3d73,
    -7px 7px 0 #1a3d73,
    -8px 8px 0 #1a3d73,
    -9px 9px 0 #1a3d73 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 20px !important;
  line-height: 1.1 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 101 !important;
  white-space: nowrap !important;
  text-align: left !important;
}

header.bg-hero #hero-title .hullguard-subtitle {
  font-family: 'Nunito', 'Montserrat', 'Poppins', sans-serif !important;
  font-size: clamp(24px, 4vw, 48px) !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  /* Single color shading effect - more layers, thicker shadows offset bottom-left */
  text-shadow: 
    -1px 1px 0 #1a3d73,
    -2px 2px 0 #1a3d73,
    -3px 3px 0 #1a3d73,
    -4px 4px 0 #1a3d73,
    -5px 5px 0 #1a3d73,
    -6px 6px 0 #1a3d73 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
  max-width: 90% !important;
  margin: 0 0 0 20px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 101 !important;
  white-space: normal !important;
  text-align: left !important;
}

/* Remove box/border around header image */
header.bg-hero img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

header.bg-hero {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

header.bg-hero .container,
header.bg-hero .row,
header.bg-hero .col-lg-12 {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.zi {
  position: relative;
    margin-top: 10vh;
    width: 90%; 
    max-width: 50vw; 
    overflow: visible; 
    color: #293B76;
    text-align: center;
    font-family: "Poppins", serif !important;
    /*transform: translateX(-50px);
  transition: opacity 0.5s ease, transform 0.5s ease;*/
}


.secs{
    position: relative;
    width:100vw;
    overflow: visible; 
    left: 50%;
  transform: translateX(-50%);

}
.bjt{
    width: 100%;
    height: auto;
    display: block;
    z-index: -9999;
}
.diany{
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 90vw;
    overflow: hidden;
}
.secs img{
    width: 100%;
    height: auto;
    display: block;
}
.zi2{
    position: absolute; 
    justify-content: center;
    top: 13%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 90vw;
    /*transform: translateX(50px);
  transition: opacity 0.5s ease, transform 0.5s ease;*/
}
.chuanchuan{
    position: absolute;
    top: -10vh;    
    right: -20vw; 
    width:100%; 
    max-width: 50vw;
    animation: swing 2s infinite ease-in-out;
}
@keyframes swing {
    0%   { transform: rotate(-8deg); }
    50%  { transform: rotate(8deg); }
    100% { transform: rotate(-8deg); }
}
.zi3{
    color: #CCD7F9;
    position:absolute;
    left: 50%;
    top: 22%;
    transform: translate(-50%, -50%);
    text-align: center;
    /*transform: translateX(-50px);
  transition: opacity 0.5s ease, transform 0.5s ease;*/
}
.title {
    text-align: center;  
    margin-bottom: 10px; 
  }

  .biofouling {
    position: absolute;
    width: 100%;
    max-width: 60vw;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
  }
  .ttitle{
    position:absolute;
   
    max-width: 45vw;
    top: 31.7%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
  }
  .biofouling img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    animation: flash 2s infinite ease-in-out;
  }
  
  /* th 和 att 同步显示 */
  .biofouling .th,
  .biofouling .att {
    animation-delay: 0s;
  }
  
  /* thb 和 attb 同步显示 */
  .biofouling .thb,
  .biofouling .attb {
    animation-delay: 1s;
  }
  
  @keyframes flash {
    0%, 45% { opacity: 1; }
    50%, 95% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  .biofouling h1 {
    padding-top:50%;
    position: relative; /* 保证文字在图片上方 */
    z-index: 10;
    font-weight: bold;
    color: white;
  }
  
.zi4{
  position:absolute;
  top:38%;
  max-width:28vw;
  width: 100%;
  height:auto;
  color:white;
  left:63%;
  z-index:10;
 /*transform: translateX(-50px);
  transition: opacity 0.5s ease, transform 0.5s ease;*/
}

.bg-part {
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.bg-part.visible {
    opacity: 1;
    transform: translateY(0);
}
.stext img{
    position: absolute;
    height: 100%;
    width: auto;
    top: 0;
    left: 0;
}
.pic img{
    position: absolute;
    height: 100%;
    width: auto;
    top: 0;
    right: 0;
}
.laotou img{
    position: absolute;
    height: 100%;
    width: auto;
    bottom: 0;
    left: 0;
}

.tirs{

    position: relative;
    overflow: hidden;
    width: 100vw;
    aspect-ratio: 4/5;
    left:50%;
    transform: translateX(-50%);


}
.waves{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    animation: moveWaves 10s linear infinite;
}
.waves:nth-child(2) {
  left: 100%;
}
.tirs img{
    position: absolute;
    width: 100%;
    height: auto;
    display: block;
    top: 0;
    left: 0;

}
.tirr{
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.tirl{
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.tirr.visible{
    opacity: 1;
    transform: translateX(0);
}
.tirl.visible{
    opacity: 1;
    transform: translateX(0);
}
.fifs{
    position: relative;
    overflow: hidden;
    width: 100vw;
    aspect-ratio: 11/10;
    left:50%;
    transform: translateX(-50%);
}
.fifs img{
    position: absolute;
    width: 100%;
    height: auto;
    display: block;
    top: 0;
    left: 0;

}
.fis1{
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.fis2{
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.txt{
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    width: 100%;
    max-width:100vw;
    height: auto;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.fis1.visible{
    opacity: 1;
    transform: translateX(0);
}
.fis2.visible{
    opacity: 1;
    transform: translateX(0);
}
.txt.visible{
    opacity: 1;
    transform: translateY(0);
}
.sixs{
    position: relative;
    overflow: hidden;
    width: 100vw;
    aspect-ratio: 0.669/1;
    left:50%;
    transform: translateX(-50%);
}
.sixs img{
    position: absolute;
    width: 100%;
    height: auto;
    display: block;
    top: 0;
    left: 0;

}
.zi6{
  position:absolute;
  top:5%;
  width: 90%;
  max-width: 40vw;
  left:2%;
  color:#101D44;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  transform: translateX(-50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  border-radius: 10px;
  text-align: center;
}
.zi7{
  position:absolute;
  top:35%;
  width: 100%;
  max-width: 40vw;
  left:54%;
  color:#101D44;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  transform: translateX(50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  border-radius: 10px;
  text-align: center;
}
.zi8{
  position:absolute;
  top:65%;
  width: 100%;
  max-width: 40vw;
  left:10%;
  color:#101D44;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  transform: translateX(-50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  border-radius: 10px;
  text-align: center;
}
.sevs{
    position: relative;
    overflow: visible;
    width: 100%;
    max-width:90vw;
    aspect-ratio: 1.37/1;
}
.sevs img{
    position: absolute;
    width: 100%;
    height: auto;
    display: block;
    top: 0;
    left: 0;

}
.zi9{
  transform: translate(-50%, -50%);
  position:absolute;
  width: 100%;
  max-width: 40vw;
  left:-70%;
  color:#101D44;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  transform: translateX(-50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  border-radius: 10px;
  text-align: center;
}

.zi10{
  position:absolute;
  top:60%;
  width: 100%;
  max-width: 40vw;
  left:100%;
  color:#101D44;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  transform: translateX(50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  border-radius: 10px;
  text-align: center;
}

.img-inset {
  border-radius: 12px;
  box-shadow: 
    inset 4px 4px 10px rgba(0, 0, 0, 0.2),   /* 右下暗影 */
    inset -4px -4px 10px rgba(255, 255, 255, 0.5); /* 左上高光 */
}
@keyframes moveWaves {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}


:root { --r: 80px; /* 圆半径，修改此处调整大小 */ }

  .mask {
    transform: translate(-50%, -50%);
    left: 50%; 
    position:absolute;
    top: 47%;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans CJK", "Helvetica Neue", Arial;
    display:flex;
    gap:1rem;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    margin:0;
    background:transparent;
    color:#eee;
  }

  /* 容器 */
  .img-wrap {
    --cx: 120px;
    --cy: 120px;
    --r: var(--r);
    --d: 160px; /* 直径，下面 JS 会在初始化时同步为 --r*2 */
    position:relative;
    width:80vw;       
    max-width:90vw;
    aspect-ratio: 16/9; /* 保持宽高比，或改成具体高度 */
    overflow:hidden;
    touch-action:none; /* 重要：让 pointer 事件工作良好（阻止默认滚动） */
    user-select:none;
    border-radius:6px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  }

  /* 两张图上下叠放，完全填充容器 */
  .img-wrap img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    pointer-events:none; /* 让拖拽事件落到容器/把手上 */
  }

  /* 上层图片：用 mask 做“透明圆窗”显示下层图 */
  .img-wrap .top {
    /* 标准 */
    mask-image: radial-gradient(circle var(--r) at var(--cx) var(--cy),
                                transparent 0,
                                transparent calc(var(--r) - 1px),
                                black calc(var(--r) + 1px));
    mask-mode: alpha;
    mask-repeat: no-repeat;
    /* Safari / older WebKit */
    -webkit-mask-image: radial-gradient(circle var(--r) at var(--cx) var(--cy),
                                       transparent 0,
                                       transparent calc(var(--r) - 1px),
                                       black calc(var(--r) + 1px));
    -webkit-mask-repeat: no-repeat;
  }

  /* 可视化的把手（在上层之上）*/

.handle {
  position:absolute;
  left: var(--cx);
  top: var(--cy);

  width: var(--d);
  height: var(--d);
  transform: translate(-50%,-50%);
  border-radius:50%;
  box-sizing: border-box;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 4px 14px rgba(0,0,0,0.6), inset 0 2px 8px rgba(255,255,255,0.03);
  backdrop-filter: blur(2px);
  cursor: grab;
  touch-action: none;
  z-index: 5;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15));
}
.handle:active { cursor:grabbing; }


  /* 小提示文字（可选） 
  .hint {
    position: absolute;
    right:12px;
    bottom:10px;
    background: rgba(0,0,0,0.45);
    padding:6px 10px;
    border-radius:6px;
    font-size:13px;
    color:#ddd;
    z-index:10;
  }

  /* 适应小屏 */
  @media (max-width:520px){
    :root { --r: 56px; }
  }


  .zhuan {
    position:absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80vw;
    height: auto;
    background: transparent;
    margin: 0;
  }
  .carousel {
    position: relative;
    width: 70vw;
    height: 85vh;
    perspective: 1000px;
  }
  .card {
        position: absolute;
        width: 60%;
        height: 100%;
        top: 0;
        left: 20%;
        background: #CCD7F9;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        flex-direction: column;
        display: flex;
        justify-content: center;   /* 水平居中 */
        align-items: flex-start;   /* 顶部对齐 */
        padding: 20px;             /* 与边缘保持距离 */
        gap: 20px;
        font-size: 24px;
        font-weight: bold;
      
        transition: transform 0.6s ease, opacity 0.6s ease;
        cursor: pointer;
  }
  .cardimg{
    width: 80%;                
    height: auto;              
    border-radius: 5px;       
    object-fit: contain;       
    margin-top: 10px;          
  }
  /* 初始位置 */
  .left {
    transform: translateX(-70%) scale(0.8);
    z-index: 1;
    opacity: 0.7;
  }
  .center {
    transform: translateX(0) scale(1);
    z-index: 2;
    opacity: 1;
  }
  .right {
    transform: translateX(70%) scale(0.8);
    z-index: 1;
    opacity: 0.7;
  }



.stats-section {
  position:absolute;
  top:60%;
  left:55%;
  width: 100%;
  max-width:45vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  color: white;
  font-family: sans-serif;
  z-index: 2;
}

.chart {
  width: 300px;
  height: 200px;
  position: relative;
}
.axis {
  stroke: white;
  stroke-width: 1.5;
}
/* SVG 线条初始隐藏 */
.line1, .line2 {
  stroke: white;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.5s ease-out;
}

.chart.active .line1,
.chart.active .line2 {
  stroke-dashoffset: 0;
}

.label {
  font-size: 12px;
  fill: white;
}

.axis-label {
  font-size: 10px;
  fill: white;
}

.zi5{
  position:absolute;
  top:63%;
  left:5%;
  max-width:90vw;
  width: 100%;
  color:white;
}
.zi5 img { 
  position: absolute; width: 40%; /* 每张图宽度占父容器的约一半，留出间距 */ 
  height:auto; object-fit: cover; 
  border-radius: 8px; /* 可选，让边角柔和一点 */ 
}
  
 /* 不改变定位/尺寸，仅控制动画用的透明度与 transform */
.zi5 img.fall-setup {
  /* 不设置 width/top/left/bottom/right/max-width 等 */
  opacity: 0;
  transform: translateY(-110px) translateZ(0);
  will-change: transform, opacity;
}

/* 最终静止状态（不改变尺寸）*/
.zi5 img.fall-in {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  transition: opacity 180ms linear;
}

/*
@keyframes zi5-fall-bounce {
  0% {
    transform: translateY(-180px) scale(1.02); 
    opacity: 0.6; 
    filter: brightness(1.1);
  }
  25% {
    opacity: 1;
    transform: translateY(-40px) scale(1.01);
    filter: brightness(1.05);
  }
  70% {
    transform: translateY(20px) scale(0.99);
    filter: brightness(0.95);
  }
  85% {
    transform: translateY(-8px) scale(1.005);
    filter: brightness(1);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: none;
  }
}
*/
/* 应用动画 */
.zi5 img.fall-in-anim {
  animation: zi5-fall-bounce 1s cubic-bezier(0.25, 1.4, 0.35, 1) forwards;
}



/* 第2行左 */
.d40g {
  top: 15vh;
  left: 0;
}

/* 第2行右 */
.i60 {
  top: 15vh;
  right: 4vw;
}

/* 第1行左 */
.d40 {
  bottom: 0;
  left: 4vw;
}

/* 第1行右 */
.i60g {
  bottom: 0;
  right: 0;
}

/* 控制行间距（上下之间的空隙） */
.zi5 {
  padding: 2%; /* 可微调，制造中间留白 */
}

/* 容器：水平并排，五等分 */
.end .button-row{
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.end-button{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  padding: 14px;
  flex: 0 0 160px; /* 固定宽度，保证不会被压缩 */
  text-align: center;
  color: #101D44;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.end-button-img{
  width: auto;
  height: 80px;
  object-fit: contain;
  margin-bottom: 12px;
}

.end-button-label{
  font-size: 18px;
  font-weight: 600;
}

.end-button:hover{
  transform: scale(1.03);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

  .end .button-row .card{
    flex: 0 1 calc(50% - 16px);
    margin-bottom: 12px;
  }

.hug{
  width:100%;
  height:auto;
  max-width:100vw;
}

#corner-img {
  position: absolute;
  width: 17vw;
  top:48.5%;
  left:80vw;
  height:auto;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 11;
}