/* 
* CLEANED CSS - ONLY bg6 (yj) SLIDE + REQUIRED COMMON STYLES
*/

/* -------------------- RESET -------------------- */
html,body,form,ol,ul,li,div,p,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,th,td,font,em,ins,span,a {
    margin: 0;
    padding: 0;
}
h1,h2,h3,h4,h5,h6,button,input,select,textarea {
    font-size: 100%;
    font-weight: normal
}
ul,li,div,dl,dt,dd {
    list-style: none;
}
h1.wm-public {
    height: 0px;
    line-height: 0px;
    font-size: 0px;
}
a {
    text-decoration: none;
}
img {
    border: 0;
}
font,em,i {
    font-style: normal;
}
label {
    vertical-align: middle;
    font-family: tahoma;
}
textarea,input,i {
    resize: none;
    outline: none;
}
textarea {
    overflow: auto;
}
ins {
    float: right;
    text-decoration: none;
    font-weight: normal;
}
.pub_wsp {
    word-wrap: break-word;
    word-break: break-all;
}
.pub_abso {
    vertical-align: middle;
}
.pub_clr {
    clear: both;
    font-size: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
}
.pub_ani {
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
.pub_yh {
    font-family: "Microsoft YaHei";
}
.pub_le {
    float: left;
}
.pub_lr {
    float: right;
}
.none {
    display: none;
}

/* -------------------- BASE -------------------- */
html, body {
    position: relative;

    height: 100%;
}
body {

    font-family: "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
}

.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
}

.w1200{
    width: 1300px;
    height: 910px;
    margin:0 auto;
    position: relative;
}

/* -------------------- COMMON ANIMATION HELPERS -------------------- */
.zp_bg_box{  
    transform:translateX(-300px);
    opacity:0;
    transition:all 1.2s;
}
.ani-slide .zp_bg_box{
    transform:translateX(0);
    opacity:1;
}
.peo_bg{  
    transform:translateX(-400px);
    opacity:0;
    transition:all 1.2s;
}
.ani-slide .peo_bg{
    transform:translateX(0);
    opacity:1;
}
.name_bg{  
    transform:translateX(-300px);
    opacity:0;
    transition:all 1.2s;
}
.ani-slide .name_bg{
    transform:translateX(0);
    opacity:1;
}

/* -------------------- LEFT RIBBON (USED IN HTML: zp_bg3 zp_bg_box) -------------------- */
.zp_bg3{
    width: 42px;
    height: 193px;
    background:url(/img/ths.png) no-repeat;
    margin:120px 0 0 10px;
    transform:translateX(0px);
    opacity:0;
    transition:all 1s;
}
.ani-slide .zp_bg3{
    transform:translateX(0);
    opacity:1;
}

/* -------------------- PLANTS (USED IN HTML: yf_1 yf_2 yf_3) -------------------- */
.plant_box{
    width: 290px;
    height: 610px;
    position: absolute;
    top:50px;
    right: -90px;
    z-index: 5;
}
.plant_box .yf_1{
    position: absolute;
    top:90px;
    left:10px; 
    transform:translateX(0px);
    opacity:0;
    transition:all 7s;
}
.ani-slide .yf_1{
    transform:translateX(0);
    opacity:1;
}
.plant_box .yf_2{
    position: absolute;
    top:30px;
    left:70px;
    transform:translateX(0px);
    opacity:0;
    transition:all 5s;
}
.ani-slide .yf_2{
    transform:translateX(0px);
    opacity:1;
}
.plant_box .yf_3{
    position: absolute;
    top:100px;
    left:150px;
    transform:translateX(0px);
    opacity:0;
    transition:all 2s;
}
.ani-slide .yf_3{
    transform:translateX(0);
    opacity:1;
}

/* -------------------- BUTTON/TEXT BOX (USED IN HTML: btn_box zf_btn zf_btn6 plant_count plant_count6) -------------------- */
.btn_box{
    width: 480px;
    height: 240px;
    position: absolute;
    left:50px;
    top:450px;
    z-index: 5;
    transform:translateX(-300px);
    opacity:0;
    transition:all 1.2s;
}
.ani-slide .btn_box{
    transform:translateX(0);
    opacity:1;
}

.btn_box .zf_btn {
    width: 120px;
    float: left;
}
.plant_count{
    width: 340px;
    height: 240px;
    float: left;
    margin-left: 14px;
}
.plant_count .p_c{
    display: none;
    animation: fadeInRight1 .8s .2s 1 both;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
}
.plant_count .p_c span{
    display: block;
    text-align: left;
}
.plant_count .p_c .span1{
    color:#dbcc93;
    font-size:30px;
    font-family: '造字工房刻宋'
}
.plant_count .p_c .span_line1{
    width: 120px;
    height: 1px;
    background: #76694c;
    margin-top: 10px;
}
.plant_count .p_c .span2{
    color:#dbcc93;
    font-size:16px;
    margin-top:10px;
    font-family: '造字工房刻宋'
}
.plant_count .p_c .span_line2{
    width: 200px;
    height: 1px;
    background: #76694c;
    margin: 10px 0 6px 0;
}
.plant_count .p_c .span3{
    color:#dbcc93;
    font-size:14px;
    line-height: 22px;
}
.plant_count .p_c .span3 i{
    display: block;
    width: 62%;
}
.plant_count .p_c .span_line3{
    width: 130px;
    height: 1px;
    background: #76694c;
    margin-top: 20px;
}

/* -------------------- VIDEO BOX (USED IN HTML: v_box a1 a2 plant_icon v_btn yj_mp yj_jn) -------------------- */
.v_box{
    width: 420px;
    height: 210px;
    position: absolute;
    top: 670px;
    left: 50px;
    z-index: 6;
    overflow: hidden;
}
.v_box .a1{
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: block;
    border:1px solid #ad9d7d;
    position: relative;
    float: left;
    margin:55px 0 0 80px;
    transition:all 0.15s ease-out;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.v_box .a2{
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: block;
    float: left;
    margin: 55px 0 0 24px;
    border:1px solid #ad9d7d;
    position: relative;
    transition:all .15s ease-out;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.v_box a.on{
    transform: rotate(45deg) scale(1.4);
    -ms-transform: rotate(45deg) scale(1.4);
    transform: rotate(45deg) scale(1.4);
    z-index: 3;
}
.v_box a.on .v_btn{
    display: block;
}
.v_box a.on img{
    transform: rotate(0deg) scale(0.7);
    margin: 0 0 0 6px;
}
.v_box a .plant_icon{
    width: 36px;
    height: 50px;
    color:#aea490;
    font-size:16px;
    margin: 27px 0 0 37px;
    z-index: 3;
    position: relative;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.v_box a.on .plant_icon{
    width: 36px;
    height: 50px;
    color:#aea490;
    font-size:16px;
    display: none;
    margin: 27px 0 0 37px;
    z-index: 3;
    position: relative;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.v_box .v_btn{
    width: 150px;
    height: 150px;
    background: #fff;
    background-color: transparent;
    position: absolute;
    top:0;
    left:0;
    text-align: center;  
    z-index: 6;
    display: none;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.v_box .v_btn.on{
    color:#aea490;
    font-size: 14px;
    width: 100px;
    height: 100px;
    top: 0px;
    left: 0px;
}
.v_box .v_btn.on img{
    margin: 10px 0 0 6px;
}
.v_box .v_btn.on p{
    color: #fff;
    font-size: 12px;
    width: 100px;
    margin-top:-6px;
}
.v_box .v_btn img{
    margin: -20px 0 0 6px;
}
.v_box .v_btn p{
    color:#fff;
    font-size: 12px;
    width: 150px;
    margin-top:-6px;
}

/* -------------------- NEXT BUTTON (USED IN HTML: next_btn) -------------------- */
.next_btn{
    width: 164px;
    height: 136px;
    background:url(/img/next_b.png) no-repeat;
    display: block;
    position: absolute;
    left:50%;
    bottom: 20px;
    margin-left:-82px;
    z-index: 10;
    -webkit-animation: arrow 2s infinite ease;
    -moz-animation: arrow 2s infinite ease;
    -ms-animation: arrow 2s infinite ease;
    animation: arrow 2s infinite ease;
}

/* ===================================================================== */
/* ======================= ONLY SLIDE: 御剑 (bg6) ======================= */
/* ===================================================================== */

.bg6{
    width: 100%;
    height: 100%;

    background-size: 100% 100%;
}

.name_yj{
    width: 332px;
    height: 282px;
    background:url(/img/name_yj.png) no-repeat;
    position: absolute;
    top:140px;
    left:60px;
    transform:translateX(0px);
    opacity:0;
    transition:all 1s;
}
.ani-slide .name_yj{
    transform:translateX(0);
    opacity:1;
}

.bg_img6{
    width: 652px;
    height: 652px;
    background:url(/img/zy_icon.png) no-repeat;
    position: absolute;
    top:80px;
    right: 170px;
    z-index: 2;
    -webkit-animation: Positive 40s linear infinite;
    -webkit-animation-fill-mode: both;
    animation: Positive 40s linear infinite;
    animation-fill-mode: both;
}

.peo_img6{
    width: 1205px;
    height: 891px;
    background:url(/img/ly.png) no-repeat;
    position: absolute;
    top:66px;
    right: -50px;
    z-index: 3;
}

/* Buttons bg6 */
.btn_box .zf_btn6 a.zf1 {
    width: 112px;
    height: 112px;
    background: url(/img/yj_btn2.png) no-repeat;
    display: block;
}
.btn_box .zf_btn6 a.zf1.on {
    background-position: -112px 0;
    position: relative;
    z-index: 2;
}
.btn_box .zf_btn6 a.zf2 {
    width: 112px;
    height: 112px;
    background: url(/img/yj_btn1.png) no-repeat;
    display: block;
    margin-top: -14px;
}
.btn_box .zf_btn6 a.zf2.on {
    background-position: -112px 0;
    position: relative;
    z-index: 2;
}

/* Video badges for bg6 */
.v_box .a1 .yj_mp{
    width: 120px;
    height: 120px;
    background:url(/img/yj_mp.png) no-repeat;
    position: absolute;
    left:-10px;
    top:-10px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.v_box .a2 .yj_jn{
    width: 121px;
    height: 121px;
    background:url(/img/yj_jn.png) no-repeat;
    position: absolute;
    left: -10px;
    top: -10px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* -------------------- KEYFRAMES (REQUIRED) -------------------- */
@keyframes arrow {
    0%, 100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    50% {
        -webkit-transform: translate(0, -10px);
        -moz-transform: translate(0, -10px);
        -ms-transform: translate(0, -10px);
        -o-transform: translate(0, -10px);
        transform: translate(0, -10px);
    }
}
@-webkit-keyframes arrow {
    0%, 100% {
        -webkit-transform: translate(0, 0);
    }
    50% {
        -webkit-transform: translate(0, -10px);
    }
}
@-moz-keyframes arrow {
    0%, 100% {
        -moz-transform: translate(0, 0);
    }
    50% {
        -moz-transform: translate(0, -10px);
    }
}
@-o-keyframes arrow {
    0%, 100% {
        -o-transform: translate(0, 0);
    }
    50% {
        -o-transform: translate(0, -10px);
    }
}

@-webkit-keyframes Positive {
    from{
        -webkit-transform:rotateZ(0deg);
    }
    to{
        -webkit-transform:rotateZ(360deg);
    }
}
@keyframes Positive {
    from{
        transform:rotateZ(0deg);
    }
    to{
        transform:rotateZ(360deg);
    }
}
@-moz-keyframes Positive {
    from{
        -moz-transform:rotateZ(0deg);
    }
    to{
        -moz-transform:rotateZ(360deg);
    }
}
@-o-keyframes Positive {
    from{
        -o-transform:rotateZ(0deg);
    }
    to{
        -o-transform:rotateZ(360deg);
    }
}

@keyframes fadeInRight1 {
    0% {
        opacity: 0;
        transform: translate3d(20%, 0, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}
@-webkit-keyframes fadeInRight1 {
    0% {
        opacity: 0;
        transform: translate3d(20%, 0, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}
@-moz-keyframes fadeInRight1 {
    0% {
        opacity: 0;
        transform: translate3d(20%, 0, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}
@-o-keyframes fadeInRight1 {
    0% {
        opacity: 0;
        transform: translate3d(20%, 0, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}
/* ================================
   HEADER Animated BG (inside header only)
   Put this at the END of css/index.css
   ================================ */

/* الهيدر يبقى container للخلفية */
header.hero-header{
    position: relative;
    overflow: hidden;      /* يمنع الخلفية تطلع برا الهيدر */
    min-height: 520px;     /* عدّل الرقم حسب طول الهيدر اللي تريده */
}

/* الخلفية جوه الهيدر فقط */
#animated-bg{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* خلي السوايبر ياخد نفس مساحة الهيدر */
#animated-bg .swiper-container,
#animated-bg .swiper-wrapper,
#animated-bg .swiper-slide{
    width: 100%;
    height: 100%;
}

/* محتوى الهيدر فوق الخلفية */
header.hero-header .header-content{
    position: relative;
    z-index: 2;
}
/* =========================================
   ✅ إصلاح قص السلايدر (Slider Fix)
   ========================================= */

:root {
    /* زيادة ارتفاع الهيدر ليسمح بظهور الصور كاملة */
    --hero-slide-height: 850px !important; 
}

/* تصغير محتويات السلايد قليلاً لتناسب الشاشات وتتوسط الهيدر */
.w1200 {
    transform: scale(0.9); /* تصغير بنسبة 90% */
    transform-origin: center top; /* التمركز من الأعلى والمنتصف */
    margin-top: 20px; /* إزاحة بسيطة للأسفل */
}

/* إذا كانت الصورة ما تزال مقطوعة من الأعلى، نرفعها قليلاً */
.peo_img6 {
    top: 20px !important; /* كان 66px */
}

/* =========================================
   ✅ إصلاح الفوتر (Footer Fix)
   ========================================= */

footer {
    /* إلغاء الصورة البنية القديمة */
    background-image: none !important; 
    
    /* جعل الخلفية شفافة ليظهر خلفية الموقع الرئيسية، أو لون أسود شفاف */
    background-color: rgba(0, 0, 0, 0.8) !important; 
    
    /* إزالة الهوامش السلبية التي ترفعه للأعلى أكثر من اللازم */
    margin-top: 0 !important; 
}

/* الجزء السفلي من الفوتر (الحقوق) */
.second-footer {
    /* تغيير اللون البني الغامق إلى شفاف أو أسود */
    background-color: rgba(0, 0, 0, 0.9) !important;
    border-top: 1px solid #333; /* خط فاصل خفيف */
}

/* تعديل المسافات داخل الفوتر */
.first-footer {
    padding-top: 50px !important; /* تقليل المسافة العلوية الكبيرة */
    padding-bottom: 50px !important;
}