// -----------------------------------------------------------------------------
// This file contains CSS helper classes.
// -----------------------------------------------------------------------------

.gradient-text--brand1 {
  background: -webkit-linear-gradient($brand-color-1, $secondary-color-1);
  @include add-prefix(background-clip, text);
  @include add-prefix(text-fill-color, transparent);
}

.gradient-text--brand2 {
  background: -webkit-linear-gradient($brand-color-2, $secondary-color-2);
  @include add-prefix(background-clip, text);
  @include add-prefix(text-fill-color, transparent);
}

.gradient-text--brand3 {
  background: -webkit-linear-gradient($brand-color-3, $secondary-color-3);
  @include add-prefix(background-clip, text);
  @include add-prefix(text-fill-color, transparent);
}

.gradient-text--brand4 {
  background: -webkit-linear-gradient($brand-color-4, $secondary-color-4);
  @include add-prefix(background-clip, text);
  @include add-prefix(text-fill-color, transparent);
}

// home 1 backgound colors
.brand-1 {
  background-color: $brand-color-1;
}

.brand1-bg-1 {
  background-color: $brand-bg-1;
}

.brand1-bg-2 {
  background-color: $tertiary-color-1;
}


// home 2 background colors
.brand-2{
  background-color: $brand-color-2; 
}
.brand2-bg-1{
  background-color: $brand2-bg-1;
}
.brand2-bg-3{
  background: rgba($brand2-bg-1, $alpha:.5);
}
.brand2-bg-2{
  background-color: $brand2-bg-2;
}
.brand2-bg-4{
  background: rgba(214, 242, 254, 0.5);
}

// home 3 background colors
.brand-3{
  background-color: $brand-color-3; 
}
.brand3-bg-1{
  background-color: $brand3-bg-1;
}




// home 4 backgound colors
.brand-4 {
  background-color: $brand-color-4;
}
.brand4-bg-1 {
  background-color: $secondary-color-4;
}



.padding-top {
  padding-block-start: 80px;

  @include breakpoint(lg) {
    padding-block-start: 132px;
  }
}

.padding-bottom {
  padding-block-end: 80px;

  @include breakpoint(lg) {
    padding-block-end: 132px;
  }
}

.bg--light-color {
  background-color: $bg-light-color;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $title-color-dark;

    a {
      color: inherit;
    }
  }

  p {
    color: $body-color-dark;
  }
}

.subtitle {
  @include font-size(18px);
  @extend %mb-20;
  text-transform: capitalize;
  font-weight: bold;
  color: $title-color;
}

.bg--cover {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.bg--full {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.bg--defult {
  background-repeat: no-repeat;
  // background-size: 100% 100%;
  // background-position: center;
}

.d-block{
  width: 100%;
}

.br-16{
  border-radius: 16px;
}

// just home 4
.style2-h2 {
  @include font-size(56px);
  font-family: $title-font1;
  font-weight: 800;

  &--defult{
    color: $brand-color-4;
  }
  &--max20{
    max-inline-size: 13ch;
  }
}