@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");
.gallery__section {
  max-width: 1110px;
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1em 1fr 1em 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  margin: auto;
}

.gallery__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1em;
}

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

.awards-section {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: 100px;
  max-width: 1110px;
  width: 100%;
  border-top: 1px solid #d8d8d8;
}

.awards-container {
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2fr 100px 1fr 100px 1fr;
  grid-template-columns: 2fr 1fr 1fr;
  -ms-grid-rows: 1fr 100px 1fr;
  grid-template-rows: repeat(2, 1fr);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  grid-gap: 100px;
  padding: 50px 5px;
  border-bottom: 1px solid #d8d8d8;
}

.awards-container > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.awards-container > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.awards-container > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}

.awards-container > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.awards-container > *:nth-child(5) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.awards-container > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}
.awards-container h3 {
  font-size: 22px;
  font-weight: 700;
}
.awards-container h4 {
  font-size: 18px;
  font-weight: 700;
}
.awards-container h5 {
  font-size: 16px;
  font-weight: 400;
}
.awards-container p {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

.awards {
  -ms-grid-column: 1;
  grid-column: 1/1;
  -ms-grid-row: 1;
  grid-row: 1/1;
}

.site {
  -ms-grid-column: 2;
  grid-column: 2/2;
  -ms-grid-row: 1;
  grid-row: 1/1;
}

.ui {
  -ms-grid-column: 3;
  grid-column: 3/3;
  -ms-grid-row: 1;
  grid-row: 1/1;
}

.date {
  -ms-grid-column: 4;
  grid-column: 4/4;
  -ms-grid-row: 1;
  grid-row: 1/1;
}

.best {
  -ms-grid-column: 2;
  grid-column: 2/2;
  -ms-grid-row: 2;
  grid-row: 2/2;
}

.template {
  -ms-grid-column: 3;
  grid-column: 3/3;
  -ms-grid-row: 2;
  grid-row: 2/2;
}

.date-two {
  -ms-grid-column: 4;
  grid-column: 4/4;
  -ms-grid-row: 2;
  grid-row: 2/2;
}

.service-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 1110px;
  width: 100%;
  min-height: 106px;
  margin-top: 85px;
}

.service-box {
  max-width: 1079px;
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-grid-columns: 65% 1fr 1fr;
  grid-template-columns: 65% 1fr 1fr;
}
.service-box h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 38px;
}
.service-box ul {
  margin: 0px;
  padding: 0px;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  list-style-type: none;
}
.service-box li {
  margin: 0px;
  padding: 0px;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 400;
}

@media screen and (max-width: 820px) {
  .service-section .service-box {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
html {
  overflow-x: hidden;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: "Mulish", sans-serif;
  margin: auto;
  max-width: 1110px;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 1110px;
  width: 100%;
  overflow-x: hidden;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

header,
footer {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 50px;
}

nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 25px;
  list-style-type: none;
}
nav a {
  color: black;
  text-decoration-line: none;
}
nav a:hover {
  cursor: pointer;
  color: aqua;
}

.pages-links {
  font-size: 18px;
  font-weight: 700;
  line-height: auto;
  letter-spacing: -0.35px;
}

.intro-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  margin-top: 50px;
  margin-bottom: 50px;
}

.title-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 635px;
  width: 100%;
  min-height: 251px;
}
.title-box .sub-title {
  color: #4a4ff2;
  font-size: 22px;
  font-weight: 700;
  line-height: auto;
  letter-spacing: -0.42px;
}
.title-box .main-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 60px;
}
.title-box span {
  color: #4a4ff2;
}

.line-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  max-width: 207px;
  width: 100%;
  padding: 5px;
}
.line-box .design-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-self: flex-start;
  -ms-flex-item-align: start;
      align-self: flex-start;
  border-top: 1.6px solid #979797;
  width: 30px;
  height: 3px;
  margin-left: 10px;
}
.line-box .design-p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-grid-column-align: end;
      justify-self: end;
  -ms-flex-item-align: end;
      align-self: flex-end;
  font-style: italic;
  font-size: 18px;
  width: 212px;
  height: 26px;
  text-align: center;
}

@media screen and (max-width: 1100px) {
  body {
    margin: auto;
    width: 90%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.projects-section__one {
  max-width: 1110px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 100px;
}

.projects-info__box {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.projects-info__box h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 55px;
}
.projects-info__box p {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

.projects-list-box {
  max-width: 335px;
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: (1fr)[6];
  grid-template-rows: repeat(6, 1fr);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 45px;
}

.projects-list-box > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.projects-list-box > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.projects-list-box > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

.projects-list-box > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

.projects-list-box > *:nth-child(5) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.projects-list-box > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
}

.projects-list-box > *:nth-child(7) {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
}

.projects-list-box > *:nth-child(8) {
  -ms-grid-row: 4;
  -ms-grid-column: 2;
}

.projects-list-box > *:nth-child(9) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}

.projects-list-box > *:nth-child(10) {
  -ms-grid-row: 5;
  -ms-grid-column: 2;
}

.projects-list-box > *:nth-child(11) {
  -ms-grid-row: 6;
  -ms-grid-column: 1;
}

.projects-list-box > *:nth-child(12) {
  -ms-grid-row: 6;
  -ms-grid-column: 2;
}
.projects-list-box h2 {
  color: rgba(17, 17, 17, 0.5137254902);
  font-size: 18px;
  font-weight: 700;
}
.projects-list-box p {
  font-size: 18px;
  font-weight: 700;
}

.list-title,
.list-item {
  border-bottom: 1px solid #d8d8d8;
  width: 100%;
}

.img-div {
  width: 100%;
  height: 660px;
  margin-top: 61px;
}

.text-div {
  width: 100%;
  min-height: 93px;
  margin-top: 45px;
}
.text-div p {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

.grid-container {
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 45px;
  margin-bottom: 100px;
  gap: 30px;
}

.first {
  -ms-grid-column: 1;
  grid-column: 1/1;
}

.second {
  -ms-grid-column: 2;
  grid-column: 2/2;
}

.third {
  -ms-grid-column: 3;
  grid-column: 3/3;
}