.elementor-1674 .elementor-element.elementor-element-37600d3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-2190283 *//* =========================================================
   SENTRIX PROJECT PAGE
========================================================= */

.stx-project-page,
.stx-project-page * {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}


.stx-project-page {
  --stx-blue: #0d5cab;
  --stx-blue-2: #1683d8;
  --stx-light-blue: #7fd3ff;

  --stx-navy: #071f3f;
  --stx-dark: #061a2f;

  --stx-text: #53677e;
  --stx-border: rgba(7,31,63,0.09);

  width: 100%;
}


.stx-project-container {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.stx-project-hero {
  /*
   * Replace only this URL with your hero image
   */
  --projects-hero-bg:
    url("PASTE-HERO-BACKGROUND-IMAGE-URL-HERE");

  position: relative;

  min-height: 380px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background-image:
    var(--projects-hero-bg);

  background-size: cover;

  background-position:
    center center;

  background-repeat: no-repeat;
}


.stx-project-hero-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(5,25,48,0.96) 0%,
      rgba(7,45,82,0.90) 42%,
      rgba(8,66,112,0.60) 70%,
      rgba(8,66,112,0.25) 100%
    );
}


.stx-project-hero .stx-project-container {
  position: relative;

  z-index: 2;
}


.stx-project-hero-content {
  max-width: 720px;

  padding:
    75px 0;
}


.stx-project-hero-label {
  display: inline-flex;

  margin-bottom: 15px;

  padding:
    8px 15px;

  border:
    1px solid
    rgba(255,255,255,0.16);

  border-radius:
    999px;

  color:
    #b9e8ff;

  background:
    rgba(255,255,255,0.08);

  backdrop-filter:
    blur(8px);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.stx-project-hero h1 {
  max-width:
    690px;

  margin:
    0 0 17px;

  color:
    #ffffff;

  font-size:
    clamp(38px,5vw,57px);

  font-weight:
    800;

  line-height:
    1.08;

  letter-spacing:
    -1.8px;
}


.stx-project-hero h1 span {
  color:
    #80d9ff;
}


.stx-project-hero p {
  max-width:
    650px;

  margin: 0;

  color:
    rgba(255,255,255,0.78);

  font-size:
    15px;

  line-height:
    1.8;
}


/* =========================================================
   PROJECTS SECTION
========================================================= */

.stx-projects-section {
  position: relative;

  padding:
    95px 0 110px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7fbff 100%
    );
}


/* =========================================================
   SECTION HEADER
========================================================= */

.stx-projects-header {
  margin-bottom:
    37px;

  display:
    grid;

  grid-template-columns:
    minmax(0,0.85fr)
    minmax(300px,0.65fr);

  align-items:
    end;

  gap:
    40px;
}


.stx-project-section-label {
  display:
    inline-block;

  margin-bottom:
    9px;

  color:
    var(--stx-blue);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.stx-projects-header h2 {
  margin: 0;

  color:
    var(--stx-navy);

  font-size:
    clamp(34px,4vw,48px);

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    -1.2px;
}


.stx-projects-header > p {
  margin: 0;

  color:
    var(--stx-text);

  font-size:
    13px;

  line-height:
    1.75;
}


/* =========================================================
   FILTER TABS
========================================================= */

.stx-project-tabs {
  width:
    fit-content;

  margin-bottom:
    35px;

  padding:
    5px;

  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  border:
    1px solid
    rgba(13,92,171,0.09);

  border-radius:
    12px;

  background:
    #ffffff;

  box-shadow:
    0 10px 30px
    rgba(7,31,63,0.05);
}


.stx-project-tab {
  min-height:
    42px;

  padding:
    9px 18px;

  border:
    0;

  border-radius:
    9px;

  color:
    #63768a;

  background:
    transparent;

  font-size:
    12px;

  font-weight:
    600;

  cursor:
    pointer;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}


.stx-project-tab:hover {
  color:
    var(--stx-blue);
}


.stx-project-tab.active {
  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--stx-blue),
      var(--stx-blue-2)
    );

  box-shadow:
    0 7px 18px
    rgba(13,92,171,0.20);
}


/* =========================================================
   PROJECT GRID
========================================================= */

.stx-project-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    23px;
}


/* =========================================================
   PROJECT CARD
========================================================= */

.stx-project-card {
  position:
    relative;

  min-width: 0;

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  border:
    1px solid
    var(--stx-border);

  border-radius:
    18px;

  background:
    #ffffff;

  box-shadow:
    0 15px 45px
    rgba(7,31,63,0.055);

  animation:
    stxProjectReveal
    0.45s
    ease both;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}


.stx-project-card:hover {
  transform:
    translateY(-7px);

  border-color:
    rgba(13,92,171,0.18);

  box-shadow:
    0 25px 60px
    rgba(7,31,63,0.10);
}


/* =========================================================
   PROJECT IMAGE
========================================================= */

.stx-project-card-image {
  position:
    relative;

  aspect-ratio:
    16 / 10;

  overflow:
    hidden;

  background:
    #eaf2f9;
}


.stx-project-card-image img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  transition:
    transform 0.55s ease;
}


.stx-project-card:hover
.stx-project-card-image img {
  transform:
    scale(1.055);
}


/* CATEGORY */

.stx-project-category {
  position:
    absolute;

  left:
    15px;

  top:
    15px;

  padding:
    7px 11px;

  border:
    1px solid
    rgba(255,255,255,0.18);

  border-radius:
    999px;

  color:
    #ffffff;

  background:
    rgba(5,31,59,0.72);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.stx-project-card-content {
  flex:
    1;

  padding:
    22px 21px 19px;

  display:
    flex;

  flex-direction:
    column;
}


.stx-project-card h3 {
  margin:
    0 0 9px;

  color:
    var(--stx-navy);

  font-size:
    20px;

  font-weight:
    700;

  line-height:
    1.3;

  letter-spacing:
    -0.3px;
}


.stx-project-card-description {
  margin:
    0;

  color:
    var(--stx-text);

  font-size:
    12.5px;

  line-height:
    1.72;

  display:
    -webkit-box;

  -webkit-line-clamp:
    3;

  -webkit-box-orient:
    vertical;

  overflow:
    hidden;
}


/* =========================================================
   CARD FOOTER
========================================================= */

.stx-project-card-footer {
  margin-top:
    auto;

  padding-top:
    20px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;
}


/* VIEW BUTTON */

.stx-project-view-btn {
  min-height:
    40px;

  padding:
    9px 15px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border-radius:
    8px;

  color:
    #ffffff !important;

  background:
    var(--stx-blue);

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1;

  text-decoration:
    none !important;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}


.stx-project-view-btn svg {
  width:
    15px;

  height:
    15px;

  transition:
    transform 0.25s ease;
}


.stx-project-view-btn:hover {
  background:
    var(--stx-blue-2);

  transform:
    translateY(-2px);
}


.stx-project-view-btn:hover svg {
  transform:
    translateX(3px);
}


/* =========================================================
   LIKE BUTTON
========================================================= */

.stx-project-like {
  min-height:
    40px;

  padding:
    8px 11px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  border:
    1px solid
    rgba(7,31,63,0.08);

  border-radius:
    9px;

  color:
    #748496;

  background:
    #f8fafc;

  cursor:
    pointer;

  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}


.stx-project-like:hover {
  transform:
    translateY(-2px);

  color:
    #e44b62;

  border-color:
    rgba(228,75,98,0.18);

  background:
    #fff7f8;
}


.stx-project-like svg {
  width:
    18px;

  height:
    18px;

  fill:
    transparent;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  transition:
    fill 0.25s ease,
    transform 0.25s ease;
}


.stx-project-like.liked {
  color:
    #e44b62;

  border-color:
    rgba(228,75,98,0.16);

  background:
    #fff5f7;
}


.stx-project-like.liked svg {
  fill:
    currentColor;

  transform:
    scale(1.08);
}


.stx-project-like-count {
  min-width:
    19px;

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1;
}


/* =========================================================
   CARD REVEAL
========================================================= */

@keyframes stxProjectReveal {

  from {
    opacity:
      0;

    transform:
      translateY(12px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

  .stx-project-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .stx-projects-header {
    grid-template-columns:
      1fr;

    gap:
      15px;
  }


  .stx-projects-header > p {
    max-width:
      650px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .stx-project-container {
    width:
      calc(100% - 30px);
  }


  .stx-project-hero {
    min-height:
      330px;

    background-position:
      65% center;
  }


  .stx-project-hero-content {
    padding:
      65px 0;
  }


  .stx-project-hero h1 {
    font-size:
      36px;

    letter-spacing:
      -1px;
  }


  .stx-project-hero p {
    font-size:
      13.5px;

    line-height:
      1.7;
  }


  .stx-projects-section {
    padding:
      70px 0 80px;
  }


  .stx-projects-header {
    margin-bottom:
      27px;
  }


  .stx-projects-header h2 {
    font-size:
      33px;
  }


  .stx-project-tabs {
    width:
      100%;

    overflow-x:
      auto;

    justify-content:
      flex-start;

    scrollbar-width:
      none;
  }


  .stx-project-tabs::-webkit-scrollbar {
    display:
      none;
  }


  .stx-project-tab {
    flex:
      0 0 auto;

    white-space:
      nowrap;
  }


  .stx-project-grid {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .stx-project-hero {
    min-height:
      310px;
  }


  .stx-project-hero h1 {
    font-size:
      31px;
  }


  .stx-project-card-content {
    padding:
      19px 17px 17px;
  }


  .stx-project-card h3 {
    font-size:
      18px;
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.stx-project-tab:focus-visible,
.stx-project-like:focus-visible,
.stx-project-view-btn:focus-visible {
  outline:
    3px solid
    rgba(22,131,216,0.30);

  outline-offset:
    3px;
}/* End custom CSS */