* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --black: #333;
  --white: #fff;
  --orang: #f07e06;
  --grey: #8ba0a3;
}
body {
  cursor: default;
}

body .main {
  overflow: hidden;
  cursor: default;
}

body::-webkit-scrollbar {
  width: 0;
}

body .main.menu-active {
  height: 100vh;
}
#nav {
  padding: 0 10vw;
  display: flex;
  flex-direction: column;
  margin-top: 3vh;
  height: 60px;
}

.back-btn {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 20vw;
  transition: 700ms cubic-bezier(0.55, 0.01, 0, 1.02);
}
.back-btn:hover {
  transform: scale(1.1);
}
.back-btn .text {
  opacity: 0.7;
}

.back-btn .icon {
  height: 42px;
  width: 42px;
  padding: 10px;
}
.back-btn .icon svg {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
[lang="ar"] .back-btn .icon svg {
  transform: rotateZ(180deg);
}
.section1 {
  margin: 0 10vw 3vh;
  position: relative;
  height: 100vw;
}
.img {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  bottom: 0;
}
.img img {
  width: 100%;

  height: 100%;

  object-fit: cover;
  transition: 500ms;
}
.img:hover img {
  transform: scale(1.1);
}
.img:nth-of-type(1) {
  inset-inline-start: 0;
  top: 0;
  width: 20vw;
  top: 0;
  height: 20vw;
}
.img:nth-of-type(2) {
  inset-inline-start: calc(12px + 20vw);
  top: 0;
  width: calc(60vw - 12px);
  height: 12vw;
}
.img:nth-of-type(3) {
  inset-inline-start: 0;
  top: calc(20vw + 12px);
  width: 45vw;
  height: 18vw;
}
.img:nth-of-type(4) {
  top: calc(12vw + 12px);
  inset-inline-start: calc(45vw + 12px);
  width: calc(35vw - 12px);
  height: 18vw;
}
.img:nth-of-type(5) {
  top: calc(38vw + 24px);
  width: 33vw;
  height: 29vw;
  inset-inline-start: 0;
}
.img:nth-of-type(6) {
  inset-inline-start: calc(48vw + 24px);
  width: calc(32vw - 24px);
  top: calc(30vw + 24px);
  height: 56vw;
}
.project-name {
  position: absolute;
  top: calc(12vw + 12px);
  inset-inline-start: calc(20vw + 12px);
  height: calc(8vw - 12px);
  width: calc(25vw - 12px);
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  padding: calc(4vw - 18px);
  text-align: center;
  display: block;
  color: var(--white);
  background: #8c3fd2;
  border-radius: 6px;
}
.project-info {
  inset-inline-start: calc(33vw + 12px);
  width: 15vw;
  top: calc(41vw + 24px);
  position: absolute;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--black);
  padding: 29px 0;
}
.project-info > *:nth-child(1) {
  font-weight: 700;
  font-size: 20px;
}

.project-info > *:nth-child(2) {
  font-size: 42px;
  font-weight: 700;
}

.project-info > *:nth-child(3) {
  background: #8c3fd2;
  color: var(--white);
  border-radius: 3px;
  width: fit-content;
  padding: 6px 12px;
  font-size: 56px;
  font-weight: 700;
  line-height: 60px;
}

.project-info > *:nth-child(4) {
  font-size: 24px;
  font-weight: 700;
}

.project-info > *:nth-child(5) {
  font-weight: 700;
}
@media (max-width: 768px) {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  :root {
    
  }
  body {
    
  }
  
  body .main {
    
  }
  
  body::-webkit-scrollbar {
    
  }
  
  body .main.menu-active {
    
  }
  #nav {
    
  }
  
  .back-btn {
    
  }
  .back-btn:hover {
    
  }
  .back-btn .text {
    
display: none;
  }
  
  .back-btn .icon {
    
  }
  .back-btn .icon svg {
    
  }
  [lang="ar"] .back-btn .icon svg {
    
  }
  .section1 {
    
height: 100vh;
  }
  .img {
    
  }
  .img img {
    
  }
  .img:hover img {
    
  }
  .img:nth-of-type(1) {
    
inset-inline-start: 0;
    
top: 0;
    
width: 20vw;
    
top: 0;
    
height: 25vw;
  }
  .img:nth-of-type(2) {
    
  }
  .img:nth-of-type(3) {
    
inset-inline-start: 0;
    
top: calc(25vw + 12px);
    
width: 45vw;
    
height: 18vw;
  }
  .img:nth-of-type(4) {
    
top: calc(25vw + 12px);
    
inset-inline-start: calc(45vw + 12px);
    
width: calc(35vw - 12px);
    
height: 18vw;
  }
  .img:nth-of-type(5) {
    
top: calc(101vw + 24px);
    
width: 33vw;
    
height: 29vw;
    
inset-inline-start: calc(45vw + 12px);
  }
  .img:nth-of-type(6) {
    
inset-inline-start: calc(48vw + 24px);
    
width: calc(32vw - 24px);
    
top: calc(43vw + 24px);
    
height: 56vw;
  }
  .project-name {
    
height: calc(13vw - 12px);
    
width: 57vw;
    
display: flex;
    
justify-content: center;
    
align-items: center;
  }
  .project-info {
    
width: 200px;
    
height: 363px;
    
inset-inline-start: calc(0vw);
  }
  .project-info > *:nth-child(1) {
    
  }
  
  .project-info > *:nth-child(2) {
    
  }
  
  .project-info > *:nth-child(3) {
    
  }
  
  .project-info > *:nth-child(4) {
    
  }
  
  .project-info > *:nth-child(5) {
    
  }
  
}