/* @import url('https://fonts.googleapis.com/css2?family=Aguafina+Script&display=swap'); */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
.font-12{font-size: 12px !important;}
.font-13{font-size: 13px !important;}
.font-14{font-size: 14px !important;}
.font-15{font-size: 15px !important;}
.font-16{font-size: 16px !important;}
.text-uppercase{text-transform: uppercase !important;}
.text-red{ color: var(--color-red) !important; }
.text-blue{ color: var(--color-blue) !important; }
.w-80{ width: 80% !important; }
.w-90{ width: 90% !important; }
.max-w-400{ max-width: 400px !important;}
.max-w-500{ max-width: 500px !important;}
.max-w-600{ max-width: 600px !important;}
.max-w-700{ max-width: 700px !important;}
.max-w-800{ max-width: 800px !important;}
.max-w-900{ max-width: 900px !important;}
.max-w-1000{ max-width: 1000px !important;}
.min-w-max{ min-width: max-content !important;}
.d-grid{ display: grid !important; }
.rounded-xl{ border-radius: 30px; }
.top-0{ top: 0 !important; }
.object-cover{ object-fit: cover !important; }
.object-contain{ object-fit: contain !important; }
.bg-blue{ background-color: var(--color-blue) !important;}
.bg-red{ background-color: var(--color-red) !important;}
.ratio-1{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
/* @others */
body, a,
h1, h2, h3, h4, h5, h6{
    font-family: Arial, Helvetica, sans-serif;
}
.map-box{
    background-color: #f6f5f5;
}
.breadcrumb-item+.breadcrumb-item::before{
    content: '/';
}
.banner-wrapper .breadcrumb-item.active{
    color: #fff !important;
}
.banner-wrapper .breadcrumb-item a:hover,
.banner-wrapper .breadcrumb-item a:active{
    color: #fff;
    text-decoration: underline;
}
.header-wrapper .logo-wrapper {
    min-width: min-content;
    width: unset;
}
.header-wrapper .logo-wrapper a{
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
}
.header-wrapper .logo-wrapper a img{
    height: 60px;
    width: 60px;
}
.header-wrapper .logo-wrapper a h5{
    font-size: 17px;
    line-height: 120%;
    min-width: max-content;
    letter-spacing: -0.4px;
    text-transform: uppercase;
    /* color: #041283; */
    color: #fff;
}
.header-wrapper .contact-info .contact-item{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 20vw;
}
.top-menu-right .social-icons{
    display: flex;
    gap: 15px;
}
.header-wrapper .social-icons .social-link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 !important;
}
@media(max-width: 1400px){
    .header-wrapper .contact-info .contact-item{
        max-width: 17vw;
    }
    .header-wrapper .logo-wrapper a{
        padding: 0 15px;
    }
}
@media(max-width: 764px){
    .header-wrapper .logo-wrapper{
        padding: 20px 5px;
        justify-content: left;
        width: 100%;
    }
    .header-wrapper .logo-wrapper a h5{
        font-size: 16px;
    }
    #hamburger {
        color: var(--bs-white);
        background: var(--color-red);
    }
}
@media(max-width: 480px){
    .header-wrapper .logo-wrapper a{
        padding: 0 5px;
    }
    .header-wrapper .logo-wrapper a img{
        width: 50px;
        height: 50px;
    }
    .header-wrapper .logo-wrapper a h5{
        font-size: 15px;
    }
}
@media(max-width: 367px){
    .header-wrapper .logo-wrapper a h5{
        font-size: 14px;
    }
}
.header-wrapper .main-menu{
    padding: 0;
    padding-left: calc(30px + 50 * (100vw - 320px) / 1600);
    padding-right: calc(30px + 50 * (100vw - 320px) / 1600);
    height: 100%;
    min-height: 65px;
}
.header-wrapper .contact-info .contact-item .item-text{
    color: #5f6168;
    font-size: unset;
}
.header-wrapper .contact-info .contact-item a.item-text:hover,
.header-wrapper .contact-info .contact-item a.item-text:active,
.header-wrapper .contact-info .contact-item:hover .item-icon,
.header-wrapper .contact-info .contact-item:active .item-icon{
    color: var(--color-red);
}
.slider-box-line{
    background-image: url('../assets/img/illustration/line.svg');
}
@media (min-width: 1365px) {
    .about-wrapper .container{
        max-width: 1360px !important;
    }
}
.project-details-wrapper{
    overflow: unset;
    margin-right: 70px;
}
@media (max-width: 764px) {
    .project-details-wrapper{
        margin-right: 0;
    }
    .about-wrapper .right-content {
        padding-top: 0 !important;
        padding-bottom: 40px;
    }
    .about-wrapper .about-order-1{
        order: 1;
    }
    .about-wrapper .about-order-2{
        order: 2;
    }
}
.contact-wrapper .contact-profile .profile-avatar {
    transform: scaleX(1.15);
    width: 50px;
    min-width: 30px;
    height: 60px;
    border-radius: 10px;
    margin-right: 15px;
    object-fit: contain;
    margin-bottom: 10px;
    background-size: contain;
}
.contact-link{
    display: flex;
    padding-top: 10px;
    gap: 6px;
}
.contact-link a{
    width: 35px;
    height: 35px;
    object-fit: contain;
}
.footer-wrapper .footer-bottom-text{
    border-top: 1px solid #143568;
    padding: 20px 0px;
}
.footer-wrapper .logo-wrapper{
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #143568;
}
.footer-wrapper .logo-wrapper img{
    width: 65px;
    height: 65px;
}
.footer-wrapper .logo-wrapper .logo-title{
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    line-height: 140%;
    letter-spacing: -0.4px;
    word-break: break-all;
}
.footer-wrapper .logo-wrapper .logo-title span{
    font-weight: 600;
}
@media(max-width: 564px){
    .footer-wrapper .logo-wrapper img{
        width: 50px;
        height: 50px;
    }
    .footer-wrapper .logo-wrapper .logo-title{
        font-size: 13px;
    }
}
@media(max-width: 392px){
    .footer-wrapper .logo-wrapper .logo-title{
        font-size: 12px;
    }
}

/******* Services *******/
.services-wrapper {
    overflow: hidden;
  }
  .bg-services-red,
  .bg-services-blue{
      position: relative;
  }
  .services-center{
      display: flex;
      width: 100%;
      max-width: 1180px;
      margin: auto;
  }
  .services-images{
      width: 50%;
      z-index: -1;
  }
  .service-images-move{
      position: absolute;
      display: flex;
      z-index: 1;
      width: 50%;
      height: 100%;
  }
  .services-images img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: inherit;
      transform: scale(1.08);
  }
  .services-item{
      display: grid;
      width: 50%;
      max-width: 700px;
      font-size: 16px;
      letter-spacing: -0.2px;
      color: #f2f2f2;
      line-height: 130%;
      padding: 20px 40px;
      text-shadow: 0 0 3px #0002;
  }
  .services-item h3{
      color: #fff;
      margin-bottom: 5px;
  }
  .services-item h5{
      color: #fff;
  }
  .services-item p{
      margin-bottom: 5px;
  }
  .services-item ul li{
    margin-bottom: 4px;
  }
  .services-item ul li:before{
      content: "\f061";
      font-family: "Font Awesome 5 Pro";
      margin-right: 2px;
  }
  .bg-side-left .services-images{ order: 2; }
  .bg-side-left .services-item{ order: 1; }
  .bg-side-right .services-images{ order: 1; }
  .bg-side-right .services-item{ order: 2; }
  .bg-services-red:before,
  .bg-services-blue:before {
      content: '';
      position: absolute;
      height: 100%;
      width: 80%;
      background-size: 50%;
      z-index: -1;
  }
  .bg-services-red:before{background-color: var(--color-red);}
  .bg-services-blue:before{background-color: var(--color-blue);}
  .bg-side-left:before{left: -20%; transform: skewX(30deg);}
  .bg-side-right:before{right: -20%; transform: skewX(-30deg);}
  .bg-side-left .service-images-move{ right: 0; object-position: right; transform: translateX(-4%);}
  .bg-side-right .service-images-move{ left: 0; object-position: left; transform: translateX(4%);}
  .services-button{
      margin: auto;
      margin-top: 15px;
      margin-bottom: 5px;
  }
  .services-button a{
      font-size: 14px;
      color: #fff;
      text-transform: uppercase;
      padding: 10px 30px;
      transition: all 0.4s ease;
      font-weight: 700;
  }
  .bg-services-red .services-button a{background-color: var(--color-blue);}
  .bg-services-blue .services-button a{background-color: var(--color-red);}
  .services-button a:hover,
  .services-button a:active{
      background-color: #fff !important;
  }
  .bg-services-red .services-button a:hover,
  .bg-services-red .services-button a:active{color: var(--color-red);}
  .bg-services-blue .services-button a:hover,
  .bg-services-blue .services-button a:active{color: var(--color-blue);}
  .object-left{object-position: left !important;}
  .object-center{object-position: center !important;}
  .object-right{object-position: right !important;}
  .object-20{object-position: 20% !important;}
  .object-30{object-position: 30% !important;}
  .object-40{object-position: 40% !important;}
  .object-60{object-position: 60% !important;}
  .object-70{object-position: 70% !important;}
  .object-80{object-position: 80% !important;}
  @media(max-width: 1240px){
      .services-images img{transform: scale(1.05);}
      .services-item{font-size: 15px;}
      .bg-side-left .service-images-move{transform: translateX(-2%);}
      .bg-side-right .service-images-move{transform: translateX(2%);}
  }
  @media(max-width: 991px){
      .services-images img{transform: scale(1);}
      .services-item h3{font-size: 22px;}
      .services-item h5{font-size: 17px;}
      .bg-side-left .service-images-move{transform: unset;}
      .bg-side-right .service-images-move{transform: unset;}
  }
  @media(max-width: 764px){
      .services-item{width: 60%;}
      .services-images,
      .service-images-move{
          width: 42%;
      }
      .bg-services-red:before,
      .bg-services-blue:before{
          width: 90%;
      }
      .services-item{
          font-size: 14px;
          padding: 15px;
      }
      .services-item h3{
        font-size: 18px;
        line-height: 130%;
        margin: 10px 0;
      }
      .services-item h5{font-size: 15px;}
      .bg-services-blue .services-button a{font-size: 13px;}
      .bg-side-left:before{transform: skewX(25deg);}
      .bg-side-right:before{transform: skewX(-25deg);}
  }
  @media(max-width: 575px){
      .services-item{width: 80%;}
      .services-images,
      .service-images-move{
          width: 36%;
      }
      .bg-services-red:before,
      .bg-services-blue:before{
          width: 102%;
      }
      .services-item{
          padding: 5px 10px;
          line-height: 120%;
      }
      .services-images img{
          transform: scale(1.05);
      }
      .bg-side-left:before{transform: skewX(10deg);}
      .bg-side-right:before{transform: skewX(-10deg);}
      .services-item p{margin-bottom: 0;}
      .services-button{ margin-top: 10px;}
  }
  @media(max-width: 380px){
      .services-item{
          font-size: 13px;
      }
      .services-images img{
          transform: scale(1.1);
      }
  }

.progress-wrap{
    display: none !important;
    opacity: 0 !important;
}
.whatsapp-popup{
    position: fixed;
    bottom: calc(12px + 8 * (100vw - 320px) / 1600);
    right: calc(6px + 14 * (100vw - 320px) / 1600);
    animation: fadeInPopup 3s;
    animation-fill-mode: forwards;
    z-index: 99999;
}
.whatsapp-popup a{
    position: relative;
    display: flex;
    width: 80px;
    height: 80px;
    background: url(../images/whatsapp.png) no-repeat center;
    background-size: contain;
}
@keyframes fadeInPopup {
    0% {opacity: 0; transform: translateX(100px);}
    60% {opacity: 0; transform: translateX(100px);}
    100% {opacity: 1; transform: translateX(0px);}
}

.banner-wrapper{
    background:url(../images/bg-banner.jpg) no-repeat;
    background-position: top center;
    background-size: cover;
    min-height: calc(190px + 110 * (100vw - 320px) / 1600);
}
.banner-wrapper .banner-content{
    padding-top: calc(40px + 90 * (100vw - 320px) / 1600);
}
.banner-wrapper .section-head .heading-bg{
    color: #94a6c41f;
}

.services-outer{
    display: block;
    max-width: 800px;
    margin: auto;
}
.services-group .row > div{
    background-image: url(../assets/img/illustration/line.svg);
    background-position: center;
}
.services-main-item{
    padding: 35px 15px;
}
.services-main-item img{
    position: relative;
    width: 100%;
    height: calc(250px + 200 * (100vw - 320px) / 1600);
    object-fit: cover;
    margin-bottom: 25px;
}
.services-main-item h4{
    font-size: calc(20px + 12 * (100vw - 320px) / 1600);
    color: #fff;
    margin-bottom: 10px;
}
.services-main-item p{
    font-size: calc(14px + 2 * (100vw - 320px) / 1600);
    color: #fff !important;
    line-height: 150%;
    margin-bottom: 45px;
}
.services-group .row > div.bg-red .services-main-item .button{
    background-color: var(--color-blue);
}
.services-group .row > div.bg-blue .services-main-item .button{
    background-color: var(--color-red);
}
.services-main-item .button{
    padding-top: 10px;
    padding-bottom: 10px;
}
@media(max-width: 764px){
    .services-main-item{
        padding: 15px 5px;
    }
}
.project-wrapper .project-brands{
    padding-left: 0;
    padding-right: 0;
}
.project-wrapper .project-brands .slider-item {
    height: calc(100px + 30 * (100vw - 320px) / 1600);
}
.accordion-button:focus{
    border-color: unset !important;
    box-shadow: unset !important;
    border: none !important;
}
.accordion .accordion-item:nth-child(odd) .accordion-button:not(.collapsed){
    background-color: var(--color-blue);
}