@charset "UTF-8";
/*
Theme Name: TegraForge Tech Theme
Theme URI: www.tegraforgetheme.com
Author: Ernesto Castillo
Author URI: www.tegraforgetheme.com
Description: Wordpress Theme for TegraForge Tech Website
Version: 1
*/

/* Basic Styles */
@import url("https://fonts.googleapis.com/css2?family=Spline+Sans+Mono:ital,wght@0,300..700;1,300..700&display=swap");
@import url(assets/web/assets/mobirise-icons2/mobirise2.css);
@import url(assets/bootstrap/css/bootstrap.min.css);
@import url(assets/animatecss/animate.css);
@import url(assets/dropdown/css/style.css);
@import url(assets/socicon/css/styles.css);
@import url(assets/theme/css/style.css);
@import url(assets/mobirise/css/mbr-additional.css?v=xlRXyM);

:root {
  --tft-blue: #0597ff;
  --tft-orange: #f8ba16;
  --tft-dark: #090f10;

  --header-top-value: 64px;
}

body {
  color: #fff;
  font-family: "Spline Sans Mono", monospace !important;
  background-color: var(--tft-dark);
}

.tft-top-p {
  padding-top: var(--header-top-value);
}

.no-padding-horz {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.no-padding-vert {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.mbr-section-subtitle {
  font-weight: bolder;
}

header {
  .navbar {
    .navbar-collapse {
      justify-content: center !important;
      padding: 0 !important;
    }
  }
}

/* Main Menu */
#main-menu {
  overflow: hidden;
  #menu-main-menu {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
    display: flex;
    gap: 1em;
  }

  /* Submenu */
  .nav-item {
    &.has-submenu {
      position: relative;
      &:before {
        content: "";
        display: block;
        z-index: 1;
        width: 100%;
        height: 0;
        top: 0;
        left: 0;
        background-color: var(--tft-orange);
      }

      & > a {
        position: relative;
        z-index: 2;
        gap: 8px;
        &:after {
          content: "";
          display: block;
          width: 8px;
          height: 8px;
          border-right: #fff solid 1px;
          border-bottom: #fff solid 1px;
          transform: rotate(45deg);
          align-items: center;
          position: relative;
          top: -3px;
        }
        &:hover {
          &:after {
            border-color: var(--tft-orange);
          }
        }
      }
      &:hover {
        & > a {
          color: var(--tft-orange) !important;
          &:after {
            border-color: var(--tft-orange);
          }
        }
        .submenu {
          height: 48px;
          opacity: 1;
          overflow: visible;
        }
      }
      .submenu {
        transition-property: height, opacity;
        transition-duration: 0.25s;
        transition-timing-function: ease-out;
        transition-delay: 1s;
        position: fixed;
        top: var(--header-top-value);
        width: 100%;
        left: 0;
        height: 0;
        opacity: 0;
        overflow: hidden;
        background-color: var(--tft-dark);
        border-top: var(--tft-orange) solid 1px;
        border-bottom: var(--tft-orange) solid 1px;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        article {
          position: relative;
          width: 100%;
          box-sizing: border-box;
          h6 {
            transition-property: background-color color;
            transition-duration: 0.25s;
            transition-timing-function: ease-out;
            cursor: pointer;
            padding: 16px 24px;
            text-align: center;
            margin-bottom: 0 !important;
          }
          & > .content {
            position: absolute;
            top: 100%;
            left: 0;
            border-right: var(--tft-orange) solid 1px;
            border-bottom: var(--tft-orange) solid 1px;
            border-left: var(--tft-orange) solid 1px;
            background-color: var(--tft-dark);
            height: 0;
            overflow: hidden;
            box-sizing: border-box;
            .info {
              padding: 24px 16px 0 16px;
              text-align: center;
              h3,
              p {
                line-height: 1.25em;
              }
              h3 {
                color: var(--tft-orange);
                font-size: large;
              }
            }
            nav {
              ul {
                list-style: none;
                padding: 0 !important;
                li {
                  &:last-child {
                    border-bottom: none;
                  }
                  a {
                    transition-property: background-color color;
                    transition-duration: 0.25s;
                    transition-timing-function: ease-out;
                    display: block;
                    font-size: medium;
                    padding: 16px;
                    text-align: center;
                    &:hover {
                      background-color: var(--tft-orange);
                      color: var(--tft-dark);
                    }
                  }
                }
              }
            }
          }
          &:hover {
            h6 {
              background-color: var(--tft-orange);
              color: var(--tft-dark);
            }
            & > .content {
              height: fit-content;
            }
          }
        }
      }
    }
  }
}

/* How It Works */
article.item {
  position: relative;
  .item-wrapper {
    /* position: absolute !important; */
  }
}

.partners {
  .partners-links {
    width: 100vw;
    overflow: hidden !important;
    h2 {
      font-size: 3em;
      padding: 1em 1em 0.5em 1em;
      margin-bottom: 0.25em;
      font-weight: bold;
      text-transform: uppercase;
      color: var(--tft-orange);
      text-align: center;
    }
    .widget_media_gallery {
      overflow: hidden;
      .partners-links-lists {
        display: flex;
        align-items: center;
        --gap: 2em;
        ul {
          list-style: none;
          display: grid !important;
          grid-auto-flow: column;
          grid-auto-columns: 15em;
          justify-items: stretch;
          gap: calc(var(--gap) * 3);
          animation: scroll 20s linear infinite;
          li {
            display: flex;
            width: auto;
            height: 10vh;
            img {
              object-fit: contain;
            }
          }
        }
      }
    }
  }
}

@keyframes scroll {
  to {
    translate: calc(-10 * 15em);
  }
}

.tft-promo {
  h2 {
    text-align: center !important;
  }
}

.gradient-fx {
  color: var(--tft-blue);
  background-image: linear-gradient(315deg, currentColor, #f8ba16) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Home Page */
.home {
  main {
    background-color: var(--tft-dark);
    aspect-ratio: 16/6;
    background-position: center;
    background-size: cover;
    position: relative;
    .tft-slogan {
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: var(--tft-dark);
      padding: 1em 2em 1em 1em;
      h2 {
        color: var(--tft-orange);
      }
    }
  }
  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h2 {
      font-weight: bolder;
      font-size: 6em;
      /* text-transform: uppercase; */
    }
  }
  .item-wrapper {
    position: relative;
    padding-bottom: 5rem;
    .mbr-section-btn {
      position: absolute;
      padding: 0 0 2rem 2rem;
      bottom: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
    }
  }
  .key-services {
    .card {
      transition-property: background-color;
      transition-duration: 0.5s;
      .card-wrap {
        .card-text-wrap {
          .card-title. .card-text {
            color: #fff !important;
          }
        }
      }
      &:hover {
        background-color: var(--tft-orange) !important;
        .card-wrap {
          .card-text-wrap {
          }
          .card-label-container {
            background-color: var(--tft-dark) !important;
            a {
              color: var(--tft-orange) !important;
            }
          }
        }
      }
    }
  }
}

.tft-excerpt {
  p {
    font-size: 1em !important;
    line-height: 1em !important;
  }
}

.tft-about-us-excerpt {
  font-size: 1.75em;
  margin-top: 1em;
  padding-bottom: 1em;
}

.tft-service-title {
  font-size: 5em;
  margin-top: 0.5em;
  border-bottom: var(--tft-orange) solid 1px;
  & + .tft-excerpt {
    margin-top: 2em;
    width: 70%;
  }
}

.how-it-works {
  .card-text-wrap {
    h4 {
      color: var(--tft-orange) !important;
      text-transform: uppercase !important;
      font-weight: bolder !important;
      font-size: 2em;
    }
    .mbr-section-btn {
      padding: 0 !important;
      .btn {
        box-sizing: border-box;
      }
    }
  }
}

.key-content {
  wdith: 60%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  .main-text {
    max-width: 100% !important;
  }
  .tft-content {
    h3 {
      margin-top: 0 !important;
    }
    ul {
      list-style: none;
      padding: 0 !important;
      li {
        border-bottom: var(--tft-orange) solid 1px;
        padding: 1em;
        &:last-of-type {
          border-bottom: none;
        }
      }
    }
  }
}

/* Post Type Selector Widget */
.services {
  border-top: var(--tft-orange) solid 1px;
  border-bottom: var(--tft-orange) solid 1px;
  background-color: var(--tft-dark);
  margin-bottom: 56px;
  .tft-services-content {
    display: block;
    & > h4 {
      padding: 1em 1em 0.5em 1em;
      font-size: 4rem;
      text-transform: uppercase;
      font-weight: bold;
      color: var(--tft-blue);
      background-image: linear-gradient(
        315deg,
        currentColor,
        #fcdb42
      ) !important;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .tft-services-wrapper {
      background-color: transparent !important;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(640px, 1fr));
      grid-template-rows: 1fr auto;
      .item {
        position: relative;
        width: 100% !important;
        grid-rowd: 2/3;
        border: var(--tft-orange) solid 1px;
        .item-wrapper {
          padding-bottom: 0;
          .item-img {
            background-color: #333;
            aspect-ratio: 16/7;
            width: 100%;
            height: auto;
            img {
              object-fit: cover;
              height: 100%;
            }
          }
          .tft-permalink {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 1em;
            a.btn {
              margin: 0 !important;
            }
          }
          nav {
            ul {
              list-style: none;
              padding: 0;
              margin-bottom: 0;
              li {
                a {
                  padding: 1em 2em;
                  display: block;
                  transition-property: background-color color;
                  transition-duration: 0.25s;
                  transition-timing-function: ease-out;
                  &:hover {
                    background-color: var(--tft-orange);
                    color: var(--tft-dark);
                  }
                }
              }
            }
          }
          h5 {
            text-transform: uppercase;
            font-weight: bold;
            font-size: 2rem !important;
            color: var(--tft-orange);
          }
        }
        &:before,
        &:after {
          display: none;
        }
      }
    }
  }
}

.single-service {
  .tft-header {
    box-sizing: border-box;
    border-bottom: var(--tft-orange) solid 1px;
    width: 100%;
    aspect-ratio: 16/5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 64px !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 50%;
      z-index: 1;
      background-image: linear-gradient(
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.75),
        rgba(0, 0, 0, 1)
      );
    }
    h2 {
      border-bottom: none;
      z-index: 2;
      position: relative;
    }
  }
  .tft-service-content {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr);
    gap: 32px;
    padding: 32px;
    .tft-excerpt {
      grid-column: 1/5;
      padding: 24px;
      font-size: xx-large;
    }
    .tft-content {
      grid-column: 5/9;
      padding: 0 24px;

      ul {
        list-style: none;
        li {
          border-bottom: var(--tft-orange) solid 1px;
          padding: 16px;
          font-size: x-large;
          color: var(--tft-orange);
          &:last-of-type {
            border-bottom: none;
          }
        }
      }
    }
  }
}

/* .page-template-solutions { */
.tft-main-header {
  position: relative;
  padding: 0 !important;
  border-bottom: var(--tft-orange) solid 1px;
  .main-title-wrapper {
    aspect-ratio: 16/6;
    background-color: var(--tft-dark);
    background-size: cover;
    background-position: center;
    .main-title {
      max-width: 80vw;
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 4em 4em 2em 2em;
      background-color: var(--tft-dark) !important;
      &.sticky {
        position: fixed;
        top: 0;
        bottom: auto;
        padding-top: 5em;
        padding-bottom: 1em;
        max-width: 100% !important;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: var(--tft-orange) solid 1px;
        z-index: 10;
        .main-title-nav {
          display: flex;
          align-items: center;
          gap: 1em;
          & > a {
            margin-bottom: 0;
            &:hover {
              background-color: transparent;
              &:before {
                border-top-color: var(--tft-orange);
                border-left-color: var(--tft-orange);
              }
              &:after {
                background-color: var(--tft-orange);
              }
            }
            span {
              display: none;
            }
          }
        }
        hgroup {
          h6 {
            font-size: 0.75em;
            margin-bottom: 0 !important;
          }
        }
        h2 {
          font-size: 1em !important;
          margin-bottom: 0 !important;
        }
      }
      hgroup {
        h6 {
          font-size: 1.5em;
          text-transform: uppercase;
          color: var(--tft-orange);
          font-weight: bolder;
        }
      }
      .main-title-nav {
        --arrow-width: 2px;
        --left-pos: 1em;
        a {
          display: block;
          width: fit-content;
          position: relative;
          padding: 0.5em 0.5em 0.5em 2.5em;
          box-sizing: border-box;
          margin-bottom: 1em;
          height: 2em;
          &:hover {
            background-color: var(--tft-orange);
            color: var(--tft-dark);
            &:before {
              border-top-color: var(--tft-dark);
              border-left-color: var(--tft-dark);
            }
            &:after {
              background-color: var(--tft-dark);
            }
          }
          &:before,
          &:after {
            content: "";
            display: block;
            position: absolute;
          }
          span {
            font-family: "Spline Sans Mono" !important;
          }
          /* before -> < */
          &:before {
            width: 1em;
            height: 1em;
            aspect-ratio: 1/1;
            border-top: var(--tft-orange) solid var(--arrow-width);
            border-left: var(--tft-orange) solid var(--arrow-width);
            transform: rotate(-45deg);
            left: var(--left-pos);
          }

          /* after -> -  */
          &:after {
            top: calc(1em - 1px);
            left: var(--left-pos);
            width: 1em;
            height: var(--arrow-width);
            background-color: var(--tft-orange);
          }
        }
      }
      h2 {
        font-size: 4em;
        text-transform: uppercase;
        line-height: 1em;
        margin-bottom: 0.5em !important;
      }
    }
  }
}
/* } */

.tft-content {
  h2,
  h3,
  h4 {
    /* border-bottom: var(--tft-orange) solid 1px; */
    padding: 1em 0 0.5em 0;
    margin: 2em 0 0.5em 0;
    background-image: linear-gradient(315deg, currentColor, #fcdb42) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  h2 {
    font-size: 4em !important;
  }
  h3 {
    font-size: 3em !important;
  }
  h4 {
    font-size: 2em !important;
  }

  p {
    line-height: 1.2 !important;
  }

  .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 4em !important;
    .wp-block-image {
      width: auto !important;
      img {
        object-fit: contain !important;
      }
    }
  }

  .key-benefits {
    border-bottom: var(--tft-orange) solid 1px;
    gap: 0 !important;
    h2 {
      border-bottom: none;
      padding-left: 2em;
    }
    .wp-block-list {
      padding: 0;
      margin: 0 !important;
      li {
        display: block;
        text-align: left;
        font-size: 1.5em;
        color: var(--tft-orange);
        transition-property: background-color color;
        transition-timing-function: ease-out;
        transition-duration: 0.5s;
        text-transform: capitalize;
        padding: 1em;
        &:first-of-type {
          border-top: none;
        }
        &:hover {
          background-color: var(--tft-orange);
          color: var(--tft-dark);
        }
      }
    }
    /*Container for Tech & In Depth Solutions*/
    & + .wp-block-columns {
      gap: 0 !important;
      .tech,
      .in-depth-solution {
        .wp-block-group {
          display: block !important;
        }
        h2 {
          font-size: 3em !important;
          text-transform: uppercase;
          font-weight: bold;
          & + * {
            padding-top: 2em;
            padding-bottom: 2em;
          }
        }
      }
      .tech {
        h2 {
          padding-left: 1em;
          & + * {
            padding-left: 2em;
            padding-right: 4em;
          }
        }
        .wp-block-list {
          padding: min(1em, 2em);
          list-style: none;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
          gap: 3em;
          li {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            text-transform: uppercase;
          }
          img {
            object-fit: contain;
            aspect-ratio: 4/2;
          }
        }
      }
      .in-depth-solution {
        padding: 0 2em;
        h2 {
          & + * {
            padding-right: 2em;
          }
        }
      }
    }
  }

  /* .tech-ind-solutions {
		grid-template-columns: 1fr 1fr !important;
		gap: 0;
		& > div {
			&:first-of-type {
				grid-column: 1/2;
			}
			&:last-of-type {
				grid-column: 2/3;
			}
			& > div { display: block !important; }
			h2 {
				padding-left: 1em;
				& + * {
					padding: 2em 4em;
				}
			}
			
		}
	} */
}

.tft-contact-us {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0 !important;
  border-bottom: var(--tft-orange) solid 1px;
  margin-bottom: 56px;
  section {
    grid-column: 1/4;
    .field {
      max-width: 100%;
      width: 100% !important;
      border-bottom: var(--tft-orange) solid 1px;
      margin: 0 !important;
      &.excerpt-field,
      &.address-field {
        padding: 2em;
      }
      &.phone-field,
      &.email-field {
        a {
          display: block;
          padding: 1.5em 2em;
          font-size: 1.5em !important;
          &:hover {
            background-color: var(--tft-orange);
            color: var(--tft-dark);
          }
        }
      }
      &.phone-field {
      }
      &.email-field {
      }
      &.address-field {
      }
    }
  }
  .contact-form {
    padding-top: 2em;
    grid-column: 2/5;
    h5 {
      text-transform: uppercase;
      font-weight: bolder;
      color: var(--tft-orange);
      font-size: 2em;
      padding: 1em 2em;
      border-bottom: var(--tft-orange) solid 1px;
    }
    .frm_forms {
      .frm_form_fields {
        display: block;
      }
      .form-field {
        padding: 1em 2em;
        margin-bottom: 0;
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        textarea {
          border-radius: 0 !important;
          background-color: transparent !important;
          border-color: var(--tft-orange);
          font-size: x-large;
          color: #fff !important;
          &:focus {
            border-color: var(--tft-orange) !important;
            box-shadow: none !important;
            color: var(--tft-orange) !important;
          }
        }
        &::last-of-type {
          background-color: red;
        }
      }
      .frm_primary_label {
        background-color: transparent;
        display: block;
        color: #fff;
        border-radius: 0 !important;
        visibility: visible;
      }
      .frm_submit {
        position: relative;
        height: 4em;
        button {
          position: absolute;
          top: 0;
          left: 0;
          background-color: var(--tft-orange);
          color: var(--tft-dark);
          border-radius: 0;
          border: none;
          width: 100%;
          height: 100%;
          font-weight: bolder;
          text-transform: uppercase;
          font-size: 1.5em;
          box-sizing: border-box;
          margin: 0 !important;
          &:hover {
            color: var(--tft-dark);
            background-color: var(--tft-orange);
          }
        }
      }
    }
  }
}

footer {
  /* border-top: var(--tft-orange) solid 1px; */
  padding-top: 0 !important;
  .contact-section {
    background-color: var(--tft-orange);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2em;
    margin-bottom: 2em;
    color: black;
    text-align: center;

    h4 {
      font-size: xxx-large;
      font-weight: bolder;
      text-transform: uppercase;
    }
    p {
      margin: 1em;
      width: 50%;
      max-width: 50%;
    }
    & > a {
      background-color: black !important;
      color: var(--tft-orange) !important;
      border: none !important;
      border-radius: 0;
      padding: 0.75em 2em;
      & > span {
        margin-left: 0 !important;
        font-size: xx-large !important;
      }
    }
  }
  .social-list {
    .soc-item {
      a[href*="x.com"] {
        span::before {
          /* content: "\e08d" !important; */
        }
      }
      a[href*="instagram"] {
        span::before {
          /* content: "\e044" !important; */
        }
      }
      a[href*="linkedin"] {
        span::before {
          /* content: "\e04c" !important; */
        }
      }
    }
  }
  .tft-bottom-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2em;
    p {
      margin: 0 !important;
    }
  }
}

.content-404 {
  text-align: center;
  h1 {
    font-size: 14em;
    border-bottom: var(--tft-orange) solid 1px;
    font-weight: bolder;
    color: var(--tft-orange);
    padding-bottom: 0.25em;
  }

  p {
    font-size: 2em;
    color: var(--tft-blue);
    background-image: linear-gradient(
      315deg,
      currentColor,
      var(--tft-orange)
    ) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 1em;
    a {
      text-decoration: underline;
      color: var(--tft-orange);
    }
  }
}

section {
  background-color: transparent !important;
}

.tft-step-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: bottom;
  border-bottom: var(--tft-orange) solid 1px;
  position: relative;
  .main-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start !important;
    padding: 2em;
    h2 {
      font-size: 4em;
      margin-bottom: 0.25em !important;
      & + div > p {
        font-size: 1.25em;
        line-height: 1.25em;
      }
    }
  }
  .main-img {
    border-left: var(--tft-orange) solid 1px;
    aspect-ratio: 4/3;
    background-position: center;
    background-size: cover;
  }
  .tft-step-nav {
    ul {
      list-style: none;
      margin-bottom: 0 !important;
      li.nav-link {
        position: absolute;
        bottom: 24px;
        background-color: var(--tft-orange);
        padding: 0 !important;
        a {
          display: flex;
          align-items: center;
          gap: 8px;
          height: 48px;
          padding: 0 20px;
          color: var(--tft-dark);
          &:before {
            display: block;
            content: "";
            width: 12px;
            height: 12px;
            border-top: var(--tft-dark) solid 2px;
            border-left: var(--tft-dark) solid 2px;
          }
        }
        &.previous-link {
          left: 24px;
          a {
            &:before {
              transform: rotate(-45deg);
            }
          }
        }
        &.next-link {
          right: 24px;
          a {
            flex-direction: row-reverse;
            &:before {
              transform: rotate(135deg);
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1280px) {
  .home {
    main {
      aspect-ratio: 16/9;
    }
    .key-services {
      .card {
        .card-wrap {
          .card-text-wrap {
            .card-title,
            .card-text {
              color: #fff !important;
            }
          }
        }
        &:hover {
          .card-wrap {
            .card-text-wrap {
              .card-title,
              .card-text {
                color: var(--tft-dark) !important;
              }
            }
            .card-label-container {
              background-color: var(--tft-dark) !important;
              border-color: var(--tft-orange);
              a {
                color: var(--tft-orange) !important;
              }
            }
          }
        }
      }
    }
  }

  .page-template-solutions {
    .tft-main-header {
      .main-title-wrapper {
        .main-title {
          h2 {
            font-size: 3em;
          }
        }
      }
    }
  }

  .tft-content {
    .key-benefits {
      h2 {
        padding: 1em;
      }
      .wp-block-list {
        li {
        }
      }
    }
  }

  footer {
    .contact-section {
      p {
        width: 100%;
        max-width: 100%;
      }
    }
  }
}

@media screen and (max-width: 960px) {
  #main-menu {
    .nav-item {
      &.has-submenu {
        & > a {
          &:after {
            top: 4px;
            width: 16px;
            height: 16px;
            transform: rotate(-45deg);
          }
        }
        &:hover {
          .submenu {
            right: 0;
            height: fit-content !important;
          }
        }
        .submenu {
          border-left: var(--tft-orange) solid 1px;
          transition-property: right opacity;
          left: auto;
          /* right: 0; */
          right: -50vw;
          height: calc(100vh - var(--header-top-value)) !important;
          width: 50vw;
          flex-direction: column;
          justify-content: flex-start;
          article {
            height: fit-content;
            h6 {
              fontt-weight: bolder;
            }
            & > .content {
              position: relative;
              top: auto;
              border-left: none;
            }
          }
        }
      }
    }
  }

  .home {
    main {
      aspect-ratio: 1/1;
      .tft-slogan {
        padding-top: 1em;
        & > * {
          display: inline !important;
        }
      }
    }
    .title-wrap {
      .title-box {
        display: block !important;
        h2 {
          font-size: 4em;
          line-height: 1em !important;
        }
        p {
          font-size: 1em;
          line-height: 1em !important;
        }
      }
    }
    .key-services {
      .card {
        .card-wrap {
          .card-text-wrap {
          }
          .card-label-container {
            width: 100%;
            max-width: 100%;
            border: var(--tft-orange) solid 1px !important;
            margin: 0 0 -2rem 0 !important;
          }
        }
      }
    }
  }

  .tft-step-hero {
    display: block;
    .main-title {
      h2 {
        & + div > p {
        }
      }
    }
    .main-img {
    }
  }

  .tft-services-wrapper {
    display: block !important;
    .item {
      border: none !important;
      border-top: var(--tft-orange) solid 1px !important;
      border-right: none;
      border-bottom: var(--tft-orange) solid 1px !important;
      border-left: none;
      .item-wrapper {
        .tft-permalink {
          position: relative !important;
          bottom: auto !important;
          left: auto !important;
          margin: 0 !important;
          padding: 1em !important;
          width: auto !important;
          .btn {
            margin: 0 !important;
          }
        }
      }
    }
  }

  .tft-service-title {
    font-size: 3em !important;
    line-height: 1em;
    border-bottom: none !important;
    & + .tft-excerpt {
      width: 100%;
    }
  }

  .page-template-solutions {
    .tft-main-header {
      .main-title-wrapper {
        aspect-ratio: 1/1;
        .main-title {
          padding: 2em 4em 1em 2em;
          max-width: 90vw;
          h2 {
            font-size: 3em !important;
            margin-bottom: 0.5em !important;
          }
          hgroup {
            h6 {
              font-size: 1em;
            }
          }
        }
      }
    }
    .tft-content {
      .key-benefits {
        display: block;
        h2 {
          /* border-top: var(--tft-orange) solid 1px;
					border-bottom: var(--tft-orange) solid 1px; */
          font-size: 3em !important;
          padding: 1em;
        }
        .wp-block-group {
          display: block !important;
        }
        .wp-block-list {
          li {
          }
        }
      }

      .tech-ind-solutions {
        display: block !important;
        .wp-block-gallery {
          display: block !important;
          max-width: 90vw;
          margin: 1em auto 0 auto !important;
          .wp-block-image {
            margin-bottom: 3em !important;
            &:last-of-type {
              margin-bottom: 0 !important;
            }
          }
        }
        .in-depth-solution {
          border-top: var(--tft-orange) solid 1px;
          h2 {
            padding-left: 1em;
            & + p {
              padding: 2em 2.5em;
            }
          }
        }
      }
    }
  }

  .single-service {
    .tft-header {
      aspect-ratio: 16/10;
    }
    .tft-service-content {
      display: flex !important;
      flex-direction: column;
      .tft-excerpt {
        font-size: x-large;
      }
    }
  }

  .tft-contact-us {
    display: block;
    .contact-form {
      border-left: none;
    }
  }

  footer {
    .tft-bottom-info {
      display: block;
      p {
        margin-bottom: 2em !important;
        text-align: center;
        &.phone {
          a {
            display: inline-block;
            padding: 1em 2em;
            background-color: var(--tft-orange);
            color: var(--tft-dark);
          }
        }
      }
    }
  }
}

@media screen and (max-width: 640px) {
  .contact-btn {
    min-width: 100% !important;
    .btn {
      padding: 1.25rem 2rem !important;
      span {
        margin: 0 !important;
        &.btn-label {
          display: none;
        }
      }
    }
  }

  #main-menu {
    .nav-item {
      &.has-submenu {
        .submenu {
          right: -80vw;
          width: 80vw;
        }
      }
    }
  }

  .tft-step-nav {
    ul {
      li.nav-link {
        a {
          span {
            display: none;
          }
        }
      }
    }
  }

  footer {
    .contact-section {
      & > a {
        width: 100%;
      }
    }
  }
}