@use '../helpers/variables' as vars;
@use 'sass:map';
// heading utilities
.mini-heading {
    h2{
        font-size: map.get(vars.$heading-sizes, small);
        color: var(--heading-color);
        font-weight: map.get(vars.$font-weights, medium);
        // decorative line by the side
        &::before{
            content: '';
            display: inline-block;
            width: 5px;
            height: 6px;
            background-color: vars.$primary-color;
            margin-right: 15px;
            vertical-align: middle;
        }
    }
}

.classic-heading {
    font-size: map.get(vars.$heading-sizes, small);
    color: var(--black);
    font-weight: map.get(vars.$font-weights, bold);
    text-transform: uppercase;
}

.section-heading {
    font-size: map.get(vars.$heading-sizes, xxxlarge);
    color: var(--black);
    font-weight: map.get(vars.$font-weights, normal);
    line-height: 3rem;
    @media (max-width: 992px) {
        font-size: map.get(vars.$heading-sizes, xxlarge);
        line-height: 2.5rem;
    }
}

.section-subheading {
    font-size: map.get(vars.$heading-sizes, small);
    color: var(--text-color);
    font-weight: map.get(vars.$font-weights, normal);
}

.heading-placeholder{
    width: fit-content;
    padding: 10px 20px;
    border-radius: 8px;
    p{
        margin: 0;
        font-size: map.get(vars.$font-sizes, small);
        font-weight: map.get(vars.$font-weights, medium);
    }
}

// big-section-stroke-heading
.big-section-stroke-heading {
    font-size: map.get(vars.$heading-sizes, 7xlarge);
    color: transparent;
    font-weight: map.get(vars.$font-weights, bold);
    -webkit-text-stroke: 1px var(--white);
    text-stroke: 1px var(--white);
    @media (max-width: 992px) {
        font-size: map.get(vars.$heading-sizes, 5xlarge);
    }
}

// padding utilities
.main-pd-lr {
  padding-left: 50px;
  padding-right: 50px;

    @media (max-width: 992px) {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.main-pd-tb {
  padding-top: 50px;
  padding-bottom: 50px;
  @media (max-width: 992px) {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

// border radius utilities
.bd-rd-8{
    border-radius: 8px;
}

.bd-white{
    border: 1px solid var(--white);
}

// text utilities
.text-primary{
    color: vars.$primary-color;
}

.text-black{
    color: var(--black);
}

.text-white{
    color: var(--white);
}

// background utilities
.bg-primary{
    background-color: vars.$primary-color;
}

.bg-gradient-light{
    background: var(--gradient-bg);
}

.bg-dark{
    background-color: var(--black);
}

.bg-white{
    background-color: var(--white);
}
.bg-glass{
    background: var(--glass-bg);
}
.bg-accent{
    // primary color at fill 20%
    background-color: rgba(0, 101, 156, 0.2);
}

// border color
.bd-color-primary{
    border-color: vars.$primary-color;
}

// bd solid
.bd-1{
    border-style: solid;
    border-width: 1px;
}