*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
body { 
  background-color: #fff;
}

    /* ✅ شاشات أقل من 1024px */
    @media (max-width: 1024px) {
      body {
        height: 500px;
        background-size: 60%;
      }
    }

    /* ✅ شاشات أقل من 768px (تابلت وموبايل أفقي) */
    @media (max-width: 768px) {
      body {
        height: 400px;
        background-size: 70%;
      }
    }

    /* ✅ شاشات أقل من 480px (موبايل صغير) */
    @media (max-width: 480px) {
      body {
        height: 350px;
        background-size: 85%;
      }
    }

/*
=============================
=======Start navigation======
=============================
*/

/* Arabic pages */
body:lang(ar) {
    font-family: "Cairo", sans-serif;
}

/* English pages */
body:lang(en) {
    font-family: 'Roboto', sans-serif; /*  'Open Sans' */
}
.arabic-page {
    font-family: "Cairo", sans-serif;
}

.english-page {  
 
  font-family: 'Roboto', sans-serif; /*  'Open Sans' */
}
header {
    width: 100%;
    position: fixed;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 200px;
    top: 0;

}
/* تحسين شريط التمرير */
.navigation::-webkit-scrollbar {
  height: 3px; /* ارتفاع شريط التمرير */
}

.navigation::-webkit-scrollbar-thumb {
  background: #ccc; /* لون شريط التمرير */
  border-radius: 4px;
}
.navigation a{
    text-decoration: none;
    color: #00ffea;
    letter-spacing: 2px;
    font-size: 1.1em;
    font-weight:500 ;
    margin-left: 10px;
}
.navigation a:hover{
    color: #ff00f1;
}
/*
=============================
=========Start nav mune======
=============================
*/
.logo-head {
    width: 100%;
    height: 100px;
    background: #fff;
    position: fixed;
}
.logo-head img {
    height: 70px;
    width: 90px;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow-x: hidden;
  margin-top: 80px;
}

/* تصميم قائمة الـ navigation */
.navigation {
  display: flex;
  overflow-x: auto; /* تفعيل التمرير الأفقي */
  white-space: nowrap; /* منع العناصر من الانتقال إلى السطر التالي */
  padding: 10px 0;
  scrollbar-width: thin; /* لتقليل عرض شريط التمرير */
}

.navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation ul li {
  flex-shrink: 0; /* التأكد من أن العناصر لا تنكمش */
  margin: 0 10px;
}

.navigation ul li a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  padding: 5px 10px;
  display: inline-block;
  white-space: nowrap; /* منع النصوص الطويلة من التمدد */
  letter-spacing: normal;
}

/* تحسين شريط التمرير */
.navigation::-webkit-scrollbar {
  height: 8px; /* ارتفاع شريط التمرير */
}

.navigation::-webkit-scrollbar-thumb {
  background: #ccc; /* لون شريط التمرير */
  border-radius: 4px;
}

.navigation::-webkit-scrollbar-track {
  background: #f4f4f4; /* لون خلفية شريط التمرير */
}

/*
=============================
=========End nav mune========
=============================
*/
/* Start language */
.language {
    
    background: linear-gradient(to right, aqua, #000);
    padding: 5px;
    border: 1px solid aqua;
    color: #fff;
    text-decoration: none;

}
.language-1 {
    
    background: linear-gradient(to right, aqua, #000);
    padding: 5px;
    border: 1px solid aqua;
    color: #fff;
    text-decoration: none;

}


/* End language */

details {
    color: #fff;
    z-index: 1000;
}
details {
  position: absolute; /* تثبيته في الهيدر */
  top: 10px; /* مسافة صغيرة من الأعلى */
  right: 10px; /* جعله في الزاوية اليمنى */
  height: 30px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
  margin-left: 1000px;
  padding: -1%;
}

summary {
  list-style: none; /* إزالة المثلث الافتراضي */
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  padding: 5px;
}

summary i {
     font-size: 20px ;
     align-items: center;
     color: #0081ff ;     
}

summary i:hover {
    color: #00c0ff;
}
summary::after {
  font-size: 100px;
  color: #007bff;
}

details[open] {
  width: auto; /* تكبير الحجم عند الفتح */
  height: auto;
  padding: 5px;
}

details a {
  display: block;
  font-size: 15px; /* تصغير حجم النص */
  padding: 3px 0; /* تقليل المسافة بين الروابط */
  text-decoration: none;
  color: #333;
}

details a:hover {
  color: #007bff;
}
.social-icons ul {
    display: flex;
    justify-content: space-between;
}
.social-icons ul li {
    list-style: none;
}
.social-icons ul li a {
    border: none;
    color: #fff;
    font-size: 10px;
}
/*
=============================
========End navigation=======
=============================
*/



/* section */
section {
    padding: 100px 200px;
}




/*
=============================
=========Start main==========
=============================
*/
.main {
    width: 100%;
    height: 100vh;     
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    border-bottom: 500px;
}
.introduction a {
    border: 2px solid #000;
    border-radius: 20px;
    text-decoration: none;
    color: #000;
    padding: 8px;
    padding-left: 50px;
    padding-right: 50px;
    transition: 0.9s;
    margin-top: 30px;
}
.introduction img {
    width: 100%;
    height: auto;
    
    margin-bottom: 30px;
}
.introduction p {
    text-align: center;
    width: 100%;   
}

@media(min-width:435px){
   .main {
       height: auto;
   }
  .introduction img {
    width: 100%;
    height: auto;
    margin-top: 70px;
    margin-bottom: 30px;
}
 .btn {
    margin-bottom: 50px;
 }
}

@media(min-width:375px){
   .main {
       height: auto;
   }
  .introduction img {
    width: 100%;
    height: auto;
    margin-top: 70px;
    margin-bottom: 30px;
}
 .btn {
    margin-bottom: 50px;
 }
}

@media(min-width:320px){
   .main {
       height: auto;
   }
  .introduction img {
    width: 100%;
    height: auto;
    margin-top: 70px;
    margin-bottom: 30px;
}
 .btn {
    margin-bottom: 50px;
 }
}


/*
=============================
========End main=========
=============================
*/




/*
=============================
=======Start  about us=======
=============================
*/
/* تنسيق قسم "من نحن!" بخلفية بتدرجات داكنة */
#about-us {
  background: linear-gradient(135deg, #000, #251e47);
  padding: 40px 20px;
  color: #fff;
}
#about-us .section-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 30px;
  color: #4fc3f7;
}
.profile-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 30px;
}
.profile-card {
  background: #fff;
  color: #333;
  border-radius: 15px;
  width: 300px;
  padding: 20px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
  text-align: center;
  transition: transform 0.3s ease;
}
.profile-card:hover {
  transform: translateY(-10px);
}
.profile-image {
  width: 150px;
  height: 150px;
  margin: 0 auto 15px;
  overflow: hidden;
  border-radius: 50%;
  border: 5px solid #4fc3f7;
}
.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-info h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}
.profile-info p {
  font-size: 1rem;
  margin-bottom: 20px;
  padding: 0 10px;
}
/* أيقونات الروابط منفصلة وكبيرة */
.profile-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}
.profile-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #333;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}
.profile-link i {
  font-size: 18px;
  color: #4fc3f7;
}
.profile-link span {
  font-weight: bold;
}
.profile-link:hover {
  transform: scale(1.1);
}
.about-description p {
  font-size: 18px;
  line-height: 1.8;
  color: #999;
  margin-bottom: 15px;
  text-align: right;
}

.about-values {
  margin-top: 30px;
}

.about-values h2 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #999;
  text-align: right;
}

.about-values ul {
  list-style: none;
  padding: 0;
}

.about-values li {
  font-size: 18px;
  margin-bottom: 10px;
  color: #999;
  text-align: right;
}

.about-values i {
  color: green;
  margin-left: 10px;
}
/*
=============================
========End about us=========
=============================
*/




/*
=============================
=======Start  projects=======
=============================
*/

.projects {
    width: 100%;
    height: 100vh;
    background-size: cover;
    display: flex;   
    align-items: center;
    justify-content: center;
    background-position: center;
    transition: background-image 1s ease-in-out;
}
.projects .content{
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    overflow-x:auto ;
}
.project-card{
    background: linear-gradient(to right, #050021, #000);
    border: 1px solid #000;
    min-height: 14em;
    width: 23em;
    overflow: hidden;
    margin: 20px ;   
    transition: 0.7s ease;
    
}
.project-card:hover{
    transform: scale(1.1);
}

.project-image img{
    width: 100%;
}
.project-card:hover .project-image{
    opacity: 0.9;
}

.project-info{
    padding: 1em;
    
}
.project-category{
    font-size: 0.8em ;
    color: #aafff4;   
    padding: 10px; 
}
.project-title{
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    font-weight: 800;
    margin-top: 10px;
    color: #fff;
    padding: 10px;
}
.project-title a {
    background: transparent;
    border: 2px solid #55d5ff;
    padding: 10px;
    text-decoration: none;
    color: #55d5ff;
    border-radius: 15px;
    font-size: 6px;
}
.project-title a:hover {
    background: #55d5ff;
    color: transparent;
}
.title {
    display: flex;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 80px;
    background: transparent;
    border: 2px solid #8098ff;
    border-right: none;
    border-left: none;
    border-radius: 10px;
    width: 100%;
    margin-top: 80px;
}
.project-card {
    scroll-snap-align: start;
}
/*
=============================
========End  projects========
=============================
*/




/*
=============================
========Start contact========
=============================
*/
.cards contact {
    width: 100%;
    height: calc(100vh - 20px);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    
}
.content{
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: calc(100vh - 30px);
    background-size: cover;
    align-items: center;
    background-position: center;
    transition: background-image 1s ease-in-out;
    margin-top: -80px;
}
.card{
    background-color: transparent;
    width: 21.25em;
    box-shadow: 0 5px 25px #8098ff;
    border-radius: 10px;
    padding:25px ;
    margin: 15px;
    transition: 1.7s ease;
}
.card:hover{
    transform: scale(1.1);
}
.icon {
    font-size: 8em;
    text-align: center;
   
}
.info{
    text-align: center;
}
.info h3{
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
    margin: 10px;
}
.info p {
    color: #3bff00;
}
.content .card {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
}
.contact .icon{

    font-size: 4.5em;
}

.contact .info h3{
    
    color: #d76c74;
    
}

.contact .info p {
     font-size: 10px ;
    color: #fff;
}
.phone-icon {
    color: #40e0ff;
}
.email-icon {
    color: #006cff;
}


/***** style main section *****/
.cards.contact {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.cards.contact .title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
}

/***** stayles cards *****/
.social-card {
  width: 100%;
  display: flex;               /* ترتيب أفقي للأيقونة والنص */
  align-items: center;
  margin-bottom: 20px;
  border-radius: 15px;         /* زوايا منحنية */
  color: #fff;                 /* لون النص */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);  /* ظل */
  padding: 20px;               /* مسافة داخلية */
  box-sizing: border-box;
}

/***** Icon all cards *****/
.social-icon {
  width: 70px;                 /* عرض مربع الأيقونة */
  height: 70px;
  min-width: 70px;             /* لكي لا ينكمش في الشاشات الصغيرة */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;             /* حجم الأيقونة */
  border-radius: 10px;         /* زوايا منحنية حول الأيقونة */
  margin-left: 20px;           /* مسافة بين الأيقونة والنص (في الاتجاه RTL يمكن استعمال margin-right) */
}

/***** text in card *****/
.social-text {
  flex: 1;                     /* كي يأخذ بقية المساحة */
  padding: 0 10px;             /* مسافة أفقية بسيطة حول النص */
}

.social-text h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: #000;
}
.social-text a {
    color: #000;
    padding: 6px;
    display: block;    
    text-align: center;
    border-radius: 5px;
    letter-spacing: 1px;
    font-size: 15px;
    letter-spacing: normal;
}
.social-text p {
  margin: 0;
  font-size: 15px;
  color: #000;
}

/***** Facebook card *****/
.facebook-card .social-icon {
  background: linear-gradient(to right, #3b5998, #2d4373);
  color: #fff;
}

/***** YouTube card *****/
.youtube-card .social-icon {
  background: linear-gradient(to right, #ff0000, #b50000);
  color: #fff;
}

/***** WhatsApp card *****/
.whatsapp-card .social-icon {
  background: linear-gradient(to right, #25d366, #128c7e);
  color: #fff;
}


/***** phone card *****/
.phone-card .social-icon {
  background: linear-gradient(to right, #fff100,#c3b800);
  color: #fff;
}



/***** Email card *****/
.email-card .social-icon {
  background: linear-gradient(to right, #ff0088,#970051);
  color: #fff;
}
/*
=============================
======== End  contact========
=============================
*/





/*
=============================
=========Start article========
=============================
*/
.articles .article {
    flex-direction: row;
    overflow-x:auto ;    
     margin-top: 50px;
}

.image-article img {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    overflow-x:auto ;
    width: 500px;
    display: block;
    margin: auto;
    border-radius: 5px;
}

.article h1 {
    color: silver;
    font-size: 30px;
    text-align: center;
}

.article p {
    color: #81003a;
    text-align: center;
}

/****** خط الفاصل بشكل احترافي  ******/
.elegant-hr {
    border: 0;
    height: 2px;
    margin: 20px auto;
    width: 50%;
    position: relative;
    background: linear-gradient(90deg, 
              rgba(0,0,0,0) 0%, 
              rgba(0,255,255,0.5) 20%, 
              rgba(0,255,255,1) 50%, 
              rgba(0,255,255,0.5) 80%, 
              rgba(0,0,0,0) 100%);
    
}
  
.elegant-hr::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
              rgba(0,0,0,0) 0%, 
              rgba(255,255,255,0.7) 20%, 
              rgba(255,255,255,1) 50%, 
              rgba(255,255,255,0.7) 80%, 
              rgba(0,0,0,0) 100%);
}
  
.elegant-hr::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
              rgba(0,0,0,0) 0%, 
              rgba(255,255,255,0.3) 20%, 
              rgba(255,255,255,0.5) 50%, 
              rgba(255,255,255,0.3) 80%, 
              rgba(0,0,0,0) 100%);
}

.enter span a {
    color: #fff;
    background: linear-gradient(to right, #002dff5b, #00ffc05b);
    border: 1px solid #00ffc0;
    padding: 6px;
    display: block;
    text-align: center;
    border-radius: 5px;
}

/*
=============================
==========End article=========
=============================
*/





/*
=============================
=====Start media queries=====
=============================
*/ 
@media(max-width:1023px){
    
    header {
        padding: 20px 12px;
    }
    
    .navigation a{
        padding-left: 10px;
    }
    .title {
        font-size: 1.8em;
    }
    
    section {
        padding: 80px 20px;
    }
    

@media(max-width:641px){

    body {
        font-size: 12px;
    }


@media(max-width:300px){
    
    body {
        font-size: 10px;
    }
        details {
        top: -2px;
        right: -0px;

    }
}

@media(max-width:435px){
    
    details {
        top: -0.0px;
        right: -0.0px;

    }
    
}
@media(max-width:1023px){
    
    header {
        padding: 20px 12px;
    }
    
    .navigation a{
        padding-left: 10px;
    }
    .title {
        font-size: 1.8em;
    }
    
    section {
        padding: 80px 20px;
    }
    
    .min-content h2{
        font-size: 1em;
    }
    
    .min-content h3{
        font-size: 1.6em;
    }
    
    .content{
        flex-direction: column;
        align-items: center;
    }
    
    
}
@media (max-width: 1024px) and (min-width: 1024px) {
    .content {
        margin-top: -300px;
    }
}
@media(max-width:641px){

    body {
        font-size: 12px;
    }
   .min-content h2{
        font-size: 0.8em;
    }
    
   .min-content h3{
        font-size: 1.4em;
    }
}


@media(max-width:300px){
    
    body {
        font-size: 10px;
    }
        details {
        top: -2px;
        right: -0px;

    }
}

@media(max-width:435px){
    
    details {
        top: -0.0px;
        right: -0.0px;

    }
    
}

/* تحسين التصميم للشاشات الصغيرة */
@media (min-width: 435px) {
  .email-text p {
    font-size: 10px; /* تصغير الخط */
  }
}

@media (min-width: 375px) {
  .social-card {
    flex-direction: column; /* تكديس العناصر رأسيًا */
    align-items: flex-start;
  }

  .social-icon {
    margin-bottom: 5px;
  }

  .email-text p {
    font-size: 8px; /* تصغير الخط أكثر */
    text-align: center;
  }
}

@media (max-width: 320px) {
  .social-text p {
    font-size: 0.3rem; /* تصغير الخط لأقصى درجة مناسبة */
      flex: 1;  
      margin-top: 18px;  
                  
  }
  

}


@media(min-width: 435px){

.image-article img {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    overflow-x:auto ;
    width: 250px;
    display: block;
    margin: auto;
    border-radius: 5px;
}

.article h1 {
    color: #fff;
    font-size: 30px;
    text-align: center;
}

.article p {
    color: #f800ff;
    text-align: center;
}
    
}




@media(max-width: 435px){

.image-article img {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    overflow-x:auto ;
    width: 250px;
    display: block;
    margin: auto;
    border-radius: 5px;
}

.article h1 {
    color: #fff;
    font-size: 30px;
    text-align: center;
}

.article p {
    color: #f800ff;
    text-align: center;
}
    
}


/*
=============================
======End media queries======
=============================
*/