.bg {
    background-color: #364156;
}
.bg-1 {
    background-color: #E1E4EC;
}

.bg-2 {
    background-color: #D2D7E2;
}

.mt-6 {
    margin-top: 4.5rem !important;
}
.br-blue {
  border:2px solid #364156!important;
}

.timeline-with-icons {
  border-left: 1px solid #364156;
  position: relative;
  list-style: none;
}


.timeline-with-icons .timeline-item {
  position: relative;
}

.timeline-with-icons .timeline-item:after {
  position: absolute;
  display: block;
  top: 0;
}

.timeline-with-icons .timeline-icon {
  position: absolute;
  left: -55px;
  background-color: #364156;
  color: #fff;
  font-weight: bold;
  font-size: 24px;
  border-radius: 50%;
  height: 45px;
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tools-block {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  position: relative;
}
.tools-block .tools-block__item {
  width: 220px;
  margin: 5px auto;
}
.tools-block .tools-block__item-1 {
  width: 240px;
  margin: 5px auto;
}

.sub-title__block {
  position: absolute;
  top: -15px;
  left: 10px;
}
.sub-title {
  border-radius: 15px;
  padding: .25rem;
  background-color: #fff;
  color:#364156;
  font-weight: bold;
  border: 2px solid #364156;
  font-size: 14px;;
}
.setting_item {
  width: 215px;
  margin: 1rem;
}
.setting_item p.setting_item_title {
  font-size: 0.9rem;
}

/* 1. Pulse Animation */
.btn-pulse {
  background-color: #c20020;
  color: white;
  animation: pulse 1.5s infinite;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 2px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}


@keyframes wobble {
  0%,
  100% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
}


@media (width <= 320px) {
  .tools-block .tools-block__item,
  .tools-block .tools-block__item-1 {
  width: 125px;
  margin: 5px auto;
  }
  .sub-title__block {
    position: absolute;
    top: -15px;
    left: auto;
  }
  
  .tools-text {
    padding: 1rem;
  }
  .btn-order {
    /* width: 100%; */
    background-color: #c20020;
    color:#fff;
    font-weight: 500;
  }

  .timeline-block {
    padding-left: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .setting_item {
    width: 90%;
    margin: 1rem;
  }
}
@media (width > 576px) {
  .btn-order {
    width: 75%;
  }
}
@media (width > 768px) {
  .setting_item {
    width: 45%;
    margin: 1rem;
  }
}
@media (768px <= width <= 992px){
  .setting_item {
    width: 45%;
    margin: 1rem;
  }
}

@media (width > 1200px) {
  .setting_item {
    width: 17%;
    margin: 1rem;
  }
}

@media (640px <= width <= 1920px) {
  .btn-order {
    /* width: 50%; */
    background-color: #c20020;
    color:#fff;
    font-weight: 500;
  }

}
/* @import url("https: //cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css") layer;

@layer {
    .w-25 {
        width: 15% !important;
    }
} */