@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;700&display=swap');

 body {
     font-family: 'Tajawal', sans-serif;
     scroll-behavior: smooth;
 }

 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
 }

 .gradient-bg {
     background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
 }

 .glass {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
 }

 .block:hover {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     color: rgb(255, 255, 255);
 }

 /* الحالة قبل الظهور */
 .reveal {
     opacity: 0;
     transform: translateY(50px);
     transition: all 0.8s ease-out;
 }


 .reveal.active {
     opacity: 1;
     transform: translateY(0);
 }

 .reveal-left {
     opacity: 0;
     transform: translateX(-100px);
     transition: all 0.8s ease-out;
 }

 .reveal-left.active {
     opacity: 1;
     transform: translateX(0);
 }


 /* Navbar */
 .fixed-nav {
     position: relative;
     top: 0;
     transition: all 3.1s ease-in-out;
     /* حركة ناعمة */
     display: none;
 }

 /*
.fixed-nav.is-fixed {
    display: block;
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 78px;
    max-width: 100%;
    border-radius: 0;
    margin-top: 0px;
    padding-top: 25px;
    padding-bottom: 10px;
    background-color: rgba(33, 37, 41, 0.98); 
    backdrop-filter: blur(5px);
    z-index: 9999; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
} */


 .fixed-btn {
     position: fixed;
     display: none;
     bottom: 20px;
     right: 10px;
     width: 50px;
     padding: 10px;
     border-radius: 20px;
     box-shadow: 0px 0px 10px rgba(0, 0, 255, 0.5);
     font-weight: bolder;
     background-color: #212529;
     color: white;
     text-align: center;
     z-index: 999;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .fixed-btn.is-fixed {
     display: block;
     bottom: 20px;
     right: 10px;
     width: 50px;
     padding: 10px;
     border-radius: 20px;
     box-shadow: 0px 0px 10px rgba(0, 0, 255, 0.5);
     font-weight: bolder;
     background-color: #4400ff;
     color: white;
     text-align: center;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     backdrop-filter: blur(8px);
 }

 .fixed-btn:hover {
     transform: translateY(-15px);
 }

 nav {
     position: fixed;
     width: 100%;
     z-index: 999;
 }

 textarea {
     resize: none;
 }

 .main-form {
     width: 90% !important;
     text-align: center;
 }

 html {
     transition: background-color 0.5s ease, color 0.5s ease;
     scroll-behavior: smooth;
 }

 .dark body {
     background-color: #111827;
 }

 body {
     transition: background-color 0.5s ease, color 0.5s ease;
 }

 .gradient-bg {
     background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
 }

 .dark .gradient-bg {
     background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
 }

 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .reveal.active {
     opacity: 1;
     transform: translateY(0);
 }

 @keyframes custom-pulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.02);
     }
 }

 .animate-pulse-slow {
     animation: custom-pulse 3s infinite ease-in-out;
 }

 :root {
     --bg-main: #f9fafb;
     --bg-card: #ffffff;
     --text-main: #1f2937;
     --text-muted: #4b5563;
     --border-color: #e5e7eb;
 }

 /* ألوان وضع الـ Dark Mode */
 body.dark-mode {
     --bg-main: #111827;
     /* خلفية الصفحة الداكنة */
     --bg-card: #1f2937;
     /* خلفية الكروت */
     --text-main: #f9fafb;
     /* اللون الأساسي للنص */
     --text-muted: #d1d5db;
     /* النص الفرعي */
     --border-color: #374151;
     /* الحدود */
     background-color: var(--bg-main);
     color: var(--text-main);
 }

 .contact-item .dark-mode{
    background-color: rgb(255, 255, 255);
    font-weight: 800;
 } 

 /* تطبيق المتغيرات على العناصر */
 body.dark-mode section {
     background-color: var(--bg-main);
 }

 body.dark-mode .bg-white {
     background-color: var(--bg-card) !important;
     color: var(--text-main);
 }

 body.dark-mode nav{
    background-color: #0f172a;
 }

 body.dark-mode .card{
    background-color: rgba(0, 0, 0, 0.578) !important;
 }

 body.dark-mode .card a{
    box-shadow: 0 0 15px blue;
 }

 body.dark-mode .text-gray-900,
 body.dark-mode .text-gray-800 {
     color: var(--text-main) !important;
 }

 body.dark-mode .text-gray-600,
 body.dark-mode .text-gray-500 {
     color: var(--text-muted) !important;
 }

 body.dark-mode .border-gray-200,
 body.dark-mode .border {
     border-color: var(--border-color) !important;
 }

 body.dark-mode .bg-gray-50 {
     background-color: #1a202c !important;
 }

 /* زر التبديل */
 #dark-mode-toggle {
     cursor: pointer;
     transition: transform 0.3s ease;
 }

 #dark-mode-toggle:hover {
     transform: scale(1.2);
 }

 .wave-container {
     width: 100%;
     height: 15vh;
     /* ارتفاع منطقة الموجات */
     min-height: 100px;
     max-height: 150px;
     position: absolute;
     bottom: 0;
     left: 0;
 }

 .waves {
     position: relative;
     width: 100%;
     height: 100%;
 }


 .parallax>use {
     animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
 }

 .parallax>use:nth-child(1) {
     animation-delay: -2s;
     animation-duration: 7s;
 }

 .parallax>use:nth-child(2) {
     animation-delay: -3s;
     animation-duration: 10s;
 }

 .parallax>use:nth-child(3) {
     animation-delay: -4s;
     animation-duration: 13s;
 }

 .parallax>use:nth-child(4) {
     animation-delay: -5s;
     animation-duration: 20s;
 }

 @keyframes move-forever {
     0% {
         transform: translate3d(-90px, 0, 0);
     }

     100% {
         transform: translate3d(85px, 0, 0);
     }
 }

 @media (max-width: 768px) {
     .wave-container {
         height: 40px;
         min-height: 40px;
     }
 }

 .card a{
    /* display: none; */
    transition: all 3.2s ease-in;
    animation: Btn-Opacity 2s infinite;
 }

 .card:hover a{
    display: block;
 }

 @keyframes Btn-Opacity {
    50%{
        opacity: 0.4;
        filter: blur(1.9px);
    }
 }