body,html {
	
  height: 100%;
  
  /* Center and scale the image nicely */
  background-repeat: repeat;
  background-size: 4%; 
}








/* CSS المحدث بالكامل */

.logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
	
    /* هذا الترانزليت (translate) الأساسي هو للتمركز الدائم في منتصف الشاشة */
    transform: translate(-50%, -50%); 
    width: 100px !important; /* تحكم في الحجم هنا بدون !important أفضل */
   
    text-align: center; /* لتوسيط النص والصورة داخل الحاوية */

    /* هذا يجعل الحركة (animation) تنطبق على الشعار والنص معاً */
    animation: logoEntrance 1.5s ease-out forwards;
}

.my-logo-img {
    width: 100%; /* اجعل الصورة تملأ عرض الحاوية (150px) */
    height: auto;
    /* حذفنا الـ animation من هنا لكي لا تتعارض مع الـ container */
}

.brand-name {
    bottom: -90px;      /* ضعه 60 بكسل تحت الحاوية تماماً */
    left: 50%;          /* ابدأ من منتصف الحاوية */
    transform: translateX(-50%); /* حركه للخلف ليتمركز أفقياً بشكل دقيق */
    font-size: 40px;   /* حجم النص الكبير الذي اخترته */
	color: #000000ff;      
    font-family: 'Inter', sans-serif;

}


.reg-symbol {
    /* يجعله يرتفع قليلاً عن الخط الأساسي (تموضع علوي) */
    vertical-align: super; 
    
    /* يقلل حجمه مقارنة بحجم النص الأساسي (50px) */
    font-size: 0.4em; /* سيصبح حجمه 40% من حجم النص الأساسي (يعني 20px) */
    
    /* لضبط الموضع العمودي بدقة أكبر */
    position: relative;
    top: -0.5em; /* يمكن تعديل هذه القيمة لرفعه أو خفضه بدقة متناهية */
    
    /* مسافة بسيطة عن النص الذي يسبقه */
    margin-left: 3px;
}


.topleft_text {
  font-family: 'Inter', sans-serif;
  letter-spacing: 4px;
  font-size: 11px; 
  color: #ffffffff;
  background-color: #000000ff;
  border: 1.5px solid white;
  border-radius: 25px;
  max-width: 100%;
  min-width: 10%;
  text-align: center;
  padding: 7px 7px 7px 7px;
  
}

.smi {
  position: absolute;
  left: 77%;
  top: 95%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.custom-top-banner {
    position: fixed;     
    top: 0;              
    left: 0;
    width: 100%;        
    height: 55px;             
    background-color: #1a1a1a;
    z-index: 998;
	filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.9)) 
            drop-shadow(0 0 30px rgba(255, 255, 255, 0.4));

}

.custom-bottom-banner {
    position: fixed;   
    bottom: 0;
    left: 0;
    width: 100%;     
    height: 55px;
    background-color: #1a1a1a;
    z-index: 998; 
	filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.9)) 
            drop-shadow(0 0 30px rgba(255, 255, 255, 0.4));
}

.footer-copyright {
    font-family: 'Inter', sans-serif ;
    position: absolute;
	font-size: 12px;
	color: white;
    bottom: 16px;
    left: 1%;
    background: transparent;
    z-index: 999;
}


.circle_icon {
  padding: 6px;
  margin-left: 0px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.circle_icon:hover {
  /*opacity: 0.7;*/
  color: white;
  text-decoration: none;
  background-color: #1a1a1a;
  transform: rotateY(180deg);
  transition: all 1s;
}

.fab {
  font-size: 15px;
}
.fa {
  font-size: 15px;
}

.fa-brands {
  font-size: 15px;
}

.fa-envelope {
  background: white;
  color: #1a0033;
}

.fa-x-twitter {
  background: white;
  color: #1a0033;
}

.fa-instagram {
  background: white;
  color: #1a0033;
}

.fa-tiktok {
  background: white;
  color: #1a0033;
}




/*---------------------------------@media----------------------------------*/

/* 1. Small Mobile Devices (Portrait) */
@media only screen and (max-width: 480px) {
    /* Note: Mobile optimization for small screens */
    .logo-container { 
	width: 100px; 
	
	
	}
	
	.smi {
  position: absolute;
  left: 50%;
  top: 84%;
  transform: translate(-50%, -50%);}
  
    .circle_icon {
  padding: 5px;}
  
    .footer-copyright { 
	font-size: 10px;
	text-align: center; }
}

/* 2. Tablets & Large Mobile Devices */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    /* Note: iPads and Android tablets in portrait mode */
    .logo-container { 
	width: 150px; 
	
	}
	
	.smi {
  position: absolute;
  left: 50%;
  top: 84%;
  transform: translate(-50%, -50%);}
  
    .circle_icon {
  padding: 5px;}
  
  
    .footer-copyright { 
	font-size: 12px;
	text-align: center; }
}

/* 3. Laptops & Small Desktops */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    /* Note: Standard laptops and small desktop monitors */
    .logo-container { 
	width: 180px; 
	
	}
	
	.smi {
  position: absolute;
  left: 50%;
  top: 84%;
  transform: translate(-50%, -50%);}
  
    .circle_icon {
  padding: 5px;}
  
  
    .footer-copyright { 
	font-size: 13px;
	text-align: center; }
}

/* 4. Standard Desktop Monitors */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
    /* Note: Wide laptops and standard monitors */
    .logo-container { 
	width: 220px; 
	
	}
	
	.smi {
  position: absolute;
  left: 50%;
  top: 84%;
  transform: translate(-50%, -50%);}
  
    .circle_icon {
  padding: 5px;}
  
  
    .footer-copyright { 
	font-size: 14px;
	text-align: center; }
}

/* 5. Large Desktop Screens */
@media only screen and (min-width: 1201px) and (max-width: 1600px) {
    /* Note: Large 24-inch monitors */
    .logo-container { 
	width: 260px; 
	
	}
	
	.smi {
  position: absolute;
  left: 77%;
  top: 95%;
  transform: translate(-50%, -50%);}
  
    .circle_icon {
  padding: 5px;}
  
    .footer-copyright { 
	font-size: 12px;
	text-align: center; }
}

/* 6. Ultra Wide & 2K Screens */
@media only screen and (min-width: 1601px) and (max-width: 1920px) {
    /* Note: High Definition 1080p and 2K Displays */
    .logo-container { 
	width: 320px; 
	
	}
	
	.smi {
  position: absolute;
  left: 50%;
  top: 84%;
  transform: translate(-50%, -50%);}
  
    .circle_icon {
  padding: 5px;}
  
  
    .footer-copyright { 
	font-size: 15px;
	text-align: center; }
}

/* 7. 4K & 5K UHD Ultra-Large Displays */
@media only screen and (min-width: 1921px) {
    /* Note: Advanced 2026 UHD monitors and large TV screens */
    .logo-container { 
	width: 450px; 
	
	}
	
	.smi {
  position: absolute;
  left: 50%;
  top: 84%;
  transform: translate(-50%, -50%);}
  
    .circle_icon {
  padding: 5px;}
  
  
    .footer-copyright { 
	font-size: 16px;
	text-align: center; }
}
/* تعريف الحركة (KEYFRAMES) في أسفل الملف كما أردت */
@keyframes logoEntrance {
    0% {
        opacity: 0;             /* يبدأ شفاف تماماً */
        /* ملاحظة: عند استخدام keyframes على عنصر فيه transform: translate أساسي، يجب دمجهما */
        transform: translate(-50%, -50%) scale(0.8);  /* يبدأ بحجم أصغر بـ 20% ومتمركز */
        filter: blur(10px);     /* يبدأ مشوشاً قليلاً */
    }
    100% {
        opacity: 1;             /* ينتهي بظهور كامل */
        transform: translate(-50%, -50%) scale(1);    /* ينتهي بحجمه الطبيعي ومتمركز */
        filter: blur(0);        /* ينتهي بوضوح تام */
    }
}