* {
  margin: 0;

  padding: 0;
  box-sizing: border-box;
}
body {
  background: #19191b;
  font-family: "Nunito Sans", sans-serif;
  color: #fff;
  width: 1110px;
  margin: 0 auto;
}
section {
  margin: 70px 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}
p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 21px;
}
h2 {
  font-size: 60px;
  margin-bottom: 50px;
}
h3 {
  font-size: 28px;
}
a {
  text-decoration: none;
}
nav {
  display: flex;
  justify-content: space-evenly;
  padding: 30px 0;
}
.logo {
  width: 100px;
}
.logo img {
  width: 100%;
}
.menu ul li {
  display: inline-block;
  margin-left: 20px;
  list-style: none;
}
.menu ul li a {
  color: #fff;
  text-decoration: none;
}
.menu ul li a:hover {
  color: #3944f7;
}
nav .nav-btn a {
  color: #fff;
  padding: 11px 20px;
  border: 1px solid #fff;
  border-radius: 5px;
}
/* hero section start  */
#hero-seciton {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-text h1 {
  font-size: 80px;
  text-transform: capitalize;
}
.hero-text p {
  margin: 24px 0px 50px 0;
  font-size: 21px;
  color: rgba(255, 255, 255, 0.7);
}
.hero-text a,
#contact-section a {
  color: #fff;
  padding: 16px 27px;
  background: #5454d4;
  border-radius: 4px;
}
.hero-img img {
  width: 100%;
}
/* hero section End */
/* best choice section start */
.best-choice-text {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}
.best-choice-img img {
  width: 100%;
}
/* best choice section end */
/* Services section start  */
#services-seciton h2 {
  text-align: center;
}
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
}
.services .service {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 25px;
}
.services .service * {
  margin: 10px 0;
}
/* Services section end  */
/* portfolio section start ============================ */
.portfolios {
  min-height: 417px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.porfolio-img {
  height: 100%;
  display: flex;
}
.porfolio-img img {
  width: 100%;
}
.porfolio-img:nth-child(1) {
  align-items: flex-start;
}
.porfolio-img:nth-child(2) {
  align-items: center;
}
.porfolio-img:nth-child(3) {
  align-items: flex-end;
}
/* portfolio section end ============================ */
/* contact section start ============================ */
#contact-section {
  display: grid;
  grid-template-columns: 60% 40%;
  padding: 150px 0;
}
#contact-section .btn-div {
  text-align: right;
}
/* contact section end ============================ */
/* footer section start ============================ */
footer {
  display: grid;
  grid-template-columns: 100px repeat(2, 1fr);

  text-align: right;
}
/* footer section end ============================ */
/* responsive using medea query start ============================================== */
@media (max-width: 667px) {
  body {
    width: 100%;
    padding: 0 30px;
  }
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    text-align: center;
  }
  .menu,
  .nav-btn {
    display: none;
  }
  #hero-seciton,
  .best-choice-text,
  .services,
  #contact-section,
  footer {
    display: flex;
    flex-direction: column;
  }

  .hero-text a,
  #contact-section a {
    display: block;
    text-align: center;
    margin: 0 40px;
  }
  .portfolios {
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 50px;
  }
  footer {
    align-items: center;
  }
}
@media (min-width: 678px) and (max-width: 991px) {
  body {
    width: 100%;
    padding: 0 30px;
  }
  .best-choice-text,
  #contact-section {
    display: flex;
    flex-direction: column;
  }
  .services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  #contact-section {
    align-items: center;
    padding: 38px 0;
  }
  .best-choice-text p {
    margin-bottom: 40px;
  }
  h2 {
    text-align: center;
  }
}
@media (min-width: 992px) {
  body {
    padding: 0 70px;
  }
}
/* responsive using medea query end ============================================== */