html, body{
overflow-x:hidden;
}

/* ===============================
SECTION BASE
=============================== */

section[data-module="halodental"]{
position:relative;
width:100%;
background-color:rgb(250,250,250);
padding:120px 0 140px;
overflow-x:hidden;
overflow-y:visible;
}


section[data-module="halodental"] .slider-controls{
z-index:5;
}

section[data-module="halodental"] .halodental-layout{

display:flex;

align-items:flex-start;

gap:120px;

padding-left:120px;
padding-right:0;

}


/* 左边内容 */

section[data-module="halodental"] .service-intro{

width:440px;

flex-shrink:0;

}


/* 右边 slider */

section[data-module="halodental"] .slider-wrapper{
flex:1;
min-width:0;
max-width:100%;
overflow:hidden;
}

section[data-module="halodental"] .card-content{
display:block;
}

section[data-module="halodental"] .card-readmore{

margin-top:16px;

background:none;
border:none;

color:#B0714C;
font-size:14px;
font-weight:600;

cursor:pointer;

}

section[data-module="halodental"] .card-readmore:hover{
text-decoration:underline;
}


/* ===============================
INTRO TEXT
=============================== */



section[data-module="halodental"] .service-intro p{

margin:16px 0;
line-height:1.7;

}


/* ===============================
TITLE
=============================== */

section[data-module="halodental"] .hero-title{

font-family:Montserrat, sans-serif;
font-weight:600;
font-size:40px;
line-height:1.2;
letter-spacing:.02em;

color:#111;

margin-bottom:30px;

}


/* ===============================
SLIDER
=============================== */

section[data-module="halodental"] .slider{
display:flex;
gap:32px;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
padding-right:20px;
-webkit-overflow-scrolling:touch;
touch-action:pan-x;
overscroll-behavior-x:contain;
cursor:grab;
scroll-snap-type:x mandatory;
}

section[data-module="halodental"] .slider::-webkit-scrollbar{
display:none;
}

section[data-module="halodental"] .slider.dragging{
cursor:grabbing;
user-select:none;
}

section[data-module="halodental"] .slide-card{
scroll-snap-align:start;
}

/* ===============================
CARD
=============================== */

section[data-module="halodental"] .slide-card{

position:relative;

width:500px;
height:auto;

flex:0 0 auto;

background:rgb(235, 228, 224);

border-radius:18px;

padding:50px 40px 40px;

display:flex;
flex-direction:column;

color:#111;


transition:all .35s ease;


}

section[data-module="halodental"] .slide-card:hover{

transform:translateY(-8px);


}


/* ===============================
CARD NUMBER
=============================== */

section[data-module="halodental"] .card-number{

font-family:Montserrat, sans-serif;
font-weight:700;

font-size:48px;
line-height:1;

color:#B0714C;

margin-bottom:18px;

}


/* ===============================
CARD TITLE
=============================== */

section[data-module="halodental"] .card-title{

font-family:Montserrat, sans-serif;
font-weight:600;

font-size:22px;
line-height:1.35;

margin-bottom:12px;

color:#111;

}


/* ===============================
CARD SUBTITLE
=============================== */

section[data-module="halodental"] .card-subtitle{

font-family:Montserrat, sans-serif;

font-size:15px;
line-height:1.6;

color:#666;

margin-bottom:22px;

}


/* ===============================
CARD DIVIDER
=============================== */

section[data-module="halodental"] .card-divider{

width:46px;
height:2px;

background:#B0714C;

margin-bottom:24px;

opacity:.7;

}


/* ===============================
CARD LIST
=============================== */

section[data-module="halodental"] .card-list{

list-style:none;
padding:0;
margin:0;

display:flex;
flex-direction:column;

gap:10px;

}

section[data-module="halodental"] .card-list li{

font-size:14px;
line-height:1.6;

color:#333;

padding-left:16px;

position:relative;

}

section[data-module="halodental"] .card-list li:before{

content:"";

width:6px;
height:6px;

background:#B0714C;

border-radius:50%;

position:absolute;

left:0;
top:9px;

}


/* ===============================
CARD ARROW
=============================== */

section[data-module="halodental"] .card-arrow{

position:absolute;

top:30px;
right:30px;

opacity:.4;

transition:.3s;

}

section[data-module="halodental"] .slide-card:hover .card-arrow{

opacity:1;

transform:translate(6px,-4px) rotate(-35deg);

}


/* ===============================
SLIDER CONTROLS
=============================== */

section[data-module="halodental"] .slider-controls{

position:absolute;

bottom:80px;
left:120px;

display:flex;
gap:12px;

}


/* ===============================
BUTTON
=============================== */

/* 默认按钮 */
section[data-module="halodental"] .btn-arrow{

width:42px;
height:42px;

border:none;
cursor:pointer;

border-radius:50%;

background-color:#d8d8d8;

background-repeat:no-repeat;
background-position:center;
background-size:18px;

transition:all .25s ease;

}


/* 左按钮 */
section[data-module="halodental"] .btn-arrow.prev{

background-image:url("/wp-content/uploads/2026/03/271220.png");

}


/* 右按钮 */
section[data-module="halodental"] .btn-arrow.next{

background-image:url("/wp-content/uploads/2026/03/271228.png");

}


/* active */
section[data-module="halodental"] .btn-arrow:not(:disabled){

background-color:#B0714C;

}


/* hover */
section[data-module="halodental"] .btn-arrow:not(:disabled):hover{

background-color:#7C4A33;
transform:translateY(-3px);

}


/* disabled */
section[data-module="halodental"] .btn-arrow:disabled{

opacity:.35;
cursor:default;

}



/* ===============================
MOBILE
=============================== */

@media (max-width:768px){

section[data-module="halodental"]{
padding:70px 20px 90px;
}

section[data-module="halodental"] .halodental-layout{
flex-direction:column;
gap:40px;
padding-left:0;
}

section[data-module="halodental"] .service-intro{
width:100%;
}

section[data-module="halodental"] .hero-title{
font-size:30px;
}

section[data-module="halodental"] .slide-card{
width:85vw;
max-width:500px;
}

section[data-module="halodental"] .slider-wrapper{
flex:1;
min-width:0;
max-width:100%;
overflow:hidden;
}

section[data-module="halodental"] .slide-card:hover{
transform:none;
}

section[data-module="halodental"] .slider-controls{
left:20px;
bottom:30px;
z-index:5;
position:absolute;
}

}