/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

html {
  scroll-behavior: smooth;
}

/* Scroll */
::-webkit-scrollbar {
    width: 5px;
} 
::-webkit-scrollbar-track {
    background-color: #fff;
    -webkit-border-radius: 10px;    
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 100px;    
    background-image: linear-gradient(-89deg, #fb9e31 0%, #fb7e4e 52%, #fd6d41 100%);
}

/* Home Tabs */

.tab-container {
  position: relative
}

.tab-container .tab-menu {
  padding-top: 100px;
}

.tab-container .step-progress-text {
  position: absolute;
  top: 0;
  filter: drop-shadow(15.543px 12.586px 10px rgba(255, 152, 46, 0.76));
}

.tab-container .tab-menu {
  padding-left: 50px;
}

.tab-container .scroll-line {
  position: absolute;
  top: 59px;
  left: 20px;
  height: calc(var(--bar-max-height, 0) - 59px);
  width: 3px;
  border-radius: 2px;
  background-color: rgb(255, 207, 150);
  transition: 0.3s
}

.tab-container .scroll-line-active {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: calc(var(--bar-height, 0) - 59px);
  border-radius: 2px;
  background-image: linear-gradient(184deg, rgba(255, 147, 41, 0.99) 0%, rgba(255, 91, 148, 0.99) 100%);
  transition: 0.3s
}

.tab-container .scroll-line-active::before {
  content: "";
  position: absolute;
  left: -8px;
  bottom: 0;
  width: 19px;
  height: 19px;
  display: flex;
  background-image: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), linear-gradient(150deg, rgb(255, 185, 115), rgb(253, 98, 16), rgb(254, 86, 152), rgb(221, 129, 255));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  filter: drop-shadow(rgba(255, 127, 0, 0.52) 0px 0px 10px);
  border-width: 3px;
  border-style: solid;
  border-color: transparent;
  border-radius: 50%;
  transition: 0.3s
}
@media(max-width: 1440px) {
    .tab-container .brxe-tabs-nested {
        gap: 20px!important;
    }
    .tab-container .tab-pane::after,
    .tab-container .tab-pane > img {
        display: none!important;
    }
    .tab-container .tab-menu {
        width: 30%!important;
    }
    .tab-container .tab-content {
        width: 70%!important;
    }
    .tab-container .tab-pane .brxe-code {
        width: 100%!important;
    }

    .tab-container .tab-title .brxe-text-basic {
        font-size: 16px!important;
    }
}
@media(max-width: 1200px) {
    .tab-container .step-progress-text {
        gap: 10px!important;
    }
    .tab-container .step-progress-text img {
        width: 20px!important;
    }
    .tab-container .step-progress-text .brxe-heading {
        font-size: 22px!important;
    }
}
@media(max-width: 1024px) {
    .tab-container {
        align-items: center;
        gap: 30px;
    }
    .tab-container .brxe-tabs-nested {
        flex-wrap: wrap;
    }
    .tab-container .tab-menu, 
    .tab-container .tab-content {
        width: 100%!important;
    }
    .tab-container .tab-menu {
        flex-direction: row!important;
        padding: 0!important;
        align-items: stretch!important;
    }
    .tab-container .step-progress-text {
        position: relative;
    }
    .tab-container .scroll-line {
        position: relative;
        top: auto!important;
        left: auto!important;
        width: var(--bar-max-width)!important; 
        height: 3px!important;
    }
    .tab-container .scroll-line-active {
       
        height: 3px!important;
        width: var(--bar-width)!important; 
    }
    .tab-container .scroll-line-active::before {
        top: 50%;
        left: auto;
        right: 0;
        bottom: auto;
        transform: translateY(-50%);
    }
}