/* CSS Gradient Design */
.hero-section {
  overflow: hidden; /* Ensures content doesn't overflow outside the section */
  padding-top: 100px; /* Space above content */
  padding-bottom: 50px; /* Space below content */
  margin: 0; /* Removes margin around the section */
  height: 30%; /* Sets the height of the hero section */
  background: linear-gradient(135deg, #fe2cdf, #25F4EE); /* TikTok-inspired gradient */
  position: relative; /* Required for positioning pseudo-elements absolutely */
}

/* Repeating Striped Overlay Effect */
.hero-section::after {
  content: ''; /* Empty content for the pseudo-element */
  position: absolute; /* Absolute positioning relative to the hero-section */
  top: -50%; /* Moves the overlay above the visible area */
  left: -50%; /* Moves the overlay to the left of the visible area */
  width: 200%; /* Extends overlay width for visual effect */
  height: 200%; /* Extends overlay height for visual effect */
  background: repeating-linear-gradient(
      180deg, /* Angle of the stripes */
      rgba(255, 255, 255, 0.05) 0px, /* Light stripe start */
      rgba(255, 255, 255, 0.05) 2px, /* Light stripe width */
      transparent 2px, /* Transparent gap starts */
      transparent 10px /* Transparent gap ends */
  );
  transform: rotate(45deg); /* Rotates the stripes for diagonal effect */
  pointer-events: none; /* Ensures the overlay is non-interactive */
}
@media screen and (max-width:216px) {
  .card-feature {
    width: 155px;
    min-height: fit-content;
  }
  .lg-01{
    display:grid !important;
    grid-template-columns: 1fr !important;
  }
  .row-footer{
    margin: 10px 0px !important;
  }
}
@media screen and (min-width:216px) and (max-width:256px) {
  .card-feature {
    width: 181px;
    min-height: fit-content;
  }
  .lg-01{
    display:grid !important;
    grid-template-columns: 1fr !important;
  }
  .row-footer{
    margin: 10px 0px !important;
  }
}
@media screen and (min-width:256px) and (max-width:304px) {
  .card-feature {
    width: 251px;
    min-height: fit-content;
  }
  .lg-01{
    display:grid !important;
    grid-template-columns: 1fr !important;
  }
  .row-footer{
    margin: 10px 0px !important;
  }
}
@media screen and (min-width:304px) and (max-width:332px) {
  .card-feature {
    width: 283px;
    min-height: fit-content;
  }
  .lg-01{
    display:grid !important;
    grid-template-columns: 1fr !important;
  }
  .row-footer{
    margin: 10px 0px !important;
  }
}
@media screen and (min-width:332px) and (max-width:368px) {
  .card-feature {
    width: 321px;
    min-height: fit-content;
  }
  .lg-01{
    display:grid !important;
    grid-template-columns: 1fr !important;
  }
  .row-footer{
    margin: 10px 0px !important;
  }
}
@media screen and (min-width:368px) and (max-width:456px) {
  .card-feature {
    width: 363px;
  }
  .lg-01{
    display:grid !important;
    grid-template-columns: 1fr !important;
  }
  .row-footer{
    margin: 10px 0px !important;
  }
}


@media screen and (min-width:456px) and (max-width:520px) {
  .card-feature {
    width: 444px;
    min-height: fit-content;
  }
  .lg-01{
    display:grid !important;
    grid-template-columns: 1fr !important;
  }
  .row-footer{
    margin: 10px 0px !important;
  }
}
@media screen and (min-width:520px) and (max-width:540px){
  .card-feature {
    width: 468px;
    min-height: fit-content;
  }
  .lg-01{
    display:grid !important;
    grid-template-columns: 1fr !important;
  }
  .row-footer{
    margin: 10px 0px !important;
  }
}
@media screen and (min-width:540px) and (max-width:768px){
  .card-feature {
    width: 489px;
    margin: 6px 0px;
    min-height: fit-content;
  }
  .row-footer{
    margin: 10px 0px !important;
  }
  .lg-01 {
    display: grid !important
;
    grid-template-columns: 1fr !important;
}
}

@media screen and (min-width:768px) and (max-width:992px) {
 
  .card-feature {
    width: 667px;
        margin: 6px 0px;
        min-height: fit-content;
  }
  .lg-01 {
    display: grid !important
;
    grid-template-columns: 1fr !important;
}
}
@media screen and (min-width:992px) and (max-width:1216px) {
 
  .card-feature {
    width: 449px;
  }
}
@media screen and (min-width:1216px){
 
  .card-feature {
    width: 542px;
  }
}