/* ================================================================== */

.lines {
  position: absolute;
  top: 100vh;
  left: 0;
  width: 1000px;
  margin: 0px 64px 0px 64px;
  z-index: 0;
  height: 100%;
}

.header {
  width: 100%;
  height: 80vh;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.slideshow {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  background-color: black;
}

.slide {
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 0;
  top: 0px;
  left: 0px;
  position: absolute;
  background-size: cover;
  background-position: center;
  animation: imageAnimation 36s linear infinite 0s;
  filter: blur(0px);
}

#slide_1 {
  background-image: url("../../assets/Commericial/Saja_Boulevard/Saga_Boulevard_02.png");
}

#slide_2 {
  background-image: url("../../assets/Commericial/Saja_Mall_2/01.jpg");
  animation-delay: 6s;
}

#slide_3 {
  background-image: url("../../assets/Commericial/Al_Rehab_Complex/04.jpg");
  animation-delay: 12s;
}

#slide_4 {
  background-image: url("../../assets/Adminstrative/Smart_Village/0041.jpg");
  animation-delay: 18s;
}

#slide_5 {
  background-image: url("../../assets/Industrial/Nestle_Factory/01.jpg");
  animation-delay: 24s;
}

#slide_6 {
  background-image: url("../../assets/Commericial/New_Giza_Club/010.jpg");
  background-position: center !important;
  animation-delay: 30s;
}

.slide-text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  background-color: #00000071;
}

.slide-text > .text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Poppins";
}

.slide-title {
  font-size: 84px;
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: #000000;
}

.slide-location {
  display: flex;
  color: white;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-shadow: #000000;
}

.location-icon {
  filter: brightness(100);
  margin-right: 8px;
}

.slide-type {
  color: white;
  text-shadow: #000000;
}

/* ========================== Navigation Bar ===========================*/
.nav_link {
  position: relative;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: 300;
  text-decoration: none;
  color: white;
}

.links {
  width: 350px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 48px;
}

.logo-icon {
  width: 80px;
  position: relative;
  object-fit: cover;
}

.links2 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.links1 {
  width: 350px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 48px;
}

.navigation-bar {
  width: 100%;
  position: relative;
  height: 68px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16px 64px 0px 64px;
  box-sizing: border-box;
  text-align: left;
  font-size: 18px;
  color: #000000;
  font-family: "Poppins";
}

/* ================= Projects Section =============== */

.projects {
  width: 100%;
  min-height: 200vh;
  background-color: #f3f0eb;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.tabs {
  position: absolute;
  top: 75vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 16px 0px 0px 0px;
  padding: 4px 16px 4px 16px;
  background-color: #ffffff;
  width: 700px;
  height: 60px;
  border-radius: 16px;
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.377);
}

.tab {
  font-family: "Poppins";
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 12px;
  border-radius: 10px;
}

.tab-radio {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

#tab-1:checked ~ .project-list #commercial,
#tab-2:checked ~ .project-list #industrial,
#tab-3:checked ~ .project-list #adminstrative,
#tab-4:checked ~ .project-list #retail,
#tab-5:checked ~ .project-list #manufacturing,
#tab-6:checked ~ .project-list #gsm {
  visibility: visible;
  opacity: 1;
  position: relative;
  transition: all 1s;
}

#tab-1:checked ~ .tabs > label:nth-child(1),
#tab-2:checked ~ .tabs > label:nth-child(2),
#tab-3:checked ~ .tabs > label:nth-child(3),
#tab-4:checked ~ .tabs > label:nth-child(4),
#tab-5:checked ~ .tabs > label:nth-child(5),
#tab-6:checked ~ .tabs > label:nth-child(6) {
  background-color: #f3f0eb;
}

.project-list {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  margin: 100px 24px 300px 24px;
}

.projects-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  transition: all 0.1s;
  gap: 24px;
}

.container-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
  width: 100%;
}

.project-card {
  height: 550px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

.project-thumbnail {
  border-radius: 4px;
  width: 100%;
  height: 100%;
  background-size: cover;
}

.project-caption {
  font-family: "Poppins";
}

/* ====================== Commercial Projects =========================== */

#commercial > .container-row:nth-child(1) > .project-card:nth-child(1) {
  flex-grow: 2;
}

#commercial
  > .container-row:nth-child(1)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../../assets/Commericial/Saja_Boulevard/08.jpeg);
}
#commercial
  > .container-row:nth-child(1)
  > .project-card:nth-child(2)
  > .project-thumbnail {
  background-image: url(../../assets/Commericial/Al_Obour_Mall/AlObour-13.webp);
  flex-grow: 0.5;
}

/* Row 2 */

#commercial > .container-row:nth-child(2) > .project-card > .project-thumbnail {
  background-image: url(../../assets/Commericial/Al_Rehab_Complex/04.jpg);
  background-position: center;
}

/* Row 3 */
#commercial
  > .container-row:nth-child(3)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../../assets/Commericial/Lotus_Mall_Group/01.jpg);
  background-position: top;
}

#commercial > .container-row:nth-child(3) > .project-card:nth-child(2) {
  flex-grow: 2;
}

#commercial
  > .container-row:nth-child(3)
  > .project-card:nth-child(2)
  > .project-thumbnail {
  background-image: url(../../assets/Commericial/Saja_Mall_2/05.jpg);
  background-position: center;
}

/* Row 4 */
#commercial
  > .container-row:nth-child(4)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../../assets/Commericial/Katameya_Club/01.jpg);
  background-position: center;
}

#commercial
  > .container-row:nth-child(4)
  > .project-card:nth-child(2)
  > .project-thumbnail {
  background-image: url(../../assets/Commericial/The_Flying_Resturaunt/M02.webp);
  background-position: top;
}

/* ==================== Industrial Projects ========================= */
#industrial > .container-row:nth-child(1) > .project-card:nth-child(1) {
  flex-grow: 1;
}

#industrial
  > .container-row:nth-child(1)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../../assets/Industrial/KTI_Factory/02.jpg);
  background-position: center;
}
#industrial
  > .container-row:nth-child(1)
  > .project-card:nth-child(2)
  > .project-thumbnail {
  background-image: url(../../assets/Industrial/Megapack_Factory/02.jpg);
  background-position: center;
}
#industrial
  > .container-row:nth-child(2)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../../assets/Industrial/Nestle_Factory/10.jpg);
  background-position: center;
}
#industrial
  > .container-row:nth-child(2)
  > .project-card:nth-child(2)
  > .project-thumbnail {
  background-image: url(../../assets/Industrial/Samsung_Factory/02.jpg);
  background-position: center;
}
#industrial
  > .container-row:nth-child(3)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../../assets/Industrial/sammix/01.jpg);
  background-position: center;
}
/* =================== Adminstrative Projects ======================= */
#adminstrative > .container-row:nth-child(1) > .project-card:nth-child(1) {
  flex-grow: 1;
}

#adminstrative
  > .container-row:nth-child(1)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../../assets/Adminstrative/Benha_National_University/01.jpg);
  background-position: top right;
}
#adminstrative
  > .container-row:nth-child(1)
  > .project-card:nth-child(2)
  > .project-thumbnail {
  background-image: url(../../assets/Adminstrative/Russian_University/pharma/01.jpg);
  background-position: center;
}
#adminstrative
  > .container-row:nth-child(2)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../../assets/Adminstrative/Investment_Bank/038.jpg);
  background-position: center;
}
#adminstrative
  > .container-row:nth-child(2)
  > .project-card:nth-child(2)
  > .project-thumbnail {
  background-image: url(../../assets/Adminstrative/Metropolitan_School/005.jpg);
  background-position: center;
}
#adminstrative
  > .container-row:nth-child(3)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../../assets/Adminstrative/Settlement_1_Adminstrative_Building/001.jpg);
  background-position: center;
}
#adminstrative
  > .container-row:nth-child(3)
  > .project-card:nth-child(2)
  > .project-thumbnail {
  background-image: url(../../assets/Adminstrative/Smart_Village/0041.jpg);
  background-position: center;
}

/* ====================== Retail Projects =========================== */
#retail > .container-row:nth-child(1) > .project-card:nth-child(1) {
  flex-grow: 0.5;
}

#retail
  > .container-row:nth-child(1)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../imgs/Retail\(zara\).jpg);
  background-position: center;
}
#retail
  > .container-row:nth-child(1)
  > .project-card:nth-child(2)
  > .project-thumbnail {
  background-image: url(../imgs/Retail\(e&\).jpg);
  background-position: center;
}
#retail
  > .container-row:nth-child(2)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../imgs/Retail\(Vodafone\).jpg);
  background-position: center;
}
#retail
  > .container-row:nth-child(2)
  > .project-card:nth-child(2)
  > .project-thumbnail {
  background-image: url(../imgs/Retail\(Kabbani\ Office\).jpg);
  background-position: center;
}#retail
  > .container-row:nth-child(3)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../imgs/Retail\(FreeAir\).jpg);
  background-position: center;
  }
#retail
  > .container-row:nth-child(4)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../imgs/Retail\(People\ &\ Place\).jpg);
  background-position: center;
}
#retail
  > .container-row:nth-child(4)
  > .project-card:nth-child(2)
  > .project-thumbnail {
  background-image: url(../imgs/Retail\(The\ Corner\ Coffe\ Shop\).jpg);
  background-position: center;
}
#retail
  > .container-row:nth-child(5)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../imgs/Retail\(Kabbani\ Showroom\).jpg);
  background-position: center;
}
#retail
  > .container-row:nth-child(5)
  > .project-card:nth-child(2)
  > .project-thumbnail {
  background-image: url(../imgs/Retail\(Kabbani\ Outlet\).jpg);
  background-position: center;
}
#retail
  > .container-row:nth-child(6)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../imgs/Retail\(Aman\).jpg);
  background-position: center;
}
/* =================== Manufacturing Projects ======================= */
#manufacturing > .container-row:nth-child(1) > .project-card:nth-child(1) {
  flex-grow: 1;
}

#manufacturing
  > .container-row:nth-child(1)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../../assets/Manufacturing/readymix.png);
  background-position: top right;
}
#manufacturing
  > .container-row:nth-child(1)
  > .project-card:nth-child(2)
  > .project-thumbnail {
  background-image: url(../../assets/Manufacturing/steel-01.jpg);
  background-position: center;
}
#manufacturing
  > .container-row:nth-child(2)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../../assets/Manufacturing/gladding-01.jpg);
  background-position: center;
}
#manufacturing
  > .container-row:nth-child(2)
  > .project-card:nth-child(2)
  > .project-thumbnail {
  background-image: url(../../assets/Manufacturing/bolts-01.jpg);
  background-position: center;
}

/* =================== GSM Projects ======================= */
#gsm > .container-row:nth-child(1) > .project-card:nth-child(1) {
  flex-grow: 0.3;
}

#gsm
  > .container-row:nth-child(1)
  > .project-card:nth-child(1)
  > .project-thumbnail {
  background-image: url(../../assets/GSM/1.jpg);
  background-position: bottom right;
}
/* ================ Gallery Section ================= */
/* ================ Gallery Section ================= */
.gallery {
  width: 100%;
  height: 600px;
  z-index: 1;
}

.gallery-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  transition: all 5s ease-in-out;
}

.gallery-img {
  height: 100%;
  width: calc(100% / 6);
  background-size: cover;
  filter: saturate(1);
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  min-width: 10%;
  transition: all 5s ease-in-out;
  text-decoration: none;
}

.gallery-img:nth-child(1) {
  background-image: url(../../assets/Commericial/Saja_Boulevard/08.jpeg);
}

.gallery-img:nth-child(2) {
  background-image: url(../../assets/Adminstrative/Investment_Bank/038.jpg);
}

.gallery-img:nth-child(3) {
  background-image: url(../../assets/Industrial/Samsung_Factory/01.jpg);
}

.gallery-img:nth-child(4) {
  background-image: url(../../assets/Manufacturing/steel-02.jpg);
}

.gallery-img:nth-child(5) {
  background-image: url(../../assets/Retail/Kabbani_Showroom/Kabbani_12.jpeg);
}

.gallery-img:nth-child(6) {
  background-image: url(../../assets/GSM/1.jpg);
}

.gallery-title {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: #00000053;
  transition: all 3s ease-in-out;
  text-decoration: none;
  text-decoration-color: black;
}

.gallery-img-title {
  display: flex;
  rotate: z -90deg;
  /*! width: 100%; */
  height: fit-content;
  font-size: 34px;
  font-family: "Poppins";
  color: whitesmoke;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 3s ease-in-out;
}

.gallery-hidden {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0);
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.6542949943649334) 48%,
    rgba(0, 0, 0, 0.41900087671787467) 100%
  );
  position: absolute;
  transition: all 1s ease-in;
}

.hidden-body {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  color: #f3f0eb;
  font-family: "Poppins";
  transition: all 3s ease-in-out;
  position: absolute;
}

.hidden-title {
  padding: 0px 16px 0px 32px;
  font-size: 48px;
}

.hidden-text {
  padding: 16px 100px 0px 32px;
  transition: all 3s ease-in-out;
}

/* ========= Footer ========== */
.footer {
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #d0c3ae;
  font-family: "Poppins";
}

.footer > .content-wrapper {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 64px 64px 64px 64px;
}

.first-frame {
  width: 40%;
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.footer-logo {
  width: 70px;
}

.footer-motto {
  font-weight: 500;
  font-size: 20px;
  padding: 16px 0px 16px 0px;
}

.bold-motto {
  font-weight: 800;
}

.socials {
  display: flex;
  flex-direction: row;
  margin-bottom: 16px;
  gap: 4px;
}

.social-link {
  width: 36px;
  border-radius: 4px;
}

.social-link:nth-child(2) {
  margin: 0px 8px 0px 8px;
}

.copyright {
  font-size: 12px;
}

.second-frame {
  width: 60%;
  height: 100%;
  flex: 1 1 60%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.link-frame {
  flex: 1 1 auto;
  flex-direction: column;
  display: flex;
  height: 100%;
}

.link-title {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 800;
}

.line-div {
  width: 35%;
  position: relative;
  border-top: 2px solid #987f57;
  box-sizing: border-box;
  height: 2px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.footer-links > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.footer-links > div > div:nth-child(1) {
  margin-right: 8px;
}

.footer-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  color: black;
}

.link-icon {
  width: 20px;
  margin-right: 8px;
}