html {
    height: 100%;
    scroll-padding-top: calc(4.5rem - 1px);
  }
  
  body {
    width: 100%;
    height: 100%;
  }
  
  .page-section {
    padding: 8rem 0;
  }
  
  .text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
  }
  
  .btn-xl {
    padding: 1.25rem 2.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: 10rem;
  }
  
  hr.divider {
    height: 0.2rem;
    max-width: 3.25rem;
    margin: 1.5rem auto;
    background-color: #c4c4c4;
    opacity: 1;
  }
  
  hr.divider-light {
    background-color: #fff;
  }
  
  #mainNav {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    background-color: #fff;
    transition: background-color 0.2s ease;
  }
  #mainNav .navbar-brand {
    font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 700;
    color: #212529;
  }
  #mainNav .navbar-nav .nav-item .nav-link {
    color: #6c757d;
    font-family: Bliss 'Bliss Pro';
    font-weight: 400;
    font-size: 1.15rem;
    padding: 0.75rem 0;
  }
  #mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link:active {
    color: #e10886;
  }
  #mainNav .navbar-nav .nav-item .nav-link.active {
    color: #212529!important;
  }
  @media (min-width: 992px) {
    #mainNav {
      box-shadow: none;
      /* background-color: transparent; */
    }
    #mainNav .navbar-brand {
      color: rgba(255, 255, 255, 0.7);
    }
    #mainNav .navbar-brand:hover {
      color: #fff;
    }
    #mainNav .navbar-nav .nav-item .nav-link {
      color: #000;
      padding: 0 1rem;
    }
    #mainNav .navbar-nav .nav-item .nav-link:hover {
      color: #fff;
    }
    #mainNav .navbar-nav .nav-item:last-child .nav-link {
      padding-right: 0;
    }
    #mainNav.navbar-shrink {
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      background-color: #fff;
    }
    #mainNav.navbar-shrink .navbar-brand {
      color: #212529;
    }
    #mainNav.navbar-shrink .navbar-brand:hover {
      color: #55BE09;
    }
    #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link {
      color: #212529;
    }
    #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover {
      color: #212529;
    }
  }
  
  header.masthead {
    padding-top: 10rem;
    /* padding-bottom: calc(10rem - 4.5rem); */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 100%), url("/img/bg-1.jpg");
    background: url("/img/bg-1.jpg");
    background-position: center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    background-size: cover;
    height: 100vh;
    max-height: 500px;
  }
  header.masthead h1, header.masthead .h1 {
    font-size: 2.25rem;
  }
  @media (min-width: 992px) {
    header.masthead {
      height: 100vh;
      min-height: 950px;
      padding-top: 4.5rem;
      padding-bottom: 0;
    }
    header.masthead p {
      font-size: 1.4rem;
      font-weight: 300;
    }
    header.masthead h1, header.masthead .h1 {
      font-size: 3rem;
    }
  }
  @media (min-width: 1200px) {
    header.masthead h1, header.masthead .h1 {
      font-size: 3.5rem;
    }
  }
  
  #portfolio .container-fluid, #portfolio .container-sm, #portfolio .container-md, #portfolio .container-lg, #portfolio .container-xl, #portfolio .container-xxl {
    max-width: 1920px;
  }
  #portfolio .container-fluid .portfolio-box, #portfolio .container-sm .portfolio-box, #portfolio .container-md .portfolio-box, #portfolio .container-lg .portfolio-box, #portfolio .container-xl .portfolio-box, #portfolio .container-xxl .portfolio-box {
    position: relative;
    display: block;
  }
  #portfolio .container-fluid .portfolio-box .portfolio-box-caption, #portfolio .container-sm .portfolio-box .portfolio-box-caption, #portfolio .container-md .portfolio-box .portfolio-box-caption, #portfolio .container-lg .portfolio-box .portfolio-box-caption, #portfolio .container-xl .portfolio-box .portfolio-box-caption, #portfolio .container-xxl .portfolio-box .portfolio-box-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
    opacity: 0;
    color: #fff;
    background: rgba(244, 98, 58, 0.9);
    transition: opacity 0.25s ease;
    text-align: center;
  }
  #portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-sm .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-md .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-lg .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-xl .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-xxl .portfolio-box .portfolio-box-caption .project-category {
    font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
  }
  #portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-sm .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-md .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-lg .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-xl .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-xxl .portfolio-box .portfolio-box-caption .project-name {
    font-size: 1.2rem;
  }
  #portfolio .container-fluid .portfolio-box:hover .portfolio-box-caption, #portfolio .container-sm .portfolio-box:hover .portfolio-box-caption, #portfolio .container-md .portfolio-box:hover .portfolio-box-caption, #portfolio .container-lg .portfolio-box:hover .portfolio-box-caption, #portfolio .container-xl .portfolio-box:hover .portfolio-box-caption, #portfolio .container-xxl .portfolio-box:hover .portfolio-box-caption {
    opacity: 1;
  }

  .btn-primary {
    color: #fff;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    font-weight: bold;
} 

.thumb-product {
    margin: 10px 100px;
}

.brand-logo {
    text-align: left;
    font-weight: 900;
    color: #e10886;
    line-height: 35px;
    font-family: 'Geometria';
}

.brand-logo span{
    color: #55be08;
}

.brand-text * {
    display: block;
}

.brand-text {
    text-align: left;
    font-size: 4.9rem;
    font-weight: 800;
    font-family: 'Geometria';
    line-height: 4.9rem;
}

.brand-text-primary {
    color: #e10886;
}

.brand-text-green {
    color: #55BE09;
}

.brand-text-yellow {
    color: #fbe116;
}

.brand-text-gray {
    color: #4e4e4d;
}

.brand-text .brand-text-gray {
    margin-top: 40px;
    border-top: 6px solid #4e4e4d;
    font-size: 3.9rem;
    width: fit-content;
    line-height: 3.9rem;
}

.brand-text .brand-text-img {
    padding-left: 40px;
    margin-top: 80px;
}

.brand-text .btn-brand {
    margin-top: 30px;
    width: fit-content;
    /* border-radius: 6px; */
}

.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: #55be09;
    --bs-btn-border-color: #55be09;
    --bs-btn-hover-color: #1a1a18;
    --bs-btn-hover-bg: #5ec712;
    --bs-btn-hover-border-color: #5ec712;
    --bs-btn-focus-shadow-rgb: 180, 70, 39;
    --bs-btn-active-color: #1a1a18;
    --bs-btn-active-bg: #5ec712;
    --bs-btn-active-border-color: #55be09;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #1a1a18;
    --bs-btn-disabled-bg: #55be09;
    --bs-btn-disabled-border-color: #55be09;
    padding: 1.25rem 2.25rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Bliss Pro';
}

img.icon-box-pcs {
    height: 24px;
    margin-left: 8px;
}


@-webkit-keyframes t-arrow-bottom {
    0% {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -moz-transform: translateY(-7px);
        -ms-transform: translateY(-7px);
        -webkit-transform: translateY(-7px);
        -o-transform: translateY(-7px);
        transform: translateY(-7px)
    }

    55% {
        -moz-transform: translateY(-7px);
        -ms-transform: translateY(-7px);
        -webkit-transform: translateY(-7px);
        -o-transform: translateY(-7px);
        transform: translateY(-7px)
    }

    100% {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes t-arrow-bottom {
    0% {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -moz-transform: translateY(-7px);
        -ms-transform: translateY(-7px);
        -webkit-transform: translateY(-7px);
        -o-transform: translateY(-7px);
        transform: translateY(-7px)
    }

    55% {
        -moz-transform: translateY(-7px);
        -ms-transform: translateY(-7px);
        -webkit-transform: translateY(-7px);
        -o-transform: translateY(-7px);
        transform: translateY(-7px)
    }

    100% {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

.t-cover__arrow-wrapper_animated {
    animation: t-arrow-bottom 1.7s infinite ease
}

.t-cover__arrow-wrapper {
    display: inline-block;
    -webkit-transition: all ease-in-out 0.2s;
    -moz-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
    cursor: pointer
}

.t-cover__arrow-wrapper:hover {
    opacity: .7
}

.t-cover__arrow-svg {
    fill: #fff
}

@media screen and (max-width: 640px) {
    .t-cover__arrow_mobile {
        -moz-transform:scale(.7);
        -ms-transform: scale(.7);
        -webkit-transform: scale(.7);
        -o-transform: scale(.7);
        transform: scale(.7)
    }

    .t-cover__arrow {
        bottom: 14px
    }
}

section.bg-scroll {
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 140px 0px;
    min-height: 100vh;
}