/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&display=swap');
/* Include modern elegant icons */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
  --primary: #10B981; 
  --primary-light: #34D399; 
  --primary-dark: #047857; 
  --primary-darker: #064E3B;
  --emerald-50: #ECFDF5;
  --bg-color: #F8FAFC; 
  --surface-color: #FFFFFF; 
  --text-dark: #0F172A; 
  --text-light: #64748B; 
  --border-color: #E2E8F0; 
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
  font-family: 'Cairo', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-dark);
  line-height: 1.7;
  direction: rtl;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
header {
  background-color: var(--surface-color);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  text-decoration: none;
  display: flex;
  align-items: center;
}

.site-logo {
  max-height: 50px;
  width: auto;
}

.logo span {
  color: var(--primary);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.nav-links li a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 600;
  font-size: 1.1rem;
  transition: var(--transition);
  position: relative;
}

.nav-links li a::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -5px;
  right: 0;
  background-color: var(--primary);
  transition: var(--transition);
}

.nav-links li a:hover, 
.nav-links li a.active {
  color: var(--primary);
}

.nav-links li a:hover::after,
.nav-links li a.active::after {
  width: 100%;
}

/* Main Content */
main {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
  width: 100%;
}

/* Hero Section */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
}

.hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--primary-darker);
  margin-bottom: 1rem;
}

.hero h1 span {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero p {
  font-size: 1.25rem;
  color: var(--text-light);
  max-width: 600px;
  margin-bottom: 2rem;
}

.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  background-color: var(--primary);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* CSS Animated Gallery */
.gallery-section {
  overflow: hidden;
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%); /* Full width hack */
  padding: 3rem 0;
  background-color: var(--surface-color);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.02);
}

.gallery-section::before,
.gallery-section::after {
  content: "";
  position: absolute;
  top: 0;
  width: 15vw;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.gallery-section::before {
  right: 0;
  background: linear-gradient(to left, var(--surface-color) 0%, transparent 100%);
}
.gallery-section::after {
  left: 0;
  background: linear-gradient(to right, var(--surface-color) 0%, transparent 100%);
}

.gallery-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: scrollRTL 50s linear infinite;
}

.gallery-track:hover {
  animation-play-state: paused;
}

.gallery-item {
  width: 350px;
  height: 250px;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  position: relative;
  transition: var(--transition);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover {
  box-shadow: 0 15px 35px rgba(16, 185, 129, 0.2);
}

.gallery-item:hover img {
  transform: scale(1.08);
}

/* In RTL, items display right-to-left inside flex. We want it to continuously slide.
 translateX(-50%) moves the track to the LEFT. Since flex starts from the right in RTL, moving to the left reveals items on the right side. Wait. 
 In RTL flex:
 Item 1 is at Far Right. Item 6 is at Far Left.
 Moving the container to the right (positive X) reveals the left items.
 Moving the container to the left (negative X) reveals the right items...wait, it doesn't extend right forever.
 Let's use standard direction for the animation. Duplicate elements: 1, 2, 3, 4, 1, 2, 3, 4. 
 */
@keyframes scrollRTL {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); } 
}

/* Services Grid */
.page-title {
  text-align: center;
  font-size: 2.5rem;
  color: var(--primary-darker);
  margin-bottom: 4rem;
  position: relative;
  font-weight: 800;
}

.page-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--primary);
  border-radius: 2px;
}

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

.service-card {
  background-color: var(--surface-color);
  padding: 2.5rem 2rem;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  transition: var(--transition);
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--emerald-50) 0%, transparent 100%);
  z-index: -1;
  opacity: 0;
  transition: var(--transition);
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary-light);
  box-shadow: 0 15px 30px rgba(16, 185, 129, 0.1);
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background-color: var(--emerald-50);
  border-radius: 50%;
  transition: var(--transition);
}

.service-card:hover .service-icon {
  background-color: var(--primary);
  color: white;
  transform: scale(1.1);
}

.service-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 1rem;
}

/* Contact Info */
.contact-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.contact-card {
  background-color: var(--surface-color);
  padding: 2.5rem 2rem;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  border: 1px solid var(--border-color);
  transition: var(--transition);
}

.contact-card:hover {
  border-color: var(--primary-light);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.1);
}

.contact-icon {
  width: 70px;
  height: 70px;
  background-color: var(--emerald-50);
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  transition: var(--transition);
}

.contact-card:hover .contact-icon {
  background-color: var(--primary);
  color: white;
}

.contact-details h3 {
  font-size: 1.3rem;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.contact-details a, .contact-details p {
  color: var(--text-light);
  text-decoration: none;
  font-size: 1.1rem;
  transition: var(--transition);
}

.contact-details a:hover {
  color: var(--primary);
}

/* Footer */
footer {
  background-color: var(--primary-darker);
  color: white;
  padding: 4rem 2rem 1.5rem;
  margin-top: auto;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
}

.site-footer-logo {
  max-height: 60px;
  width: auto;
}

.footer-logo span {
  color: var(--primary-light);
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.footer-social a {
  color: white;
  background-color: rgba(255,255,255,0.1);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 1.2rem;
  transition: var(--transition);
}

.footer-social a:hover {
  background-color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
}

.back-to-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary-light);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}

.back-to-top:hover {
  color: white;
}

.footer-bottom {
  text-align: center;
  padding-top: 1.5rem;
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .nav-links {
    gap: 1rem;
  }
  
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}

/* Floating WhatsApp Button */
.floating-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    transition: var(--transition);
    text-decoration: none;
}

.floating-whatsapp:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
    color: white;
}



/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    padding: 50px 20px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.lightbox-content {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #f1f1f1;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
    z-index: 2001;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: var(--primary);
    transform: scale(1.1);
}

@keyframes zoomIn {
    from {transform: scale(0.9); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

/* Make sure horizontal overflow is hidden on mobile */
html, body {
    overflow-x: hidden;
}

@media (max-width: 768px) {
    
    .lightbox-close {
        top: 15px;
        right: 20px;
        font-size: 40px;
    }
}


/* Responsive Masonry Gallery */
.masonry-section {
    padding: 4rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.masonry {
    column-count: 4;
    column-gap: 1.5rem;
    padding: 0;
}

.item {
    display: inline-block;
    background: var(--surface-color);
    padding: 0.5rem;
    margin: 0 0 1.5rem;
    width: 100%;
    transition: var(--transition);
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-radius: 12px;
    overflow: hidden;
    cursor: zoom-in;
}

.item img {
    border-radius: 8px;
    max-width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.item:hover {
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.15);
    transform: translateY(-5px);
}

.item:hover img {
    transform: scale(1.02);
}

@media only screen and (max-width: 480px) {
    .masonry {
        column-count: 1;
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px){
    .masonry {
        column-count: 2;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1200px){
    .masonry {
        column-count: 3;
    }
}

@media only screen and (min-width: 1201px) {
    .masonry {
        column-count: 4;
    }
}