/* =========================
 WHY GOLD SECTION
========================= */


.why-gold-modern{

    padding:80px 8%;

    background:

            radial-gradient(
                    circle at 20% 20%,
                    rgba(198,169,107,.22),
                    transparent 35%
            ),

            radial-gradient(
                    circle at 90% 80%,
                    rgba(198,169,107,.15),
                    transparent 30%
            ),

            linear-gradient(
                    135deg,
                    #f6f0e5,
                    #ebe0cc
            );


    position:relative;

    overflow:hidden;


}




.why-bg-circle{


    position:absolute;


    width:1000px;

    height:1000px;


    border-radius:50%;


    background:


            radial-gradient(
                    circle,
                    rgba(198,169,107,.28),
                    transparent 65%
            );


    right:-450px;

    top:-300px;


    filter:blur(10px);


    animation:

            glowMove 10s infinite alternate;


}





/* MAIN ROW */

.why-modern-wrapper{

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:space-between;

    gap:70px;

}


@keyframes glowMove{


    from{

        transform:translateY(0);

    }


    to{

        transform:translateY(40px);

    }


}


/* =========================
 HEADER
========================= */


.why-modern-header{

    width:35%;

    text-align:right;

}



.modern-label{


    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:15px;


    color:#c6a96b;

    letter-spacing:5px;

    font-size:15px;

}




.modern-label span{

    width:60px;

    height:1px;

    background:#c6a96b;

}





.why-modern-header h2{


    font-size:60px;

    font-weight:300;

    line-height:1.5;

    margin:30px 0;

    color:#222;

}




.why-modern-header h2 strong{

    color:#c6a96b;

    font-weight:800;

}




.why-modern-header p{


    font-size:19px;


    line-height:42px;


    color:#6d6558;


}

.expert-card{

    width:100%;

    height:260px;

    padding:35px 25px;


    background:

            linear-gradient(
                    145deg,
                    rgba(255,255,255,.95),
                    rgba(250,243,227,.75)
            );


    backdrop-filter:blur(20px);


    border-radius:35px;


    border:

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


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    text-align:center;


    transition:.5s;


    position:relative;


    overflow:hidden;

}
.expert-card::before{


    content:"";


    position:absolute;


    width:120px;

    height:120px;


    border-radius:50%;


    background:#c6a96b;


    opacity:.12;


    top:-50px;

    right:-40px;


}



.expert-card::after{


    content:"";


    position:absolute;


    left:0;

    bottom:0;


    width:100%;


    height:3px;


    background:

            linear-gradient(
                    90deg,
                    transparent,
                    #c6a96b,
                    transparent
            );



    transform:scaleX(0);


    transition:.5s;


}

.expert-card:hover{

    transform:translateY(-15px);

    box-shadow:

            0 35px 80px rgba(198,169,107,.25);

}


.expert-card:hover::after{


    transform:scaleX(1);


}

.expert-card h3{

    font-size:24px;

    color:#11402c;

    margin-bottom:10px;

}



.expert-card p{

    font-size:14px;

    line-height:28px;

    color:#777;

}

.expert-card i{

    font-size:40px;

    color:#c6a96b;

    margin-bottom:20px;

}
/* =========================
 EXPERT SYSTEM
========================= */

.expert-system{

    width:65%;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    align-items:stretch;

    position:relative;

}





/* حذف حالت دایره قبلی */

.connection{

    display:none;

}






/* GOLD CENTER */


.core-gold{


    flex-shrink:0;


    width:190px;

    height:190px;


    border-radius:50%;


    background:

            linear-gradient(
                    145deg,
                    #e4c98e,
                    #b88b42
            );


    display:flex;

    justify-content:center;

    align-items:center;


    box-shadow:

            0 35px 80px rgba(198,169,107,.45);


    animation:

            floating 5s infinite ease-in-out;


}






.core-inner{


    width:155px;

    height:155px;


    background:#fff;


    border-radius:50%;


    display:flex;

    flex-direction:column;


    justify-content:center;

    align-items:center;


}





.core-inner i{


    font-size:35px;

    color:#c6a96b;

}



.core-inner strong{


    font-size:25px;

    letter-spacing:4px;

    margin-top:5px;


}



.core-inner span{


    font-size:12px;

    color:#c6a96b;

    letter-spacing:3px;


}



.core-gold{


    width:220px;

    height:220px;


    border-radius:50%;


    background:


            linear-gradient(
                    145deg,
                    #f3dca4,
                    #b8893f
            );



    display:flex;


    justify-content:center;


    align-items:center;



    box-shadow:


            0 40px 100px rgba(198,169,107,.65);



    animation:

            floating 5s infinite ease-in-out;



    position:relative;


}
.core-inner{


    width:180px;

    height:180px;


    background:

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



    border-radius:50%;


    box-shadow:

            inset 0 0 30px rgba(198,169,107,.15);



}



/* =========================
 CARDS ROW
========================= */


.expert-card{


    padding:20px;


    background:

            rgba(255,255,255,.75);


    backdrop-filter:blur(20px);


    border-radius:30px;


    border:

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


    display:flex;

    flex-direction:column;


    justify-content:center;

    align-items:center;


    text-align:center;


    transition:.5s;


    position:relative;


}





.expert-card:hover{


    transform:

            translateY(-15px);


    box-shadow:

            0 30px 70px rgba(198,169,107,.25);


}





.expert-card i{


    font-size:35px;


    color:#c6a96b;


    margin-bottom:15px;


}





.number{

    position:absolute;

    top:15px;

    right:20px;

    font-size:45px;

    font-weight:900;

    color:

            rgba(198,169,107,.15);

}


.core-gold{

    display:none;

}



.expert-card h3{


    font-size:23px;

    margin:5px 0;


}




.expert-card p{


    font-size:13px;

    line-height:22px;

    color:#777;


}






/* =========================
 ANIMATION
========================= */


@keyframes floating{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-15px);

    }


}







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



@media(max-width:1300px){


    .why-modern-wrapper{


        gap:40px;

    }



    .expert-system{


        gap:15px;

    }



    .expert-card{


        width:130px;

    }


}





@media(max-width:1100px){


    .why-modern-wrapper{


        flex-direction:column;

    }



    .why-modern-header{


        width:100%;

        text-align:center;

    }



    .modern-label{

        justify-content:center;

    }



    .expert-system{


        width:100%;

        justify-content:center;

        flex-wrap:wrap;

    }



}





@media(max-width:700px){


    .why-gold-modern{


        padding:90px 20px;

    }



    .why-modern-header h2{


        font-size:65px;


        font-weight:300;


        letter-spacing:-1px;


        color:#29251f;


    }



    .why-modern-header h2 strong{


        background:

                linear-gradient(
                        90deg,
                        #c6a96b,
                        #8f6425
                );


        -webkit-background-clip:text;


        color:transparent;


    }



    .expert-system{


        flex-direction:column;

    }



    .core-gold{


        margin-bottom:20px;

    }



    .expert-card{


        width:230px;

    }

    .why-modern-header{

        width:30%;

    }




    .expert-system{

        width:100% !important;

        display:flex !important;

        gap:35px;

    }




    .expert-card{

        flex:1 !important;

        width:auto !important;

        max-width:none !important;

        height:260px;

    }

    .why-modern-header{

        width:30% !important;

    }



    .expert-system{

        width:70% !important;

    }




    @media(max-width:1100px) {

        .why-modern-wrapper {

            flex-direction: column;

        }


        .why-modern-header,
        .expert-system {

            width: 100% !important;

        }


        .expert-card {

            width: 100% !important;

        }
    }


}