/*==========================================
        PREMIUM DIVIDER
==========================================*/

.brand-divider{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;

    padding:50px 0px 120px 0px;

    overflow:hidden;

    background:
            linear-gradient(
                    180deg,
                    #fbfaf7,
                    #f4f0e8,
                    #fbfaf7
            );

}

/*==============================*/

.divider-bg{

    position:absolute;

    inset:0;

    background:

            radial-gradient(circle at center,
            rgba(12,89,60,.08),
            transparent 55%),

            radial-gradient(circle,
            rgba(199,162,94,.10),
            transparent 65%);

}

/*==============================*/

.divider-line{

    flex:1;

    height:2px;

    background:

            linear-gradient(

                    to right,

                    transparent,

                    #0C593C,

                    #C7A25E,

                    transparent

            );

    position:relative;

}

.divider-line::after{

    content:"";

    position:absolute;

    width:12px;

    height:12px;

    border-radius:50%;

    background:#C7A25E;

    top:-5px;

    box-shadow:

            0 0 20px rgba(199,162,94,.6);

}

.left::after{

    right:60px;

}

.right::after{

    left:60px;

}

/*==============================*/

.logo-wrapper{

    position:relative;

    width:220px;

    height:220px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* لوگو */

.logo-wrapper img{

    width:170px;

    z-index:20;

    border-radius:50%;

    transition:.5s;

    animation:

            logoFloat 5s ease-in-out infinite;

}

/* Hover */

.logo-wrapper:hover img{

    transform:scale(1.08);

}

/*==============================*/

.ring{

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(199,162,94,.4);

}

.ring1{

    width:180px;

    height:180px;

    animation:spin 12s linear infinite;

}

.ring2{

    width:205px;

    height:205px;

    border-color:#0C593C;

    animation:spinReverse 18s linear infinite;

}

.ring3{

    width:230px;

    height:230px;

    border-style:dashed;

    border-color:#C7A25E;

    animation:spin 30s linear infinite;

}

/*==============================*/

/* Shine */

.shine{

    position:absolute;

    width:50px;

    height:250px;

    background:

            rgba(255,255,255,.35);

    transform:

            rotate(25deg);

    left:-90px;

    animation:shineMove 4s infinite;

    filter:blur(4px);

}

/*==============================*/

/* Glow */

.logo-wrapper::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    border-radius:50%;

    background:

            radial-gradient(

                    rgba(199,162,94,.18),

                    transparent 70%

            );

    animation:pulse 3s infinite;

}

.logo-wrapper::after{

    content:"";

    position:absolute;

    width:190px;

    height:190px;

    border-radius:50%;

    background:

            radial-gradient(

                    rgba(12,89,60,.16),

                    transparent 70%

            );

}

/*==============================*/

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes spinReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}

@keyframes pulse{

    0%{

        transform:scale(.85);

        opacity:.5;

    }

    50%{

        transform:scale(1.1);

        opacity:1;

    }

    100%{

        transform:scale(.85);

        opacity:.5;

    }

}

@keyframes shineMove{

    0%{

        left:-120px;

    }

    100%{

        left:260px;

    }

}

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}
/*==============================
      CAPTION
==============================*/

.divider-caption{

    position:absolute;

    left:50%;

    bottom:25px;

    transform:translateX(-50%);

    text-align:center;

    z-index:30;

}

.divider-caption h3{

    color:#0B513B;

    font-size:18px;

    letter-spacing:10px;

    font-weight:600;

    margin-bottom:12px;

    text-transform:uppercase;

}

.divider-caption p{

    color:#8a8a8a;

    font-size:14px;

    letter-spacing:5px;

    text-transform:uppercase;

    position:relative;

    display:inline-block;

    padding:0 35px;

}

.divider-caption p span{

    color:#C7A25E;

    font-weight:600;

}

/* خطوط دو طرف متن */

.divider-caption p::before,

.divider-caption p::after{

    content:"";

    position:absolute;

    top:50%;

    width:45px;

    height:1px;

    background:

            linear-gradient(to right,#0B513B,#C7A25E);

}

.divider-caption p::before{

    right:100%;

    margin-right:18px;

}

.divider-caption p::after{

    left:100%;

    margin-left:18px;

}