/*============================

    Template Name: Constructiva | Construction And Industry HTML Template
    Template URL: #
    Description: Constructiva is Modern HTML template for construction & industry. Showcase projects & services. Empower your online presence.
    Author: Juragancode
    Author URL: https://www.templatemonster.com/authors/juragancode/
    Version: 1.1

=============================

    CSS INDEX
    ===================
    01. Theme default CSS
    02. Header
    03. Hero Banner
    04. About
    05. Why
    06. Services
    07. Feature
    08. Testimonial
    09. Team
    10. Faq
    11. Blog
    12. Projects
    13. Contact
    14. Footer

=============================*/
/*=============================
01. Theme default CSS
=============================*/
@import url("https://fonts.googleapis.com/css?family=Jost:300,400,500,600,700&display=swap");
body {
  font-family: "Jost";
  font-weight: 400;
  color: #2A2A2A;
  font-size: 16px;
  line-height: 1.75;
  font-style: normal;
  overflow-x: hidden;
}
body.v-card {
  height: 100vh;
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #17161A;
  font-weight: 600;
}
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  position: relative;
  color: #0698f1;
}
h1 span:before,
h2 span:before,
h3 span:before,
h4 span:before,
h5 span:before,
h6 span:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 25px;
}

h1 span:before {
  background: url("../img/title-line.svg") no-repeat;
}

@media (max-width: 768px) {
  h2 {
    font-size: 28px;
  }
}
@media (min-width: 1200px) {
  h2 {
    font-size: 36px;
  }
}
h2 span:before {
  bottom: -15px;
  background: url("../img/tiitle-line-small.svg") no-repeat;
}

h5 {
  font-size: 18px;
}

b, strong {
  font-weight: 600;
}

.sub-title {
  display: block;
  font-weight: 500;
  color: #0698f1;
}

a {
  text-decoration: unset;
}

.btn.btn-primary {
  border: unset;
  position: relative;
  padding: 8px 22px;
  border-radius: 3px;
  color: #FFFFFF;
  display: inline-block;
  background-color: #0698f1;
  overflow: hidden;
}
.btn.btn-primary:before {
  content: "";
  height: 150px;
  left: -75px;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  opacity: 0;
  background-color: #2e2d2a;
}
.btn.btn-primary:hover {
  background-color: #0698f1;
}
.btn.btn-primary:hover:before {
  left: 120%;
  transition: all 1300ms cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0.8;
}

.tags {
  margin-top: 1.5rem;
}
.tags h4 {
  font-size: 20px;
}
.tags ul {
  margin-top: 1rem;
  margin-bottom: 0;
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tags ul li a {
  display: block;
  padding: 5px 15px;
  border: 1px solid #0698f1;
  color: #2A2A2A;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.tags ul li a:hover {
  color: white;
  background-color: #0698f1;
}

.blockquotes {
  padding: 10px 20px;
  background-color: #F4F4F4;
  border-left: 2px solid #0698f1;
  margin: 1.2rem 0;
}
@media (min-width: 992px) {
  .blockquotes {
    margin: 2.5rem 0;
  }
}
.blockquotes p {
  margin: 0;
}

@media (min-width: 992px) {
  .gx-10 {
    --bs-gutter-x: 5rem;
  }
}

.py-6 {
  padding: 3rem 0;
}
@media (min-width: 992px) {
  .py-6 {
    padding: 6rem 0;
  }
}

.bg-yellow {
  background-color: #0698f12e;
}

figure {
  overflow: hidden;
  margin: 0;
}

form .form-group {
  margin-bottom: 20px;
}
form .form-group input,
form .form-group select {
  height: 50px;
}
form .form-group input,
form .form-group select,
form .form-group textarea {
  padding: 10px 20px;
}
form .form-group input:focus,
form .form-group select:focus,
form .form-group textarea:focus {
  box-shadow: none;
}

.see-more {
  font-weight: 700;
  color: #2A2A2A;
  display: flex;
  align-items: center;
  gap: 10px;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.see-more:hover {
  color: #0698f1;
}

.play-btn {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #0698f1;
  font-size: 22px;
}
.play-btn i {
  position: relative;
  z-index: 1;
}
.play-btn:before {
  background-color: #0698f1;
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  animation: pulse-border 1500ms ease-out infinite;
}
.play-btn:hover {
  background-color: #0698f1;
}

#videoModal iframe {
  aspect-ratio: 16/9;
}

.about,
.blog,
.faq,
.feature,
.projects,
.services,
.team,
.testimonial,
.why {
  padding: 3rem 0;
}
@media (min-width: 992px) {
  .about,
  .blog,
  .faq,
  .feature,
  .projects,
  .services,
  .team,
  .testimonial,
  .why {
    padding: 6rem 0;
  }
}

.top-banner {
  position: relative;
  overflow: hidden;
  height: 65vh;
  text-align: center;
}
.top-banner figure {
  height: 100%;
}
.top-banner figure:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: black;
  opacity: 0.7;
}
.top-banner figure img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.top-banner__content {
  padding-top: 75px;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.top-banner__content h1, .top-banner__content p {
  color: white;
}
.top-banner__content h1 {
  display: inline-block;
  position: relative;
}
.top-banner__content h1:before {
  content: "";
  position: absolute;
  height: 5px;
  width: 40%;
  top: -20px;
  left: 50%;
  background-color: #0698f1;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.swiper-pagination .swiper-pagination-bullet {
  opacity: 1;
  border: 1px solid #0698f1;
  border-radius: 0;
  background-color: transparent;
  width: 10px;
  height: 10px;
}
.swiper-pagination .swiper-pagination-bullet-active {
  background-color: #0698f1;
}

.pagination {
  margin-top: 5rem;
  justify-content: center;
  gap: 10px;
}
.pagination li a {
  color: #2A2A2A;
  width: 35px;
  height: 35px;
  border: 1px solid #0698f1;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.pagination li.active a, .pagination li:hover a {
  background-color: #0698f1;
  color: white;
}

.search-popup {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}
.search-popup.show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.search-popup .popup-close {
  color: white;
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 22px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-popup fieldset {
  position: absolute;
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  width: 80%;
  top: 25%;
  left: 50%;
  -webkit-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}
@media (min-width: 1200px) {
  .search-popup fieldset {
    width: 60%;
  }
}
@media (max-width: 768px) {
  .search-popup fieldset {
    width: 90%;
  }
}
@media (max-width: 575px) {
  .search-popup fieldset {
    display: block;
    overflow: visible;
    text-align: center;
  }
}
.search-popup fieldset input, .search-popup fieldset .btn.btn-primary {
  border-radius: 0;
}
@media (max-width: 575px) {
  .search-popup fieldset input, .search-popup fieldset .btn.btn-primary {
    border-radius: 5px;
    margin-bottom: 10px;
  }
}
.search-popup fieldset .btn {
  flex: 1 0 15%;
}
@media (max-width: 768px) {
  .search-popup fieldset .btn {
    flex: 1 0 20%;
  }
}

.preloader {
  background: white;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 999;
}
.preloader .loaders {
  position: relative;
  top: 50%;
  filter: url("#goo");
  z-index: 99999;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.preloader .loaders .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.preloader .loaders .spinner:after {
  content: "";
  background: #0698f1;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  position: absolute;
  top: 0;
  left: 0;
}
.preloader .loaders .spinner span {
  height: 24px;
  width: 24px;
  position: absolute;
  top: 0;
  left: 0;
}
.preloader .loaders .spinner span:nth-of-type(1) {
  transform: translateX(-100%) translateY(0) rotate(-90deg);
}
.preloader .loaders .spinner span:nth-of-type(2) {
  transform: translateX(-70%) translateY(-70%) rotate(-45deg);
}
.preloader .loaders .spinner span:nth-of-type(3) {
  transform: translateX(0) translateY(-100%) rotate(0);
}
.preloader .loaders .spinner span:nth-of-type(4) {
  transform: translateX(70%) translateY(-70%) rotate(45deg);
}
.preloader .loaders .spinner span:nth-of-type(5) {
  transform: translateX(100%) translateY(0) rotate(90deg);
}
.preloader .loaders .spinner span:nth-of-type(6) {
  transform: translateX(70%) translateY(70%) rotate(135deg);
}
.preloader .loaders .spinner span:nth-of-type(7) {
  transform: translateX(0) translateY(100%) rotate(180deg);
}
.preloader .loaders .spinner span:nth-of-type(8) {
  transform: translateX(-70%) translateY(70%) rotate(-135deg);
}
.preloader .loaders .spinner span:nth-of-type(1):after {
  animation-delay: 0;
}
.preloader .loaders .spinner span:nth-of-type(2):after {
  animation-delay: 375ms;
}
.preloader .loaders .spinner span:nth-of-type(3):after {
  animation-delay: 750ms;
}
.preloader .loaders .spinner span:nth-of-type(4):after {
  animation-delay: 1125ms;
}
.preloader .loaders .spinner span:nth-of-type(5):after {
  animation-delay: 1500ms;
}
.preloader .loaders .spinner span:nth-of-type(6):after {
  animation-delay: 1875ms;
}
.preloader .loaders .spinner span:nth-of-type(7):after {
  animation-delay: 2250ms;
}
.preloader .loaders .spinner span:nth-of-type(8):after {
  animation-delay: 2625ms;
}
.preloader .loaders .spinner span:nth-of-type(1):before {
  animation-delay: 0ms;
}
.preloader .loaders .spinner span:nth-of-type(2):before {
  animation-delay: 375ms;
}
.preloader .loaders .spinner span:nth-of-type(3):before {
  animation-delay: 750ms;
}
.preloader .loaders .spinner span:nth-of-type(4):before {
  animation-delay: 1125ms;
}
.preloader .loaders .spinner span:nth-of-type(5):before {
  animation-delay: 1500ms;
}
.preloader .loaders .spinner span:nth-of-type(6):before {
  animation-delay: 1875ms;
}
.preloader .loaders .spinner span:nth-of-type(7):before {
  animation-delay: 2250ms;
}
.preloader .loaders .spinner span:nth-of-type(8):before {
  animation-delay: 2625ms;
}
.preloader .loaders .spinner span:after {
  content: "";
  background: #0698f1;
  height: 13px;
  width: 13px;
  position: absolute;
  top: 9px;
  left: 9px;
  transform: translateX(0) translateY(0);
  border-radius: 50%;
  animation: move 3s linear infinite;
}
.preloader .loaders .spinner span:before {
  content: "";
  background: #0698f1;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 8px;
  left: 8px;
  transform: translateX(0) translateY(0);
  border-radius: 50%;
  animation: move2 3s linear infinite;
}
@keyframes move {
  0% {
    transform: translateX(0) translateY(0);
  }
  10% {
    transform: translateX(0) translateY(-350%);
  }
  15% {
    transform: translateX(0) translateY(-400%);
  }
  17% {
    transform: translateX(0) translateY(-400%);
  }
  20% {
    transform: translateX(0) translateY(-350%);
  }
  23% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes move2 {
  0% {
    transform: translateX(0) translateY(0);
  }
  10% {
    transform: translateX(0) translateY(-370%);
  }
  15% {
    transform: translateX(0) translateY(-530%);
  }
  17% {
    transform: translateX(0) translateY(-530%);
  }
  20% {
    transform: translateX(0) translateY(-450%);
  }
  23% {
    transform: translateX(0) translateY(-150%);
  }
  26% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.7);
    opacity: 0;
  }
}
@-webkit-keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.7);
    opacity: 0;
  }
}
/*=============================
02. Header
=============================*/
header {
  position: absolute;
  width: 100%;
  z-index: 99;
}
header .header-top {
  background-color: #15296E;
  overflow: hidden;
  display: none;
}
@media (min-width: 992px) {
  header .header-top {
    display: block;
  }
}
header .header-top__inner {
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
}
header .header-top .social-media,
header .header-top .contact-detail {
  position: relative;
  display: flex;
  gap: 25px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
header .header-top .social-media a,
header .header-top .contact-detail a {
  color: white;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
header .header-top .social-media a:hover,
header .header-top .contact-detail a:hover {
  color: #0698f1;
}
header .header-top .contact-detail a i {
  margin-right: 5px;
}
header .header-top .contact-detail a span {
  display: none;
}
@media (min-width: 992px) {
  header .header-top .contact-detail a span {
    display: inline-block;
  }
}
header .navbar {
  position: fixed;
  width: 100%;
  padding: 10px 0;
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -ms-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}
@media (min-width: 992px) {
  header .navbar {
    padding: 15px 0;
  }
}
header .navbar.on-scroll {
  background-color: #15296E;
}
header .navbar .navbar-brand {
  color: #0698f1;
  font-weight: 500;
  z-index: 1;
}
header .navbar .navbar-nav {
  position: fixed;
  flex-direction: column;
  display: flex;
  opacity: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #2A2A2A;
  gap: 10px;
  font-size: 22px;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
}
@media (min-width: 992px) {
  header .navbar .navbar-nav {
    flex-direction: row;
    font-size: 16px;
    width: auto;
    opacity: 1;
    position: relative;
    height: auto;
    background-color: transparent;
    gap: 50px;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
header .navbar .navbar-nav .has-children {
  position: relative;
}
header .navbar .navbar-nav .has-children .nav-link {
  padding-right: 10px;
}
header .navbar .navbar-nav .has-children .nav-link:after {
  position: absolute;
  font-family: "Font Awesome 6 Free";
  content: "\f107";
  font-weight: 900;
  margin-left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
header .navbar .navbar-nav .has-children ul.sub-menu {
  list-style-type: none;
  position: absolute;
  text-align: left;
  top: 100%;
  background-color: #0698f1;
  min-width: 190px;
  width: max-content;
  left: -14px;
  z-index: 1;
  border: 0;
  box-shadow: 0px 4px 15px rgba(1, 15, 28, 0.06);
  border-radius: 0;
  transform: scaleY(0);
  transform-origin: top center;
  transition: all 0.4s ease 0s;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
header .navbar .navbar-nav .has-children ul.sub-menu li a {
  color: #2A2A2A;
}
header .navbar .navbar-nav .has-children ul.sub-menu li a:hover {
  font-weight: 500;
}
header .navbar .navbar-nav .has-children:hover ul.sub-menu {
  transform: scaleY(100%);
}
header .navbar .navbar-nav .nav-link {
  color: white;
  opacity: 0;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
  -webkit-transform: translateX(-50px);
  -ms-transform: translateX(-50px);
  transform: translateX(-50px);
}
@media (min-width: 992px) {
  header .navbar .navbar-nav .nav-link {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
header .navbar .navbar-nav .nav-link.active, header .navbar .navbar-nav .nav-link:hover {
  color: #0698f1;
}
header .navbar .navbar-nav.show {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
header .navbar .navbar-nav.show .nav-link {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
header .navbar .navbar-nav.show .nav-link.delay-100 {
  -webkit-transition: all 0.35s ease 100ms;
  -moz-transition: all 0.35s ease 100ms;
  -ms-transition: all 0.35s ease 100ms;
  -o-transition: all 0.35s ease 100ms;
  transition: all 0.35s ease 100ms;
}
header .navbar .navbar-nav.show .nav-link.delay-300 {
  -webkit-transition: all 0.35s ease 200ms;
  -moz-transition: all 0.35s ease 200ms;
  -ms-transition: all 0.35s ease 200ms;
  -o-transition: all 0.35s ease 200ms;
  transition: all 0.35s ease 200ms;
}
header .navbar .navbar-nav.show .nav-link.delay-500 {
  -webkit-transition: all 0.35s ease 400ms;
  -moz-transition: all 0.35s ease 400ms;
  -ms-transition: all 0.35s ease 400ms;
  -o-transition: all 0.35s ease 400ms;
  transition: all 0.35s ease 400ms;
}
header .navbar .navbar-nav.show .nav-link.delay-700 {
  -webkit-transition: all 0.35s ease 600ms;
  -moz-transition: all 0.35s ease 600ms;
  -ms-transition: all 0.35s ease 600ms;
  -o-transition: all 0.35s ease 600ms;
  transition: all 0.35s ease 600ms;
}
header .navbar .navbar-nav.show .nav-link.delay-900 {
  -webkit-transition: all 0.35s ease 800ms;
  -moz-transition: all 0.35s ease 800ms;
  -ms-transition: all 0.35s ease 800ms;
  -o-transition: all 0.35s ease 800ms;
  transition: all 0.35s ease 800ms;
}
header .navbar .navbar-nav.show .nav-link.delay-1100 {
  -webkit-transition: all 0.35s ease 1000ms;
  -moz-transition: all 0.35s ease 1000ms;
  -ms-transition: all 0.35s ease 1000ms;
  -o-transition: all 0.35s ease 1000ms;
  transition: all 0.35s ease 1000ms;
}
header .navbar .quote {
  z-index: 1;
  display: flex;
  gap: 20px;
  align-items: center;
}
header .navbar .quote #burger-menu {
  width: 30px;
  height: 23px;
  position: relative;
  cursor: pointer;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
header .navbar .quote #burger-menu span {
  display: block;
  position: absolute;
  height: 2px;
  width: 50%;
  background: white;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
header .navbar .quote #burger-menu span:nth-child(even) {
  left: 50%;
}
header .navbar .quote #burger-menu span:nth-child(odd) {
  left: 1px;
}
header .navbar .quote #burger-menu span:nth-child(1), header .navbar .quote #burger-menu span:nth-child(2) {
  top: 0px;
}
header .navbar .quote #burger-menu span:nth-child(3), header .navbar .quote #burger-menu span:nth-child(4) {
  top: 10px;
}
header .navbar .quote #burger-menu span:nth-child(5), header .navbar .quote #burger-menu span:nth-child(6) {
  top: 20px;
}
header .navbar .quote #burger-menu.show span:nth-child(1), header .navbar .quote #burger-menu.show span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
header .navbar .quote #burger-menu.show span:nth-child(2), header .navbar .quote #burger-menu.show span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
header .navbar .quote #burger-menu.show span:nth-child(1) {
  left: 5px;
  top: 5px;
}
header .navbar .quote #burger-menu.show span:nth-child(2) {
  left: 50%;
  top: 5px;
}
header .navbar .quote #burger-menu.show span:nth-child(3) {
  left: -50%;
  opacity: 0;
}
header .navbar .quote #burger-menu.show span:nth-child(4) {
  left: 100%;
  opacity: 0;
}
header .navbar .quote #burger-menu.show span:nth-child(5) {
  left: 5px;
  top: 15px;
}
header .navbar .quote #burger-menu.show span:nth-child(6) {
  left: 50%;
  top: 15px;
}

/*=============================
03. Hero Banner
=============================*/
.banner {
  position: relative;
  overflow: hidden;
  padding-top: 65px;
  height: 75vh;
}
@media (min-width: 992px) {
  .banner {
    padding-top: 110px;
    height: 100vh;
  }
}
.banner .bg-hero {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.banner .bg-hero img {
  height: 100%;
  object-fit: cover;
}
.banner .bg-hero:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: black;
  opacity: 0.7;
}
.banner h1 {
  color: white;
  text-wrap: balance;
  font-size: 50px;
}
@media (max-width: 575px) {
  .banner h1 {
    font-size: 36px;
  }
}
@media (min-width: 1200px) {
  .banner h1 {
    font-size: 60px;
  }
}
.banner p {
  color: white;
}
.banner .img-hero {
  position: relative;
  margin: 0;
  height: 100%;
}
.banner .img-hero img {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 65%;
}
@media (min-width: 1200px) {
  .banner .img-hero img {
    height: 90%;
  }
}

/*=============================
04. About
=============================*/
.about {
  background-color: white;
  padding: 3rem 0;
}
@media (min-width: 992px) {
  .about {
    padding: 6rem 0;
  }
}
@media (min-width: 992px) {
  .about .row {
    --bs-gutter-x: 5rem;
  }
}
@media (min-width: 1200px) {
  .about .row {
    --bs-gutter-x: 8rem;
  }
}
.about .figure-square {
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 6/8;
}
@media (max-width: 768px) {
  .about .figure-square {
    margin-bottom: 30px;
  }
}
@media (max-width: 768px) {
  .about .figure-square {
    aspect-ratio: 4/3;
  }
}
.about figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.about h2 {
  text-wrap: balance;
}
.about p {
  margin-bottom: 0;
}
.about .check-lists {
  margin-top: 20px;
  list-style-type: none;
  padding: 0;
}
.about .check-lists li {
  font-weight: 500;
}
.about .check-lists li i {
  color: #0698f1;
  padding-right: 10px;
}
.about .counter {
  position: relative;
  padding: 3rem 0;
}
.about .counter figure {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.about .counter figure img {
  object-position: center;
}
.about .counter figure:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: black;
  opacity: 0.7;
}
.about .counter-list {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
@media (max-width: 575px) {
  .about .counter-list {
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
}
@media (max-width: 575px) {
  .about .counter-list .counter-item {
    flex-shrink: 1;
    width: 40%;
    text-align: center;
  }
}
.about .counter-list .counter-item span {
  position: relative;
  color: white;
  display: block;
  line-height: 1.6;
}
.about .counter-list .counter-item span.icon {
  font-size: 40px;
  color: #0698f1;
  margin-bottom: 5px;
}
.about .counter-list .counter-item span.count {
  font-size: 26px;
  font-weight: 700;
}
.about .counter-list .counter-item span.desc {
  font-size: 16px;
}
@media (min-width: 992px) {
  .about .counter-list .counter-item span {
    display: flex;
  }
  .about .counter-list .counter-item span.icon {
    font-size: 60px;
  }
  .about .counter-list .counter-item span.count {
    font-size: 32px;
  }
  .about .counter-list .counter-item span.desc {
    font-size: 18px;
  }
}
.about .skill-bar {
  width: 100%;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 992px) {
  .about .skill-bar {
    width: 70%;
  }
}
.about .skill-bar-overlay {
  position: relative;
  width: 100%;
  height: 13px;
  background-color: #747474;
}
.about .skill-bar-percent {
  height: 100%;
  background-color: #0698f1;
}
.about .skill-bar-percent span {
  font-size: 14px;
  position: absolute;
  right: 0;
  top: -25px;
}
.about .banner-full-right {
  position: absolute;
  width: 40vw;
  height: 100%;
  right: 0;
  top: 0;
}
@media (max-width: 768px) {
  .about .banner-full-right {
    position: relative;
    margin-top: 2rem;
    width: 100%;
  }
}
.about .banner-full-right:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: black;
  opacity: 0.6;
}
.about .banner-full-right .play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.about .team {
  background-color: white;
}

/*=============================
05. Why
=============================*/
.why-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.why-list__item {
  display: flex;
  gap: 15px;
}
.why-list__item figure {
  background-color: #0698f1;
  flex: 0 0 65px;
  aspect-ratio: 1/1;
  border-radius: 10px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.why-list__item .inner h4 {
  font-size: 16px;
  margin-bottom: 2px;
}
.why-list__item .inner p {
  color: #747474;
  line-height: 1.5;
  margin: 0;
}
.why figure {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}
.why figure .project-count {
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 15px 20px;
  border-radius: 5px;
  background-color: #0698f1;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.why figure .project-count span {
  display: block;
  line-height: 1.4;
}
.why figure .project-count span:first-child {
  font-size: 30px;
  font-weight: 700;
}
.why figure .project-count span:last-child {
  font-size: 13px;
  font-weight: 600;
}
.why figure:hover .project-count {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}

/*=============================
06. Services
=============================*/
.services {
  background-color: #0698f12e;
}
.services-item {
  position: relative;
  background-color: white;
  border-radius: 5px;
  padding: 30px 35px;
}
.services-item__header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
  margin-bottom: 10px;
}
@media (min-width: 1200px) {
  .services-item__header {
    margin-bottom: 30px;
  }
}
.services-item__header img {
  width: 50px;
}
@media (min-width: 1200px) {
  .services-item__header img {
    width: 50px;
  }
}
.services-item__header h3 {
  font-weight: 500;
  font-size: 24px;
}
@media (max-width: 575px) {
  .services-item__header h3 {
    font-size: 22px;
  }
}
@media (min-width: 1200px) {
  .services-item__header h3 {
    font-size: 26px;
  }
}
@media (min-width: 992px) {
  .services-item p {
    min-height: 115px;
  }
}
@media (min-width: 1200px) {
  .services-item p {
    min-height: 90px;
  }
}

.services-page-item figure {
  border-radius: 5px;
  margin-bottom: 20px;
}
.services-page-item figure img {
  aspect-ratio: 16/10;
  overflow: hidden;
  width: 100%;
  object-fit: cover;
}
.services-page-item__body a h5 {
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.services-page-item__body a:hover h5 {
  color: #0698f1;
}

.services-detail figure {
  border-radius: 5px;
}
.services-detail figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}
.services-detail .service-left-menu {
  list-style-type: none;
  padding: 0;
}
.services-detail .service-left-menu li {
  background-color: #F4F4F4;
  margin-bottom: 5px;
  border: 1px solid #D9D9D9;
}
.services-detail .service-left-menu li a {
  position: relative;
  display: block;
  padding: 13px 25px;
  color: #2A2A2A;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.services-detail .service-left-menu li a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background-color: #0698f1;
  opacity: 0;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.services-detail .service-left-menu li a:hover, .services-detail .service-left-menu li a.active {
  background-color: #2A2A2A;
  color: white;
}
.services-detail .service-left-menu li a:hover:before, .services-detail .service-left-menu li a.active:before {
  opacity: 1;
}
.services-detail ul li {
  margin-bottom: 15px;
}

/*=============================
07. Feature
=============================*/
.feature-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: #0698f12e;
  padding: 20px 25px;
  border-radius: 5px;
  overflow: hidden;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
@media (min-width: 992px) {
  .feature-item {
    padding: 25px 20px;
  }
}
.feature-item .icon {
  display: flex;
  border-radius: 5px;
  background-color: #17161A;
  width: 70px;
  aspect-ratio: 1/1;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.feature-item .icon img {
  margin: auto;
  width: 40px;
  object-fit: cover;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.feature-item__body p {
  color: #747474;
  margin: 0;
  line-height: 1.5;
}
.feature-item:hover {
  background-color: #0698f1;
}
.feature-item:hover .icon {
  background-color: white;
}
.feature-item:hover .icon img {
  filter: brightness(0);
}

/*=============================
08. Testimonial
=============================*/
.testimonial .testimonial-item__body {
  background-color: #0698f12e;
  padding: 20px 25px;
  border-radius: 5px;
  overflow: hidden;
}
.testimonial .testimonial-item__body p {
  color: #747474;
  margin: 0;
}
.testimonial .testimonial-item__profile {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.testimonial .testimonial-item__profile figure {
  width: 60px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0;
}
.testimonial .testimonial-item__profile figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial .testimonial-item__profile .name span {
  display: block;
}
.testimonial .testimonial-item__profile .name span:first-child {
  font-size: 17px;
  font-weight: 500;
}
.testimonial .testimonial-item__profile .name span:last-child {
  color: #747474;
  font-size: 14px;
}
.testimonial .testimonial-item__profile .rating {
  color: #0698f1;
  margin-left: auto;
}
.testimonial .testimonial-item__profile .rating i {
  font-size: 14px;
}
@media (min-width: 992px) {
  .testimonial .testimonial-item__profile .rating i {
    font-size: 16px;
  }
}
.testimonial .swiper-pagination {
  margin-top: 50px;
  position: relative;
}
.testimonial .swiper-pagination .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  background-color: transparent;
  border: 1px solid #0698f1;
  opacity: 1;
}
.testimonial .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #0698f1;
}

/*=============================
09. Team
=============================*/
.team {
  background-color: #0698f12e;
}
.team h4 {
  font-weight: 500;
  font-size: 20px;
  text-align: center;
}
.team .position {
  display: block;
  text-align: center;
  color: #747474;
}
.team .team-member {
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  position: relative;
  margin-bottom: 20px;
}
.team .team-member .social-media {
  opacity: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  list-style-type: none;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.team .team-member .social-media li {
  z-index: 1;
}
.team .team-member .social-media li a {
  display: inline-block;
  color: white;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.team .team-member .social-media li a:hover {
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
}
.team .team-member .social-media:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
}
.team .team-member .social-media:hover {
  opacity: 1;
}

/*=============================
10. Faq
=============================*/
.faq figure {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 2rem;
}
@media (min-width: 992px) {
  .faq figure {
    margin: 0;
  }
}
.faq figure .project-count {
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 15px 20px;
  border-radius: 5px;
  background-color: #0698f1;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.faq figure .project-count span {
  display: block;
  line-height: 1.4;
}
.faq figure .project-count span:first-child {
  font-size: 30px;
  font-weight: 700;
}
.faq figure .project-count span:last-child {
  font-size: 13px;
  font-weight: 600;
}
.faq figure:hover .project-count {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}
.faq .accordion {
  margin-top: 35px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq .accordion-header .accordion-button {
  background-color: transparent;
  box-shadow: none;
  font-weight: 500;
  color: #2A2A2A;
  padding: 13px 30px;
}
.faq .accordion-item {
  background-color: #0698f12e;
  border: none;
  border-radius: 5px;
  color: #747474;
}
.faq .accordion-body {
  padding: 13px 30px;
}

/*=============================
11. Blog
=============================*/
.blog {
  background-color: #0698f12e;
}
.blog figure {
  border-radius: 5px;
  overflow: hidden;
}
.blog .left-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16/10;
}
@media (min-width: 992px) {
  .blog .left-img {
    aspect-ratio: 16/14;
  }
}
.blog-featured {
  display: block;
  position: relative;
}
.blog-featured:before {
  opacity: 0;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(54, 39, 0);
  background: linear-gradient(0deg, rgba(54, 39, 0, 0.6) 0%, rgba(255, 255, 255, 0) 60%);
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.blog-featured__body {
  position: absolute;
  padding: 20px;
  left: 0;
  bottom: 0;
  width: 100%;
}
@media (min-width: 1200px) {
  .blog-featured__body {
    padding: 35px;
    padding-right: 25%;
  }
}
.blog-featured__body h3 {
  color: white;
  font-weight: 500;
}
@media (max-width: 768px) {
  .blog-featured__body h3 {
    font-size: 20px;
  }
}
.blog-featured__body p {
  line-height: 1.6;
  color: #D9D9D9;
}
@media (max-width: 575px) {
  .blog-featured__body p {
    display: none;
  }
}
.blog-featured__body .see-more {
  color: #0698f1;
}
.blog-featured:hover:before {
  opacity: 1;
}
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 23px;
  margin-top: 2rem;
}
@media (min-width: 992px) {
  .blog-list {
    margin-top: 0;
  }
}
@media (min-width: 1200px) {
  .blog-list {
    gap: 25px;
  }
}
.blog-item {
  display: flex;
  align-items: center;
  gap: 20px;
}
.blog-item h5 {
  font-weight: 500;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
@media (max-width: 575px) {
  .blog-item h5 {
    font-size: 16px;
  }
}
.blog-item figure {
  flex: 0 0 120px;
  aspect-ratio: 6/5;
}
@media (min-width: 1200px) {
  .blog-item figure {
    aspect-ratio: 1/1;
  }
}
.blog-item figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.blog-item__info {
  color: #747474;
}
@media (max-width: 575px) {
  .blog-item__info {
    font-size: 14px;
  }
}
.blog-item:hover img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.blog-item:hover h5 {
  color: #0698f1;
}

.blog-page .blog-post h3 {
  font-size: 20px;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.blog-page .blog-post figure {
  width: 100%;
  border-radius: 5px;
}
@media (min-width: 1200px) {
  .blog-page .blog-post figure {
    aspect-ratio: 16/12;
  }
}
@media (max-width: 768px) {
  .blog-page .blog-post figure {
    aspect-ratio: 16/12;
    margin-bottom: 1.5rem;
    height: auto;
  }
}
.blog-page .blog-post figure img {
  object-fit: cover;
}
.blog-page .blog-post.grid .blog-item {
  display: block;
}
.blog-page .blog-post.grid h3:hover {
  color: #0698f1;
}

.blog-detail figure {
  border-radius: 10px;
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .blog-detail figure {
    border-radius: 5px;
  }
}
.blog-detail h2 {
  font-size: 28px;
}
@media (max-width: 768px) {
  .blog-detail h2 {
    font-size: 24px;
  }
}
.blog-detail .blog-content {
  margin-top: 1rem;
}

.related-blog {
  padding: 3rem 0;
  background-color: #0698f12e;
}
.related-blog h2 {
  font-size: 30px;
  margin-bottom: 2rem;
  text-align: center;
}
@media (max-width: 768px) {
  .related-blog h2 {
    font-size: 26px;
  }
}
.related-blog figure {
  margin-bottom: 20px;
  border-radius: 5px;
  aspect-ratio: 16/12;
}
.related-blog a h5 {
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.related-blog a img {
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.related-blog a:hover h5 {
  color: #0698f1;
}
.related-blog a:hover figure img {
  scale: 1.1;
}

/*=============================
12. Projects
=============================*/
.projects {
  background-color: #0698f12e;
}

.project-list {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 1rem;
}
@media (min-width: 992px) {
  .project-list {
    margin-top: 3rem;
    grid-gap: 25px;
  }
}
.project-list__item {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  background-color: #0698f1;
  border-radius: 5px;
  overflow: hidden;
}
.project-list__item.vertical {
  grid-area: span 2;
  height: 100%;
  width: 100%;
}
.project-list__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-list__item .project-overlay {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 0 15px;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.project-list__item .project-overlay:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
}
.project-list__item .project-overlay .icon {
  z-index: 1;
  width: 40px;
}
@media (min-width: 992px) {
  .project-list__item .project-overlay .icon {
    width: 60px;
  }
}
.project-list__item .project-overlay .icon img {
  width: 100%;
}
.project-list__item .project-overlay__body {
  z-index: 1;
  text-align: center;
}
.project-list__item .project-overlay__body h4, .project-list__item .project-overlay__body p {
  color: white;
}
.project-list__item .project-overlay__body h4 {
  font-size: 20px;
}
@media (min-width: 992px) {
  .project-list__item .project-overlay__body h4 {
    font-size: 24px;
  }
}
.project-list__item .project-overlay__body p {
  line-height: 1.5;
  margin: 0;
}
.project-list__item:hover .project-overlay {
  opacity: 1;
}
.project-list.isotope .project-list__item {
  width: 31%;
  margin: 1.1666666667%;
}
@media (max-width: 768px) {
  .project-list.isotope .project-list__item {
    width: 47%;
    margin: 1%;
  }
}

.projects-page .projects-category {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  list-style-type: none;
  padding: 0;
}
.projects-page .projects-category li a {
  display: inline-block;
  padding: 3px 20px;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
  color: #2A2A2A;
}
.projects-page .projects-category li.active a, .projects-page .projects-category li:hover a {
  background-color: #0698f1;
  color: white;
}

.projects-detail .project-gallery .swiper-slide img {
  aspect-ratio: 16/10;
  width: 100%;
  object-fit: cover;
}
.projects-detail .project-gallery .swiper-pagination {
  position: relative;
  margin-top: 20px;
}
.projects-detail .project-description {
  margin-top: 2rem;
}
.projects-detail .project-description h3 {
  color: #0698f1;
  margin-bottom: 1.5rem;
}
.projects-detail .project-description .project-tags {
  list-style-type: none;
  padding: 0;
}
.projects-detail .project-description .project-tags li {
  padding: 10px 25px;
  background-color: #F4F4F4;
  margin-bottom: 5px;
}
.projects-detail .project-description .project-tags li i {
  font-size: 15px;
  margin-right: 10px;
}

/*=============================
13. Contact
=============================*/
.contact {
  padding: 4rem 0;
  background-image: url("../img/contact-banner.jpg");
  background-size: cover;
  text-align: center;
}
.contact h2 {
  color: #0698f1;
  margin-bottom: 25px;
}
.contact p {
  color: #D9D9D9;
}

.contact-page .contact-address {
  margin-top: 35px;
  list-style-type: none;
  padding: 0;
}
.contact-page .contact-address li {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
.contact-page .contact-address li i {
  width: 38px;
  font-size: 38px;
  color: #0698f1;
}
.contact-page .contact-address li .contact-address__detail h5 {
  line-height: 1;
}
.contact-page .contact-address li .contact-address__detail p {
  margin: 0;
}
.contact-page .contact-address li .contact-address__detail a {
  color: #2A2A2A;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.contact-page .contact-address li .contact-address__detail a:hover {
  color: #0698f1;
}

/*=============================
14. Footer
=============================*/
footer {
  padding-top: 3rem;
}
@media (min-width: 992px) {
  footer {
    padding-top: 6rem;
  }
}
footer .brand-logo {
  display: block;
  font-weight: 600;
  font-size: 26px;
  color: #0698f1;
  margin-bottom: 5px;
}
footer p {
  color: #747474;
}
footer .social-media {
  margin-top: 30px;
  list-style-type: none;
  padding: 0;
  display: flex;
  gap: 20px;
}
footer .social-media li {
  width: 27px;
  height: 27px;
  background-color: #B4B4B4;
  border-radius: 5px;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
footer .social-media li:hover {
  background-color: #0698f1;
}
footer .social-media li a {
  display: block;
  width: 100%;
  color: white;
  text-align: center;
}
footer .footer-title {
  font-size: 20px;
  font-weight: 500;
  color: #2A2A2A;
  margin-bottom: 20px;
}
footer .instagram-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}
footer .instagram-grid__item figure {
  border-radius: 5px;
  overflow: hidden;
}
footer .instagram-grid__item figure img {
  aspect-ratio: 1/1;
  width: 100%;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
footer .instagram-grid__item:hover img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
footer .footer-menu {
  list-style-type: none;
  padding: 0;
}
footer .footer-menu li {
  margin-bottom: 10px;
}
footer .footer-menu li a {
  color: #747474;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
footer .footer-menu li a:hover {
  color: #0698f1;
}
footer .copyright {
  margin-top: 2rem;
  border-top: 1px solid #D9D9D9;
  padding: 20px 0;
  font-size: 14px;
}
footer .copyright a {
  color: #2A2A2A;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
footer .copyright a:hover {
  color: #0698f1;
}
footer .copyright .gap {
  padding: 0 10px;
  color: #D9D9D9;
}

/*# sourceMappingURL=style.css.map */