:root {
    --logo-gold: #C58A1A;
    --logo-gold-light: #D9A441;
    --logo-orange: #A8431E;
    --logo-bg: #F8F6F2;
}

/* background only */
.bg-logo {
    position: relative;
    background-color: var(--logo-bg);
    overflow: hidden;
    z-index: 1;
}

/* content only above shapes */
.bg-logo .container,
.bg-logo .content {
    position: relative;
    z-index: 3;
}

/* common decorative layer */
.logo-shape,
.circle,
.square,
.star,
.smile,
.pen-shape,
.pen-shape-bottom,
.logo-bg {
    position: absolute;
    pointer-events: none;
}

/* logo corner shapes */
.logo-shape {
    width: 420px;
    height: 420px;
    z-index: 0;
    transform: rotate(45deg);
}

/* top left */
.shape-top-left {
    top: -120px;
    left: -100px;
    background: linear-gradient(135deg, var(--logo-gold), var(--logo-gold-light));
    border-radius: 120px 220px 120px 220px;
    opacity: 0.12;
}

/* top right */
.shape-top-right {
    top: -120px;
    right: -100px;
    background: linear-gradient(135deg, var(--logo-orange), var(--logo-gold));
    border-radius: 220px 120px 220px 120px;
    opacity: 0.10;
}

/* bottom left */
.shape-bottom-left {
    bottom: -140px;
    left: -120px;
    background: linear-gradient(135deg, var(--logo-gold-light), var(--logo-gold));
    border-radius: 220px 120px 220px 120px;
    opacity: 0.10;
}

/* bottom right */
.shape-bottom-right {
    bottom: -140px;
    right: -120px;
    background: linear-gradient(135deg, var(--logo-orange), var(--logo-gold-light));
    border-radius: 120px 220px 120px 220px;
    opacity: 0.12;
}

@media (max-width: 768px) {
    .logo-shape {
        width: 260px;
        height: 260px;
        opacity: 0.08;
    }
}




:root {
    --logo-gold: #C58A1A;
    --logo-gold-light: #D9A441;
    --logo-orange: #A8431E;
    --logo-bg: #F8F6F2;
}

/* الحاوية الرئيسية */
/*.brand-bg-section {*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*    background: var(--logo-bg);*/
/*    z-index: 1;*/
/*}*/

/*!* المحتوى فوق الخلفية *!*/
/*.brand-bg-section .container {*/
/*    position: relative;*/
/*    z-index: 2;*/
/*}*/

.pen-shape {
    position: absolute;
    top: 0;
    left: 50%;
    width: 500px;
    height: 120px;
    background: linear-gradient(135deg, #A8431E, #C58A1A);
    border-radius: 80px;
    transform: translate(-50%, -50%) rotate(-35deg);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

/* رأس القلم */
.pen-shape::before {
    content: "";
    position: absolute;
    left: -110px;
    top: 0;
    width: 160px;
    height: 120px;
    background: linear-gradient(135deg, #D9A441, #C58A1A);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    border-radius: 20px;
}

/* سن القلم */
.pen-shape::after {
    content: "";
    position: absolute;
    right: -35px;
    top: 35px;
    width: 45px;
    height: 50px;
    background: #A8431E;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}




/* القلم المعكوس في الأسفل */
.pen-shape-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 500px;
    height: 120px;
    background: linear-gradient(135deg, #A8431E, #C58A1A);
    border-radius: 80px;
    transform: translate(-50%, 50%) rotate(-35deg) scaleX(-1);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

/* رأس القلم */
.pen-shape-bottom::before {
    content: "";
    position: absolute;
    left: -110px;
    top: 0;
    width: 160px;
    height: 120px;
    background: linear-gradient(135deg, #D9A441, #C58A1A);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    border-radius: 20px;
}

/* سن القلم */
.pen-shape-bottom::after {
    content: "";
    position: absolute;
    right: -35px;
    top: 35px;
    width: 45px;
    height: 50px;
    background: #A8431E;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}









/* الدوائر */
.circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: floatCircle 8s ease-in-out infinite;
}

/* أحجام ومواقع الدوائر */
.circle-1 {
    width: 120px;
    height: 120px;
    top: 10%;
    left: 2%;
    background: rgba(197, 138, 26, 0.20);
    animation-delay: 0s;
}

.circle-2 {
    width: 70px;
    height: 70px;
    top: 20%;
    right: 12%;
    background: rgba(168, 67, 30, 0.15);
    animation-delay: 1s;
}

.circle-3 {
    width: 40px;
    height: 40px;
    bottom: 18%;
    left: 15%;
    background: rgba(217, 164, 65, 0.25);
    animation-delay: 2s;
}

.circle-4 {
    width: 90px;
    height: 90px;
    bottom: 12%;
    right: 20%;
    background: rgba(197, 138, 26, 0.12);
    animation-delay: 3s;
}

.circle-5 {
    width: 55px;
    height: 55px;
    top: 55%;
    left: 5%;
    background: rgba(168, 67, 30, 0.18);
    animation-delay: 1.5s;
}

.circle-6 {
    width: 110px;
    height: 110px;
    top: 70%;
    right: 8%;
    background: rgba(217, 164, 65, 0.12);
    animation-delay: 2.5s;
}

.circle-7 {
    width: 35px;
    height: 35px;
    top: 35%;
    left: 40%;
    background: rgba(197, 138, 26, 0.18);
    animation-delay: 0.8s;
}

.circle-8 {
    width: 65px;
    height: 65px;
    bottom: 35%;
    right: 35%;
    background: rgba(168, 67, 30, 0.14);
    animation-delay: 1.8s;
}

/* حركة الدوائر */
@keyframes floatCircle {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.05);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

/* دعم الشاشات الصغيرة */
@media (max-width: 768px) {
    .pen-shape {
        width: 260px;
        height: 80px;
        top: 40px;
        right: -80px;
    }

    .circle {
        transform: scale(0.7);
    }
}

/* تقليل الحركة للمستخدمين الذين يفضلون ذلك */
@media (prefers-reduced-motion: reduce) {
    .circle {
        animation: none;
    }
}




/* المربعات */
.square {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.15;
    animation: floatSquare 10s ease-in-out infinite;
    transform: rotate(45deg);
}

/* تحديد الأحجام والمواقع */
.square-1 {
    width: 40px;
    height: 40px;
    top: 12%;
    left: 22%;
    background: rgba(197, 138, 26, 0.20);
    animation-delay: 0.5s;
}

.square-2 {
    width: 70px;
    height: 70px;
    top: 30%;
    right: 18%;
    background: rgba(168, 67, 30, 0.15);
    animation-delay: 1.5s;
}

.square-3 {
    width: 30px;
    height: 30px;
    bottom: 18%;
    left: 28%;
    background: rgba(217, 164, 65, 0.25);
    animation-delay: 2.5s;
}

.square-4 {
    width: 90px;
    height: 90px;
    top: 10%;
    right: 30%;
    background: rgba(197, 138, 26, 0.50);
    animation-delay: 3.5s;
}

.square-5 {
    width: 50px;
    height: 50px;
    top: 55%;
    left: 10%;
    background: rgba(168, 67, 30, 0.18);
    animation-delay: 1s;
}

.square-6 {
    width: 110px;
    height: 110px;
    top: 70%;
    right: 30%;
    background: rgba(217, 164, 65, 0.12);
    animation-delay: 2s;
}

.square-7 {
    width: 35px;
    height: 35px;
    top: 42%;
    left: 48%;
    background: rgba(197, 138, 26, 0.18);
    animation-delay: 0.8s;
}

.square-8 {
    width: 60px;
    height: 60px;
    bottom: 35%;
    right: 40%;
    background: rgba(168, 67, 30, 0.14);
    animation-delay: 2.8s;
}

/* حركة المربعات */
@keyframes floatSquare {
    0% {
        transform: translateY(0) rotate(45deg);
    }
    50% {
        transform: translateY(-20px) rotate(45deg);
    }
    100% {
        transform: translateY(0) rotate(45deg);
    }
}
















/* النجوم */
.star {
    position: absolute;
    width: 25px;
    height: 25px;
    background: linear-gradient(135deg, #D9A441, #C58A1A);
    clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
    );
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
    animation: twinkle 4s ease-in-out infinite;
}

/* مواقع وأحجام النجوم */
.star-1 {
    width: 25px;
    height: 25px;
    top: 10%;
    left: 50%;
    transform: scale(0.8);
    animation-delay: 0s;
}

.star-2 {
    top: 20%;
    right: 15%;
    transform: scale(1);
    animation-delay: 1s;
}

.star-3 {
    top: 45%;
    left: 8%;
    transform: scale(0.6);
    animation-delay: 2s;
}

.star-4 {
    bottom: 20%;
    right: 10%;
    transform: scale(0.9);
    animation-delay: 1.5s;
}

.star-5 {
    bottom: 12%;
    left: 20%;
    transform: scale(0.7);
    animation-delay: 2.5s;
}

.star-6 {
    top: 60%;
    right: 30%;
    transform: scale(1.1);
    animation-delay: 0.8s;
}

.star-7 {
    top: 30%;
    left: 45%;
    transform: scale(0.5);
    animation-delay: 1.8s;
}

.star-8 {
    bottom: 35%;
    right: 40%;
    transform: scale(0.75);
    animation-delay: 2.2s;
}

/* حركة وميض النجوم */
@keyframes twinkle {
    0%, 100% {
        opacity: 0.15;
        transform: scale(0.9);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}


@media (max-width: 768px) {
    .star {
        opacity: 0.15;
        transform: scale(0.7);
    }
}

/*@media (prefers-reduced-motion: reduce) {*/
/*    .star {*/
/*        animation: none;*/
/*    }*/
/*}*/

















/* الأساسيات */
.science {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.12;
}

/* ألوان مستوحاة من الشعار */
:root {
    --logo-gold: #C58A1A;
    --logo-gold-light: #D9A441;
    --logo-orange: #A8431E;
}

/* 🧬 شكل الذرة (Atom) */
.atom {
    width: 200px;
    height: 120px;
    top: 30%;
    left: 20%;
}

.atom::before,
.atom::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--logo-gold);
    border-radius: 50%;
}

.atom::before {
    transform: rotate(60deg);
}

.atom::after {
    transform: rotate(-60deg);
}

.atom {
    border: 2px solid var(--logo-gold);
    border-radius: 50%;
    animation: spin 12s linear infinite;
}

/* ⚛️ الجزيء (Molecule) */
.molecule {
    width: 120px;
    height: 120px;
    top: 65%;
    right: 12%;
}

.molecule span {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--logo-orange);
    border-radius: 50%;
}

.molecule span:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.molecule span:nth-child(2) {
    bottom: 0;
    left: 0;
}

.molecule span:nth-child(3) {
    bottom: 0;
    right: 0;
}

.molecule::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 2px solid var(--logo-gold-light);
    transform: rotate(45deg);
}

/* 🧬 DNA */
.dna {
    width: 8px;
    height: 160px;
    top: 25%;
    right: 20%;
    background: repeating-linear-gradient(
        to bottom,
        var(--logo-gold),
        var(--logo-gold) 8px,
        transparent 8px,
        transparent 16px
    );
    animation: float 6s ease-in-out infinite;
}

/* 🔷 سداسي كيميائي */
.hexagon {
    width: 80px;
    height: 46px;
    bottom: 15%;
    left: 20%;
    background: rgba(197, 138, 26, 0.15);
    position: absolute;
}

.hexagon::before,
.hexagon::after {
    content: "";
    position: absolute;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}

.hexagon::before {
    bottom: 100%;
    border-bottom: 23px solid rgba(197, 138, 26, 0.15);
}

.hexagon::after {
    top: 100%;
    border-top: 23px solid rgba(197, 138, 26, 0.15);
}

/* ⚗️ قارورة مختبر */
.flask {
    width: 50px;
    height: 80px;
    bottom: 20%;
    right: 30%;
    border: 3px solid var(--logo-orange);
    border-top: none;
    border-radius: 0 0 20px 20px;
    position: absolute;
}

.flask::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 12px;
    width: 20px;
    height: 20px;
    border: 3px solid var(--logo-orange);
    border-bottom: none;
}

/* الحركات */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* تحسين المظهر على الشاشات الصغيرة */
@media (max-width: 768px) {
    .science {
        transform: scale(0.7);
        opacity: 0.08;
    }
}

/* تقليل الحركة لذوي الحساسية */
@media (prefers-reduced-motion: reduce) {
    .science {
        animation: none !important;
    }
}









/* الوجوه المبتسمة */
.smile {
    position: absolute;
    width: 70px;
    height: 70px;
    border: 3px solid #C58A1A;
 /*//   border-color: #C58A1A;*/
    border-radius: 50%;
    background: transparent;
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
    animation: floatSmile 6s ease-in-out infinite;
}

/* العيون */
.smile::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 18px;
    width: 8px;
    height: 8px;
    /*background: #333;*/
    border-radius: 50%;
    /*box-shadow: 20px 0 #333;*/

    background: #A8431E;
    box-shadow: 20px 0 #A8431E;

}

/* الابتسامة */
.smile::after {
    content: "";
    position: absolute;
    bottom: 16px;
    left: 50%;
    width: 28px;
    height: 14px;
    border: 3px solid #C58A1A;
    border-top: none;
    border-radius: 0 0 20px 20px;
    transform: translateX(-50%);

    /*border-color: #C58A1A;*/
}

/* مواقع مختلفة */
.smile-1 {
    top: 15%;
    left: 8%;
    animation-delay: 0s;
}

.smile-2 {
    top: 25%;
    right: 10%;
    animation-delay: 1.5s;
}

.smile-3 {
    bottom: 20%;
    left: 15%;
    animation-delay: 3s;
}

.smile-4 {
    bottom: 10%;
    right: 20%;
    animation-delay: 4.5s;
}

/* حركات خفيفة */
@keyframes floatSmile {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* تحسين العرض على الشاشات الصغيرة */
@media (max-width: 768px) {
    .smile {

        width: 50px;
        height: 50px;
        opacity: 0.1;
        border-width: 2px;
    }

    .smile::before {
        width: 6px;
        height: 6px;
        left: 12px;
        top: 16px;
        box-shadow: 16px 0 #333;
    }

    .smile::after {
        width: 20px;
        height: 10px;
        bottom: 12px;
    }
}

/* تقليل الحركة عند الحاجة */
@media (prefers-reduced-motion: reduce) {
    .smile {
        animation: none;
    }
}













/* خلفية الشعار */
.logo-bg {
    position: absolute;
    width: 250px;
    height: 250px;
    background-image: url("{{ asset('/all/assets/logo.png') }}");
  /*//  background-image: url('/images/logo.png'); !* عدل المسار حسب مشروعك *!*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
    animation: floatLogo 10s ease-in-out infinite;
}

/* مواضع مختلفة */
.logo-bg-1 {
    top: 10%;
    left: 5%;
    transform: rotate(-15deg);
    animation-delay: 0s;
}

.logo-bg-2 {
    top: 55%;
    right: 8%;
    transform: rotate(20deg);
    animation-delay: 2s;
}

.logo-bg-3 {
    bottom: 12%;
    left: 40%;
    transform: rotate(-10deg);
    animation-delay: 4s;
}

/* حركة عائمة ناعمة */
@keyframes floatLogo {
    0%, 100% {
        transform: translateY(0) rotate(var(--rotate, 0deg));
    }
    50% {
        transform: translateY(-15px) rotate(var(--rotate, 0deg));
    }
}

@media (max-width: 768px) {
    .logo-bg {
        width: 80px;
        height: 80px;
        opacity: 0.05;
    }
}
@media (prefers-reduced-motion: reduce) {
    .logo-bg {
        animation: none;
    }
}