@import url('https://fonts.googleapis.com/css2?family=Fahkwang:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  
}

.layout-container {
    width: 90%;
    margin: 0 auto;
}
.feedback-container {
    width: 70%;
    margin: 0 auto;
}

body {
    background-color: black;
}



/* Header */
.logo {
    width: 170px;
    height: 57px;
    object-fit: contain;
}

div button {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
}

button img {
    width: 20px;
    height: 20px;
}

header a {
    color: white;
     font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight:400;
    text-transform: uppercase;
     text-decoration: none;
     transition: all 0.3s;
}

header a:hover{
    color: #EFE6D5;
}

/* Hero Section */
.hero-background {
    width: 100%;
    height: 80vh;
    background-image: url("./Pics/Hero.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.layer {
    width: 100%;
    height: 81vh;
    position: absolute;
    background-image: radial-gradient(circle at center center, transparent 0%, black 50%);
    display: flex;
    justify-content: center;
    align-items: end;
}

.layer div {
    font-size: 40px;
    font-family: "Fahkwang", sans-serif;
    font-weight: 700;
    color: white;
    line-height: 1.4em;
    max-width: 500px;
    position: absolute;
    bottom: 30px;
}

/* Image Links */

.img-link-pics {
    /* width: 100%; */

    margin: 100px 0px;

    height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.img-links-pic1 {
    background-image: url(./Pics/Pic1.png);
}

.img-links-pic2 {
    background-image: url(./Pics/Pic2.png);
}

.img-links-pic3 {
    background-image: url(./Pics/Pic3.png);
}

.img-links-pic4 {
    background-image: url(./Pics/Pic4.png);
}

.img-links-layer {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(transparent 75%, rgba(0, 0, 0, 0.501) 100%);
}

.img-links-layer a {
     font-family: "Manrope", sans-serif;
     color:rgba(255, 255, 255, 0.843);
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    letter-spacing: 2px;
    transition: all 0.25s;
}

.img-links-layer a:hover{

    color: white;

}

.img-links-layer a span {
    font-size: 18px;
}

.Hero-2-background{
    width: 100%;
    min-height: 100vh;
    background-image: url("./Pics/Hero2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    
}

.layer-2{
   width: 100%;
      min-height: 100vh;
    position: absolute;
    background-image: linear-gradient(transparent 0%, black 70%);
 
}

.socail-links {
        height: 20%;

}


.socail-links a {
 display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;

}

.socail-links a img {
   width: 30px; 
    height: 30px;
}

.Read-link{
     font-family: "Fahkwang", sans-serif;
    font-size: 16px;
    color:#EFE6D5;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;

}

/*Portfolio section  */

.portfolio-section {
    margin-top: 60px;
    margin-bottom: 60px;
}

.portfolio-section h2 {
    font-family: "Fahkwang", sans-serif;
    font-weight: 700;
    color: #FFFF;
    text-transform: uppercase;
    font-size: 32px;
}

.portfolio-section img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: all 0.3s;
}
.portfolio-section img:hover{
    opacity: 0.5;
}

.view-link {
    margin-top: 50px;
    margin-bottom: 150px;
}

.view-link a{
   
      font-family: "Fahkwang", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color:#EFE6D5;
    text-transform: uppercase;

}

.view-portfolio-link{
   
      font-family: "Fahkwang", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color:#EFE6D5;
    text-transform: uppercase;

}

/* Services Section */


.services-section {
    margin-bottom: 75px;
}

.services-section h2{
    font-family: "Fahkwang", sans-serif;
     font-weight: 700;
    color: white;
    text-transform: uppercase;

}

.services-container {
    margin-bottom: 50px;
}

.services-container h3{
    
    font-family: "Fahkwang", sans-serif;
    color: white;
    text-transform: capitalize;
    font-weight: 700;

}
.services-container p{
    color:#949494;
      
}

.services-container a {
     color:#EFE6D5;
     text-decoration: none;
}

.feedback-section .p {
    color: white;
    font-family: "Manrope";

}

.feedback-img {
    margin-top:70px ;
}

.feedback-img img {
    width: 80px;
    height: 80px;
}

/* contact section */

.background-hero3{

    width: 100%;
    height: 40vh;
    background-image: url(./Pics/Hero3.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.layer-3{
    width: 100%;
    height: 50vh;
    background-image: linear-gradient(to right,rgb(3, 3, 3) 50%,transparent);
}

.layer-3 .h2{
    font-family: "Fahkwang", sans-serif;
     font-weight: 700;
    color: white;
    text-transform: uppercase;
    
}

.layer-3 a {
       font-family: "Fahkwang", sans-serif;
    font-size: 16px;
    color:#EFE6D5;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.footer-section img{

    width: 170px;
    margin-top: 70px;

}
.footer-section a {
    color:white;
    text-decoration: none;
    transition: all 0.3s;
}

.footer-section a:hover{

    color: #EFE6D5;

}

div .lang-toggle {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  border: none;
  color: white;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  letter-spacing: 2px;
  transition: color 0.3s;
  border-left: 1px solid #949494;
  margin-left: 8px;
  padding-left: 16px;
}

div .lang-toggle:hover {
  color: #EFE6D5;
}

body[dir="rtl"] div .lang-toggle {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  border-left: none;
  border-right: 1px solid #949494;
  margin-left: 0;
  margin-right: 8px;
  padding-left: 0;
  padding-right: 16px;
}