body {
  top: 0;
  width: 100%;
  height:  100%;
  margin: auto;
  background-color:#ededed;
direction: rtl;overflow-x:hidden;
}
* {-webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;outline: none !important;}* {-webkit-border:none; -drag:none; -user-drag: none;user-select: none;-khtml-user-select: none;-khtml-drag: none;-khtml-user-drag:none;-o-drag: none;-o-user-drag: none;-o-user-select:none;-moz-drag:none;-moz-user-drag:none;-moz-user-select:none;-webkit-drag: none;-webkit-user-drag:none;-webkit-user-select:none;-ms-drag:none;-ms-user-drag:none;-ms-user-select:none;}*::-webkit-scrollbar {display:none;}.title{color:#111;text-align: center;font-family:Cairo;direction: rtl;font-size: min(clamp(1rem, 5vw, 3rem), 22px);}.hide {display:none;}
           
.page {
position:relative;overflow-x:hidden;transition: 0.3s;
width:100%;height:100%;
}

.fa-trash-can {color:red;}
.darkt-on {color:#d8d8d8 !important;transition: 0.8s !important;}
.darkl-on {
background:#0a5c5c25 !important;
color:#d8d8d8 !important;
transition:0.8s !important;
border-color:#0a5c5c25 !important;
border:solid #0a5c5c25 1px !important;
}

#offlineDiv {display:none;background-color:#111;position:fixed;justify-content: center;align-items: center;text-align:center;height:100%;width:100%;top:15px;bottom:0;border-radius: 0px 0px -55px -55px;opacity:0.7;z-index:98;-webkit-transition-duration: 1s;}.online {display: flex;justify-content: center;align-items: center;text-align:center;text-decoration:none;font-family:Tajawal;width:100%;height:15px;background:green;color:#ffffff;border:none;font-size:9px;z-index:4;-webkit-transition-duration: 1s;margin-left:auto;margin-right:auto;position:absolute;font-weight:600;height-line:2;top:0;}.bartop {height:100px;top:8px;width:100%;position:relative;}
.pages-container {display: flex;right:70px;top:0px;height:100%;position:absolute;display:block;width:auto;left:16%;overflow: scroll; white-space: nowrap;direction: rtl;}
.pagebtn {width: 120px;height: 40px;margin-top:30px;margin-right:5px;background-color:transparent;display: inline-flex;font-family:Tajawal;justify-content: center;align-items: center;color:#111;font-weight:600;font-size:12px;text-decoration: none;border:solid 2px #111;border-radius:10px;direction: rtl;transition: background-color 0.8s;}
.pagebtn:hover {background-color: #45a049;}
.logob {position:absolute; display:block;height:60px;right:5px;top:27px;}
.profilebtn {position:absolute; display:block;height:100%;left:0;top:0;border:none;background:none;outline:none;decoration:none;width:15%;color:#111;font-weight:900;font-size:20px;border-right:solid rgba(72,94,122,0.2) 1px;cursor: pointer;}
.notidot{width:11px;position:absolute;border:none;height:11px;border-radius:50%;background:red;display:none;top:33px;left:65%;}
.onlinedot {width:11px;position:absolute;border:none;height:11px;border-radius:55%;background:#5deb28;display:none;bottom:-8px;left:8px;opacity:0.3;}
.iconspace {padding-left:9px;}

.sidenav {height: 100%;width: 60%;position: fixed;z-index: 3;top: 0;transform:translateX(-300%);font-size:15px;font-family:Tajawal;font-weight:900;overflow-x: hidden;transition: 0.5s;padding-top: 60px;text-align:center;background:#07405298 !important;}
.sidenav a {padding: 8px 8px 8px 32px;text-decoration: none;font-size: 25px;color: #818181;display: block;transition: 0.3s;}.sidenav a:hover {color: #f1f1f1;}
.closebtn {position: absolute;top:30px;height:90px;left:0px;width:25%;font-size: 20px;background:none;color:#111;border:none;outline:none;decoration:none;text-align:center;display:block;cursor: pointer;}

#this123 {transition: 0.5s;}
@media screen and (max-height: 450px) {.sidenav {padding-top: 15px;}.sidenav a {font-size: 18px;}}
.whatscontainer {
bottom:0;background:;width:100%;left:0;position:sticky;direction:ltr;display:flex;
}
.on-off {transition:0.8s !important;}

.btncontainer {
top:60px;background:#111;width:50%;right:0;position:absolute;direction:ltr;
}

.mood-btn {border:none;border-radius:25px;height:31px; width:60px;background-color:#8f8f8f;cursor: pointer;position:absolute;display: block;right:50px;transition: background-color 1s;z-index:7;}

.ball {width:28px;height:28px;background-color:#ffffff;position: absolute;border-radius: 50%;display: block;transition: transform 0.2s linear;transform: translate(30px, 0px);border:solid 1px #8f8f8f;}

.fa-cloud-sun {font-size:22px;color: #111;-webkit-transition: 0.8s;top:65px; 
right:10px;position:absolute;
}
.moodback {background-color: #151f2b;}
.chang3 .ball {transform: translate(0px, 0px);}
.chang4 { background: #61db54;-webkit-transformation: 3s;}

.user3 {font-family:Tajawal;font-size:13px;color:#303030;font-weight:600;width:90%;right:5%;left:5%;height:35px;text-align:center;display:block;margin-left:auto;margin-right:auto;margin-top:0px;border-radius:15px;border:none;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);z-index:6;}
.shadow {width:41%;height: 100%;position: fixed;top:0;z-index:1;background:#111;opacity:0.3;overflow-x: hidden;transition: 0.8s;transform:translateX(-300%);}
.login{width:100%;height:50px;border:none;outline:none;decoration:none;text-align:center;font-size:15px;font-family:Tajawal;font-weight:900;cursor: pointer;background:transparent !important;}
.notifications {width:100%;height:50px;border:none;outline:none;decoration:none;text-align:center;font-size:15px;font-family:Tajawal;font-weight:900;display: flex;align-items: center;justify-content: center;cursor: pointer;background:transparent !important;}
.usernamecach{width:100%;height:50px;border:none;outline:none;decoration:none;text-align:center;font-size:15px;font-family:Tajawal;font-weight:900;display: flex;align-items: center;justify-content: center;background:transparent !important;}

.mastercontainer {overflow:scroll;white-space: nowrap;width:95%;margin:auto;height:auto;position:relative;background:#182434;border-radius:15px;direction:rtl;float: right;padding:5px;font-family:Tajawal;font-weight:900;color:#ffffff;}
/*///////////////////////////////////////////////////////////////*/
       .animated-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index:-1;
            background: linear-gradient(192deg,#061924 0%, #071e2b 11%, #082332 62%, #0b4047 88%, #0f8080 100%);
            overflow: hidden;
        }

        /* Floating particles representing research elements */
        .particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 20s infinite linear;
        }

        .particle:nth-child(1) {
            width: 8px;
            height: 8px;
            left: 10%;
            animation-delay: 0s;
            animation-duration: 25s;
        }

        .particle:nth-child(2) {
            width: 12px;
            height: 12px;
            left: 20%;
            animation-delay: 2s;
            animation-duration: 30s;
        }

        .particle:nth-child(3) {
            width: 6px;
            height: 6px;
            left: 30%;
            animation-delay: 4s;
            animation-duration: 22s;
        }

        .particle:nth-child(4) {
            width: 10px;
            height: 10px;
            left: 40%;
            animation-delay: 6s;
            animation-duration: 28s;
        }

        .particle:nth-child(5) {
            width: 14px;
            height: 14px;
            left: 50%;
            animation-delay: 8s;
            animation-duration: 35s;
        }

        .particle:nth-child(6) {
            width: 7px;
            height: 7px;
            left: 60%;
            animation-delay: 10s;
            animation-duration: 26s;
        }

        .particle:nth-child(7) {
            width: 11px;
            height: 11px;
            left: 70%;
            animation-delay: 12s;
            animation-duration: 32s;
        }

        .particle:nth-child(8) {
            width: 9px;
            height: 9px;
            left: 80%;
            animation-delay: 14s;
            animation-duration: 24s;
        }

        .particle:nth-child(9) {
            width: 13px;
            height: 13px;
            left: 90%;
            animation-delay: 16s;
            animation-duration: 29s;
        }

        @keyframes float {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) rotate(360deg);
                opacity: 0;
            }
        }

        /* DNA helix-like animated lines */
        .dna-strand {
            position: absolute;
            width: 2px;
            height: 100%;
            background: linear-gradient(to bottom, 
                transparent 0%, 
                rgba(15, 128, 128, 0.3) 20%, 
                rgba(15, 128, 128, 0.6) 50%, 
                rgba(15, 128, 128, 0.3) 80%, 
                transparent 100%);
            animation: wave 8s ease-in-out infinite;
        }

        .dna-strand:nth-child(1) {
            left: 15%;
            animation-delay: 0s;
        }

        .dna-strand:nth-child(2) {
            left: 35%;
            animation-delay: 2s;
        }

        .dna-strand:nth-child(3) {
            left: 55%;
            animation-delay: 4s;
        }

        .dna-strand:nth-child(4) {
            left: 75%;
            animation-delay: 6s;
        }

        @keyframes wave {
            0%, 100% {
                transform: translateX(0) scaleY(1);
                opacity: 0.3;
            }
            50% {
                transform: translateX(20px) scaleY(1.2);
                opacity: 0.8;
            }
        }

        /* Geometric shapes representing innovation */
        .geometric-shape {
            position: absolute;
            border: 1px solid rgba(15, 128, 128, 0.2);
            animation: rotate 15s linear infinite;
        }

        .shape-1 {
            width: 60px;
            height: 60px;
            top: 20%;
            left: 10%;
            transform: rotate(45deg);
            animation-delay: 0s;
        }

        .shape-2 {
            width: 40px;
            height: 40px;
            top: 60%;
            right: 15%;
            border-radius: 50%;
            animation-delay: 5s;
        }

        .shape-3 {
            width: 80px;
            height: 80px;
            top: 40%;
            left: 70%;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            background: rgba(15, 128, 128, 0.1);
            animation-delay: 10s;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg) scale(1);
                opacity: 0.3;
            }
            50% {
                transform: rotate(180deg) scale(1.1);
                opacity: 0.6;
            }
            100% {
                transform: rotate(360deg) scale(1);
                opacity: 0.3;
            }
        }

        /* Pulsing network nodes */
        .network-node {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(15, 128, 128, 0.8);
            border-radius: 50%;
            animation: pulse 3s ease-in-out infinite;
        }

        .node-1 { top: 25%; left: 25%; animation-delay: 0s; }
        .node-2 { top: 35%; left: 45%; animation-delay: 0.5s; }
        .node-3 { top: 55%; left: 30%; animation-delay: 1s; }
        .node-4 { top: 70%; left: 60%; animation-delay: 1.5s; }
        .node-5 { top: 45%; left: 75%; animation-delay: 2s; }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 0.5;
                box-shadow: 0 0 0 0 rgba(15, 128, 128, 0.7);
            }
            50% {
                transform: scale(1.5);
                opacity: 1;
                box-shadow: 0 0 0 10px rgba(15, 128, 128, 0);
            }
        }

        /* Content overlay */
        .content {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            text-align: center;
            color: white;
            padding: 2rem;
        }

        .subtitle {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            animation: fadeInUp 2s ease-out 0.5s both;
        }

        .description {
            font-size: 1.1rem;
            max-width: 600px;
            line-height: 1.6;
            opacity: 0.8;
            animation: fadeInUp 2s ease-out 1s both;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Interactive hover effects */
        .content:hover .particle {
            animation-duration: 15s;
        }

        .content:hover .geometric-shape {
            animation-duration: 10s;
        }