/* ABOUT */
.about{position:relative;padding:65px 0!important;background:#fff;overflow:hidden}
.about .container{position:relative;z-index:5}
.about-layout{display:grid;grid-template-columns:46% 54%;align-items:center;gap:50px;max-width:1150px;margin:auto}

/* HOMESTAY TEXTURE */
.about-particles{position:absolute;inset:0;z-index:1;display:block;pointer-events:none;overflow:hidden}
.about-particles:before{content:"⌂  ❧  ⌂  ❧  ⌂";position:absolute;top:35px;right:-25px;width:450px;height:180px;color:rgba(14,118,88,.065);font-family:Georgia,"Times New Roman",serif;font-size:50px;letter-spacing:22px;line-height:1.8;white-space:normal;transform:rotate(-8deg);animation:homestayTexture 14s ease-in-out infinite}
.about-particles:after{content:"";position:absolute;left:-80px;bottom:-80px;width:620px;height:270px;opacity:.8;background:linear-gradient(135deg,transparent 49%,rgba(14,118,88,.055) 50%,transparent 51%),linear-gradient(35deg,transparent 49%,rgba(217,134,24,.045) 50%,transparent 51%);background-size:110px 75px,150px 95px;transform:rotate(-5deg);animation:homestayLandscape 18s ease-in-out infinite}

/* SOFT SUN */
.about .container:before{content:"";position:absolute;top:-70px;right:60px;width:190px;height:190px;border:1px solid rgba(240,160,68,.07);border-radius:50%;box-shadow:0 0 0 18px rgba(240,160,68,.018),0 0 0 38px rgba(240,160,68,.012);pointer-events:none;z-index:-1}

/* LEAF DETAIL */
.about-content:before{content:"";position:absolute;right:20px;bottom:5px;width:90px;height:145px;border:1px solid rgba(14,118,88,.065);border-radius:100% 0 100% 0;transform:rotate(35deg);pointer-events:none;z-index:-1}

/* SOFT GLOW */
.about:before{content:"";position:absolute;top:-170px;right:-120px;width:400px;height:400px;background:radial-gradient(circle,rgba(99,201,161,.12) 0%,rgba(99,201,161,.05) 40%,transparent 72%);border-radius:50%;pointer-events:none}
.about:after{content:"";position:absolute;bottom:-180px;left:-130px;width:420px;height:420px;background:radial-gradient(circle,rgba(240,160,68,.09) 0%,rgba(240,160,68,.035) 42%,transparent 72%);border-radius:50%;pointer-events:none}

/* ANIMATION */
@keyframes homestayTexture{
0%,100%{transform:rotate(-8deg) translate(0,0)}
50%{transform:rotate(-5deg) translate(-15px,10px)}
}
@keyframes homestayLandscape{
0%,100%{transform:rotate(-5deg) translateX(0)}
50%{transform:rotate(-3deg) translateX(25px)}
}

/* IMAGE */
.about-visual{position:relative;padding:0 20px 20px 0}
.about-image{position:relative;height:400px;overflow:hidden;background:#edf3ef;z-index:2;box-shadow:0 14px 32px rgba(25,65,45,.10)}
.about-image img{width:100%;height:100%;display:block;object-fit:cover;transition:.7s ease}
.about-visual:hover .about-image img{transform:scale(1.03)}
.about-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(10,40,27,.16));pointer-events:none}
.about-secondary{position:absolute;right:0;bottom:0;width:145px;height:120px;overflow:hidden;background:#fff;border:6px solid #fff;box-shadow:0 10px 25px rgba(25,65,45,.13);z-index:4}
.about-secondary img{width:100%;height:100%;object-fit:cover}
.about-image-label{position:absolute;left:18px;bottom:18px;z-index:5;display:flex;align-items:center;gap:9px;padding:9px 12px;background:#fff;box-shadow:0 7px 18px rgba(20,55,40,.11)}
.about-image-label>i{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#fff;background:#0e7658;font-size:13px}
.about-image-label strong{display:block;color:#173e30;font-size:10px;font-weight:800}
.about-image-label span{display:block;margin-top:2px;color:#78837e;font-size:8px}

/* CONTENT */
.about-content{position:relative;padding:3px 0}
.about-subtitle{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;color:#d87913;font-size:10px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase}
.about-subtitle i{color:#0e7658;font-size:11px}
.about-title{max-width:650px;margin:0 0 14px;color:#173e30;font-family:Georgia,"Times New Roman",serif;font-size:clamp(40px,4vw,55px);font-weight:700;line-height:1.06;letter-spacing:-1.1px}
.about-description{max-width:590px;margin-bottom:18px;color:#56665f;font-size:12px;line-height:1.8}
.about-description p{margin-bottom:8px}
.about-description p:last-child{margin-bottom:0}

/* FEATURES */
.about-features{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 22px;margin-bottom:20px}
.about-feature{display:flex;align-items:center;gap:8px;color:#344c42;font-size:10px;font-weight:650;transition:transform .3s ease}
.about-feature:hover{transform:translateX(4px)}
.about-feature-icon{width:27px;height:27px;flex:0 0 27px;display:flex;align-items:center;justify-content:center;color:#0e7658;background:#edf7f2;font-size:11px;transition:.3s ease}
.about-feature:hover .about-feature-icon{transform:translateY(-2px)}
.about-feature:nth-child(2n) .about-feature-icon{color:#d98218;background:#fff5e6}
.about-feature:nth-child(3n) .about-feature-icon{color:#317da3;background:#edf6fa}

/* BUTTONS */
.about-actions{display:flex;align-items:center;gap:8px}
.about-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:37px;padding:8px 15px;border:1px solid;text-decoration:none;font-size:10px;font-weight:750;transition:.3s ease}
.about-btn i{font-size:11px}
.about-btn-primary{color:#fff;background:#0e7658;border-color:#0e7658;box-shadow:0 6px 15px rgba(14,118,88,.15)}
.about-btn-primary:hover{color:#fff;background:#095b44;border-color:#095b44;transform:translateY(-2px)}
.about-btn-outline{color:#0e7658;background:#fff;border-color:#0e7658}
.about-btn-outline:hover{color:#fff;background:#0e7658;transform:translateY(-2px)}

/* TABLET */
@media(max-width:991px){
.about{padding:55px 0!important}
.about-layout{grid-template-columns:1fr;gap:38px}
.about-visual{max-width:650px;width:100%;margin:auto}
.about-content{max-width:700px;margin:auto}
.about-title{font-size:45px}
.about-image{height:380px}
.about-particles:before{width:360px;height:150px;right:-80px}
.about-particles:after{width:450px;height:260px}
}

/* MOBILE */
@media(max-width:576px){
.about{padding:45px 0!important}
.about-layout{gap:30px}
.about-visual{padding:0 10px 10px 0}
.about-image{height:280px}
.about-secondary{width:105px;height:88px;border-width:5px}
.about-image-label{left:11px;bottom:11px;padding:8px 10px}
.about-image-label>i{width:28px;height:28px;font-size:11px}
.about-image-label strong{font-size:9px}
.about-image-label span{font-size:7px}
.about-subtitle{font-size:9px;letter-spacing:2px}
.about-title{font-size:34px;line-height:1.08;letter-spacing:-.7px}
.about-description{font-size:11px;line-height:1.75}
.about-features{gap:8px 12px}
.about-feature{font-size:8.5px;gap:6px}
.about-feature-icon{width:23px;height:23px;flex-basis:23px;font-size:10px}
.about-actions{flex-wrap:wrap}
.about-btn{min-height:35px;padding:7px 12px;font-size:9px}
.about-particles:before{width:280px;height:110px;top:20px;right:-90px;font-size:32px;letter-spacing:14px}
.about-particles:after{width:300px;height:170px;bottom:-50px;left:-80px;background-size:80px 60px,110px 75px}
.about .container:before{width:110px;height:110px;right:-35px}
.about-content:before{width:60px;height:100px;right:0}
}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
.about-particles:before,.about-particles:after{animation:none!important}
.about-feature,.about-feature-icon,.about-btn{transition:none!important}
}