@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap");
:root {
  --Primary-color: #c89c55;
  --secondary-color: #e7bc77;
  --text-h-color: #fff;
  --text-p-color: #f9f9f9;
  --background-color-1: #1a1d1c;
  --background-color-2: #212423;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  transition: 0.3 ease;
}
html {
  /* font-size: 100%; */
  scroll-behavior: smooth;
} /*16px*/

body {
  background: white;
  font-family: "Tajawal", sans-serif;
  /* line-height: 1.75; */
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
/* -------------------------------------------- */
header {
  /* background-color: transparent; */
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 100px;
  z-index: 111;
  position: relative;
  /* background-color: var(--background-color-2); */
  background-color: var(--background-color-2);
  box-shadow: var(--secondary-color) 0px 2px 5px -1px,
    var(--secondary-color) 0px 1px 3px -1px;
  position: fixed;
}
.logo {
  width: 250px;
  height: 250px;
}
nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  padding: 10px;
}
header ul {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
}
header li {
  margin-left: 20px;
}
a {
  font-size: 1.2rem;
  color: #fff;
  margin: 0 20px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px;
}
a:hover {
  color: var(--Primary-color);
  background-color: var(--background-color-1);
  border-bottom: 3px solid var(--Primary-color);
}
.btn {
  padding: 10px 20px;
  width: 10%;
  background: transparent;
  /* background: var(--Primary-color); */
  border: 3px solid var(--Primary-color);
  color: var(--Primary-color);
  font-weight: 600;
  font-size: 1.2rem;
  text-transform: capitalize;
  border-radius: 3px;
  cursor: pointer;
}
.btn:hover {
  background-color: var(--Primary-color);
  color: var(--text-h-color);
}
#home {
  background-image: linear-gradient(#1d1d1db3, #2a2a2ab3),
    url(images/a3-1-1.webp);
  /* background-position: center center; */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  padding: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 40%;
  text-align: center;
}
.content img {
  width: 300x;
  height: 300px;
  margin-bottom: 0;
}
.content h3 {
  font-size: 2rem;
  color: var(--text-p-color);
  font-weight: 500;
  text-transform: capitalize;
  margin-bottom: 20px;
}
.button {
  display: inline-flex;
  padding: 0.35em 1.2em;
  border: 0.1em solid var(--Primary-color);
  margin: 0 0.3em 0.3em 0;
  border-radius: 0.12em;
  box-sizing: border-box;
  text-decoration: none;
  font-weight: 600;
  color: var(--Primary-color);
  text-align: center;
  transition: 0.3s ease;
  background-color: transparent;
  box-shadow: var(--secondary-color) 0px 2px 5px -1px,
    var(--secondary-color) 0px 1px 3px -1px;
}
.button:hover {
  color: var(--background-color-1);
  background-color: var(--Primary-color);
  transform: scale(1.1);
}
#about {
  width: 100vw;
  height: 100%;
  background-color: var(--background-color-1);
  padding: 10px;
}
.conatiner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 50px;
  margin-top: 40px;
  margin-left: 60px;
  margin-right: 60px;
}
.con {
  margin-top: 20px;
  margin-bottom: 100px;
}
.con h2 {
  color: var(--Primary-color);
  font-size: 3.5rem;
  /* background-color: #212423; */
  margin-bottom: 20px;
  /* padding: 10px; */
  text-transform: uppercase;
}

.con p {
  font-size: 1.2rem;
  color: var(--text-p-color);
  font-weight: 500;
  text-transform: capitalize;
  margin-bottom: 30px;
}
.con a {
  margin-top: 40px;
}
.card {
  /* background-color: #c89c55; */
  border-radius: 5px;
  box-shadow: var(--secondary-color) 0px 2px 5px -1px,
    var(--secondary-color) 0px 1px 3px -1px;
  border: 4px solid var(--Primary-color);
  margin-top: 20px;
  margin-bottom: 100px;
}
.card img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
#services {
  width: 100%;
  height: 100%;
  background-color: var(--background-color-1);
  padding: 10px;
  /* margin-bottom: 40px; */
}
.services {
  margin-top: 40px;
  margin-left: 60px;
  margin-right: 60px;
  margin-bottom: 20px;
}
.services h2 {
  color: var(--Primary-color);
  font-size: 3.5rem;
  /* background-color: #212423; */
  margin-bottom: 20px;
  padding: 10px;
  text-transform: uppercase;
  text-align: center;
}
.cardes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cardy {
  width: 100%;
  border: 4px solid var(--Primary-color);
  position: relative;
  box-shadow: var(--secondary-color) 0px 2px 5px -1px,
    var(--secondary-color) 0px 1px 3px -1px;
  border-radius: 5px;
  transition: 0.3s ease;
}
.cardy:hover {
  transform: scale(1.05);
}
.cardy h3 {
  color: var(--Primary-color);
  font-size: 1.2rem;
  /* background-color: #212423; */
  margin-top: 20px;
  padding: 10px;
  text-transform: uppercase;
}
.cardy img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.cardy:first-child:hover::after {
  content: "interior design";
  color: var(--Primary-color);
  font-size: 1.2rem;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  background-image: linear-gradient(#1d1d1db3, #2a2a2ab3);
  width: 100%;
  height: 100%;
  font-weight: 500;
  cursor: pointer;
}
.cardy:nth-child(2):hover::after {
  content: "Interface design";
  color: var(--Primary-color);
  font-size: 1.2rem;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  background-image: linear-gradient(#1d1d1db3, #2a2a2ab3);
  width: 100%;
  height: 100%;
  font-weight: 500;
  cursor: pointer;
}
.cardy:nth-child(3):hover::after {
  content: "commercial design";
  color: var(--Primary-color);
  font-size: 1.2rem;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  background-image: linear-gradient(#1d1d1db3, #2a2a2ab3);
  width: 100%;
  height: 100%;
  font-weight: 500;
  cursor: pointer;
}
.slides {
  display: flex;
  align-items: center;
  justify-content: center;
  /* display: flex;
  align-items: center;
  justify-content: centers;
  flex-direction: row; */
  /* background-color: var(--Primary-color); */
  /* gap: 10px; */
  padding: 10px;
}
.slide {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--text-p-color);
  margin: 0 10px;
}
.slide:nth-child(1) {
  background-color: var(--Primary-color);
}
#ourworks {
  width: 100vw;
  height: 100vh;
  background-color: var(--background-color-2);
  padding: 10px;
  padding-bottom: 40px;
}
#ourworks h2 {
  color: var(--Primary-color);
  font-size: 3.5rem;
  /* background-color: #212423; */
  margin-bottom: 20px;
  padding: 10px;
  text-transform: uppercase;
  text-align: left;
}
#ourworks .conatiner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#ourworks .button {
  margin-top: 40px;
}
.gallary {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.im {
  border-radius: 5;
  box-shadow: var(--secondary-color) 0px 2px 5px -1px,
    var(--secondary-color) 0px 1px 3px -1px;
  transition: 0.3s ease;
  cursor: pointer;
  position: relative;
}
.im:hover {
  transform: scale(1.1);
}
.im:hover::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(#1d1d1db3, #2a2a2ab3);
}
.im img {
  height: 100%;
}
#ourworks .button {
  margin-top: 40px;
}
#ourcustomers {
  width: 100vw;
  height: 100vh;
  background-color: var(--background-color-1);
  padding: 10px;
  padding-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#ourcustomers .conatiner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* margin-top: 100px; */
}
#ourcustomers h2 {
  color: var(--Primary-color);
  font-size: 3.5rem;
  /* background-color: #212423; */
  margin-bottom: 20px;
  padding: 10px;
  text-transform: uppercase;
  text-align: center;
}
.customers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.customer {
  width: 100%;
  border: 4px solid var(--Primary-color);
  box-shadow: var(--secondary-color) 0px 2px 5px -1px,
    var(--secondary-color) 0px 1px 3px -1px;
  border-radius: 5px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
}
.customer .fa-sharp {
  color: var(--Primary-color);
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.customer p {
  font-size: 1.2rem;
  color: var(--text-h-color);
  text-transform: capitalize;
}
.customer span {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--Primary-color);
  text-transform: uppercase;
}
.customer:hover {
  transform: scale(1.02);
}

#ourcustomers .slides {
  margin-top: 20px;
}
#ourcustomers img {
  width: 50px;
  height: 50px;
  margin-top: 20px;
  border-radius: 50%;
}
#contact {
  width: 100vw;
  height: 100vh;
  background-color: var(--background-color-2);
  padding: 10px;
  padding-bottom: 40px;
}
#contact .conatiner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#contact h2 {
  color: var(--Primary-color);
  font-size: 3.5rem;
  /* background-color: #212423; */
  margin-bottom: 20px;
  padding: 10px;
  text-transform: uppercase;
  text-align: left;
}
#contact .button {
  margin-top: 30px;
}
.form {
  /* background-color: #000000; */
  padding: 20px;
  /* width: 70vw; */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
form {
  /* display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; */
  /* display: grid;
  gap: 30px;
  grid-template-columns: repeat(2, 1fr); */
  /* margin-top: 20px; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
input {
  padding: 10px;
  width: 80%;
  margin-bottom: 20px;
  border-radius: 5px;
  border-bottom: 4px solid var(--Primary-color);
  box-shadow: var(--secondary-color) 0px 2px 5px -1px,
    var(--secondary-color) 0px 1px 3px -1px;
  border-radius: 5px;
  background-color: transparent;
  outline: none;
  height: 60px;
  font-size: 1.2rem;
  text-transform: capitalize;
  font-weight: 500;
  color: var(--text-h-color);
  text-transform: capitalize;
}
textarea {
  border-radius: 5px;
  border-bottom: 4px solid var(--Primary-color);
  box-shadow: var(--secondary-color) 0px 2px 5px -1px,
    var(--secondary-color) 0px 1px 3px -1px;
  border-radius: 5px;
  outline: none;
  background-color: transparent;
  font-size: 1.2rem;
  text-transform: capitalize;
  /* height: 200px; */
  /* padding: 10px; */
  width: 80%;
}
.hlep {
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: var(--secondary-color) 0px 2px 5px -1px,
    var(--secondary-color) 0px 1px 3px -1px;
  border-radius: 5px;
  border: 4px solid var(--Primary-color);
  height: 85%;
  padding: 20px;
}
.hlep h4 {
  font-size: 1.4rem;
  color: var(--Primary-color);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hlep p {
  font-size: 1.2rem;
  text-align: center;
  padding: 10px;
  color: var(--text-p-color);
}
footer {
}
footer .ff {
  background-color: #2b2b2b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.mais {
  /* display: grid;
  grid-template-columns: repeat(2, 1fr); */
  display: flex;
  align-items: center;
  justify-content: center;
}
.mai {
  margin: 20px;
  text-align: center;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mai h3 {
  color: var(--text-p-color);
}
footer img {
  width: 200px;
  height: 200px;
}
footer i {
  font-size: 1.7rem;
  color: var(--Primary-color);
  cursor: pointer;
  margin: 10px;
}
footer .social {
  /* margin-left: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px; */
}
footer .log {
  width: 250px;
  height: 250px;
}
footer p {
  text-transform: capitalize;
  color: var(--text-p-color);
  text-align: center;
}
footer p span {
  color: var(--Primary-color);
  font-weight: 500;
}
/* ////////////Page about///////////////////////// */
#aboutpage {
  width: 100%;
  height: 70vh;
  background-image: linear-gradient(#161616b3, #222222b3), url(images/5.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 40px;
}
.aboutpage-content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  width: 60%;
  padding: 10px;
}
.aboutpage-content h1 {
  color: var(--Primary-color);
  font-size: 3rem;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 700;
  text-align: left;
}
.aboutpage-content p {
  color: var(--text-p-color);
  font-size: 1.3rem;
  text-transform: capitalize;
}
#lol {
  width: 100%;
  height: 60vh;
  background-color: var(--background-color-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  flex-direction: row;
}
.lol-c {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;

  /* padding: 10px; */
  width: 100%;
  height: 100%;
  align-items: center;
}
.lol-c .t {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  box-shadow: var(--secondary-color) 0px 2px 5px -1px,
    var(--secondary-color) 0px 1px 3px -1px;
  border-radius: 5px;
  border: 4px solid var(--Primary-color);
}
.lol-c .t img {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}
.lol-c .t h3 {
  color: var(--Primary-color);
  text-transform: capitalize;
  font-size: 1.3rem;
}
.lol-c .t p {
  text-align: center;
  color: var(--text-p-color);
  text-transform: capitalize;
}
#love {
  width: 100%;
  height: 70vh;
  background-color: var(--background-color-1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#love .love-c {
  padding: 40px;
}
#love h2 {
  color: var(--Primary-color);
  font-size: 2rem;
  text-transform: capitalize;
  padding: 10px;
  margin-bottom: 30px;
  text-align: center;
}
#love .loves {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
#love .ll {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-shadow: var(--secondary-color) 0px 2px 5px -1px,
    var(--secondary-color) 0px 1px 3px -1px;
  border-radius: 5px;
  border: 4px solid var(--Primary-color);

  padding: 10px;
  margin-bottom: 20px;
  margin-left: 20px;
}
#love .ll img {
  width: 100px;
  height: 100px;
}
#love .ll h3 {
  color: var(--Primary-color);
  text-transform: capitalize;
  font-size: 1.3rem;
  margin-left: 20px;
}
#love .ll p {
  text-align: left;
  color: var(--text-p-color);
  text-transform: capitalize;
  margin-left: 10px;
  font-size: 1.2rem;
}
#asd {
  width: 100%;
  height: 70vh;
  background-image: linear-gradient(#161616b3, #222222b3),
    url(images/csaf3.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 40px;
}
#asd .contact-asd {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  width: 40%;
  padding: 10px;
}

#asd .contact-asd h1 {
  color: var(--Primary-color);
  font-size: 3rem;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 700;
  text-align: left;
}
#asd .contact-asd p {
  color: var(--text-p-color);
  font-size: 1.3rem;
  text-transform: capitalize;
}
/* .hlep img {
  width: 250px;
  height: 250px;
} */
#ourwork {
  width: 100%;
  height: 80vh;
  background-image: linear-gradient(#161616b3, #222222b3), url(images/wagh.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 40px;
}
#ourwork .ourwork-content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  width: 40%;
  padding: 10px;
}
#ourwork .ourwork-content h1 {
  color: var(--Primary-color);
  font-size: 3rem;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 700;
  text-align: left;
}
#ourwork .ourwork-content p {
  color: var(--text-p-color);
  font-size: 1.3rem;
  text-transform: capitalize;
}
#ourworkees {
  width: 100%;
  background-color: var(--background-color-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px;
}
.workks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 10px;
}
.worky {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: var(--secondary-color) 0px 2px 5px -1px,
    var(--secondary-color) 0px 1px 3px -1px;

  border: 4px solid var(--Primary-color);
}
.worky img {
  width: 100%;
  height: 100%;
}
.worky h3 {
  margin-top: 10px;
  color: var(--text-h-color);
  text-transform: capitalize;
  font-size: 1.5rem;
}
.worky a {
  margin-top: 5px;
  color: var(--Primary-color);
  text-transform: capitalize;
  font-size: 0.9rem;
}
#table-section {
  width: 100%;
  background-color: var(--background-color-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px;
  height: 900px;
  position: relative;
}
#tabel {
  border-collapse: collapse;
  width: 100%;
  border-radius: 5px;
  box-shadow: var(--secondary-color) 0px 2px 5px -1px,
    var(--secondary-color) 0px 1px 3px -1px;
  height: 100%;
}

#tabel td,
#tabel th {
  border: 3px solid var(--background-color-1);
  padding: 8px;
}
#tabel th {
  font-size: 1.5rem;
  text-transform: uppercase;
  background-color: var(--Primary-color);

  height: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--background-color-1);
  text-align: center;
}
#tabel th:hover {
  color: var(--Primary-color);
  background-color: var(--background-color-1);
}
#tabel td {
  font-size: 1.5rem;
  text-transform: capitalize;
  color: var(--text-p-color);
  text-align: center;
}
#tabel td:hover {
  color: var(--text-p-color);
  background-color: var(--background-color-1);
}
#tabel td img {
  width: 100%;
  height: 100%;
}
@media all and (max-width: 30em) {
  a.button1 {
    display: block;
    margin: 0.4em auto;
  }
}