:root {
     --main-dark: #091719;
     --main-accent: #578dca;
     --radius: 1.25rem;
     --shadow: 0 12px 30px rgba(0, 0, 0, .25);
 }

 body {
     font-family: "Cairo", sans-serif;
     background: var(--main-dark);
     color: #fff;
     text-align: -webkit-match-parent;
     margin-top: 130px;
 }

 .container {
     max-width: 1140px;
 }

 /* HERO */
 .hero {
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     color: #fff;
 }

 .hero .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(9, 23, 25, 0.7);
     /* أسود بأوباستي */
     z-index: 1;
 }

 .hero .content {
     position: relative;
     z-index: 2;
 }

 .hero .bg-word {
     position: absolute;
     bottom: 10px;
     right: 20px;
     font-size: 80px;
     font-weight: 900;
     color: rgba(255, 255, 255, 0.05);
     z-index: 1;
 }


 /* CATEGORY CARDS */
 .category-card {
     position: relative;
     border-radius: var(--radius);
     padding: 1.25rem;
     min-height: 190px;
     overflow: hidden;
     color: #fff;
     box-shadow: var(--shadow);
     isolation: isolate;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 /* لمعة */
 .category-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: -75%;
     width: 50%;
     height: 100%;
     background: linear-gradient(120deg,
             rgba(255, 255, 255, 0) 0%,
             rgba(255, 255, 255, 0.5) 50%,
             rgba(255, 255, 255, 0) 100%);
     transform: skewX(-20deg);
     z-index: 2;
     pointer-events: none;
 }

 /* الهوفر */
 .category-card:hover {
     transform: translateY(-5px);
     box-shadow:
         0 8px 20px rgba(0, 0, 0, 0.2),
         0 0 15px rgba(87, 141, 202, 0.8),
         0 0 30px rgba(87, 141, 202, 0.6);
 }

 .category-card:hover::before {
     animation: shimmer 1s forwards;
 }

 @keyframes shimmer {
     0% {
         left: -75%;
     }

     100% {
         left: 125%;
     }
 }

 .category-card .title {
     font-weight: 800;
     font-size: clamp(2.5rem, 2.2vw, 1.25rem);
 }

 .category-card .btn {
     border: 0;
     background: rgba(255, 255, 255, .9);
     color: var(--main-dark);
     font-weight: 600;
 }

 .category-card .faint {
     position: absolute;
     inset-inline-start: 1rem;
     inset-block-end: .5rem;
     font-weight: 900;
     font-size: clamp(1.8rem, 4.5vw, 3rem);
     letter-spacing: .06em;
     opacity: .15;
     line-height: 1;
     z-index: 1;
     white-space: nowrap;
 }

 .category-card img {
     position: absolute;
     inset-inline-end: .5rem;
     inset-block-end: .5rem;
     width: clamp(120px, 50%, 200px);
     transform: rotate(-12deg);
     z-index: 2;
     object-fit: contain;
 }

 /* BACKGROUND GRADIENTS */
 .bg-accent-grad {
     background: linear-gradient(135deg, var(--main-accent), #3a7bd5);
 }

 .bg-dark-grad {
     background: linear-gradient(135deg, #0e1f24, #12303a);
 }

 /* FEATURES */
 .feature-box {
     background: #0e1f24;
     border-radius: var(--radius);
     padding: 1rem;
     box-shadow: var(--shadow);
     height: 100%;
     display: flex;
     align-items: center;
     gap: .75rem;
 }

 .feature-box .icon {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--main-accent);
     color: #fff;
 }

 /* Utilities */
 .rounded-4 {
     border-radius: 1.25rem !important;
 }

 /* Btn Company Profile Page */

 .btn-profile-pg {
     position: relative;
     background: var(--main-accent);
     border: none;
     color: #fff;
     overflow: hidden;
     z-index: 1;
     transition: background 0.3s ease;
 }

 /* اللمعة */
 .btn-profile-pg::before {
     content: "";
     position: absolute;
     top: 0;
     left: -75%;
     width: 50%;
     height: 100%;
     background: linear-gradient(120deg,
             rgba(255, 255, 255, 0) 0%,
             rgba(255, 255, 255, 0.6) 50%,
             rgba(255, 255, 255, 0) 100%);
     transform: skewX(-20deg);
     z-index: 2;
 }

 /* حركة اللمعة مع الهوفر */
 .btn-profile-pg:hover::before {
     animation: shimmer 0.9s forwards;
 }

 @keyframes shimmer {
     0% {
         left: -75%;
     }

     100% {
         left: 125%;
     }
 }




 /* ===========================
   Loading Screen
   =========================== */

 #loading-screen {
     position: fixed;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     transition: opacity 0.6s ease, visibility 0.6s ease;
     background-color: #091719;
 }

 #loading-screen.hidden {
     opacity: 0;
     visibility: hidden;
 }

 /* Loader Style */
 .loader {
     text-align: center;
     color: #fff;
 }

 .loader img {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     animation: spin 1.5s linear infinite;
     margin-bottom: 10px;
 }

 .loader span {
     font-size: 18px;
     font-weight: bold;
     letter-spacing: 1px;
 }

 /* Logo Rotation Animation */
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }