/* ===================================================
   EDEN SELLC - ABOUT PAGE FINAL
   Đồng bộ phong cách với trang chủ
=================================================== */

/* ===== ROOT ===== */
:root{
  --green:#0B7005;
  --green-dark:#1f6b1c;
  --green-soft:#eef7e8;
  --text:#1f1f1f;
  --muted:#666;
  --white:#ffffff;
  --line:#e8ece6;
  --bg:#f8faf7;
  --shadow:0 18px 45px rgba(0,0,0,.08);
}

/* ===== RESET ===== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  color:var(--text);
  background:#fff;
  overflow-x:hidden;
  line-height:1.65;
}

img{
  max-width:100%;
  display:block;
}

a{
  text-decoration:none;
}

/* ===================================================
   NAVBAR
=================================================== */
.custom-navbar{
  background:#fff;
  padding:5px 0;
  border-bottom:1px solid #eee;
  transition:.25s ease;
  z-index:999;
}

.custom-navbar.scrolled{
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  padding:10px 0;
}

.brand-logo{
  width:auto;
  height:85px;
}

.brand-name{
  display:block;
  color:#1e4aa8;
  font-size:2rem;
  font-weight:800;
}

.brand-text{
  line-height:1.1;
}

.brand-name{
  display:block;
  color:#1e4aa8;
  font-size:2rem;
  font-weight:800;
}

.brand-text small{
  color:#1e4aa8;
  font-size:.78rem;
  font-weight:700;
}

.navbar-nav{
  gap:24px;
}

.nav-link{
  color:#222 !important;
  font-weight:700;
  position:relative;
  transition:.2s ease;
}

.nav-link:hover,
.nav-link.active{
  color:#133162 !important;
}

.nav-link.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:100%;
  height:3px;
  background:#133162;
  border-radius:30px;
}

/* ===================================================
   HERO
=================================================== */
.about-hero{
  position:relative;
  padding-top:140px;
  padding-bottom:0;
  background:#fff;
  overflow:hidden;
}

/* shape góc phải */
.hero-shape-top{
  position:absolute;
  top:90px;
  right:0;
  width:420px;
  height:220px;
  background:#e6f0dc;
  border-radius:0 0 0 90px;
  z-index:1;
}

/* dải xanh chéo */
.hero-wave{
  position:absolute;
  left:-5%;
  bottom:165px;
  width:110%;
  height:150px;
  background:#3f8c0e;
  transform:rotate(-7deg);
  z-index:2;
}

/* field background */
.hero-bg-field{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:240px;
  background:
  linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.78)),
  url('../images/Picture3.jpg') center/cover;
  z-index:1;
}

.hero-content{
  position:relative;
  z-index:5;
  padding-bottom:250px;
}

.hero-mini{
 color:#205b20;
  font-size:1.25rem;
  font-weight:800;
  margin-bottom:18px;
}

.hero-label{
  color:#4d6b3c;
  font-size:1.25rem;
  font-weight:800;
  margin-bottom:18px;
}

.hero-title{
  font-size:6rem;
  line-height:.95;
  font-weight:900;
  color:#1f3c5b;
  margin-bottom:18px;
}

.hero-subtitle{
  font-size:2rem;
  line-height:1.3;
  font-weight:800;
  color:#3d6478;
  margin-bottom:22px;
}

.hero-desc{
  font-size:1.5rem;
  color:#4d6b3c;
  font-weight:600;
  margin-bottom:35px;
}

.hero-buttons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

/* buttons */
.btn-main{
  display:inline-block;
  background:var(--green);
  color:#fff;
  padding:16px 34px;
  border-radius:40px;
  font-weight:800;
  transition:.25s ease;
}

.btn-main:hover{
  background:var(--green-dark);
  color:#fff;
  transform:translateY(-2px);
}

.btn-outline-main{
  display:inline-block;
  border:2px solid var(--green);
  color:var(--green);
  padding:14px 34px;
  border-radius:40px;
  font-weight:800;
  transition:.25s ease;
}

.btn-outline-main:hover{
  background:var(--green);
  color:#fff;
}

/* circle image */
.hero-circle-image{
  width:520px;
  height:520px;
  border-radius:50%;
  overflow:hidden;
  border:8px solid var(--green);
  box-shadow:var(--shadow);
  background:#fff;
  margin:auto;
}

.hero-circle-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ===================================================
   GLOBAL SECTION
=================================================== */
.section-space{
  padding:95px 0;
}

.section-light{
  padding:95px 0;
  background:var(--bg);
}

.section-tag{
  display:inline-block;
  color:#0B7005;
  font-weight:700;
  margin-bottom:12px;
  font-size:1.2rem;
  text-transform:uppercase;
  letter-spacing:1px;
}

.section-title{
  font-size:2.7rem;
  font-weight:900;
  line-height:1.25;
  margin-bottom:20px;
}

.section-text{
  font-size:1.25rem;
  color:var(--muted);
  line-height:1.9;
}

/* ===================================================
   CARD
=================================================== */
.content-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  height:100%;
  transition:.25s ease;
  box-shadow:0 8px 25px rgba(0,0,0,.04);
}

.content-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
}

.content-body{
  padding:32px;
}

.content-body h4,
.content-body h5{
  font-weight:800;
  margin-bottom:16px;
  color:#2f6f18;
}

.content-body p,
.content-body li{
  color:#555;
  line-height:1.85;
}

/* ===================================================
   FOCUS CARD
=================================================== */
.focus-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  text-align:center;
  padding:34px 18px;
  height:100%;
  transition:.25s ease;
}

.focus-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow);
}

.focus-card i{
  font-size:34px;
  color:var(--green);
  margin-bottom:14px;
}

.focus-card h5{
  font-weight:800;
  margin:0;
}

/* ===================================================
   IMPACT
=================================================== */
.impact-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:34px 16px;
  transition:.25s ease;
}

.impact-box:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
}

.counter{
  font-size:3rem;
  font-weight:900;
  color:var(--green);
  margin-bottom:8px;
}

.impact-box p{
  margin:0;
  color:#666;
  font-weight:700;
}

/* ===================================================
   IMAGE STYLE
=================================================== */
.shadow-soft{
  box-shadow:var(--shadow);
}

.rounded-4{
  border-radius:24px !important;
}

/* ===================================================
   FOOTER
=================================================== */
.footer-main{
  background:#c3cfdd;
  color:black;
  padding:70px 0 30px;
}

.footer-logo{
  height:100px;
  margin:auto;
}

.footer-social{
  display:flex;
  justify-content:center;
  gap:14px;
}

.footer-social a{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#1f2937;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.25s ease;
}

.footer-social a:hover{
  background:var(--green);
  transform:translateY(-4px);
}

.footer-main p{
  margin:0 0 8px;
}

.footer-main hr{
  border-color:rgba(255,255,255,.08);
  margin:24px 0 16px;
}

.footer-copy{
  color:#1d1c1c;
  font-size:.95rem;
}

/* ===================================================
   RESPONSIVE
=================================================== */
@media(max-width:992px){

.navbar-nav{
  gap:10px;
  margin-top:20px;
}

.about-hero{
  text-align:center;
  padding-top:120px;
}

.hero-content{
  padding-bottom:220px;
}

.hero-title{
  font-size:3.7rem;
}

.hero-subtitle{
  font-size:1.45rem;
}

.hero-desc{
  font-size:1rem;
}

.hero-buttons{
  justify-content:center;
}

.hero-circle-image{
  width:320px;
  height:320px;
  margin-top:40px;
}

.section-title{
  font-size:2.1rem;
}

}

@media(max-width:576px){

.brand-logo{
  height:46px;
}

.brand-name{
  font-size:1.5rem;
}

.hero-title{
  font-size:2.5rem;
}

.hero-subtitle{
  font-size:1.05rem;
}

.hero-circle-image{
  width:250px;
  height:250px;
}

.hero-buttons{
  flex-direction:column;
}

.btn-main,
.btn-outline-main{
  width:100%;
  text-align:center;
}

.section-space,
.section-light{
  padding:70px 0;
}

.section-title{
  font-size:1.7rem;
}

.counter{
  font-size:2.4rem;
}

}


.lang-switch{
  display:flex;
  border:1px solid #dcdcdc;
  border-radius:40px;
  overflow:hidden;
  background:#fff;
}

.lang-btn{
  border:none;
  background:#fff;
  padding:8px 16px;
  font-size:.9rem;
  font-weight:800;
  color:#444;
  transition:.25s ease;
}

.lang-btn:hover{
  background:#f5f5f5;
}

.lang-btn.active{
  background:var(--green);
  color:#fff;
}


/* =====================================================
VISION / MISSION PRO MAX
THÊM vào cuối about.css
===================================================== */

.vision-pro{
position:relative;
overflow:hidden;
}

/* top desc */
.vision-top-desc{
max-width:620px;
margin-top:12px;
}

/* ================= CARD CHUNG ================= */
.vision-card-pro,
.mission-card-pro{
position:relative;
background:#fff;
border-radius:34px;
padding:60px;
box-shadow:0 22px 55px rgba(0,0,0,.06);
overflow:hidden;
}

/* ================= TẦM NHÌN ================= */
.vision-quote{
position:absolute;
right:40px;
top:20px;
font-size:10rem;
font-weight:900;
color:rgba(103,181,31,.08);
line-height:1;
}

.vision-left{
position:relative;
z-index:2;
}

.vision-icon-pro{
width:78px;
height:78px;
border-radius:50%;
background:#164B60;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:1.7rem;
margin-bottom:24px;
}

.vision-title-pro{
font-size:4rem;
font-weight:900;
color:#1f3c5b;
margin-bottom:16px;
line-height:1;
}

.vision-line{
width:85px;
height:5px;
border-radius:30px;
background:#3d6478;
margin-bottom:18px;
}

.vision-small{
font-size:1rem;
color:#666;
line-height:1.8;
max-width:280px;
}

.vision-highlight-pro{
background:#2f6f18;
color:#fff;
padding:42px;
border-radius:30px;
font-size:1.35rem;
font-weight:600;
line-height:1.9;
text-align: justify;
}

/* ================= SỨ MỆNH ================= */
.mission-card-pro{
margin-top:35px;
}

.mission-icon-pro{
width:78px;
height:78px;
border-radius:50%;
background:#164B60;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:1.7rem;
margin-bottom:24px;
}

.mission-title-pro{
font-size:4rem;
font-weight:900;
color:#1f3c5b;
line-height:1;
margin-bottom:18px;
}

.mission-line{
width:85px;
height:5px;
border-radius:30px;
background:#3d6478;
margin-bottom:18px;
}

.mission-sub-pro{
font-size:1.1rem;
color:#666;
line-height:1.9;
max-width:290px;
}

/* ================= TIMELINE ================= */
.timeline-pro{
position:relative;
padding-left:20px;
display:flex;
flex-direction:column;
gap:26px;
}

.timeline-line{
position:absolute;
left:28px;
top:20px;
bottom:20px;
width:3px;
background:#e7efd9;
}

.timeline-item{
position:relative;
display:flex;
text-align: justify;
align-items:flex-start;
gap:18px;
z-index:2;
}

.timeline-number{
min-width:58px;
height:58px;
border-radius:50%;
background:#2f6f18;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size:1.1rem;
}

.timeline-content{
flex:1;
background:#f8faf7;
border:1px solid #edf2e8;
padding:18px 22px;
border-radius:18px;
font-size:1.2rem;
line-height:1.8;
color:#444;
transition:.25s ease;
}

.timeline-item:hover .timeline-content{
transform:translateX(8px);
box-shadow:0 12px 25px rgba(0,0,0,.05);
}

/* ================= MOBILE ================= */
@media(max-width:992px){

.vision-card-pro,
.mission-card-pro{
padding:35px;
}

.vision-title-pro,
.mission-title-pro{
font-size:2.8rem;
}

.vision-highlight-pro{
font-size:1.08rem;
padding:28px;
}

.timeline-pro{
padding-left:0;
}

.timeline-line{
display:none;
}

}

@media(max-width:576px){

.vision-title-pro,
.mission-title-pro{
font-size:2.1rem;
}

.vision-icon-pro,
.mission-icon-pro{
width:60px;
height:60px;
font-size:1.2rem;
}

.timeline-item{
gap:14px;
}

.timeline-number{
min-width:48px;
height:48px;
font-size:.95rem;
}

.timeline-content{
padding:14px 16px;
font-size:.95rem;
}

.vision-highlight-pro{
font-size:1rem;
line-height:1.75;
padding:22px;
}

}




/* =====================================================
ABOUT COMPANY 
===================================================== */

.about-pro{
position:relative;
overflow:hidden;
}

.about-top-desc{
max-width:720px;
margin-top:12px;
}

/* MAIN CARD */
.about-main-card{
position:relative;
background:#fff;
border-radius:34px;
padding:65px;
box-shadow:0 24px 55px rgba(0,0,0,.06);
overflow:hidden;
}

/* shape bg */
.about-shape-1{
position:absolute;
top:-80px;
right:-70px;
width:280px;
height:280px;
background:#edf5e6;
border-radius:45%;
z-index:1;
}

.about-shape-2{
position:absolute;
left:-70px;
bottom:-70px;
width:220px;
height:220px;
background:#f5faef;
border-radius:50%;
z-index:1;
}

/* LEFT VISUAL */
.about-visual-wrap{
position:relative;
height:480px;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
}

/* grid block */
.about-grid-bg{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
width:100%;
max-width:420px;
}

.about-grid-bg div{
height:165px;
border-radius:26px;
}

.about-grid-bg div:nth-child(1){
background:#2f6f18;
}

.about-grid-bg div:nth-child(2){
background:#75c529;
}

.about-grid-bg div:nth-child(3){
background:#75c529;
}

.about-grid-bg div:nth-child(4){
background:#2f6f18;
}

/* logo */
.about-logo-circle{
position:absolute;
width:220px;
height:220px;
border-radius:50%;
background:#fff;
box-shadow:0 18px 35px rgba(0,0,0,.08);
display:flex;
align-items:center;
justify-content:center;
padding:28px;
}

.about-logo-circle img{
max-width:100%;
max-height:100%;
object-fit:contain;
}

/* year */
.about-year{
position:absolute;
right:-5px;
top:10px;
font-size:4rem;
font-weight:900;
line-height:1.05;
color:#2f6f18;
writing-mode:vertical-rl;
letter-spacing:4px;
opacity:.9;
}

/* RIGHT */
.about-content-box{
position:relative;
z-index:2;
text-align: justify;
}

.about-big-title{
font-size:3rem;
font-weight:900;
color:#1f3c5b;
line-height:1.2;
margin-bottom:18px;
}

.about-lead{
font-size:1.18rem;
font-weight:700;
color: #3d6478;
line-height:1.8;
margin-bottom:20px;
}

.about-text{
font-size:1.04rem;
color:#555;
line-height:1.9;
margin-bottom:18px;
}

/* VALUES */
.about-values{
margin-top:28px;
display:flex;
flex-direction:column;
gap:14px;
}

.value-item{
display:flex;
align-items:flex-start;
gap:12px;
background:#f8faf7;
border:1px solid #edf2e8;
padding:14px 18px;
border-radius:16px;
transition:.25s ease;
}

.value-item:hover{
transform:translateX(8px);
box-shadow:0 12px 22px rgba(0,0,0,.04);
}

.value-item i{
color:#67b51f;
font-size:1.3rem;
margin-top:3px;
}

.value-item span{
color:#444;
line-height:1.7;
font-weight:600;
}

/* ================= MOBILE ================= */
@media(max-width:992px){

.about-main-card{
padding:35px;
}

.about-visual-wrap{
height:auto;
margin-bottom:20px;
}

.about-grid-bg{
max-width:320px;
}

.about-grid-bg div{
height:130px;
}

.about-logo-circle{
width:170px;
height:170px;
}

.about-year{
font-size:2.6rem;
right:-10px;
top:-5px;
}

.about-big-title{
font-size:2.2rem;
}

}

@media(max-width:576px){

.about-main-card{
padding:24px;
}

.about-grid-bg{
gap:12px;
max-width:260px;
}

.about-grid-bg div{
height:105px;
border-radius:18px;
}

.about-logo-circle{
width:140px;
height:140px;
padding:20px;
}

.about-year{
font-size:2rem;
letter-spacing:2px;
}

.about-big-title{
font-size:1.7rem;
}

.about-lead{
font-size:1rem;
}

.about-text{
font-size:.96rem;
}

.value-item{
padding:12px 14px;
}

.value-item span{
font-size:.95rem;
}

}




/* =====================================================
NÂNG CẤP CÂN ĐỐI
===================================================== */

.skill-main-card{
position:relative;
background:#fff;
border-radius:34px;
padding:60px;
box-shadow:0 24px 55px rgba(0,0,0,.06);
overflow:hidden;
}

.skill-shape{
position:absolute;
top:-70px;
right:-60px;
width:230px;
height:230px;
background:#eef5e7;
border-radius:38%;
}

/* GRID CHUẨN TỶ LỆ */
.skill-main-card .row{
align-items:stretch;
}

/* LEFT */
.skill-big-title{
font-size:2.8rem;
font-weight:900;
line-height:1.25;
color:#1f3c5b;
margin-bottom:18px;
max-width:640px;
}

.skill-lead{
font-size:1.06rem;
line-height:1.95;
color:#3d6478;
margin-bottom:34px;
max-width:640px;
}

/* CARD GRID */
.skill-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
}

/* BOX */
.skill-box{
background:#fff;
border:1px solid #edf2e8;
border-radius:22px;
overflow:hidden;
height:100%;
display:flex;
flex-direction:column;
transition:.25s ease;
box-shadow:0 10px 20px rgba(0,0,0,.02);
}

.skill-box:hover{
transform:translateY(-5px);
box-shadow:0 18px 35px rgba(0,0,0,.05);
}

.skill-head{
min-height:72px;
padding:18px 22px;
display:flex;
align-items:center;
gap:12px;
background:#2f6f18;
}

.skill-head i{
font-size:1.05rem;
color: white;
}

.skill-head h5{
margin:0;
font-size:1.02rem;
font-weight:900;
line-height:1.4;
color: white;

}

.skill-box ul{
margin:0;
padding:18px 22px 22px 38px;
flex:1;
}

.skill-box li{
font-size:1rem;
line-height:1.85;
color:#444;
margin-bottom:6px;
}

/* RIGHT */
.skill-side-card{
height:100%;
display:flex;
flex-direction:column;
gap:22px;
justify-content:flex-start;
}

.mini-box{
background:#fff;
border:1px solid #edf2e8;
border-radius:22px;
padding:28px;
transition:.25s ease;
box-shadow:0 10px 20px rgba(0,0,0,.02);
}

.mini-box:hover{
transform:translateY(-5px);
box-shadow:0 18px 35px rgba(0,0,0,.05);
}

.mini-head{
display:flex;
align-items:center;
gap:12px;
font-size:1.05rem;
font-weight:900;
color:#2d6d18;
margin-bottom:18px;
}

.mini-head i{
font-size:1rem;
}

.mini-box ul{
margin:0;
padding-left:18px;
}

.mini-box li{
font-size:1rem;
line-height:1.85;
color:#444;
margin-bottom:6px;
}

/* BADGE */
.skill-badge-wrap{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-top:auto;
}

.skill-badge{
height:54px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
border-radius:40px;
background:linear-gradient(135deg,#76c528,#5da91e);
color:#fff;
font-weight:800;
font-size:.96rem;
box-shadow:0 14px 26px rgba(103,181,31,.18);
transition:.25s ease;
}

.skill-badge:hover{
transform:translateY(-3px);
}

.skill-badge i{
font-size:.95rem;
}

/* RESPONSIVE */
@media(max-width:1200px){

.skill-big-title{
font-size:2.4rem;
}

}

@media(max-width:992px){

.skill-main-card{
padding:35px;
}

.skill-grid{
grid-template-columns:1fr;
}

.skill-badge-wrap{
grid-template-columns:1fr 1fr;
margin-top:0;
}

}

@media(max-width:576px){

.skill-main-card{
padding:24px;
}

.skill-big-title{
font-size:1.8rem;
}

.skill-lead{
font-size:.96rem;
}

.skill-head{
min-height:auto;
padding:15px 16px;
}

.skill-head h5{
font-size:.95rem;
}

.skill-box ul,
.mini-box ul{
font-size:.94rem;
padding-right:16px;
}

.skill-badge-wrap{
grid-template-columns:1fr;
}

.skill-badge{
width:100%;
}

}




/* ===== IMAGE BLOCK ===== */
.skill-image-wrap{
position:relative;
height:100%;
border-radius:28px;
overflow:hidden;
box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.skill-image{
width:100%;
height:100%;
object-fit:cover;
transition:.4s ease;
}

.skill-image-wrap:hover .skill-image{
transform:scale(1.05);
}

/* overlay gradient */
.skill-image-wrap::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(0,0,0,.4), transparent);
}

/* overlay badge */
.skill-image-overlay{
position:absolute;
bottom:25px;
left:25px;
background:linear-gradient(135deg,#6fc52a,#4c9818);
color:#fff;
padding:12px 18px;
border-radius:40px;
display:flex;
align-items:center;
gap:10px;
font-weight:700;
z-index:2;
box-shadow:0 10px 20px rgba(0,0,0,.2);
}

/* floating card */
.skill-floating-card{
position:absolute;
top:25px;
right:25px;
background:#fff;
padding:14px 18px;
border-radius:16px;
display:flex;
align-items:center;
gap:10px;
font-weight:700;
color:#2d6d18;
box-shadow:0 15px 30px rgba(0,0,0,.1);
z-index:2;
}

/* responsive */
@media(max-width:992px){
.skill-image-wrap{
height:320px;
margin-top:20px;
}
}





/* ===============================
/* ===============================
   KINH NGHIỆM - FIX TRIỆT ĐỂ
   (Badge luôn nằm trong ảnh)
   =============================== */

/* ===============================
   KINH NGHIỆM - FULL PRO + HOVER
   =============================== */

.experience-card{
background:#fff;
padding:60px;
border-radius:34px;
box-shadow:0 24px 55px rgba(0,0,0,.06);
border:1px solid #eef2ea;
overflow:hidden;
transition:.35s ease;
}


/* ===============================
   LEFT CONTENT
   =============================== */

.exp-lead{
font-size:1.08rem;
line-height:1.9;
margin-bottom:30px;
color:#555;
}

.exp-list{
display:flex;
flex-direction:column;
gap:18px;
}

.exp-item{
display:flex;
align-items:center;
gap:18px;
background:#f8faf7;
padding:16px 18px;
border-radius:18px;
border:1px solid #edf2e8;
transition:.28s ease;
cursor:pointer;
}

.exp-item:hover{
transform:translateX(8px);
background:#fff;
box-shadow:0 18px 28px rgba(0,0,0,.06);
border-color:#dcead1;
}

.exp-item span{
min-width:52px;
width:52px;
height:52px;
border-radius:50%;
background:#2f6f18;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size:1rem;
transition:.3s ease;
}

.exp-item:hover span{
transform:scale(1.08) rotate(8deg);
box-shadow:0 12px 24px rgba(103,181,31,.28);
}

.exp-item p{
margin:0;
font-weight:700;
color:#333;
line-height:1.6;
}

/* ===============================
   IMAGE BLOCK
   =============================== */

.exp-image-wrap{
position:relative;
width:100%;
height:520px;
border-radius:28px;
overflow:hidden;
box-shadow:0 20px 45px rgba(0,0,0,.08);
cursor:pointer;
transition:.35s ease;
}

.exp-image-wrap:hover{
transform:translateY(-6px);
box-shadow:0 35px 65px rgba(0,0,0,.12);
}

.exp-image-wrap img,
.exp-image{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .6s ease;
}

/* hover zoom image */
.exp-image-wrap:hover img,
.exp-image-wrap:hover .exp-image{
transform:scale(1.08);
}

/* overlay */
.exp-image-wrap::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(0,0,0,.25), transparent 45%);
z-index:1;
transition:.35s ease;
}

.exp-image-wrap:hover::after{
background:linear-gradient(to top, rgba(0,0,0,.35), transparent 50%);
}

/* ===============================
   BADGES
   =============================== */

.exp-badge{
position:absolute;
z-index:5;
background:rgba(255,255,255,.94);
padding:12px 18px;
border-radius:50px;
font-weight:800;
font-size:.95rem;
box-shadow:0 10px 25px rgba(0,0,0,.12);
white-space:nowrap;
transition:.28s ease;
}

.exp-badge:hover{
transform:translateY(-4px) scale(1.04);
box-shadow:0 18px 30px rgba(0,0,0,.16);
}

/* positions */
.exp-badge.one{
top:18px;
left:18px;
}

.exp-badge.two{
bottom:18px;
left:18px;
}

.exp-badge.three{
bottom:18px;
right:18px;
}

/* hover movement with image */
.exp-image-wrap:hover .one{
transform:translateY(-4px);
}

.exp-image-wrap:hover .two{
transform:translateX(4px);
}

.exp-image-wrap:hover .three{
transform:translateX(-4px);
}

/* ===============================
   RESPONSIVE
   =============================== */

@media(max-width:992px){

.experience-card{
padding:35px;
}

.exp-image-wrap{
height:360px;
margin-top:24px;
}

.exp-badge{
font-size:.85rem;
padding:10px 14px;
}

}

@media(max-width:576px){

.experience-card{
padding:24px;
border-radius:24px;
}

.exp-item{
gap:12px;
padding:14px;
}

.exp-item span{
width:46px;
height:46px;
min-width:46px;
font-size:.9rem;
}

.exp-item p{
font-size:.95rem;
}

.exp-image-wrap{
height:290px;
}

.exp-badge{
font-size:.8rem;
padding:9px 12px;
}

.exp-badge.one{
top:12px;
left:12px;
}

.exp-badge.two{
bottom:12px;
left:12px;
}

.exp-badge.three{
bottom:12px;
right:12px;
}

}