/*
 * PROFESSIONAL STYLESHEET FOR ALALEM ALMUDI
 * Version: 4.0
 * FIX: Centered all section titles based on user's HTML.
 * ENHANCEMENT: Increased global font sizes for readability.
*/

/* --- 1. Global & Root Variables --- */

:root {
  --color-primary: #acc9f1;     /* Trustworthy Blue */
  --color-primary-light: #007BFF;   /* Lighter Blue for accents */
  --color-dark: #222222;        /* Soft Black for text */
  --color-secondary-text: #555555; /* Medium Gray for subtext */
  --color-white: #f8f6f6;       /* Pure White */
  --color-bg-light: #F4F6F8;   /* Light Gray/Silver Background */
  --color-border: #CED4DA;      /* Light Border Gray */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 6px 15px rgba(0, 0, 0, 0.08);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px; /* Base font size */
}

body {
  font-family: "Montserrat", sans-serif;
  color: var(--color-dark);
  background-color: var(--color-white);
  overflow-x: hidden;
  /* Subtle noise texture for a premium feel */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='0.02' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

/* --- 2. Re-usable Containers (Fixes Side Margins) --- */

.home-container,
.about-container,
.projects-container,
.services-container,
.contact-content,
.footer-container,
.info-pro {
  max-width: 1200px;  /* Max width of content */
  margin-left: auto;   /* Centers the content */
  margin-right: auto;
  padding-left: 20px;   /* Side margin (left) */
  padding-right: 20px;  /* Side margin (right) */
}

/* --- 3. Section Layout --- */

section {
  padding: 100px 0;
  overflow: hidden;
}

/* Alternating background colors */
.home, .project, .contact {
  background-color: var(--color-white);
}

.about, .services {
  background-color: var(--color-bg-light);
}

/* --- 4. Section Headers (NEW: Fixes Centering) --- */

/* This targets the subtitles (e.g., "من نحن", "منتجاتنا") */
.about > p,
.project > p,
.services > p,
.contact > p {
  font-size: 1.2rem; /* Larger */
  color: var(--color-secondary-text);
  margin-bottom: 8px;
  font-weight: 500;
  text-align: center;
}

/* This targets the main titles (e.g., "رؤيتنا", "تشكيلة متنوعة") */
.about .title,
.project > h1,
.services > h1,
.contact > h1 {
  font-size: 3rem; /* Larger */
  font-weight: 700;
  color: var(--color-dark);
  text-align: center;
  margin-bottom: 10px;
}

/* Specific for 'About' section's two-line title */
.about .title h1 {
    font-size: 3rem; /* Larger */
    line-height: 1.3;
}

/* This targets the underline hr */
.about .hrrr,
.project > hr,
.services > hr {
  width: 80px;
  height: 4px;
  background-color: var(--color-primary);
  border: none;
  margin: 20px auto 50px auto; /* Center with margin */
}
/* This hides the empty <hr> in .hrrr div */
.about .hrrr hr {
  display: none;
}


/* --- 5. Header / Navigation --- */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.header-list {
  margin: 15px 20px;
}

.div-list {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ul-list {
  list-style: none;
  display: flex;
  gap: 2rem;
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
  padding: 12px 30px;
  border-radius: 50px;
}

.ul-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 50px;
  transition: all 0.3s ease;
}

.ul-list li a {
  font-family: "Montserrat", sans-serif;
  text-decoration: none;
  color: var(--color-dark);
  font-weight: 500;
  font-size: 1.05rem; /* Larger */
  padding: 8px 4px;
}

.ul-list li i {
  color: var(--color-secondary-text);
  transition: all 0.3s ease;
  font-size: 1.05rem;
}

.ul-list li:hover i,
.ul-list li:hover a {
  color: var(--color-primary);
}

.ul-list li.active {
  background-color: var(--color-primary);
  padding: 8px 20px;
}

.ul-list li.active a,
.ul-list li.active i {
  color: var(--color-white);
}


/* --- 6. Loading Screen --- */

#loading-screen {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background-color: var(--color-primary);
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  z-index:9999;
  overflow:hidden;
  color: var(--color-white);
  text-align:center;
}
.loading-content h1 { font-size: 1.5rem; }
.loading-content h2 { font-size: 1.1rem; }
.sub-icons { display:flex; justify-content:center; gap: 25px; margin-bottom: 20px; }
.hidden { opacity: 0; transform: translateY(-200px); }
.fall { animation: fall 0.9s forwards; }
@keyframes fall {
  0% { opacity:0; transform: translateY(-200px); }
  60% { opacity:1; transform: translateY(20px); }
  100% { transform: translateY(0); }
}


/* --- 7. Home Section --- */

.home {
  padding-top: 200px;
  padding-bottom: 100px;
}

.home-container {
  display: flex;
  gap: 4rem;
  align-items: center;
}

.home-section {
  flex: 1;
}

.info-home h1 {
  font-size: 3.8rem; /* Larger */
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}

.info-home h3 {
  font-size: 2rem; /* Larger */
  font-weight: 500;
  margin-bottom: 25px;
  color: var(--color-secondary-text);
}

.info-p {
  color: var(--color-dark);
  font-size: 1.15rem; /* Larger */
  line-height: 1.7;
  margin-bottom: 25px;
}

.info-p p {
  padding-bottom: 8px;
}

.info-p2 {
  display: flex;
  gap: 1.5rem;
  color: var(--color-secondary-text);
  font-size: 1.1rem; /* Larger */
  font-weight: 500;
  margin-bottom: 30px;
}

.info-p2 i {
  color: var(--color-primary);
  margin-right: 8px;
}

.btnn {
  display: flex;
  gap: 1rem;
  margin-bottom: 40px;
}

.btn-home1, .btn-home2 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem; /* Larger */
  font-weight: 600;
  padding: 14px 24px;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-home1 {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-home1:hover {
  background-color: #08428c;
  border-color: #08428c;
}

.btn-home2 {
  background-color: transparent;
  color: var(--color-primary);
}

.btn-home2:hover{
  background-color: var(--color-primary);
  color: var(--color-white);
}

.hhr hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--color-border);
  margin-bottom: 30px;
}

.follow {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.followw {
  font-size: 1.15rem; /* Larger */
  font-weight: 600;
  color: var(--color-dark);
}

.follow ul {
  display: flex;
  gap: 1rem;
  font-size: 1.6rem; /* Larger */
}

.follow ul li {
  list-style: none;
}

.follow ul a {
  text-decoration: none;
  color: var(--color-secondary-text);
  transition: all 0.3s ease;
}

.follow ul a:hover {
  color: var(--color-primary);
}

.home img {
  flex-basis: 40%;
  max-width: 500px;
  border-radius: 15px;
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

/* --- 8. About Section --- */

.about-container {
  display: flex;
  gap: 4rem;
  align-items: center;
}

.info-about {
  flex: 1;
}

.about-info p {
  font-size: 1.15rem; /* Larger */
  line-height: 1.8;
  color: var(--color-secondary-text);
  margin-bottom: 20px;
  text-align: center; /* Center the paragraphs */
}

.info-about h2 {
  font-size: 2rem; /* Larger */
  margin-top: 40px;
  margin-bottom: 30px;
  text-align: center;
}

.card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.c1 {
  background: var(--color-white);
  padding: 30px 25px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: all 0.3s ease;
  text-align: center;
}

.c1 h3 {
  font-size: 1.4rem; /* Larger */
  margin-bottom: 15px;
  color: var(--color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.c1 h3 i {
  font-size: 2.2rem; /* Larger */
}

.c1 p {
  font-size: 1.05rem; /* Larger */
  line-height: 1.6;
  color: var(--color-secondary-text);
}

.c1:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  cursor: pointer;
}

.about img {
  flex-basis: 40%;
  max-width: 500px;
  border-radius: 15px;
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

/* --- 9. Products Section --- */

.info-pro {
  text-align: center;
  margin-bottom: 60px;
}

.info-pro p {
  font-size: 1.15rem; /* Larger */
  color: var(--color-secondary-text);
  line-height: 1.7;
}

.projects-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.project-card {
  background: var(--color-white);
  padding: 20px;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid #eee;
  transition: all 0.3s ease;
  text-align: center;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.project-card img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  border-radius: 12px;
  margin-bottom: 20px;
  background-color: var(--color-bg-light);
}

.project-card h3 {
  color: var(--color-primary);
  margin-bottom: 10px;
  font-size: 1.5rem; /* Larger */
}

.project-card p {
  color: var(--color-secondary-text);
  font-size: 1.05rem; /* Larger */
  line-height: 1.6;
  margin-bottom: 15px;
}

/* --- 10. Services Section --- */

.services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 50px;
}

.service-card {
  background: var(--color-white);
  padding: 30px;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid #eee;
  transition: all 0.3s ease;
  text-align: center;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.service-card img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 20px;
}

.service-card h3 {
  color: var(--color-primary);
  margin-bottom: 10px;
  font-size: 1.5rem; /* Larger */
}

.service-card p {
  color: var(--color-secondary-text);
  font-size: 1.05rem; /* Larger */
  line-height: 1.6;
}

/* --- 11. Contact Section --- */

.contact-content {
  padding-top: 50px;
  display: flex;
  gap: 4rem;
  flex-wrap: wrap;
  justify-content: center;
}

.contact-info {
  flex: 1;
  min-width: 350px;
}

.contact-info p {
  font-size: 1.15rem; /* Larger */
  color: var(--color-secondary-text);
  line-height: 1.7;
  margin-bottom: 30px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.15rem; /* Larger */
  color: var(--color-dark);
  font-weight: 500;
}

.contact-item i {
  font-size: 1.6rem; /* Larger */
  color: var(--color-primary);
  width: 25px;
  text-align: center;
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-link {
  width: 50px;
  height: 50px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary-text);
  font-size: 1.3rem; /* Larger */
  transition: all 0.3s ease;
}

.social-link:hover {
  transform: translateY(-5px);
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Form */
.contact-form {
  flex: 1;
  min-width: 350px;
}

.contact-form .form-group {
  margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1.05rem; /* Larger */
  font-family: "Montserrat", sans-serif;
  transition: all 0.3s ease;
  color: var(--color-dark);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(10, 77, 170, 0.2);
}

.btn-send {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 14px 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.15rem; /* Larger */
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  transition: all 0.3s ease;
}

.btn-send:hover {
  background: #08428c;
}

/* --- 12. Footer --- */

.footer {
  background-color: var(--color-dark);
  color: #aaa;
  padding: 60px 0;
  text-align: center;
  overflow-x: hidden;
}

.footer-logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.9rem; /* Larger */
  margin-bottom: 25px;
  color: var(--color-white);
}

.footer-links {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.footer-links li a {
  color: #ccc;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem; /* Larger */
  transition: color 0.3s ease;
}

.footer-links li a:hover {
  color: var(--color-white);
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 25px;
}

.footer-social a {
  color: #ccc;
  font-size: 1.5rem; /* Larger */
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: var(--color-white);
}

.footer-copy {
  font-size: 1rem; /* Larger */
  color: #888;
}

/* --- 13. Responsive Media Queries --- */

@media (max-width: 1024px) {
  section { padding: 80px 0; }
  .home { padding-top: 180px; }

  .home-container, .about-container {
    flex-direction: column;
    gap: 3rem;
  }
  
  .home-container img, .about-container img {
    order: -1;
    width: 100%;
    max-width: 500px;
    height: auto;
  }

  .card {
    grid-template-columns: 1fr;
  }
}

/* Phone layout */
@media (max-width: 768px) {
  section { padding: 60px 0; }
  .home { padding-top: 160px; }

  .info-home h1 { font-size: 2.8rem; }
  .info-home h3 { font-size: 1.6rem; }
  
  .about .title h1,
  .project > h1,
  .services > h1,
  .contact > h1,
  .about .title { font-size: 2.2rem; }

  /* --- MOBILE HEADER FIX --- */
  .div-list {
    justify-content: flex-start;
    padding: 0 10px;
  }
  .header-list {
    margin: 10px;
  }
  .ul-list {
    padding: 10px 15px;
    gap: 1.5rem;
    overflow-x: auto;
    white-space: nowrap;
    justify-content: flex-start;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .ul-list::-webkit-scrollbar {
    display: none;
  }
  /* --- END MOBILE HEADER FIX --- */

  .btnn {
    flex-direction: column;
    gap: 1rem;
  }
  .btn-home1, .btn-home2, .btn-send {
    width: 100%;
    justify-content: center;
  }

  .follow {
    flex-direction: column;
    align-items: center;
  }

  .projects-container, .services-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .contact-content {
    gap: 3rem;
  }
  .contact-info, .contact-form {
    min-width: 100%;
    text-align: center;
  }
  .contact-item {
    justify-content: center;
  }
  .social-links {
    justify-content: center;
  }

  .footer-links {
    gap: 15px;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .home { padding-top: 150px; }
  .info-home h1 { font-size: 2.2rem; }
  .info-home h3 { font-size: 1.3rem; }
  .info-p, .about-info p { font-size: 1.05rem; }
  
  .about .title h1,
  .project > h1,
  .services > h1,
  .contact > h1,
  .about .title { font-size: 1.8rem; }

  .loading-content h1 { font-size: 1.2rem; }
}
/* --- 12. Contact Section Fix --- */
.contact-item span {
  /* This tells the browser this specific text is Left-to-Right */
  direction: ltr;
  
  /* This isolates it from the page's RTL direction */
  unicode-bidi: isolate;
  
  /* This helps the browser apply the direction correctly */
  display: inline-block;
}

/* --- 6. Loading Screen --- */

/* ADD THIS NEW RULE */
#loading-screen .main-icon {
  width: 400px;  /* Set your desired logo width */
  height: auto;   /* Maintain aspect ratio */
  max-width: 80%;
  border-radius: 12px; /* Optional: gives it soft corners */
}
/* END OF NEW RULE */


#loading-screen {
  position: fixed;
/* (rest of your CSS) */