style.css

/* Default Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Abel", sans-serif;
  text-decoration: none;
  outline: none;
}

html {
  font-size: 62.5%;
}
/* End of Default Styles */

/* Container */
.container {
  width: 100%;
  height: 100%;
  background-color: #202020;
}

/* Navbar */
.navbar {
  width: 100%;
  height: 10rem;
  background-color: #202020;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.brand {
  position: absolute;
  top: 50%;
  left: 8rem;
  transform: translateY(-50%);
  display: flex;
}

.logo1 {
  width: 6rem;
  height: 6rem;
  border: .4rem solid #dba81b;
}

.logo2 {
  width: 5rem;
  height: 5rem;
  background-color: #202020;
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.logo3 {
  width: 5rem;
  height: 5rem;
  border: .4rem solid #dba81b;
  background-color: #202020;
  position: absolute;
  top: 2rem;
  left: 2rem;
}

.brand span {
  font-size: 3rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .3rem;
  margin: 1.5rem 0 0 3rem;
}

.search-bar {
  position: absolute;
  top: 50%;
  right: 15rem;
  transform: translateY(-50%);
}

.search-bar input {
  width: 45rem;
  height: 4rem;
  background-color: #3e3e41;
  border: none;
  padding: 2rem 2rem 2rem 4rem;
  font-size: 1.6rem;
  color: #fff;
  border-radius: .5rem;
}

.search-bar input::placeholder {
  color: #ccc;
}

.search-bar i {
  position: absolute;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: #ccc;
}

.menu-icon {
  width: 4rem;
  height: 2.5rem;
  position: absolute;
  top: 50%;
  right: 8rem;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 100;
}

.line {
  width: 4rem;
  height: .2rem;
  background-color: #ccc;
  transition: all .3s;
}

.change .line-1 {
  width: 55%;
  transform: rotateZ(-15deg) translate(-.2rem, .8rem);
}

.change .line-3 {
  width: 55%;
  transform: rotateZ(15deg) translate(-.2rem, -.8rem);
}

.navigation {
  width: 100%;
  height: 100vh;
  background-color: #0b0b14;
  position: absolute;
  top: -100vh;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: top .3s;
}

.change .navigation {
  top: 0;
}

.navigation a {
  font-family: "Alfa Slab One", cursive;
  font-size: 5rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .3rem;
  margin-bottom: 1rem;
  position: relative;
  /* opacity: 0;
  visibility: hidden; */
}

.change .navigation a {
  opacity: 1;
  visibility: visible;
}

.change .navigation a:nth-child(1) {
  transition: all .3s .3s;
}

.change .navigation a:nth-child(2) {
  transition: all .3s .4s;
}

.change .navigation a:nth-child(3) {
  transition: all .3s .5s;
}

.change .navigation a:nth-child(4) {
  transition: all .3s .6s;
}

.change .navigation a:nth-child(5) {
  transition: all .3s .7s;
}

.change .navigation a:nth-child(6) {
  transition: all .3s .8s;
}

.navigation a::before {
  content: "";
  width: 15rem;
  height: .5rem;
  background-color: #dba81b;
  position: absolute;
  top: 50%;
  left: -17rem;
  transform: translateY(-50%);
  transform: scale(0);
  transform-origin: right;
  transition: transform .3s;
}

.navigation a:hover::before {
  transform: scale(1);
}

.navigation a::after {
  content: "";
  width: 15rem;
  height: .5rem;
  background-color: #dba81b;
  position: absolute;
  top: 50%;
  right: -17rem;
  transform: translateY(-50%);
  transform: scale(0);
  transform-origin: left;
  transition: transform .3s;
}

.navigation a:hover::after {
  transform: scale(1);
}
/* End of Navbar */

/* Landing */
.landing {
  width: 100%;
  height: 75vh;
  position: relative;
}

.landing-img {
  width: 92%;
  height: 70vh;
  position: absolute;
  top: 11rem;
  left: 50%;
  transform: translateX(-50%);
}

.landing-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
}

.banner {
  position: absolute;
  bottom: 15rem;
  left: 20rem;
}

.banner-heading {
  font-size: 9rem;
  color: #fff;
  text-transform: uppercase;
}

.banner-heading span {
  font-family: "Alfa Slab One", cursive;
  font-size: 8rem;
  color: #dba81b;
  letter-spacing: .5rem;
}

.banner-content {
  display: flex;
  text-align: start;
}

.banner-content p {
  width: 45rem;
  font-size: 2rem;
  color: #fff;
  margin-right: 2rem;
}

.banner-content button {
  width: 15rem;
  height: 5rem;
  background-color: transparent;
  border: .3rem solid #fff;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.6rem;
  font-weight: bold;
  cursor: pointer;
}

/* End of Landing */

/* About */
.about {
  width: 100%;
  height: 100vh;
  background-color: #313133;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
}

.about-left h2 {
  font-size: 5rem;
  color: #fff;
  text-transform: uppercase;
  width: 50rem;
  margin-bottom: 6rem;
}

.about-left p {
  font-size: 2rem;
  color: #fff;
  width: 50rem;
  margin-bottom: 5rem;
}

.about-left button {
  width: 18rem;
  height: 5rem;
  background-color: transparent;
  border: .2rem solid #dba81b;
  color: #dba81b;
  font-size: 1.8rem;
  letter-spacing: .1rem;
  cursor: pointer;
}

.frame {
  width: 50rem;
  height: 35rem;
  border: 3rem solid #555;
  position: absolute;
  top: 16rem;
  right: 20rem;
}

.about-img-wrapper {
  width: 50rem;
  height: 35rem;
  position: absolute;
  top: 8rem;
  right: 14rem;
}

.about-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-bottom {
  position: absolute;
  bottom: 8rem;
  right: 14rem;
  height: 12rem;
  border-right: 1rem solid #dba81b;
  text-align: right;
  padding-right: 2rem;
}

.section-bottom h2 {
  font-family: "Alfa Slab One", cursive;
  font-size: 6rem;
  color: #555;
  letter-spacing: .5rem;
}

.section-bottom h3 {
  font-size: 2.5rem;
  color: #fff;
}
/* End of About */

/* Projects */
.projects {
  width: 100%;
  height: 135vh;
  position: relative;
}

.projects-heading {
  font-size: 8rem;
  color:#fff;
  letter-spacing: .2rem;
  margin: 7rem 0 10rem 9rem;
}

.cards {
  width: 90%;
  margin: auto;
  display: flex;
}

.card {
  width: 32rem;
  height: 50rem;
  margin-right: 2.5rem;
  cursor: pointer;
  position: relative;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color .6s;  
}

.card-content::before{
  content:"";
  width: 92%;
  height: 0.1rem;
  background-color: #dba81b;
  position: absolute;
  left: 0;
  top: 2rem;
  transform: scale(0);
  transform-origin: left;
  transition:transform 8s;
}

.card:hover .card-content::before {
  transform: scale(1);
}

.card-content::after{
  content:"";
  width: .1rem;
  height: 94%;
  background-color: #dba81b;
  position: absolute;
  left: 2rem;
  top: 0;
  transform: scale(0);
  transform-origin: top;
  transition:transform .8s;
}

.card:hover .card-content::after {
  transform: scale(1);
}

.card:hover .card-content{
  background-color: rgba(0,0,0,.9);
}

.card-content h3 {
  font-size: 2rem;
  color: #fff;
  position: absolute;
  top: 4rem;
  left: 4rem;
  width: 15rem;
  opacity: 0;
  visibility: hidden;
  transition: all .5s;
}

.card:hover .card-content h3 {
  opacity: 1;
  visibility: visible;  
  transition: all .5s .6s;
}

.card-content p {
  font-size: 1.6rem;
  color: #fff;
  position: absolute;
  top: 13rem;
  left: 4rem;
  width: 17rem;
  opacity: 0;
  visibility: hidden;
  transition: all .5s;
}

.card:hover .card-content p {
  opacity: 1;
  visibility: visible;
  transition: all .5s .6s;
}

.designs {
  right: 12rem;
}
/* End of Projects */

/* Customers */
.customers {
  width: 100%;
  height: 110vh;
  background-color: #313133;
  padding-top: 7rem;
  position: relative;
}

.customers-heading {
  font-size: 8rem;
  color: #fff;
  margin: 0 0 10rem 9rem;
  letter-spacing: .2rem;
}

.customers-content {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
}

.customers-card {
  position: relative;
}

.customers-card img {
  width: 20rem;
  position: absolute;
  top: -5rem;
  right: 2rem;
  border-radius: .5rem;
  box-shadow: 0 .5rem .5rem rgba(0,0,0,.1);
}

.customers-card-content {
  width: 50rem;
  height: 30rem;
  background-color: #777;
  border-radius: .5rem;
  box-shadow: 0 1rem 1rem rgba(0,0,0,.2);
  padding: 2rem;
}

.customers-card-content h2 {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 1rem;
}

.customers-card-content h3 {
  font-size: 1.8rem;
  color: #ccc;
  margin-bottom: 3rem;
}

.customers-card-content i {
  font-size: 2rem;
  color: #fff;
}

.customers-card-content p {
  font-size: 1.6rem;
  color: #fff;
}
/* End of Customers */

/* Contact */
.contact {
  width: 100%;
  height: 25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-content {
  width: 80%;
  display: flex;
  justify-content: space-evenly;
}

.contact-content h2 {
  font-size: 3rem;
  text-transform: uppercase;
  color: #ccc;
}

.contact-content input {
  width: 45rem;
  height: 4rem;
  background-color: transparent;
  padding: 1.5rem 1.5rem 2.2rem 0;
  border: none;
  border-bottom: .1rem solid #777;
  font-size: 1.8rem;
  color: #ccc;
  transition: border-bottom .3s;
}

.contact-content input:focus {
  border-bottom: .1rem solid #dba81b;
}

.contact-content input::placeholder {
  color:#ccc;
  letter-spacing: .1rem;
}

.content-right {
  position: relative;
}

.content-right i {
  font-size: 1.8rem;
  position:absolute;
  top: 20%;
  right: 0;
  color:#ccc;
  cursor: pointer;
}
/* End of Contact */

/* Footer */
.footer {
  width: 100%;
  height: 7rem;
  background-color: #202020;
  border-top: .1rem solid #3e3e41;
  position: relative;
}

.brand-footer {
  position: absolute;
  top: 3.5rem;
  left: 20%;
}

.brand-footer .logo1 {
  width: 3rem;
  height: 3rem;
  border: .2rem solid #dba81b;
}

.brand-footer .logo2 {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #202020;
  top: .7rem;
  left: .7rem;
}

.brand-footer .logo3 {
  width: 2.5rem;
  height: 2.5rem;
  border: .2rem solid #dba81b;
  background-color: #202020;
  top: 1.3rem;
  left: 1.3rem;
}

.brand-footer span {
  font-size: 2rem;
  margin-top: .5rem;
}

.copyright {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20%;
  font-size:  1.6rem;
  color:#ccc;
}
/* End of Footer */
/* End of Container */

/* Responsive */
 @media(max-width: 1700px){
  .banner{
    left: 12rem;
  }

  .about-right {
    margin-right: 20rem;
  }

  .frame {
    width: 45rem;
    height: 30rem;
    right: 20rem;
  }

  .about-img-wrapper {
    width: 45rem;
    height: 30rem;
    right: 13rem;
  }

  .experience {
    right: 20rem;
  }

  .projects {
    height: 100%;
  }

  .cards {
    width: 80%;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 25rem;
  }

  .card {
    margin: 1.5rem;
  }

  .customers-content {
    width: 90%;
  }

  .client {
    right: 20rem;
  }

  .contact-content {
    width: 90%;
  }

  .brand-footer {
    right: 16%;
  }

  .copyright {
    right: 16%;
  }
 }

 @media(max-width: 1400px){
  html{
    font-size: 55%;
  }

  .frame{
    width: 40rem;
    height: 25rem;
    right: 15rem;
  }

  .about-img-wrapper{
    width: 40rem;
    height: 25rem;
    right: 8rem;
  }
 }

 @media(max-width: 1200px){
  html{
    font-size: 49%;
  }

  .about-left {
    width: 40rem;
  }

  .customers-content {
    width: 100%;
  }

  .client {
    right: 10rem;
  }

  .contact-content {
    width: 100%;
  }

  .brand-footer{
    left: 10%;
  }

  .copyright{
    right: 10%;
  }
 }

 @media(max-width:900px){
  html{
    font-size: 45%;
  }

  .search-bar input {
    width: 30rem;
  }

  .banner-heading {
    font-size: 7rem;
  }

  .banner-heading span {
    font-size:7rem;    
  }

  .banner-content p {
    font-size: 1.7rem;
    width: 35rem;
  }

  .about-left h1 {
    font-size: 3rem;
    width: 35rem;
  }

  .about-left p {
    font-size: 1.7rem;
    width: 35rem;
  }

  .frame {
    width: 30rem;
    height: 15rem;
    border: 1.5rem solid #555;
    right: 10rem;
  }

  .about-img-wrapper {
    width: 30rem;
    height: 15rem;
    top: 12rem;
    right: 7rem;
  }

  .experience {
    right: 7rem;
  }

  .customers {
    height: 100%;
    padding-bottom: 12rem;
  }

  .customers-content{
    flex-direction: column;
    align-items: center;
  }

  .customers-card{
    margin: 8rem;
  }

  .contact-content {
    flex-direction: column;
    align-items: center;
  }

  .contact-left {
      margin-bottom: 4rem;
  }
 }

 @media(max-width:600px){
  html {
    font-size: 35%;
  }

  .brand-navbar span {
    display: none;
  }

  .navigation a {
    font-size: 3rem;
  }

  .navigation a::before, .navigation a::after{
    width: 10rem;
  }

  .navigation a::before{
    left: -13rem;
  }

  .navigation a::after{
    right: -13rem;
  }

  .banner {
    left: 5rem;
    bottom: 18rem;
  }

  .banner-heading {
    font-size: 5rem;
  }

  .banner-heading span {
    font-size: 4rem;
  }

  .about {
    height: 100%;
    justify-content: center;
    padding: 10rem 0 25rem 0;
  }

  .about-left {
    text-align: center;
    margin-right: 0;
  }

  .about-right {
    display: none;
  }

  .projects-heading {
    font-size: 6rem;
  }

  .customers-heading {
    font-size: 6rem;
  }
 }


/* End of Responsive */