/* =====================================================
   5BRANDS VIDEO STYLE GLASS FOOTER
   Shared site-wide footer (hybrid glass style)
===================================================== */

.hybrid-glass-footer,
.hybrid-glass-footer * {
  box-sizing: border-box;
}


/* =====================================================
   MAIN GLASS SURFACE
===================================================== */

.hybrid-glass-footer {
  position: relative;

  width: 100%;

  padding: 0 !important;

  color: #ffffff;

  background:
    linear-gradient(
      110deg,
      rgba(25, 20, 31, .82) 0%,
      rgba(44, 32, 46, .76) 38%,
      rgba(36, 31, 42, .74) 66%,
      rgba(23, 27, 35, .82) 100%
    ) !important;

  backdrop-filter:
    blur(22px)
    saturate(135%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(135%);

  border-top:
    1px solid rgba(255,255,255,.16);

  box-shadow:
    0 -12px 35px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.08);

  overflow: hidden;
}


/* Purple smoked tint */

.hybrid-glass-footer::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 13% 18%,
      rgba(141,0,141,.12),
      transparent 35%
    ),
    radial-gradient(
      circle at 82% 22%,
      rgba(244,99,32,.055),
      transparent 34%
    ),
    linear-gradient(
      120deg,
      rgba(255,255,255,.045),
      transparent 38%,
      rgba(255,255,255,.02)
    ) !important;
}


/* soft reflected glass light */

.hybrid-glass-footer::after {
  content: "";

  position: absolute;

  top: -110px;
  right: 7%;

  width: 500px;
  height: 200px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(255,255,255,.075),
      transparent 68%
    );

  filter: blur(18px);

  pointer-events: none;
}


.hybrid-glass-footer-inner {
  position: relative;
  z-index: 2;

  width: min(1500px, 92%) !important;

  margin: 0 auto;

  padding:
    22px
    0
    14px !important;
}


/* =====================================================
   LOGO LEFT / COMPANY CONTENT RIGHT
===================================================== */

.hybrid-footer-brand-row {
  display: grid;

  grid-template-columns:
    190px
    minmax(0,1fr);

  gap: 55px;

  align-items: center;

  padding-bottom:
    16px;

  border-bottom:
    1px solid rgba(255,255,255,.12);
}


.hybrid-footer-logo-wrap {
  display: flex;

  align-items: center;
  justify-content: flex-start;

  padding: 12px 18px;

  background: #ffffff;

  border-radius: 14px;

  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}


.hybrid-footer-logo {
  display: block;

  width: auto;
  height: auto;

  max-width: 175px;
  max-height: 88px;

  object-fit: contain;
}


.hybrid-glass-footer
.hybrid-footer-about {
  justify-self: end;

  max-width:
    720px !important;

  text-align:
    right;
}


.hybrid-glass-footer
.hybrid-footer-about h3 {
  margin:
    0
    0
    7px !important;

  color:
    #ffffff !important;

  font-size:
    22px !important;

  font-weight:
    600 !important;

  text-shadow:
    0 1px 7px rgba(0,0,0,.18);
}


.hybrid-glass-footer
.hybrid-footer-about p {
  margin: 0 !important;

  color:
    rgba(255,255,255,.78) !important;

  font-size:
    12.5px !important;

  line-height:
    1.55 !important;
}


/* =====================================================
   REMOVE NAVIGATION + OLD CAPABILITY ROW
===================================================== */

.hybrid-glass-footer
.hybrid-footer-nav,

.hybrid-glass-footer
.hybrid-footer-capabilities {
  display: none !important;
}


/* =====================================================
   SOCIALS + BUSINESS DETAILS
===================================================== */

.hybrid-glass-footer
.hybrid-footer-info-row {
  display: grid !important;

  grid-template-columns:
    auto
    minmax(0,1fr)
    auto !important;

  gap:
    34px !important;

  align-items:
    center !important;

  padding:
    14px
    0
    12px !important;
}


.hybrid-glass-footer
.hybrid-footer-socials {
  display: flex;

  align-items: center;

  gap:
    10px !important;
}


.hybrid-glass-footer
.hybrid-footer-socials a {
  width:
    31px !important;

  height:
    31px !important;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color:
    #ffffff !important;

  background:
    rgba(255,255,255,.12) !important;

  border:
    1px solid rgba(255,255,255,.16) !important;

  backdrop-filter:
    blur(10px);

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10);

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


.hybrid-glass-footer
.hybrid-footer-socials a:hover {
  transform:
    translateY(-3px);

  background:
    rgba(244,99,32,.88) !important;

  border-color:
    rgba(244,99,32,.90) !important;
}


.hybrid-glass-footer
.hybrid-footer-business-info {
  display: flex;

  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap:
    clamp(18px,2.4vw,38px) !important;
}


.hybrid-glass-footer
.hybrid-footer-business-info span {
  display: inline-flex;

  align-items: center;

  gap:
    7px;

  color:
    rgba(255,255,255,.82) !important;

  font-size:
    10.5px !important;

  font-weight:
    600;

  white-space:
    nowrap;

  text-shadow:
    0 1px 5px rgba(0,0,0,.22);
}


.hybrid-glass-footer
.hybrid-footer-business-info i {
  color:
    #ffffff !important;

  font-size:
    11px !important;
}


.hybrid-glass-footer
.hybrid-footer-region {
  color:
    rgba(255,255,255,.66) !important;

  font-size:
    10px !important;

  font-weight:
    600;

  white-space:
    nowrap;
}


/* =====================================================
   BOTTOM COPYRIGHT
===================================================== */

.hybrid-glass-footer
.hybrid-footer-bottomline {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap:
    20px;

  padding-top:
    11px !important;

  border-top:
    1px solid rgba(255,255,255,.10) !important;

  color:
    rgba(255,255,255,.52) !important;

  font-size:
    9px !important;

  letter-spacing:
    .25px;
}


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

@media screen and (max-width: 950px) {

  .hybrid-footer-brand-row {
    grid-template-columns:
      150px
      minmax(0,1fr);

    gap:
      32px;
  }


  .hybrid-footer-logo {
    max-width:
      145px;
  }


  .hybrid-glass-footer
  .hybrid-footer-info-row {
    grid-template-columns:
      1fr !important;

    gap:
      14px !important;
  }


  .hybrid-glass-footer
  .hybrid-footer-business-info {
    justify-content:
      flex-start;
  }

}


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

@media screen and (max-width: 650px) {

  .hybrid-glass-footer {
    backdrop-filter:
      blur(18px)
      saturate(130%);

    -webkit-backdrop-filter:
      blur(18px)
      saturate(130%);
  }


  .hybrid-glass-footer-inner {
    width:
      calc(100% - 30px) !important;

    padding:
      20px
      0
      13px !important;
  }


  .hybrid-footer-brand-row {
    grid-template-columns:
      1fr;

    gap:
      15px;

    padding-bottom:
      16px;
  }


  .hybrid-footer-logo {
    max-width:
      135px;

    max-height:
      72px;
  }


  .hybrid-glass-footer
  .hybrid-footer-about {
    justify-self:
      stretch;

    text-align:
      left;
  }


  .hybrid-glass-footer
  .hybrid-footer-about h3 {
    font-size:
      19px !important;
  }


  .hybrid-glass-footer
  .hybrid-footer-about p {
    font-size:
      12px !important;
  }


  .hybrid-glass-footer
  .hybrid-footer-business-info {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      9px !important;
  }


  .hybrid-glass-footer
  .hybrid-footer-region {
    white-space:
      normal;
  }


  .hybrid-glass-footer
  .hybrid-footer-bottomline {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      5px;
  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

  .hybrid-glass-footer
  .hybrid-footer-socials a {
    transition:
      none !important;
  }

}
