/* HERO BANNER */
.hero-banner{
width:100%;
height:60vh;
background-image:url("../images/hero-bg.png.webp");
background-size:cover;
background-position:center center;
display:flex;
align-items:center;
overflow:hidden;
}

.hero-text{
display:flex;
flex-direction:column;
justify-content:center;
text-align:right;
color:#0c511b;
}

.hero-title{
font-size:3rem;
font-weight:700;
color:#0c511b;
margin-top:20px;
margin-bottom:12px;
white-space:nowrap;
}

.hero-subtitle{
font-size:1.4rem;
color:#0c511b;
margin-bottom:20px;
font-weight:500;
white-space:nowrap;
}

.hero-desc{
font-size:1.05rem;
line-height:2;
max-width:90%;
color:#444;
margin-bottom:5px;
}

.btn-group-custom{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.hero-banner .btn-success{
background-color:#0c511b;
border-color:#0c511b;
font-size:1rem;
}

.hero-banner .btn-light{
background-color:#fff;
font-size:1rem;
}

/* ===============================
   HERO BANNER MOBILE
   =============================== */

@media (max-width:768px){

.hero-banner{
background-image:url("../images/hero-bg-mo.png.webp") ;
background-size:cover;
background-position:center -40px;
height:80vh;
min-height:80vh;
display:flex ;
align-items:flex-end !important;
justify-content:center ;
padding-bottom:88px;
position:relative;
overflow:hidden;
}

.hero-banner::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(5,12,4,0.95) 0%,
rgba(8,16,6,0.88) 22%,
rgba(10,20,8,0.68) 42%,
rgba(15,24,10,0.25) 62%,
rgba(15,24,10,0.00) 78%
);
z-index:1;
}

.hero-banner .container,
.hero-banner .row,
.hero-text{
position:relative;
z-index:2;
}

.hero-text{
width:100% ;
text-align:center;
transform:translateY(4px);
padding:0 8px;
}

.hero-title{
color:#f4e6c3 ;
font-size:40px ;
font-weight:900 ;
line-height:1.15 ;
letter-spacing:-1px ;
margin-bottom:4px ;
text-shadow:0 4px 12px rgba(0,0,0,0.45);
}

.hero-subtitle{
color:#f46c97 ;
font-size:20px ;
font-weight:800 ;
margin-bottom:16px ;
line-height:1.5 ;
display:block;
text-shadow:0 2px 8px rgba(0,0,0,0.28) ;
}

.hero-desc{
color:rgba(255,255,255,0.96) ;
font-size:15.5px ;
font-weight:500 ;
line-height:2.1 ;
text-align:justify ;
text-align-last:center ;
margin:0 auto 30px auto ;
max-width:88% ;
padding:0 ;
text-shadow:0 3px 10px rgba(0,0,0,0.30) ;
}

.hero-text .mt-4{
display:flex !important ;
flex-direction:row-reverse !important;
justify-content:center !important;
align-items:center !important ;
gap:14px !important ;
flex-wrap:nowrap !important ;
margin-top:0 !important ;
}

.hero-text .btn{
flex:1 1 0;
max-width:170px;
height:58px !important;
padding:0 14px !important;
border-radius:20px !important;
font-size:16px !important;
font-weight:800 !important;
white-space:nowrap !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:none !important;
box-shadow:0 8px 18px rgba(0,0,0,0.18) !important;
}

.hero-text .btn-light{
background:linear-gradient(180deg,#ff6aa0 0%,#f13f84 55%,#d91d66 100%) ;
color:#ffffff ;
box-shadow:0 10px 22px rgba(217,29,102,0.34) ;
}

.hero-text .btn-success{
background:linear-gradient(180deg,#fff7ea 0%,#f7edd8 55%,#ecd7af 100%) ;
color:#8a5a1f ;
box-shadow:0 10px 22px rgba(185,132,48,0.22) ;
}

.hero-text .btn-success:hover,
.hero-text .btn-light:hover{
transform:translateY(-1px);
}

}
/* پایان استایل بنر */




/* VIDEO */
/* عنوان و متن */
/* CSS */
.video-section{
    background: #faf8f2;
    padding: 24px 20px;
    
}
.video-img-container {
    height: 240px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

.video-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 72%;
    transition: transform 0.45s ease;
}

.video-img-container:hover img {
    transform: scale(1.03);
}

/* استایل متن روی عکس */
.text-overlay {
  position: absolute;
  top: 16px;
  left: 30px;
  z-index: 2;
  color: #fff;

  max-width: 80%;
}

.text-overlay h3{

  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.4;
  text-shadow: 0 8px 18px rgba(0,0,0,.28);
  white-space: nowrap;
}

.text-overlay p{
 
  font-size: .84rem;
  line-height: 1.1rem;
  opacity: .95;
  text-shadow: 0 8px 18px rgba(0,0,0,.28);
}
/* دایره پلی */
.play-btn-circle{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255,255,255,.26);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-btn-circle .play-icon{
  color: #fff;
  font-size: 20px;
  transform: translateX(1px);
}

.video-img-container:hover .play-btn-circle {
    transform: translate(-50%, -50%) scale(1.15);
    background: rgba(255, 255, 255, 0.4);
}
/* ستون متن سمت چپ */
.video-text{
  max-width: 440px;
  margin-inline: auto;
  padding-inline: 6px;
}

.video-text .section-title{
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 1.55;
    color: #26311d;
  text-shadow:
    0 1px 2px rgba(255,255,255,.55),
    0 3px 10px rgba(0,0,0,.12);
  margin-bottom: 14px !important;
}

.video-text .section-desc{
  font-size: .98rem;
  font-weight: 350;
  line-height: 2;
   color: #555;
  text-shadow:
    0 1px 2px rgba(255,255,255,.35),
    0 2px 8px rgba(0,0,0,.08);
  margin-bottom: 10px !important;
}


/* دکمه */
.btn-video-custom{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  font-weight: 600;
  color: #26311d;
  background: #fffdf7;
  border: 1px solid #d8cfaa;
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

.btn-video-custom:hover{
  background: #fff8e6;
  border-color: #cdbf8a;
  color: #1f2718;
}

/* آیکون پلی داخل دکمه */
.btn-video-custom .play-icon{
  font-size: 0.95em;
  line-height: 1;
}


/* تنظیم برای موبایل */
@media (max-width: 576px){
  .video-img-container{
    height: 210px;
    border-radius: 16px;
  }

    .text-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 15px;
    border-radius: 0 0 20px 20px; /* هماهنگی با گوشه‌های عکس */
    width: 100%;
    left: 0;
    bottom: 0;
    top: auto; /* متن را می‌بریم پایین عکس که فضای تاریک‌تری دارد */
  }

  /* ۲. سایه دادن به متن برای جدا شدن از پس‌زمینه */
  .text-overlay h3, 
  .text-overlay p {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    color: #ffffff;
  }

  .text-overlay h3 {
  font-size: 1.2rem;
  margin-bottom: 4px;
  }

  .text-overlay p {
      font-size: 0.8rem;
  opacity: 0.9;
  line-height: 1.4; 
  }
  .play-btn-circle{
    width: 56px;
    height: 56px;
  }

  .video-text .section-title{
    font-size: 1.22rem;
  }
}