/*
=================================
=        SLOGAN SECTION         =
=================================
*/
.slogan-wrapper {
  display: grid;
  --scroll-width: 3em;
  --slogan-gap: 2em;
  --slogan-max-width: 1230px;
  --slogan-content-width: calc(var(--slogan-max-width) - var(--slogan-gap));
  --slogan-col-width: calc(var(--slogan-content-width) / 2);
  --slogan-col-half-width: calc(var(--slogan-col-width) / 2);
  --slogan-margin: calc((100vw - var(--scroll-width) - var(--slogan-content-width)) / 2);
  grid-template-columns: [left-edge] var(--slogan-margin) [col-1-start] var(--slogan-col-width) [col-1-end gap-start] var(--slogan-gap) [gap-end col-2-start] var(--slogan-col-half-width) [col-2-middle] var(--slogan-col-half-width) [col-2-end] var(--slogan-margin) [right-edge];
  row-gap: var(--slogan-gap);
  position: relative;
}

.slogan__bg {
  position: relative;
  z-index: -1;
  grid-column: left-edge / col-2-middle;
  grid-row: 1 / span 2;
  height: 100svh;
}

.slogan__bg:before {
  position: absolute;
  content: '';
  inset: 0;
  background-color: rgba(40,54,115,.75);
}

.slogan__bg > img {
  height: 100%;
  object-fit: cover;
}

.slogan__logo {
  margin-top: 4em;
  grid-row: 1;
  width: 150px;
}

.slogan__content {
  grid-row: 2;
}

.slogan__title, .slogan__desc {
  color: #fff;
}

.slogan__numbers {
  display: flex;
  gap: 2em;
  font-weight: 600;
  margin-bottom: 2em;
}

.slogan__numbers > div {
  flex: 1 0 fit-content;
}

.number__number-wrapper {
  font-size: 2.4em;
  color: crimson;
  position: relative;
}

.slogan__numbers > div:not(:last-child) .number__number-wrapper:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translatey(-50%);
  height: 50%;
  width: 2px;
  background-color: currentcolor;
}

.number__text {
  font-size: 1.3em;
  color: #fff;
}

.slogan__btns {
  display: flex;
  gap: 1em;
}

.slogan__btn {
  --btn-bg-clr: transparent;
  --btn-clr: #fff;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: .3125em;
  padding: .625em 2em;
  border: 1px solid var(--btn-bg-clr);
  background-color: var(--btn-bg-clr);
  color: var(--btn-clr);
  cursor: pointer;
  transition: background-color 300ms, color 300ms;
}

.slogan__btn.read-more-btn {
  --btn-bg-clr: crimson;
}

.slogan__btn.view-projects {
  --btn-bg-clr: var(--primary-light);
  --btn-clr: var(--primary-light);
  background-color: #fff;
}

.slogan__logo, .slogan__content {
  grid-column: col-1-start / col-1-end;
}

.slogan__btn:hover.read-more-btn {
  background-color: #fff;
  color: var(--btn-bg-clr);
}

.slogan__btn:hover.view-projects {
  background-color: var(--btn-bg-clr);
  color: #fff;
}

.slogan__title {
  text-transform: uppercase;
  font-size: 3em;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: .625em;
}

.slogan__img-top-right {
  grid-column: col-2-start / col-2-end;
  grid-row: 2;
  width: 80%;
  justify-self: center;
}

.slogan__img-top-right img {
  border-radius: 0 4em;
}

.slogan__img-bottom {
  grid-column: col-1-start / right-edge;
  grid-row: 3;
  margin-bottom: 4em;
}

.slogan__img-bottom img {
  width: 100%;
}

/*
=================================
=        ABOUT US SECTION       =
=================================
*/
.about-us-section {
  color: var(--primary-medium);
}
.about-us-section h2 {
  color: inherit;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 500;
  font-size: 2.4em;
}

.construct-categories {
  --col-gap: 1em;
  --row-gap: calc(var(--col-gap) * 1.5);
  --col-1-width: 32%;
  --col-2-width: 40%;
  --row-1-cols: 3;
  --row-2-cols: 5;
  --row-2-col-width: calc((100% - var(--col-gap) * (var(--row-2-cols) - 1)) / var(--row-2-cols));
  display: flex;
  flex-wrap: wrap;
  gap: var(--row-gap) var(--col-gap);
}

.construct-category {
  height: auto;
  position: relative;
  border-radius: .625em;
  overflow: hidden;
}

.construct-category:nth-child(1) {
  flex-basis: var(--col-1-width);
}

.construct-category:nth-child(2) {
  flex-basis: var(--col-2-width);
}

.construct-category:nth-child(3) {
  flex-basis: calc(100% - var(--col-1-width) - var(--col-2-width) - (var(--row-1-cols) - 1) * var(--col-gap));
}

.construct-category:not(:nth-child(1), :nth-child(2), :nth-child(3)) {
  flex-basis: var(--row-2-col-width);
}

.construct-category__img {
  width: 100%;
  height: 100%;
}

.construct-category__img > img {
  height: 100%;
  object-fit: cover;
}

.construct-category__img:has(img:nth-child(2)) {
  --img-1-width: 64%;
  display: flex;
}

.construct-category__img:has(img:nth-child(2)) > img:first-child {
  flex-basis: var(--img-1-width);
  max-width: var(--img-1-width);
}

.construct-category__img:has(img:nth-child(2)) > img:last-child {
  flex-basis: calc(100% - var(--img-1-width));
  max-width: calc(100% - var(--img-1-width));
}

.construct-category__name {
  padding: .5em 1em;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  background-color: rgba(0,0,0,.55);
  transition: opacity 500ms;
  color: #fff;
  gap: 1em;
}

.construct-category__name .name {
  font-weight: 700;
  text-transform: uppercase;
}

.construct-category:hover .construct-category__name {
  opacity: 1;
  color: #fff;
}

/*
=================================
=         WHY CHOOSE US         =
=================================
*/
.why-choose-us__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: grayscale(100%);
}

.why-choose-us__bg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-choose-us__wrapper {
  position: relative;
  max-width: 1230px;
  margin-inline: auto;
  padding-block: 3em;
  display: grid;
  --col-1-width: 30%;
  --why-choose-us-gap: 0em;
  --col-2-width: calc(100% - var(--why-choose-us-gap) - var(--col-1-width));
  grid-template-columns: var(--col-1-width) var(--col-2-width);
  gap: var(--why-choose-us-gap);
}

.why-choose-us__imgs {
  padding-right: 2em;
  display: flex;
  flex-direction: column;
  gap: 3em;
  margin-top: -6em;
}

.why-choose-us__img > img {
  height: 100%;
}

.why-choose-us__img:nth-child(1) > img {
  aspect-ratio: 3/2.5;
  border-radius: 4em 0;
}

.why-choose-us__img:nth-child(2) {
  flex: 1;
}

.why-choose-us__img:nth-child(2) > img {
  border-radius: 0 4em;
}

.why-choose-us__img > img {
  width: 100%;
  object-fit: cover;
}

.why-choose-us__reasons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5em;
}

.why-choose-us__title {
  color: #fff;
  font-size: 2.4rem;
  text-transform: uppercase;
  grid-column: 1 / 3;
}

.why-choose-us__reason {
  background-color: rgba(0,0,0,.75);
  display: flex;
  flex-flow: column nowrap;
  gap: .625em;
  padding: 2em;
  color: #fff;
  border-radius: 1em;
}

.reason__title {
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.5;
  height: calc(1.1em * 1.5 * 2);
}
/*
=================================
=       DESIGNED PROJECTS       =
=================================
*/
.designed-projects-section {
  background-color: #000;
}

.designed-projects {
  display: grid;
  --scroll-width: 3em;
  --projects-gap: 2em;
  --projects-max-width: 1230px;
  --projects-content-width: calc(var(--projects-max-width) - var(--projects-gap));
  --projects-title-width: 22rem;
  --projects-swiper-width: calc(var(--projects-content-width) - var(--projects-title-width));
  --projects-margin: calc((100vw - var(--scroll-width) - var(--projects-content-width)) / 2);
  grid-template-columns: [left-edge] var(--projects-margin) [title-start] var(--projects-title-width) [title-end gap-start] var(--projects-gap) [gap-end content-start] var(--projects-swiper-width) [content-end] var(--projects-margin) [right-edge];
  row-gap: var(--projects-gap);
  position: relative;
}

.designed-projects__title-wrapper {
  grid-column: left-edge / title-end;
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
  gap: .3125em;
  border-top: 1px solid var(--secondary-medium);
}

.designed-projects__title, .designed-projects__desc, .designed-projects__view-all {
  grid-column: title-start / title-end;
}

.designed-projects__title {
  color: var(--secondary-medium);
  font-size: 2.4rem;
  font-weight: 600;
}

.designed-projects__desc {
  color: #fff;
}

.designed-projects__view-all {
  padding: .625em 1em;
  background-color: var(--secondary-medium);
  width:  fit-content;
  color: var(--primary-medium);
}

.designed-projects__projects {
  grid-column: content-start / right-edge;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}

.project {
  position: relative;
}

.project__img {
  position: relative;
  aspect-ratio: 3/2;
}

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

.project__content {
  position: absolute;
  inset: 50% 0 auto 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: 500ms;
  background-color: rgba(249, 222, 56, .8);
  display: flex;
  flex-direction: column;
  gap: .3125rem;
  padding: 1em;
}

.project:hover .project__content {
  inset: 0;
  opacity: 1;
  max-height: 100%;
}

.project__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 700;
  -webkit-line-clamp: 2;
}

.project__desc {
  flex: 1;
  overflow: hidden;
}

.project__desc, .project__name, .project__view-project {
  color: var(--primary-medium);
}

.project__name, .project__view-project {
  transition: color 300ms;
  
}

.project__view-project {
  text-align: right;
}

/*
=================================
=        CUSTOMER REVIEW        =
=================================
*/
.customer-reviews-section {
  background-color: #000;
}

.customer-reviews-section h2 {
  color: var(--secondary-medium);
  margin-inline: auto;
  width: fit-content;
  position: relative;
  margin-bottom: 2em;
  font-size: 2.4em;
}
.customer-reviews-section h2:before {
  position: absolute;
  content: '';
  width: 60%;
  left: 50%;
  transform: translatex(-50%);
  bottom: -2px;
  height: 2px;
  background: currentColor;
}

.review.swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
  cursor: grab;
}

.review__content {
  flex: 1;
  --before-size: 30px;
  display: flex;
  flex-flow: column;
  gap: .3125em;
  background-color: #fff;
  padding: 1em;
  position: relative;
  margin-bottom: calc( var(--before-size) + 1em);
}
.review__content:before {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  border-color: transparent var(--secondary-medium);
  border-style: solid;
  border-width: 0 var(--before-size) var(--before-size) 0;
}
.review__quote-icon {
  color: var(--primary-medium);
}
.review__content-text {
  font-size: .9em;
  color: var(--primary-medium);
}

.review__view-detail {
  align-self: end;
  font-size: .9em;
  position: relative;
  transition: color 300ms;
  margin-top: auto;
}
.review__view-detail:before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width 300ms, left 300ms;
}
.review__view-detail:is(:hover, :focus-visible):before {
  left: 0;
  width: 100%;
}

.review__reviewer-info {
  --avatar-size: 6em;
  display: flex;
  align-items: center;
  gap: .625em;
}

.reviewer-info__avatar img {
  width: var(--avatar-size);
  aspect-ratio: 1/1;
  border-radius: 50%;
}
.reviewer-info__name {
  color: var(--secondary-medium);
} 
.reviewer-info__job {
  color: #fff;
}
.reviewer-info__job {
  font-size: .85em;
  font-style: italic;
}
.reviewer-info__stars i:before {
  color: var(--secondary-medium);
}

.customer-reviews .swiper-pagination {
  margin-top: 2em;
  position: relative;
}
.customer-reviews .swiper-pagination-bullet {
  background: var(--secondary-medium);
  width: .625em;
  height: .625em;
}

.customer-reviews .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  opacity: .5;
}

/*
=================================
=           BLOG POSTS          =
=================================
*/
.blog-posts h2 {
  color: var(--primary-medium);
  position: relative;
  margin-inline: auto;
  width: fit-content;
  font-size: 2.4em;
}

.blog-posts h2:before {
  position: absolute;
  content: '';
  width: 60%;
  height: 2px;
  background-color: currentcolor;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
}

.blog-posts .view-all-posts {
  display: block;
  cursor: pointer;
  margin-inline: auto;
  width: fit-content;
  padding: .5em 1em;
  background-color: var(--primary-medium);
  color: #fff;
  transition: color 300ms;
}

.blog-posts .view-all-posts:is(:hover, :focus-visible) {
  color: var(--secondary-medium);
}

/*
=================================
=            CONTAINER          =
=================================
*/
@container content (width < 1230px) {
  .slogan-wrapper {
    --slogan-max-width: 100%;
  }
  .slogan__logo, .slogan__content {
    padding-left: .625em;
  }
  .why-choose-us__reasons {
    padding-right: 1em;
  }
  .designed-projects {
    --projects-max-width: 100%;
  }
}

@container content (width < 850px) {
  .slogan__bg {
    grid-column: left-edge / right-edge;
  }
  .construct-categories {
    --col-gap: .625em;
    --row-1-cols: 2;
    --row-2-cols: 3;
    --col-1-width: calc( (100% - var(--col-gap) * (var(--row-1-cols) - 1)) / var(--row-1-cols));
    --col-2-width: var(--col-1-width);
  }
  .construct-category:nth-child(3) {
    flex-basis: var(--row-2-col-width);
  }
  .why-choose-us__wrapper {
    --col-1-width: 0;
  }
  .why-choose-us__imgs {
    display: none;
  }
  .why-choose-us__reasons {
    padding-inline: 1em;
  }
  :is(.designed-projects__title-wrapper, .designed-projects__projects, .designed-projects__desc, .designed-projects__title, .designed-projects__view-all) {
    grid-column: left-edge / right-edge;
  }
  .designed-projects__title-wrapper {
    justify-items: center;
  }
  .designed-projects__projects {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container content (width < 550px) {
  .slogan__img-top-right {
    display: none;
  }
  .slogan__logo {
    grid-column: left-edge / right-edge;
    justify-self: center;
  }
  .slogan__content {
    grid-column: left-edge / right-edge;
    padding-inline: 1em;
  }
  .about-us-section .row:nth-child(1) .col:first-child {
    order: 2;
  }
  .construct-categories {
    --col-gap: .625em;
    --row-1-cols: 1;
    --row-2-cols: 2;
    --col-1-width: calc( (100% - var(--col-gap) * (var(--row-1-cols) - 1)) / var(--row-1-cols));
    --col-2-width: var(--col-1-width);
  }
  .why-choose-us__reasons {
    grid-template-columns: 1fr;
  }
  .why-choose-us__title {
    grid-column: 1;
  }
  .designed-projects__projects {
    grid-template-columns: 1fr;
  }
}
/*
=================================
=         BLOGS SECTION         =
=================================
*/
.gpw-blogs .section-content {
  padding-block: 5rem 3.125rem;
}
.gpw-blogs .row .col:last-child img {
  border-radius: 1rem;
}
.gpw-blogs .post-item .post-title {
  color: var(--primary-medium);
}
.gpw-blogs .post-item .is-divider {
  display: none;
}
.gpw-blogs .row .row-small:not(.row-collapse) {
  margin-inline: 0;
}