.elementor-5044 .elementor-element.elementor-element-3e6cbbc{--spacer-size:81px;}.elementor-5044 .elementor-element.elementor-element-2c0c99cb{--display:flex;}.elementor-5044 .elementor-element.elementor-element-5fcd0e27{--display:grid;--min-height:0px;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:center;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}@media(max-width:1024px){.elementor-5044 .elementor-element.elementor-element-5fcd0e27{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-5044 .elementor-element.elementor-element-5fcd0e27{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS */<style>
/* ==============================
   Construction Capabilities Section
============================== */
 
.cr-capabilities-light{
  position: relative;
  overflow: hidden;
  background: #F5F1EA !important;
  padding: 80px 60px 90px;
}
 
.cr-capabilities-inner{
  position: relative;
  z-index: 2;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
 
/* Grid layout */
.cr-capability-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  justify-content: center;
  align-items: stretch;
  margin-top: 34px;
}
 
/* Capability item */
.cr-capability-item{
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 200px;
  padding: 22px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.74);
  border: 1px solid #E8E3DA;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(6, 23, 71, 0.07);
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  cursor: pointer;
  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}
 
/* Bottom gold line */
.cr-capability-item::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background: #A98A57;
  transition: width .35s ease;
}
 
/* Icon */
.cr-capability-icon{
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  border-radius: 15px;
  background: rgba(96,208,250,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    width .35s ease,
    height .35s ease,
    transform .35s ease,
    background .35s ease,
    border-radius .35s ease;
}
 
.cr-capability-icon img{
  width: 32px;
  height: 32px;
  object-fit: contain;
  transition: width .35s ease, height .35s ease;
}
 
/* Title */
.cr-capability-title,
.cr-capability-title .elementor-heading-title{
  color: #061747 !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  transition: color .35s ease, transform .35s ease;
}
 
/* Description */
.cr-capability-desc{
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition:
    opacity .35s ease,
    max-height .35s ease,
    transform .35s ease,
    margin .35s ease;
}
 
.cr-capability-desc,
.cr-capability-desc .elementor-widget-container,
.cr-capability-desc p{
  margin: 0 !important;
  color: #5A6572 !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
 
.cr-capability-desc p:last-child{
  margin-bottom: 0 !important;
}
 
/* ==============================
   Hover / Tap Effect
============================== */
 
.cr-capability-item:hover,
.cr-capability-item:active,
.cr-capability-item:focus-within{
  transform: translateY(-5px);
  background: #061747;
  border-color: #CBB89D;
  box-shadow: 0 18px 42px rgba(6, 23, 71, 0.20);
}
 
.cr-capability-item:hover::after,
.cr-capability-item:active::after,
.cr-capability-item:focus-within::after{
  width: 100%;
}
 
.cr-capability-item:hover .cr-capability-icon,
.cr-capability-item:active .cr-capability-icon,
.cr-capability-item:focus-within .cr-capability-icon{
  width: 42px;
  height: 42px;
  transform: translateY(-6px);
  background: rgba(96,208,250,0.18);
  border-radius: 13px;
}
 
.cr-capability-item:hover .cr-capability-icon img,
.cr-capability-item:active .cr-capability-icon img,
.cr-capability-item:focus-within .cr-capability-icon img{
  width: 26px;
  height: 26px;
}
 
.cr-capability-item:hover .cr-capability-title,
.cr-capability-item:hover .cr-capability-title .elementor-heading-title,
.cr-capability-item:active .cr-capability-title,
.cr-capability-item:active .cr-capability-title .elementor-heading-title,
.cr-capability-item:focus-within .cr-capability-title,
.cr-capability-item:focus-within .cr-capability-title .elementor-heading-title{
  color: #ffffff !important;
  transform: translateY(-3px);
}
 
.cr-capability-item:hover .cr-capability-desc,
.cr-capability-item:active .cr-capability-desc,
.cr-capability-item:focus-within .cr-capability-desc{
  opacity: 1;
  max-height: 90px;
  transform: translateY(0);
  margin-top: 8px !important;
}
 
.cr-capability-item:hover .cr-capability-desc,
.cr-capability-item:hover .cr-capability-desc .elementor-widget-container,
.cr-capability-item:hover .cr-capability-desc p,
.cr-capability-item:active .cr-capability-desc,
.cr-capability-item:active .cr-capability-desc .elementor-widget-container,
.cr-capability-item:active .cr-capability-desc p,
.cr-capability-item:focus-within .cr-capability-desc,
.cr-capability-item:focus-within .cr-capability-desc .elementor-widget-container,
.cr-capability-item:focus-within .cr-capability-desc p{
  color: rgba(255,255,255,0.78) !important;
}
 
/* ==============================
   Tablet
============================== */
 
@media (max-width: 1024px){
 
  .cr-capabilities-light{
    padding: 76px 40px 86px;
  }
 
  .cr-capability-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
  }
 
  .cr-capability-item{
    min-height: 210px;
  }
}
 
/* ==============================
   Mobile
============================== */
 
@media (max-width: 767px){
 
  .cr-capabilities-light{
    padding: 66px 24px 76px;
  }
 
  .cr-capabilities-inner{
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
  }
 
  .cr-capability-grid{
    grid-template-columns: 1fr !important;
    gap: 18px;
    width: 100% !important;
    max-width: 360px !important;
    margin: 30px auto 0 !important;
    justify-items: center !important;
  }
 
  .cr-capability-item{
    width: 100% !important;
    max-width: 360px !important;
    min-height: 150px !important;
    padding: 24px 22px 26px !important;
    border-radius: 22px;
    align-items: center !important;
    text-align: center !important;
  }
 
  .cr-capability-icon{
    width: 54px;
    height: 54px;
    margin: 0 auto 16px !important;
  }
 
  .cr-capability-icon img{
    width: 34px;
    height: 34px;
  }
 
  .cr-capability-title,
  .cr-capability-title .elementor-heading-title{
    font-size: 16.5px !important;
    text-align: center !important;
  }
 
  .cr-capability-desc,
  .cr-capability-desc .elementor-widget-container,
  .cr-capability-desc p{
    font-size: 13px !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }
 
  .cr-capability-item:hover .cr-capability-icon,
  .cr-capability-item:active .cr-capability-icon,
  .cr-capability-item:focus-within .cr-capability-icon{
    transform: translateY(-4px);
  }
 
  .cr-capability-item:hover .cr-capability-desc,
  .cr-capability-item:active .cr-capability-desc,
  .cr-capability-item:focus-within .cr-capability-desc{
    max-height: 120px;
  }
}
<\/style>/* End custom CSS */