:root {
           --primary-color: #c69b91;
           --secondary-color: #ffffff;
           --accent-color: #f72585;
           --light-color: #f8f9fa;
           --dark-color: #212529;
           --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
       }

       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       }

       html {
           scroll-behavior: smooth;
           box-sizing: border-box;
       }

       .bigContainer {
           position: relative;
           overflow: hidden;
           background-color: #000;
           min-height: 100vh;
           display: flex;
           align-items: center;
           justify-content: center;
           padding: 20px;
           border-radius: 10px;
       }

       body {
           color: var(--dark-color);
           line-height: 1.6;
           width: 100%;
           padding: 5px;
       }

       a {
           color: inherit;
           text-decoration: none;
       }

       .container {
           position: relative;
           max-width: 1200px;
           width: 100%;
           min-height: 90vh;
           margin: 0 auto;
           padding: 20px;
           background-color: #000000;
           border-radius: 20px;
           display: flex;
           flex-direction: column;
           justify-content: space-between;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
       }

       header {
           text-align: center;
           padding: 20px 0;
       }

       .Header-Title-StartPage {
           text-align: center;
           direction: rtl;
           color: var(--light-color);
           margin: 30px 0;
           padding: 0 10px;
       }

       .Header-Title-StartPage h1 {
           font-size: 2em;
           font-weight: 700;
           margin-bottom: 15px;
       }

       .Header-Title-StartPage p {
           font-size: 1.4em;
           opacity: 0.9;
       }

       /* مؤثر المؤشر الوامض */
       #typewriter::after {
           content: "❤️";
           animation: blink 0.8s infinite;
       }

       @keyframes blink {
           50% {
               opacity: 0;
           }
       }

       .logo_Qasser {
           width: 120px;
           transition: transform 0.5s ease;
           margin-bottom: 10px;
       }

       .logo_Qasser:hover {
           transform: scale(1.05);
       }

       .social-container {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           gap: 25px;
           margin: 30px 0;
           padding: 0 10px;
       }

       .social-content {
           height: 100px;
           background: #F9F5F0;
           border-radius: 15px;
           padding: 20px 15px;
           text-align: center;
           display: flex;
           align-items: center;
           justify-content: space-between;
           position: relative;
           overflow: hidden;
           cursor: pointer;
           text-decoration: none;
           color: inherit;
           transition: var(--transition);
           transform-origin: center bottom;
           opacity: 0;
           transform: translateY(30px);
       }
       
       .social-content.visible {
           opacity: 1;
           transform: translateY(0);
       }

       .social-content:hover {
           transform: translateY(-10px) scale(1.03);
           /* box-shadow: 0 15px 30px rgba(198, 155, 145, 0.7); */
           height: 130px;
            box-shadow: 0 5px 20px var(--primary-color);

       }

       .effectCyrcle-down::before {
           content: '';
           position: absolute;
           bottom: -50px;
           right: -50px;
           width: 150px;
           height: 150px;
           border-radius: 100%;
           background: rgba(198, 155, 145, 0.3);
           opacity: 0;
           transition: opacity 0.5s ease, transform 0.5s ease;
           transform: scale(0.5);
       }

       .social-content:hover .effectCyrcle-down::before {
           opacity: 1;
           transform: scale(1);
       }

       .social-icon {
           font-size: 2.2rem;
           width: 70px;
           height: 70px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 50%;
           transition: var(--transition);
           position: relative;
           z-index: 2;
           flex-shrink: 0;
           margin-left: 15px;
       }

       /* .social-content:hover .social-icon {
           transform: translateY(-8px) scale(1.15);
       }

       .social-icon i {
           transition: transform 0.4s ease;
       }

       .social-content:hover .social-icon i {
           transform: scale(1.2);
       } */

       .social-text {
           flex-grow: 1;
           text-align: center;
           transition: var(--transition);
           padding: 0 10px;
       }

       .social-text p {
           font-size: 1.1em;
           transition: var(--transition);
       }

       .social-content:hover .social-text p {
           transform: scale(1.1);
           font-weight: 600;
       }

       .btn {
           display: inline-block;
           background: var(--primary-color);
           color: white;
           padding: 12px 25px;
           border-radius: 30px;
           text-decoration: none;
           font-weight: 600;
           transition: var(--transition);
           border: none;
           cursor: pointer;
           position: relative;
           overflow: hidden;
           z-index: 1;
           flex-shrink: 0;
       }

       .btn::before {
           content: '';
           position: absolute;
           top: 0;
           left: -100%;
           width: 100%;
           height: 100%;
           background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
           transition: left 0.7s ease;
           z-index: -1;
       }

       .btn:hover::before {
           left: 100%;
       }

       .btn:hover {
           background: var(--secondary-color);
           transform: translateY(-3px) scale(1.05);
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
           color: var(--dark-color);
       }

       footer {
           text-align: center;
           padding: 30px 0 20px;
           color: #f5f5f5;
           font-weight: 700;
           font-size: 1.3em;
           margin-top: 30px;
           opacity: 0;
           transform: translateY(20px);
           transition: opacity 0.8s ease, transform 0.8s ease;
       }

       footer.visible {
           opacity: 1;
           transform: translateY(0);
       }

       .img-Orchid-Flower {
           width: 100%;
           max-width: 500px;
           height: auto;
           margin: 20px auto 0;
           display: block;
           opacity: 0;
           transform: scale(0.9);
           transition: opacity 1s ease, transform 1s ease;
       }

       footer.visible .img-Orchid-Flower {
           opacity: 1;
           transform: scale(1);
       }

       /* تأثيرات دخول متدرجة للبطاقات */
       .social-content:nth-child(1) {
           transition-delay: 0.1s;
       }

       .social-content:nth-child(2) {
           transition-delay: 0.2s;
       }

       .social-content:nth-child(3) {
           transition-delay: 0.3s;
       }

       .social-content:nth-child(4) {
           transition-delay: 0.4s;
       }

       .social-content:nth-child(5) {
           transition-delay: 0.5s;
       }

       /* تحسينات للشاشات الصغيرة */
       @media (max-width: 768px) {
           .bigContainer {
               padding: 10px;
           }

           .container {
               min-height: auto;
               padding: 15px;
           }

           .Header-Title-StartPage h1 {
               font-size: 1.7em;
           }

           .Header-Title-StartPage p {
               font-size: 1.2em;
           }

           .social-container {
               grid-template-columns: 1fr;
               gap: 20px;
           }

           .social-content {
               height: 90px;
               padding: 15px 10px;
           }

           .social-content:hover {
               height: 110px;
           }

           .social-icon {
               font-size: 1.8rem;
               width: 60px;
               height: 60px;
               margin-left: 10px;
           }

           .social-text p {
               font-size: 1em;
           }

           .btn {
               padding: 10px 20px;
               font-size: 0.9em;
           }

           footer {
               font-size: 1.1em;
               padding: 20px 0 15px;
           }

           .img-Orchid-Flower {
               max-width: 350px;
           }
       }

       @media (max-width: 480px) {
           .Header-Title-StartPage h1 {
               font-size: 1.5em;
           }

           .Header-Title-StartPage p {
               font-size: 1.1em;
           }

           .social-content {
               height: 85px;
               padding: 12px 8px;
           }

           .social-content:hover {
               height: 100px;
           }

           .social-icon {
               font-size: 1.6rem;
               width: 50px;
               height: 50px;
           }

           .social-text p {
               font-size: 0.9em;
           }

           .btn {
               padding: 8px 16px;
               font-size: 0.85em;
           }

           footer {
               font-size: 1em;
           }

           .img-Orchid-Flower {
               max-width: 280px;
           }
       }

       /* تأثيرات إضافية */
       @keyframes float {

           0%,
           100% {
               transform: translateY(0);
           }

           50% {
               transform: translateY(-10px);
           }
       }

       /* .social-content:hover .social-icon {
           animation: float 2s ease-in-out infinite;
       } */

       /* تأثير النبض للشعار */
       .logo_Qasser {
           animation: pulse 3s ease-in-out infinite;
       }

       @keyframes pulse {

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

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