/* Base & Reset */
html { scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'El Messiri', sans-serif; }
a { text-decoration: none; color: rgb(0,0,0); }

/* Navbar */
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 96px;
    background-color: #000;
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 1000;
    flex-direction: row;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 200ms ease;
}
nav ul {
    display: flex;
    list-style: none;
    gap: 50px;
    margin: 0;
}
/* Center navbar buttons on desktop */
@media(min-width: 769px) {
  nav ul {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    gap: 50px;
    margin: 0;
  }
  nav ul li {
    margin: 0;
  }
}

nav ul li { cursor: pointer; font-weight: bold; margin: 0 10px; }
nav ul li a { color: #fff; font-weight: normal; transition: color 0.2s ease; position: relative; }
nav ul li a:hover { color: rgba(255,255,255,0.6); }
nav a::before { display: none; }
nav img {
    display: block;
    transform: none;
    transition: filter 220ms ease;
}
nav img:hover { filter: drop-shadow(0 6px 18px rgba(225,0,0,0.15)); }
nav.nav-scrolled { background-color: #000; box-shadow: 0 6px 18px rgb(0,0,0); animation: rollDown 220ms ease both; }
@keyframes rollDown { from { transform: translateY(-12px); opacity: 0.95; } to { transform: translateY(0); opacity: 1; } }

/* Hamburger */
.hamburger { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; cursor: pointer; z-index: 1001; color: #fff; }
.hamburger span { display: block; height: 3px; width: 100%; background-color: white; transition: all 0.3s ease; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px,-6px); }

/* Corner logos */
.corner-logo { position: fixed; height: 90px; width: auto; top: 0px; z-index: 1100; pointer-events: none; }
.corner-logo.left { left: 40px; }
.corner-logo.right { right: 40px; }



/* Sections */
section { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; padding: 20px; overflow: hidden; }
#section2 { position: relative; align-items: flex-end; padding: 40px 20px; background: url('images/background.jpeg') center/cover no-repeat; }
#section2::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.048) 0%, rgb(238,238,238) 100%); z-index: 0; }
.intro-panel { position: relative; z-index: 2; width: 100%; max-width: 1000px; margin: 30px auto 0; padding: 0; background: none; border: none; box-shadow: none; color: #000; animation: fadeUp 0.9s cubic-bezier(.2,.9,.2,1) both; }
.intro-panel h1 { font-size: 34px; margin-bottom: 10px; color: #1b1b1b; }
.intro-panel p { font-size: 18px; line-height: 1.9; color: #333; margin-bottom: 10px; }

/* Fade Up Animation */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px) scale(0.995); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Section 3 - Services Grid */
#section3 { background-color: #fff; padding: 40px 0; text-align: center; }
h2 { color: #000; font-size: 36px; margin-bottom: 30px; }
.services-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 70%; margin: 0 auto; align-items: stretch; }
.service-card { position: relative; overflow: hidden; border-radius: 15px; cursor: pointer; transition: transform 0.3s ease; width: 320px; }
.service-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; transition: transform 0.3s ease; }
.service-info { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.4); color: white; padding: 15px; text-align: center; }
.service-info h3 { margin: 0 0 5px; font-size: 20px; }
.service-info p { font-size: 14px; margin: 0; }
.service-card:hover img { transform: scale(1.1); }
.service-card:hover .service-info { background: rgba(0,0,0,0.6); }

/* Section 4 - Stats */
#section4 { position: relative; min-height: 60vh; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; overflow: hidden; padding: 40px 20px; background: url('images/background-section.jpg') center/cover no-repeat; }
#section4::before { content: ""; position: absolute; inset: 0; background: url('images/background-section.jpg') center/cover no-repeat; filter: blur(6px); transform: scale(1.1); z-index: 0; }
#section4::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0.7; z-index: 1; }
#section4 .content { position: relative; z-index: 2; text-align: center; }
#section4 h2 { color: #fff; }


/* Section 5 - Carousel */
#section5 { background-color: #1b1b1b; padding: 60px 0; text-align: center; }
#section5 h2 {
    color: #fff;
}

.carousel { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; padding: 20px 10px; }
.carousel-viewport { overflow: hidden; }
.carousel-track {
  display: flex;
  gap: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  padding-bottom: 8px;
}
.slide {
  flex: 0 0 280px;  /* desktop width */
  height: 460px;
  scroll-snap-align: center;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  position: relative;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Section 6 - Services / Goals */
#section6 { background-color: #fff; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #000; text-align: center; position: relative; overflow: visible; padding: 60px 20px; }
#section6 h2 { font-size: 42px; margin-bottom: 60px; color: #000; font-weight: bold; }
.services-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px 32px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px; }
.service-item { display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 16px; padding: 40px 25px; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; text-align: center; border: 1px solid #a3a3a3; min-height: 400px; opacity: 0; transform: translateY(30px); animation: fadeUp 0.6s ease forwards; }
.service-item img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; margin-bottom: 18px; }
.service-item:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0,0,0,0.25); }
.service-icon { width: 70px; height: 70px; background: linear-gradient(135deg,#ececec,#555555); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 18px; color: #fff; transition: transform 0.28s ease, background 0.28s ease; }
.service-item:hover .service-icon { transform: scale(1.15) rotate(8deg); background: linear-gradient(135deg,#ffffff,#9c9c9c); }
.service-content h3 { font-size: 22px; margin-bottom: 12px; color: #000; font-weight: bold; }
.service-content p { font-size: 16px; color: #333; line-height: 1.7; }

/* Section 7 - Map */
#section7 { position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; padding: 0; }
.section7-map-wrapper { position: relative; width: 100%; height: 100%; }
.map-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contact-panel { position: absolute; top: 20%; right: 60px; transform: translateY(-50%); background: #fff; color: #000; max-width: 450px; width: 100%; padding: 50px 30px; border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,0.25); z-index: 2; text-align: center; display: flex; flex-direction: column; gap: 30px; animation: fadeUp 0.9s cubic-bezier(.2,.9,.2,1) both; }
.contact-panel h2 { font-size: 32px; margin-bottom: 20px; color: #000; }
.contact-info { display: flex; flex-direction: column; gap: 20px; }
.info-item { display: flex; flex-direction: column; align-items: center; font-size: 18px; }
.info-item i { font-size: 32px; margin-bottom: 10px; color: #000; }

/* 3D Card Slider */
#card-slider { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; perspective:1200px; z-index:1; }
.card { position:absolute; width:600px; height:400px; border-radius:12px; overflow:hidden; box-shadow:0 12px 24px rgba(0,0,0,0.4); transform-origin:center; transition: transform 0.5s ease, opacity 0.5s ease; cursor:pointer; background:#000; display:flex; justify-content:center; align-items:center; transform: translateX(0) scale(0.5) rotateY(0deg); opacity: 0; z-index:1; }
.card img { width:100%; height:100%; object-fit:cover; border-radius:12px; }
.card.active { transform: translateX(0) scale(1) rotateY(0deg); z-index:10; opacity:1; }
.card.prev { transform: translateX(-440px) scale(0.7) rotateY(25deg); z-index:5; opacity:0.6; }
.card.next { transform: translateX(440px) scale(0.7) rotateY(-25deg); z-index:5; opacity:0.6; }
.card.prev2 { transform: translateX(-880px) scale(0.5) rotateY(35deg); z-index:3; opacity:0.4; }
.card.next2 { transform: translateX(880px) scale(0.5) rotateY(-35deg); z-index:3; opacity:0.4; }

/* Media Queries */
@media(max-width:992px){
  .service-card, .client-card { width: 320px; }
  #section2 { background-size: cover; }
  .services-list { gap: 20px 24px; }
}
@media(max-width:768px){
  nav { flex-direction: column; gap:20px; }
  nav img { height:70px; display:none; }
  nav a { font-size:20px; padding:6px 10px; }
  .hamburger { display:flex; position: fixed; left:50%; top:40px; transform: translateX(-50%); z-index:1200; }
  .hamburger span { background-color:#fff; }
  nav ul { position: fixed; top: -100vh; left:0; width:100%; flex-direction: column; padding:70px 20px 15px; background:#000; box-shadow:0 4px 12px rgba(0,0,0,0.2); transition: top 0.28s ease; }
  nav ul.active { top:0; }
  nav ul li { margin: 10px 0; text-align: center; }
  nav ul li a { display:block; width:100%; padding:10px; font-size:18px; color:#fff !important; }

  section { padding:60px 15px; }
  .intro-panel { padding:20px 10px; }
  .intro-panel h1 { font-size:22px; }
  .intro-panel p { font-size:15px; }
  .service-item { padding:20px 16px; }
  .service-icon { width:60px; height:60px; font-size:28px; margin-bottom:14px; }
  .service-content h3 { font-size:20px; margin-bottom:10px; }
  .service-content p { font-size:14px; line-height:1.6; }
  .services-grid { flex-direction: column; align-items:center; gap:18px; overflow-x:visible; }
  .client-card { width: calc(50% - 20px); height:180px; }
  .slide { flex: 0 0 min(260px, 78vw); height: 420px; scroll-snap-align: start; }
  .carousel-track { gap: 10px; padding-left: 8px; padding-right: 8px; }
  .why-grid { flex-direction: column; gap:40px; width:100%; max-width:100%; }
  .why-item { max-width:100%; padding:0 15px; }
  .why-item p { font-size:14px; line-height:1.5; }
  .separator { display:none; }
  #card-slider .card { width:300px; height:180px; top:150px; }
  .card.prev { transform: translateX(-300px) scale(0.65) rotateY(25deg); }
  .card.next { transform: translateX(300px) scale(0.65) rotateY(-25deg); }
  .card.prev2 { transform: translateX(-560px) scale(0.5) rotateY(35deg); }
  .card.next2 { transform: translateX(560px) scale(0.5) rotateY(-35deg); }
.section7-map-wrapper {
    display: flex; 
    flex-direction: column-reverse; 
    width: 100%; /* Explicitly setting 100% */
    padding: 0; /* Ensures no horizontal padding on the wrapper */
    height: auto; 
    min-height: 100vh;
}

    .map-container { 
        /* Map should take up a fixed portion of the screen */
        height: 40vh; 
        min-height: 200px;
        position: relative; /* Ensure it behaves normally in the flow */
    }

.contact-panel { 
    /* Reset desktop absolute positioning and make it flow */
    position: relative; 
    top: auto; 
    right: auto; 
    transform: none; 
    
    /* Crucial Fix: Use 100% width and control padding */
    max-width: 100%; 
    width: 100%;
    
    margin: 0; /* Ensures no horizontal margin causes overflow */
    padding: 30px 15px; /* Reduced horizontal padding for narrow screens */
    
    border-radius: 0; 
    flex-grow: 1; 
}

    /* You can keep the following mobile aesthetic adjustments for the contact panel: */
    .contact-panel h2 { 
        font-size:24px; 
    }
    .contact-info { 
        gap:15px; 
    }
    .info-item i { 
        font-size:28px; 
    }
}
@media(max-width:480px){ .client-card { width:100%; height:160px; } }



.brick-grid-wrapper {
  display: flex;
  justify-content: center; /* center the whole content */
}

.brick-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* center rows */
  gap: 16px; /* space between tiles */
  max-width: 100%; /* allow full width */
}

.tile {
  width: 260px;   /* fixed size */
  height: 360px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Stagger every other row for brick effect */
.tile:nth-child(odd) {
  margin-top: 0;
}
.tile:nth-child(even) {
  margin-top: 30px; /* stagger */
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.tile:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

/* Responsive */
@media(max-width: 992px) {
  .tile {
    width: 150px;
    height: 150px;
  }
  .tile:nth-child(even) {
    margin-top: 20px;
  }
}

@media(max-width: 480px) {
  .brick-grid {
    flex-direction: column;
    align-items: center;
  }
  .tile {
  width: 260px;   /* fixed size */
  height: 260px;
    margin-top: 0 !important;
  }
}