.brand-vision{

    padding:80px 8%;

    background:

            linear-gradient(
                    135deg,
                    #ffffff,
                    #f4eee2
            );

    position:relative;

    overflow:hidden;

}



.vision-decoration{


    position:absolute;

    width:750px;

    height:750px;


    border-radius:50%;


    background:

            radial-gradient(
                    circle,
                    #11402c,
                    transparent 65%
            );


    opacity:.12;


    right:-350px;

    top:-250px;


}




.vision-wrapper{


    display:flex;

    align-items:center;

    gap:120px;


}





/* تصویر */


.vision-visual{


    width:48%;

    position:relative;


}



.image-frame{


    position:relative;

    padding:20px;


}



.image-frame::before{


    content:"";

    position:absolute;

    inset:0;


    border:1px solid rgba(198,169,107,.4);


    border-radius:40px;


    transform:rotate(-4deg);


}



.image-frame img{


    width:100%;

    height:700px;

    object-fit:cover;


    border-radius:35px;


    position:relative;


    box-shadow:

            0 60px 120px rgba(0,0,0,.18);


    animation:
            visionFloat 7s infinite ease-in-out;


}




.gold-light{


    position:absolute;

    width:200px;

    height:200px;

    background:#d9b56c;

    filter:blur(80px);

    opacity:.35;

    right:-50px;

    top:50px;


}





.floating-box{


    position:absolute;


    left:-60px;

    bottom:80px;


    width:260px;


    padding:35px;


    background:

            rgba(255,255,255,.85);


    backdrop-filter:blur(20px);


    border-radius:30px;


    box-shadow:

            0 40px 80px rgba(0,0,0,.15);


    border:

            1px solid rgba(198,169,107,.2);


}



.floating-box span{


    letter-spacing:5px;

    font-size:13px;

    color:#c6a96b;


}



.floating-box h3{


    font-size:35px;

    line-height:1.2;

    margin:15px 0;


}



.floating-box .line{


    height:1px;

    background:#c6a96b;

    width:60px;


}



.floating-box p{


    font-size:14px;

    color:#777;


}





/* متن */


.vision-text{


    width:52%;


}



.section-tag{


    color:#11402c;


}



.section-tag span{


    background:#c6a96b;


}





.vision-text h2{


    font-size:40px;

    font-weight:400;

    line-height:1.55;


    color:#11402c;


    margin:35px 0;


}



.vision-text h2 strong{


    color:#c6a96b;


    font-weight:800;


}





.vision-text>p{


    font-size:21px;

    line-height:45px;


    color:#777;


}





/* کارت ها */


.vision-grid{


    margin-top:50px;


    display:flex;

    flex-direction:column;

    gap:18px;


}




.vision-box{


    display:flex;

    align-items:center;

    gap:25px;


    padding:28px;


    background:

            linear-gradient(
                    145deg,
                    #ffffff,
                    #faf4e8
            );


    border-radius:30px;


    border:

            1px solid rgba(17,64,44,.12);


    box-shadow:

            0 20px 60px rgba(17,64,44,.08);


    transition:.5s;


}


.vision-box:hover{


    transform:

            translateX(-20px);


    border-color: #11402c;


    box-shadow:

            0 35px 80px rgba(17,64,44,.18);


}



.vision-icon{


    width:70px;

    height:70px;


    border-radius:50%;


    background:#faf2e3;


    display:flex;

    align-items:center;

    justify-content:center;


}



.vision-icon i{


    font-size:30px;

    color:#c6a96b;


}



.vision-box h4{


    font-size:23px;

    color:#11402c;


}



.vision-box p{


    margin:0;

    color:#888;


}




@keyframes visionFloat{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-20px);

    }


}
/* =====================================
   BRAND VISION RESPONSIVE FIX
===================================== */


@media(max-width:1200px){


    .vision-wrapper{

        gap:60px;

    }



    .vision-text h2{

        font-size:48px;

    }



    .vision-text>p{

        font-size:18px;

        line-height:38px;

    }



    .image-frame img{

        height:600px;

    }


}





@media(max-width:992px){


    .brand-vision{

        padding:70px 5%;

    }



    .vision-wrapper{

        flex-direction:column;

        gap:70px;

    }



    .vision-visual,
    .vision-text{

        width:100%;

    }



    .vision-visual{

        order:1;

    }



    .vision-text{

        order:2;

    }



    .image-frame img{

        height:600px;

    }



    .floating-box{

        left:20px;

        bottom:40px;

        width:240px;

    }



    .vision-text h2{

        font-size:42px;

        text-align:center;

    }



    .vision-text>p{

        text-align:center;

        font-size:17px;

        line-height:35px;

    }



    .vision-grid{

        margin-top:40px;

    }


}





@media(max-width:600px){


    .brand-vision{

        padding:50px 20px;

    }



    .vision-decoration{

        width:400px;

        height:400px;

        right:-200px;

    }



    .image-frame{

        padding:12px;

    }



    .image-frame img{

        height:420px;

        border-radius:25px;

    }



    .image-frame::before{

        border-radius:25px;

    }



    .floating-box{

        position:relative;

        left:auto;

        bottom:auto;

        margin:-70px auto 0;

        width:90%;

        padding:25px;

    }



    .floating-box h3{

        font-size:28px;

    }



    .vision-text h2{

        font-size:32px;

        line-height:1.8;

        margin:25px 0;

    }



    .vision-text>p{

        font-size:15px;

        line-height:32px;

    }



    .vision-box{

        padding:20px;

        gap:15px;

        border-radius:22px;

    }



    .vision-box:hover{

        transform:none;

    }



    .vision-icon{

        width:55px;

        height:55px;

        flex-shrink:0;

    }



    .vision-icon i{

        font-size:22px;

    }



    .vision-box h4{

        font-size:18px;

    }



    .vision-box p{

        font-size:14px;

    }


}





@media(max-width:380px){


    .image-frame img{

        height:350px;

    }



    .floating-box{

        padding:20px;

    }



    .vision-text h2{

        font-size:28px;

    }


}