/*==========================================
 FAMILY SECTION
==========================================*/

.family-section{
   width:100%;
    padding:90px 28px 40px;
    background:var(--section-bg);
    box-sizing:border-box;
    position: relative;
     overflow: visible;
}


.family-container{
    max-width:1280px;
    margin:auto;
    position:relative;
}


/* Heading */

.section-heading{
    text-align:center;
    margin-bottom:40px;
    padding:0 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
}


.section-heading h2{
    font-size:32px;
    color:var(--primary-dark);
    margin:0 0 15px;
    padding-bottom:12px;
    position:relative;
}


.section-heading h2::after{
    content:"";
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:80px;
    height:3px;
    border-radius:50px;
    background:linear-gradient(
        90deg,
        #6F8F72,
        #9BB58E,
        #D7C5A8
    );
}


.section-heading p{
    font-size:16px;
    color:rgba(46,51,47,.7);
    max-width:600px;
    line-height:1.8;
}


/*==========================================
 GRID DESKTOP
==========================================*/

.family-grid{
    display:grid;
    grid-template-columns:repeat(7, minmax(160px, 1fr));
    gap:16px;
    margin-top:40px;
}

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

.family-card{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    background:rgba(252,251,247,.86);
    backdrop-filter:blur(14px);
    border:1px solid rgba(111,143,114,.16);
    box-shadow:0 10px 30px rgba(111,143,114,.08);
    transition:.4s;
    direction:rtl;
    display:flex !important;
    flex-direction:column !important;
}

.family-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--gold),
        var(--primary),
        transparent
    );
}

/* Image */
.family-photo-wrap{
    width:100%;
    height:400px;
    overflow:hidden;
    background:rgba(252,251,247,.86);
    flex-shrink:0 !important;
}

.family-photo{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
}

/* Info */
.family-info{
    padding:2px 8px 6px !important;
    text-align:center;
    flex:1 1 auto !important;
}

.family-name{
    font-size:18px;
    font-weight:700;
    color:var(--primary-dark);
    margin:0 !important;
    padding:0 !important;
    line-height:1.3 !important;
}

.family-role{
    font-size:14px;
    color:var(--gold);
    margin:2px 0 !important;
    padding:0 !important;
    line-height:1.3 !important;
}

.family-license{
    font-size:12px;
    color:rgba(46,51,47,.85);
    margin:2px 0 !important;
    padding:0 !important;
    line-height:1.3 !important;
}

.family-bio{
    font-size:13px;
    color:rgba(46,51,47,.78);
    padding:3px 0 0 0 !important;
    margin:0 !important;
    border-top:1px solid rgba(111,143,114,.1);
    line-height:1.4 !important;
}

/*==========================================
   TABLET
==========================================*/

@media(max-width:992px){

    .family-section{
        padding:50px 15px 35px;
    }


    .section-heading{
        margin-bottom:30px;
    }


    .section-heading h2{
        font-size:26px;
    }


    .section-heading p{
        font-size:14px;
    }


    .family-grid{

        display:flex;
        flex-direction:row;
        direction:ltr;

        width:100%;

        overflow-x:auto;
        overflow-y:hidden;

        gap:18px;

        scroll-behavior:smooth;
        scroll-snap-type:x mandatory;

        scrollbar-width:none;
    }


    .family-grid::-webkit-scrollbar{
        display:none;
    }


    .family-card{

        flex:0 0 300px;
        scroll-snap-align:center;

    }


    .family-photo-wrap{

        height:320px;

    }

}


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

@media(max-width:768px){


    .family-section{

        padding:40px 10px 30px;

    }


    .section-heading{

        margin-bottom:25px;

    }


    .section-heading h2{

        font-size:22px;

    }


    .section-heading p{

        font-size:12px;

        line-height:1.8;

    }


    .family-grid{

        display:flex;

        flex-direction:row;

        direction:ltr;

        width:100%;

        overflow-x:auto;

        overflow-y:hidden;

        gap:12px;

        scroll-behavior:smooth;

        scroll-snap-type:x mandatory;

        scrollbar-width:none;

    }


    .family-grid::-webkit-scrollbar{

        display:none;

    }



    .family-card{

        flex:0 0 88%;

        margin:0 6%;

        scroll-snap-align:center;

    }



    .family-photo-wrap{

        height:280px;

    }


    .family-photo{

        object-position:center 30%;

    }


}



@media(max-width:480px){

    .family-card{

        flex-basis:90%;

    }


    .family-photo-wrap{

        height:250px;

    }

}

/* فلش ها در دسکتاپ مخفی */
.family-btn{
    display:none;
}


/* فلش ها در تبلت و موبایل */
@media(max-width:992px){

    .family-btn{

        display:flex;

        position:absolute;
        top:50%;
        transform:translateY(-50%);

        z-index:20;

        width:36px;
        height:36px;

        align-items:center;
        justify-content:center;

        border-radius:50%;

        border:none;

        background:#fff;

        color:#6F8F72;

        font-size:24px;

        cursor:pointer;

        box-shadow:0 4px 10px rgba(0,0,0,.15);

    }


    .family-btn.prev{
        left:5px;
    }


    .family-btn.next{
        right:5px;
    }

}