/*----------------------------------
  1. 通用按钮样式
  -----------------------------------*/
.roofing-btn {
  display: inline-block;
  margin-left: 32px;
  vertical-align: middle;
}

.roofing-btn a.global-btn {
  display: inline-block !important;
  padding: 15px 60px !important;
  background: var(--color-primary) !important;
  border-radius: var(--button-radius) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  letter-spacing: 1px !important;
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  transition: all 0.3s ease-in-out !important;
  vertical-align: middle;
}

.roofing-btn a.global-btn i {
  margin-left: 8px !important;
  vertical-align: middle !important;
}

.roofing-btn a.global-btn:hover {
  background: none !important;
  background-color: transparent !important; 
  color: var(--color-primary) !important;   
  border: 1px solid var(--color-primary) !important; 
}

.roofing-btn a::before,
.roofing-btn a::after,
.roofing-btn a:hover::before,
.roofing-btn a:hover::after,
.global-btn::before,
.global-btn::after,
.global-btn:hover::before,
.global-btn:hover::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/*----------------------------------
  2. 通用标题修饰样式
  -----------------------------------*/
.section-sub-title {
  position: relative;
  display: inline-block;
  margin-bottom: 7px;
}

.section-sub-title:not(.left)::before {
  position: absolute;
  content: "";
  height: 2px;
  width: 35px;
  background: var(--color-primary);
  left: 0;
  top: 35%;
  transform: translateY(-50%);
}

.section-sub-title:not(.left)::after {
  position: absolute;
  content: "";
  height: 2px;
  width: 35px;
  background: var(--color-primary);
  left: -12px;
  top: 65%;
  transform: translateY(-50%);
}

.section-sub-title h4 {
  font-size: 24px;
  color: var(--color-primary);
  font-weight: 500;
  position: relative;
  padding: 0 50px 0;
}

.section-sub-title.left h4 {
  padding: 0 50px 0 0;
}

.section-sub-title h4::before {
  position: absolute;
  content: "";
  height: 2px;
  width: 35px;
  background: var(--color-primary);
  right: 0;
  top: 35%;
  transform: translateY(-50%);
}

.section-sub-title h4::after {
  position: absolute;
  content: "";
  height: 2px;
  width: 35px;
  background: var(--color-primary);
  right: -12px;
  top: 65%;
  transform: translateY(-50%);
}

.section-main-title h2 {
  margin-bottom: 40px;
}