@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@700;800&display=swap);


:root {
   --pbgold: rgba(212, 175, 55, 0.4);
   --pbsilver: rgba(188, 198, 204, 0.4);
   --pbbronze: rgba(169, 113, 66, 0.4);
   --bg: #ffffff;
   --wxfdark: #1a1a1a;
   --wxfaccent: #ff5700;
   --wxfease: cubic-bezier(.4,1.9,.4,1);
}

body {
   font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.accent {
   color: #FF5700;
}

.btn-accent {
   background-color: #FF6600;
   color: #fff;
   border-radius: 999px;
   padding-inline: 24px;
}

   .btn-accent:hover {
      background-color: #e05b00;
      color: #fff;
   }

.hero-icon {
   max-width: 260px;
}

.icon-box {
   border-radius: 16px;
   padding: 20px;
   background: #fff;
   box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.footer-dark {
   background: #111;
   color: #fff;
}

.navbar-brand span.accent {
   margin-left: -2px;
}

.pricing-card {
   border-radius: 16px;
}

.badge-plan {
   border-radius: 999px;
   background: #111;
   color: #fff;
   padding: 4px 10px;
   font-size: 0.75rem;
}

.nav-link.active {
   color: #FF5700 !important;
}

.small {
   font-size: 0.8em;
}

.smaller {
   font-size: 0.75em;
}

.logo {
   font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   font-weight: 800;
   line-height: 1;
   letter-spacing: -0.02em;
   white-space: nowrap;
   user-select: none;
   opacity: 0;
   transform: translateY(8px);
   animation: logoIn 640ms var(--wxfease) forwards;
}

.logosmall {
   font-size: 15px;
}

.logomedium {
   font-size: 24px;
}

.logolarge {
   font-size: clamp(86px, 15vw, 160px);
}

/* reliable reveal using max-width */
.wipe {
   display: inline-block;
   overflow: hidden;
   max-width: 0;
   animation: wipeIn 1200ms var(--wxfease) forwards;
   animation-delay: 120ms;
}

.base {
   color: var(--wxfdark);
}

.W {
   color: var(--wxfdark);
   font-size: 120%;
   margin-right: -0.075em
}

.x {
   color: var(--wxfaccent) !important;
   display: inline-block;
   transform-origin: 60% 70%;
   animation: xPop 1240ms var(--wxfease) forwards;
   animation-delay: 1240ms;
   font-size: 125%;
}

.chev {
   color: var(--wxfaccent) !important;
   display: inline-block;
   opacity: 0;
   transform: translateX(-10px);
   animation: chevIn 840ms var(--wxfease) forwards;
   animation-delay: 1340ms;
}

.smalltrade {
   font-size: 0.6em;
   vertical-align: super;
}

.x1 {
   color: var(--wxfaccent) !important;
   display: inline-block;
   font-size: 125%;
}

.chev1 {
   color: var(--wxfaccent) !important;
   display: inline-block;
}

@keyframes logoIn {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes wipeIn {
   to {
      max-width: 100ch;
   }
}

@keyframes xPop {
   0% {
      transform: translateY(10px) scale(.80) rotate(-3deg);
   }

   60% {
      transform: translateY(-2px) scale(1.25) rotate(1deg);
   }

   100% {
      transform: translateY(0) scale(1) rotate(0deg);
   }
}

@keyframes chevIn {
   to {
      opacity: 1;
      transform: translateX(0);
   }
}




.fl {
   color: black;
   font-family: "Figtree",Arial;
}

.flb {
   color: black;
   font-family: "Figtree",Arial;
   font-weight: bold;
}






* {
   margin: 0;
   padding: 0
}

ul {
   margin: 0;
   padding: 0
}

   ol li, ul li {
      list-style: outside none none
   }

img {
   height: auto;
   max-width: 100%
}

h1, h2, h3, h4, h5, h6 {
   color: #000;
   line-height: 1.2
}

p {
   color: #555
}

a:focus {
   outline: 0 solid
}

a, a:hover, a:focus {
   -webkit-transition: all 500ms ease 0s;
   transition: all 500ms ease 0s;
   text-decoration: none;
   outline: none;
   color: #111
}

.form-control::-webkit-input-placeholder {
   color: #111
}

.form-control::-moz-placeholder {
   color: #111
}

.form-control:-ms-input-placeholder {
   color: #111
}

.form-control::placeholder {
   color: #111
}

.background-img {
   background-size: cover;
   background-position: center center
}

.background-overlay, .background-overlay-white {
   position: relative;
   z-index: 2;
   background-position: center center;
   background-size: cover
}

   .background-overlay:before {
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: "";
      background-color: rgba(0,0,0,.5)
   }

   .background-overlay-white:before {
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: "";
      background-color: rgba(255,255,255,.8)
   }

.classy-table {
   display: table;
   z-index: 9;
   position: absolute;
   width: 100%;
   height: 100%;
   margin: 0
}

.classy-table-cell {
   display: table-cell;
   vertical-align: middle
}

.default-button {
   background-color: #fff;
   border-radius: 30px;
   box-shadow: none;
   margin-top: 15px;
   padding: 10px 30px
}

.default-button-green {
   background-color: #27ae60;
   border-radius: 30px;
   box-shadow: none;
   margin-top: 15px;
   padding: 10px 30px;
   color: #fff
}

.default-button:hover, .default-button:focus {
   background-color: #27ae60;
   color: #fff
}

.default-button-green:hover, .default-button-green:focus {
   background-color: #fff;
   color: #27ae60
}

.modal-dialog {
   margin: 100px auto !important
}

.bg-transparent-1by3 {
   background-color: rgba(0,0,0,.333)
}

.bg-transparent-1by2 {
   background-color: rgba(0,0,0,.5)
}

.section_padding_50 {
   padding: 50px 0
}

.section_padding_50_20 {
   padding: 50px 0 20px
}

.section_padding_150 {
   padding: 150px 0
}

.section_padding_0 {
   padding: 0
}

.section_padding_0_70 {
   padding: 0 0 70px
}

.section_padding_100 {
   padding: 100px 0
}

.section_padding_100_0 {
   padding: 100px 0 0
}

.section_padding_0_100 {
   padding: 0 0 100px
}

.section_padding_100_50 {
   padding-top: 100px;
   padding-bottom: 50px
}

.section_padding_100_70 {
   padding-top: 100px;
   padding-bottom: 70px
}

.section_padding_200 {
   padding-top: 200px;
   padding-bottom: 200px
}

.section_padding_200_100 {
   padding-top: 200px;
   padding-bottom: 100px
}

.section_padding_200_70 {
   padding-top: 200px;
   padding-bottom: 70px
}

.section_padding_200_170 {
   padding-top: 200px;
   padding-bottom: 170px
}

.section_padding_200_0 {
   padding-top: 200px;
   padding-bottom: 0
}

.bg-transparent-dark {
   background-color: rgba(0,0,0,.5) !important
}

.bg-transparent-light {
   background-color: rgba(255,255,255,.5) !important
}

.bg-dark3-4 {
   background-color: rgba(0,0,0,.75) !important
}

.bg-dark2-4 {
   background-color: rgba(0,0,0,.5) !important
}

#scrollUp {
   background-color: #111;
   border-radius: 3px;
   bottom: 30px;
   box-shadow: 0 2px 6px 0 rgba(0,0,0,.3);
   color: #fff;
   font-size: 24px;
   height: 40px;
   line-height: 40px;
   right: 30px;
   text-align: center;
   width: 40px;
   z-index: 99999
}

[type=reset], [type=submit], button, html [type=button] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none
}

.shortcodes_content_area .intro-text .video_btn {
   width: 50px;
   height: 50px;
   display: block;
   margin: 15px auto;
   border: 2px solid #27ae60;
   color: #27ae60;
   font-size: 36px;
   border-radius: 30px;
   line-height: 50px;
   text-align: center;
   padding-left: 6px
}

.shortcodes_content_area .intro-text p {
   margin-bottom: 0;
   font-size: 14px
}

.m-0 {
   margin: 0
}

.m-15 {
   margin: 15px
}

.m-30 {
   margin: 30px
}

.m-50 {
   margin: 50px
}

.m-70 {
   margin: 70px
}

.m-100 {
   margin: 100px
}

.m-150 {
   margin: 150px
}

.m-200 {
   margin: 200px
}

.m-top-0 {
   margin-top: 0
}

.m-top-15 {
   margin-top: 15px
}

.m-top-30 {
   margin-top: 30px
}

.m-top-50 {
   margin-top: 50px
}

.m-top-70 {
   margin-top: 70px
}

.m-top-100 {
   margin-top: 100px
}

.m-top-150 {
   margin-top: 150px
}

.m-top-200 {
   margin-top: 200px
}

.m-bottom-0 {
   margin-bottom: 0
}

.m-bottom-15 {
   margin-bottom: 15px
}

.m-bottom-30 {
   margin-bottom: 30px
}

.m-bottom-50 {
   margin-bottom: 50px
}

.m-bottom-70 {
   margin-bottom: 70px
}

.m-bottom-100 {
   margin-bottom: 100px
}

.m-bottom-150 {
   margin-bottom: 150px
}

.m-bottom-200 {
   margin-bottom: 200px
}

.m-left-0 {
   margin-left: 0
}

.m-left-15 {
   margin-left: 15px
}

.m-left-30 {
   margin-left: 30px
}

.m-left-50 {
   margin-left: 50px
}

.m-left-70 {
   margin-left: 70px
}

.m-left-100 {
   margin-left: 100px
}

.m-left-150 {
   margin-left: 150px
}

.m-left-200 {
   margin-left: 200px
}

.m-right-0 {
   margin-right: 0
}

.m-right-15 {
   margin-right: 15px
}

.m-right-30 {
   margin-right: 30px
}

.m-right-50 {
   margin-right: 50px
}

.m-right-70 {
   margin-right: 70px
}

.m-right-100 {
   margin-right: 100px
}

.m-right-150 {
   margin-right: 150px
}

.m-right-200 {
   margin-right: 200px
}

.p-0 {
   padding: 0
}

.p-15 {
   padding: 15px
}

.p-30 {
   padding: 30px
}

.p-50 {
   padding: 50px
}

.p-70 {
   padding: 70px
}

.p-100 {
   padding: 100px
}

.p-150 {
   padding: 150px
}

.p-200 {
   padding: 200px
}

.p-top-0 {
   padding-top: 0
}

.p-top-15 {
   padding-top: 15px
}

.p-top-30 {
   padding-top: 30px
}

.p-top-50 {
   padding-top: 50px
}

.p-top-70 {
   padding-top: 70px
}

.p-top-100 {
   padding-top: 100px
}

.p-top-150 {
   padding-top: 150px
}

.p-top-200 {
   padding-top: 200px
}

.p-bottom-0 {
   padding-bottom: 0
}

.p-bottom-15 {
   padding-bottom: 15px
}

.p-bottom-30 {
   padding-bottom: 30px
}

.p-bottom-50 {
   padding-bottom: 50px
}

.p-bottom-70 {
   padding-bottom: 70px
}

.p-bottom-100 {
   padding-bottom: 100px
}

.p-bottom-150 {
   padding-bottom: 150px
}

.p-bottom-200 {
   padding-bottom: 200px
}

.p-left-0 {
   padding-left: 0
}

.p-left-15 {
   padding-left: 15px
}

.p-left-30 {
   padding-left: 30px
}

.p-left-50 {
   padding-left: 50px
}

.p-left-70 {
   padding-left: 70px
}

.p-left-100 {
   padding-left: 100px
}

.p-left-150 {
   padding-left: 150px
}

.p-left-200 {
   padding-left: 200px
}

.p-right-0 {
   padding-right: 0
}

.p-right-15 {
   padding-right: 15px
}

.p-right-30 {
   padding-right: 30px
}

.p-right-50 {
   padding-right: 50px
}

.p-right-70 {
   padding-right: 70px
}

.p-right-100 {
   padding-right: 100px
}

.p-right-150 {
   padding-right: 150px
}

.p-right-200 {
   padding-right: 200px
}

.shortcode-tab-content a {
   border-bottom: 1px dashed #ddd;
   font-size: 14px;
   padding: 10px 15px;
   color: #27ae60
}

   .shortcode-tab-content a:hover {
      padding-left: 15px;
      color: #343a40
   }

.single_shortcodes_title {
   border-bottom: 1px solid #ddd
}

   .single_shortcodes_title h4 {
      font-weight: 400;
      font-size: 20px
   }

.modal-dialog.custom-modal {
   max-width: 1160px !important
}

.bg-gray {
   background-color: #f6f6f6 !important
}

.bg-flat-lightgreen {
   background-color: #1abc9c !important
}

.text-flat-lightgreen {
   color: #1abc9c !important
}

.btn-flat-lightgreen {
   background-color: #1abc9c;
   border-color: #1abc9c;
   color: #fff
}

   .btn-flat-lightgreen:hover, .btn-flat-lightgreen:focus {
      background-color: transparent;
      border-color: #058169;
      color: #058169
   }

.bg-flat-green {
   background-color: #16a085 !important
}

.text-flat-green {
   color: #16a085 !important
}

.btn-flat-green {
   background-color: #16a085;
   border-color: #16a085;
   color: #fff
}

   .btn-flat-green:hover,
   .btn-flat-green:focus {
      background-color: transparent;
      border-color: #16a085;
      color: #16a085
   }

.bg-flat-orange {
   background-color: #f39c12 !important
}

.text-flat-orange {
   color: #f39c12 !important
}

.btn-flat-orange {
   background-color: #f39c12;
   border-color: #f39c12;
   color: #fff
}

   .btn-flat-orange:hover, .btn-flat-orange:focus {
      background-color: transparent;
      border-color: #f39c12;
      color: #f39c12
   }

.bg-flat-sunflower {
   background-color: #f1c40f !important
}

.text-flat-sunflower {
   color: #f1c40f !important
}

.btn-flat-sunflower {
   background-color: #f1c40f;
   border-color: #f1c40f;
   color: #fff
}

   .btn-flat-sunflower:hover, .btn-flat-sunflower:focus {
      background-color: transparent;
      border-color: #f1c40f;
      color: #f1c40f
   }

.bg-flat-carrot {
   background-color: #e67e22 !important
}

.text-flat-carrot {
   color: #e67e22 !important
}

.btn-flat-carrot {
   background-color: #e67e22;
   border-color: #e67e22;
   color: #fff
}

   .btn-flat-carrot:hover, .btn-flat-carrot:focus {
      background-color: transparent;
      border-color: #e67e22;
      color: #e67e22
   }

.bg-flat-pumpkin {
   background-color: #d35400 !important
}

.text-flat-pumpkin {
   color: #d35400 !important
}

.btn-flat-pumpkin {
   background-color: #d35400;
   border-color: #d35400;
   color: #fff
}

   .btn-flat-pumpkin:hover, .btn-flat-pumpkin:focus {
      background-color: transparent;
      border-color: #d35400;
      color: #d35400
   }

.bg-flat-blue {
   background-color: #3498db !important
}

.text-flat-blue {
   color: #3498db !important
}

.btn-flat-blue {
   background-color: #3498db;
   border-color: #3498db;
   color: #fff
}

   .btn-flat-blue:hover, .btn-flat-blue:focus {
      background-color: transparent;
      border-color: #3498db;
      color: #3498db
   }

.bg-flat-deepblue {
   background-color: #2980b9 !important
}

.text-flat-deepblue {
   color: #2980b9 !important
}

.btn-flat-deepblue {
   background-color: #2980b9;
   border-color: #2980b9;
   color: #fff
}

   .btn-flat-deepblue:hover, .btn-flat-deepblue:focus {
      background-color: transparent;
      border-color: #2980b9;
      color: #2980b9
   }

.bg-flat-midnightblue {
   background-color: #2c3e50 !important
}

.text-flat-midnightblue {
   color: #2c3e50 !important
}

.btn-flat-midnightblue {
   background-color: #2c3e50;
   border-color: #2c3e50;
   color: #fff
}

   .btn-flat-midnightblue:hover, .btn-flat-midnightblue:focus {
      background-color: transparent;
      border-color: #2c3e50;
      color: #2c3e50
   }

.bg-flat-clouds {
   background-color: #ecf0f1 !important
}

.text-flat-clouds {
   color: #ecf0f1 !important
}

.btn-flat-clouds {
   background-color: #ecf0f1;
   border-color: #ecf0f1;
   color: #000
}

   .btn-flat-clouds:hover, .btn-flat-clouds:focus {
      background-color: transparent;
      border-color: #ecf0f1;
      color: #000
   }

.bg-flat-silver {
   background-color: #bdc3c7 !important
}

.text-flat-silver {
   color: #bdc3c7 !important
}

.btn-flat-silver {
   background-color: #bdc3c7;
   border-color: #bdc3c7;
   color: #fff
}

   .btn-flat-silver:hover, .btn-flat-silver:focus {
      background-color: transparent;
      border-color: #bdc3c7;
      color: #bdc3c7
   }

.bg-flat-concrete {
   background-color: #95a5a6 !important
}

.text-flat-concrete {
   color: #95a5a6 !important
}

.btn-flat-concrete {
   background-color: #95a5a6;
   border-color: #95a5a6;
   color: #fff
}

   .btn-flat-concrete:hover, .btn-flat-concrete:focus {
      background-color: transparent;
      border-color: #95a5a6;
      color: #95a5a6
   }

.bg-mat-red {
   background-color: #f44336 !important
}

.text-mat-red {
   color: #f44336 !important
}

.btn-mat-red {
   background-color: #f44336;
   border-color: #f44336;
   color: #fff
}

   .btn-mat-red:hover, .btn-mat-red:focus {
      background-color: transparent;
      border-color: #f44336;
      color: #f44336
   }

.bg-mat-pink {
   background-color: #e91e63 !important
}

.text-mat-pink {
   color: #e91e63 !important
}

.btn-mat-pink {
   background-color: #e91e63;
   border-color: #e91e63;
   color: #fff
}

   .btn-mat-pink:hover, .btn-mat-pink:focus {
      background-color: transparent;
      border-color: #e91e63;
      color: #e91e63
   }

.bg-mat-purple {
   background-color: #9c27b0 !important
}

.text-mat-purple {
   color: #9c27b0 !important
}

.btn-mat-purple {
   background-color: #9c27b0;
   border-color: #9c27b0;
   color: #fff
}

   .btn-mat-purple:hover, .btn-mat-purple:focus {
      background-color: transparent;
      border-color: #9c27b0;
      color: #9c27b0
   }

.bg-mat-deeppurple {
   background-color: #673ab7 !important
}

.text-mat-deeppurple {
   color: #673ab7 !important
}

.btn-mat-deeppurple {
   background-color: #673ab7;
   border-color: #673ab7;
   color: #fff
}

   .btn-mat-deeppurple:hover, .btn-mat-deeppurple:focus {
      background-color: transparent;
      border-color: #673ab7;
      color: #673ab7
   }

.bg-mat-indigo {
   background-color: #3f51b5 !important
}

.text-mat-indigo {
   color: #3f51b5 !important
}

.btn-mat-indigo {
   background-color: #3f51b5;
   border-color: #3f51b5;
   color: #fff !important
}

   .btn-mat-indigo:hover, .btn-mat-indigo:focus {
      background-color: transparent;
      border-color: #3f51b5;
      color: #3f51b5 !important
   }

.bg-mat-blue {
   background-color: #2196f3 !important
}

.text-mat-blue {
   color: #2196f3 !important
}

.btn-mat-blue {
   background-color: #2196f3;
   border-color: #2196f3;
   color: #fff
}

   .btn-mat-blue:hover, .btn-mat-blue:focus {
      background-color: transparent;
      border-color: #2196f3;
      color: #2196f3
   }

.bg-mat-lightblue {
   background-color: #03a9f4 !important
}

.text-mat-lightblue {
   color: #03a9f4 !important
}

.btn-mat-lightblue {
   background-color: #03a9f4;
   border-color: #03a9f4;
   color: #fff
}

   .btn-mat-lightblue:hover, .btn-mat-lightblue:focus {
      background-color: transparent;
      border-color: #03a9f4;
      color: #03a9f4
   }

.bg-mat-cyan {
   background-color: #00bcd4 !important
}

.text-mat-cyan {
   color: #00bcd4 !important
}

.btn-mat-cyan {
   background-color: #00bcd4;
   border-color: #00bcd4;
   color: #fff
}

   .btn-mat-cyan:hover, .btn-mat-cyan:focus {
      background-color: transparent;
      border-color: #00bcd4;
      color: #00bcd4
   }

.bg-mat-teal {
   background-color: #009688 !important
}

.text-mat-teal {
   color: #009688 !important
}

.btn-mat-teal {
   background-color: #009688;
   border-color: #009688;
   color: #fff
}

   .btn-mat-teal:hover, .btn-mat-teal:focus {
      background-color: transparent;
      border-color: #009688;
      color: #009688
   }

.bg-mat-green {
   background-color: #4caf50 !important
}

.text-mat-green {
   color: #4caf50 !important
}

.btn-mat-green {
   background-color: #4caf50;
   border-color: #4caf50;
   color: #fff
}

   .btn-mat-green:hover, .btn-mat-green:focus {
      background-color: transparent;
      border-color: #4caf50;
      color: #4caf50
   }

.bg-mat-lightgreen {
   background-color: #8bc34a !important
}

.text-mat-lightgreen {
   color: #8bc34a !important
}

.btn-mat-lightgreen {
   background-color: #8bc34a;
   border-color: #8bc34a;
   color: #fff
}

   .btn-mat-lightgreen:hover, .btn-mat-lightgreen:focus {
      background-color: transparent;
      border-color: #8bc34a;
      color: #8bc34a
   }

.bg-mat-lime {
   background-color: #cddc39 !important
}

.text-mat-lime {
   color: #cddc39 !important
}

.btn-mat-lime {
   background-color: #cddc39;
   border-color: #cddc39;
   color: #fff
}

   .btn-mat-lime:hover, .btn-mat-lime:focus {
      background-color: transparent;
      border-color: #cddc39;
      color: #cddc39
   }

.bg-mat-yellow {
   background-color: #ffeb3b !important
}

.text-mat-yellow {
   color: #ffeb3b !important
}

.btn-mat-yellow {
   background-color: #ffeb3b;
   border-color: #ffeb3b;
   color: #fff
}

   .btn-mat-yellow:hover, .btn-mat-yellow:focus {
      background-color: transparent;
      border-color: #ffeb3b;
      color: #ffeb3b
   }

.bg-mat-amber {
   background-color: #ffc107 !important
}

.text-mat-amber {
   color: #ffc107 !important
}

.btn-mat-amber {
   background-color: #ffc107;
   border-color: #ffc107;
   color: #fff
}

   .btn-mat-amber:hover, .btn-mat-amber:focus {
      background-color: transparent;
      border-color: #ffc107;
      color: #ffc107
   }

.bg-mat-orange {
   background-color: #ff9800 !important
}

.text-mat-orange {
   color: #ff9800 !important
}

.btn-mat-orange {
   background-color: #ff9800;
   border-color: #ff9800;
   color: #fff
}

   .btn-mat-orange:hover, .btn-mat-orange:focus {
      background-color: transparent;
      border-color: #ff9800;
      color: #ff9800
   }

.bg-mat-deeporange {
   background-color: #ff5722 !important
}

.text-mat-deeporange {
   color: #ff5722 !important
}

.btn-mat-deeporange {
   background-color: #ff5722;
   border-color: #ff5722;
   color: #fff
}

   .btn-mat-deeporange:hover, .btn-mat-deeporange:focus {
      background-color: transparent;
      border-color: #ff5722;
      color: #ff5722
   }

.bg-mat-brown {
   background-color: #795548 !important
}

.text-mat-brown {
   color: #795548 !important
}

.btn-mat-brown {
   background-color: #795548;
   border-color: #795548;
   color: #fff
}

   .btn-mat-brown:hover, .btn-mat-brown:focus {
      background-color: transparent;
      border-color: #795548;
      color: #795548
   }

.bg-mat-gray {
   background-color: #9e9e9e !important
}

.text-mat-gray {
   color: #9e9e9e !important
}

.btn-mat-gray {
   background-color: #9e9e9e;
   border-color: #9e9e9e;
   color: #fff
}

   .btn-mat-gray:hover, .btn-mat-gray:focus {
      background-color: transparent;
      border-color: #9e9e9e;
      color: #9e9e9e
   }

.bg-mat-bluegray {
   background-color: #607d8b !important
}

.text-mat-bluegray {
   color: #607d8b !important
}

.btn-mat-bluegray {
   background-color: #607d8b;
   border-color: #607d8b;
   color: #fff
}

   .btn-mat-bluegray:hover, .btn-mat-bluegray:focus {
      background-color: transparent;
      border-color: #607d8b;
      color: #607d8b
   }

.btn-pill {
   padding: .5em 2em;
   border-radius: 30px
}

   .btn-pill.btn-sm {
      padding: .25em 1em;
      border-radius: 30px
   }

.btn-outline {
   background-color: transparent !important;
   color: #000
}

.btn-dashed-outline {
   background-color: transparent;
   border-style: dashed;
   border-width: 1px;
   color: #000
}

.badge {
   font-weight: 400
}

.section_padding_30 {
   padding: 30px 0
}

/* Digital Agency Version CSS */

.agency_version .default-title h2,
.agency_version .default-description > p,
.agency_version h2.default-description {
   color: #fff;
}

.agency_version .single_feature {
   border-radius: 4px;
   padding: 30px;
   color: #fff;
}

   .agency_version .single_feature .feature_img i {
      color: inherit;
      font-size: 50px;
   }

   .agency_version .single_feature .feature_img {
      height: auto;
      left: 0;
      margin-bottom: 15px;
      position: relative;
      width: auto;
   }

.agency_version .agency_about_img {
   width: 100%;
   position: relative;
   z-index: 1;
}

.agency_version .about_us_text {
   border: 5px solid rgba(255, 255, 255, 0.5);
   margin: 0 50px;
   padding: 30px;
}

   .agency_version .single_feature .feature_text p,
   .agency_version .single_feature .feature_text h4,
   .agency_version .about_us_text a,
   .agency_version .about_us_text > p {
      color: #fff;
   }

.agency_version .single_service {
   border: none;
   border-radius: 5px;
}

.agency_version .single_service_img > i {
   color: #fff;
   font-size: 50px;
}

.agency_version .advisor_thumb:after {
   background-color: transparent;
}

.agency_version .single_advisor_details_info {
   background-color: #2c3e50;
   border-radius: 6px;
   bottom: 30px;
   height: auto;
   left: 30px;
   padding: 30px;
   position: absolute;
   -webkit-transition-duration: 500ms;
   transition-duration: 500ms;
   width: calc(100% - 60px);
   z-index: 8;
}

   .agency_version .single_service_content p,
   .agency_version .single_service_title > h5,
   .agency_version .single_advisor_details_info > p,
   .agency_version .single_advisor_details_info > h5 {
      color: #fff;
   }

.agency_version .single_price_plan .price h4 {
   line-height: 1;
   padding-bottom: 20px;
}

.agency_version .single_price_plan .buy_now > a {
   background-color: transparent;
   border: 0 solid transparent;
   -webkit-transition-duration: 500ms;
   transition-duration: 500ms;
}

   .agency_version .single_price_plan .buy_now > a:hover,
   .agency_version .single_price_plan .buy_now > a:focus {
      background-color: transparent;
      border: 0 solid transparent;
      color: #27ae60;
      text-decoration: underline;
   }

.agency_version .map_area {
   height: 450px;
   width: 100%;
}

.agency_version .footer_bottom_area {
   background-color: transparent;
   padding: 20px 0;
}

.agency_version .social_links_area {
   border-bottom: 0 solid rgba(255, 255, 255, 0.15);
   padding: 30px 0;
   text-align: left;
}

.agency_version .footer_bottom {
   padding: 35px 0;
   text-align: right;
}

.agency_version .social_links_area > a {
   border: 2px solid #ddd;
   font-size: 16px;
   height: 35px;
   margin: 0 3px;
   width: 35px;
}

   .agency_version .social_links_area > a i {
      line-height: 31px;
   }

.agency_version.message_now_area .section_heading p,
.agency_version.message_now_area .section_heading h3 {
   color: #fff;
}

/* Agency Cool Facts */

.agency_version.cool_facts_area {
   background-color: #27ae60;
   text-align: center;
}

.agency_version .cool_fact_text h4 {
   color: #fff;
   font-weight: 300;
   font-size: 16px;
}

.agency_version .cool_fact_text > h2 {
   color: #fff;
}

.agency_version.message_now_area .default-button {
   background-color: #27ae60;
   color: #fff;
}

.single_service {
   margin-bottom: 30px;
   position: relative;
   -webkit-transition-duration: 500ms;
   transition-duration: 500ms;
   z-index: 1;
   min-height: 475px;
}

.single_service_title {
   margin-top: 15px;
}

.callback-backdrop {
   position: fixed;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0,0,0,.4);
   z-index: 9998;
}

.callback-modal {
   background: #fff;
   padding: 1rem;
   border-radius: .5rem;
   min-width: 320px;
   z-index: 9999;
}


.fx-hero {
   background: linear-gradient(135deg, #F8F6F2 0%, #EEE9E0 100%);
   border-bottom: 1px solid rgba(0,0,0,0.07);
   padding: 56px 0 48px;
}

.fx-accent-icon {
   width: 64px;
   height: 64px;
   border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 28px;
   color: #ffffff;
   margin-bottom: 20px;
   flex-shrink: 0;
}

.fx-eyebrow {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-bottom: 12px;
   opacity: 0.7;
}

.fx-h1 {
   font-size: clamp(1.6rem, 3vw, 2.2rem);
   font-weight: 700;
   line-height: 1.2;
   color: #1C1C2E;
   margin-bottom: 16px;
}

.fx-lead {
   font-size: 1.05rem;
   line-height: 1.7;
   color: #4B5563;
   max-width: 540px;
}

.fx-hero-image {
   width: 100%;
   border-radius: 16px;
   box-shadow: 0 12px 40px rgba(0,0,0,0.12);
   object-fit: cover;
   max-height: 340px;
}

.fx-grid-section {
   padding: 56px 0 48px;
   background: #ffffff;
}

.fx-section-label {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #9CA3AF;
   margin-bottom: 8px;
}

.fx-section-title {
   font-size: 1.7rem;
   font-weight: 700;
   color: #1C1C2E;
   margin-bottom: 40px;
}

.fx-card {
   background: #F8F6F2;
   border-radius: 14px;
   border: 1px solid rgba(0,0,0,0.06);
   padding: 24px;
   height: 100%;
   transition: box-shadow 0.2s, transform 0.2s;
}

   .fx-card:hover {
      box-shadow: 0 6px 24px rgba(0,0,0,0.08);
      transform: translateY(-2px);
   }

.fx-card-icon {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   margin-bottom: 14px;
   flex-shrink: 0;
}

.fx-card h3 {
   font-size: 0.95rem;
   font-weight: 700;
   color: #1C1C2E;
   margin-bottom: 8px;
   line-height: 1.3;
}

.fx-card p {
   font-size: 0.88rem;
   line-height: 1.7;
   color: #5F5E5A;
   margin: 0;
}

.fx-cta {
   background: linear-gradient(135deg, #0E1628 0%, #185FA5 100%);
   padding: 48px 0;
   text-align: center;
}

   .fx-cta h2 {
      color: #ffffff;
      font-size: 1.6rem;
      font-weight: 700;
      margin-bottom: 8px;
   }

   .fx-cta p {
      color: rgba(255,255,255,0.7);
      margin-bottom: 28px;
      font-size: 1rem;
   }

.fx-btn-primary {
   background: #ff5700;
   color: #ffffff;
   border: none;
   padding: 12px 28px;
   border-radius: 8px;
   font-weight: 600;
   font-size: 14px;
   cursor: pointer;
   transition: background 0.15s, transform 0.15s;
   margin: 4px;
}

   .fx-btn-primary:hover {
      background: #cc4400;
      transform: translateY(-1px);
      color: #fff;
   }

.fx-btn-secondary {
   background: transparent;
   color: #185FA5;
   border: 1.5px solid #185FA5;
   padding: 12px 28px;
   border-radius: 8px;
   font-weight: 600;
   font-size: 14px;
   text-decoration: none;
   display: inline-block;
   transition: background 0.15s, color 0.15s;
   margin: 4px;
}

   .fx-btn-secondary:hover {
      background: #185FA5;
      color: #ffffff;
      text-decoration: none;
   }

.fx-btn-outline {
   background: transparent;
   color: #ffffff;
   border: 1.5px solid rgba(255,255,255,0.4);
   padding: 12px 28px;
   border-radius: 8px;
   font-weight: 600;
   font-size: 14px;
   text-decoration: none;
   margin: 4px;
   display: inline-block;
   transition: border-color 0.15s, background 0.15s;
}

   .fx-btn-outline:hover {
      border-color: #ffffff;
      background: rgba(255,255,255,0.08);
      color: #fff;
   }

.fx-breadcrumb {
   padding: 12px 0;
   background: #F8F6F2;
   border-bottom: 1px solid rgba(0,0,0,0.06);
   font-size: 13px;
   color: #9CA3AF;
}

   .fx-breadcrumb a {
      color: #185FA5;
      text-decoration: none;
   }

      .fx-breadcrumb a:hover {
         text-decoration: underline;
      }

   .fx-breadcrumb span {
      margin: 0 6px;
   }

@@media (max-width: 768px) {
   .fx-hero {
      padding: 36px 0 32px;
   }

   .fx-hero-image {
      margin-top: 24px;
   }

   .fx-grid-section {
      padding: 36px 0 32px;
   }

   .fx-section-title {
      font-size: 1.35rem;
      margin-bottom: 28px;
   }
}

















































































































.badge-differentiator {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: #eef4fb;
   color: #185FA5;
   border: 1px solid #b5d4f4;
   border-radius: 20px;
   padding: 5px 14px;
   font-size: 13px;
   font-weight: 500;
}

   .badge-differentiator i {
      font-size: 14px;
   }

.social-proof-stat {
   text-align: center;
   min-width: 90px;
}

.industry-home-card {
   background: #fff;
   border: 1px solid #e0e0e0;
   border-radius: 10px;
   padding: 1.25rem;
   transition: box-shadow 0.2s ease, border-color 0.2s ease;
   color: #1a1a2e;
   height: 100%;
}

   .industry-home-card:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
      border-color: #b5d4f4;
   }

   .industry-home-card i {
      color: #185FA5;
      font-size: 18px;
   }
/* ── Dark stats band ─────────────────────────────────────────────── */
.wx-dark-band {
   background: linear-gradient(135deg, #0E1628 0%, #0c2a4a 60%, #185FA5 100%);
   padding: 72px 0;
}

.wx-db-eyebrow {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: rgba(255,255,255,0.4);
   margin-bottom: 14px;
}

.wx-db-heading {
   font-size: clamp(1.5rem, 2.5vw, 2rem);
   font-weight: 700;
   color: #ffffff;
   line-height: 1.25;
   margin-bottom: 16px;
}

.wx-db-body {
   font-size: 1rem;
   color: rgba(255,255,255,0.6);
   line-height: 1.7;
   margin-bottom: 0;
}

.wx-db-btn-primary {
   background: #ff5700;
   color: #ffffff;
   border: none;
   padding: 12px 26px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.15s, transform 0.15s;
}

   .wx-db-btn-primary:hover {
      background: #cc4400;
      transform: translateY(-1px);
   }

.wx-db-btn-outline {
   color: rgba(255,255,255,0.8);
   border: 1.5px solid rgba(255,255,255,0.3);
   padding: 11px 26px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
   display: inline-block;
   transition: border-color 0.15s, background 0.15s;
}

   .wx-db-btn-outline:hover {
      border-color: rgba(255,255,255,0.7);
      background: rgba(255,255,255,0.06);
      color: #fff;
   }

.wx-stat-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.wx-stat-card {
   background: rgba(255,255,255,0.06);
   border: 1px solid rgba(255,255,255,0.1);
   border-radius: 12px;
   padding: 24px 20px;
   transition: background 0.18s;
}

   .wx-stat-card:hover {
      background: rgba(255,255,255,0.1);
   }

.wx-stat-accent-orange {
   border-top: 3px solid #ff5700;
}

.wx-stat-accent-blue {
   border-top: 3px solid #60A5FA;
}

.wx-stat-number {
   font-size: 2.4rem;
   font-weight: 700;
   color: #ffffff;
   line-height: 1;
   margin-bottom: 8px;
}

.wx-stat-label {
   font-size: 13px;
   color: rgba(255,255,255,0.5);
   line-height: 1.5;
}

@@media (max-width: 576px) {
   .wx-dark-band {
      padding: 48px 0;
   }

   .wx-stat-number {
      font-size: 1.9rem;
   }
}

/* ── Why WorXflo section ────────────────────────────────────────── */
.wx-why-section {
   background: #ffffff;
}

.wx-why-card {
   background: #F8F6F2;
   border: 1px solid rgba(0,0,0,0.06);
   border-radius: 14px;
   padding: 28px 24px;
   height: 100%;
   transition: box-shadow 0.2s ease, transform 0.2s ease;
}

   .wx-why-card:hover {
      box-shadow: 0 6px 24px rgba(0,0,0,0.08);
      transform: translateY(-2px);
   }

.wx-why-icon {
   width: 44px;
   height: 44px;
   border-radius: 11px;
   background: #EBF4FF;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   color: #185FA5;
   margin-bottom: 16px;
}

.wx-why-heading {
   font-size: 1rem;
   font-weight: 700;
   color: #1C1C2E;
   margin-bottom: 10px;
   line-height: 1.3;
}

.wx-why-body {
   font-size: 0.9rem;
   line-height: 1.75;
   color: #5F5E5A;
   margin: 0;
}

.wx-why-strip {
   border-top: 1px solid rgba(0,0,0,0.08);
   padding-top: 32px;
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
   gap: 24px;
}

.wx-why-stat {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
}

.wx-why-stat-number {
   font-size: 1.9rem;
   font-weight: 700;
   color: #1C1C2E;
   line-height: 1;
}

.wx-why-stat-label {
   font-size: 12px;
   color: #9CA3AF;
   text-align: center;
}

.wx-why-strip-divider {
   width: 1px;
   height: 36px;
   background: rgba(0,0,0,0.08);
}

@@media (max-width: 576px) {
   .wx-why-strip-divider {
      display: none;
   }

   .wx-why-strip {
      justify-content: center;
   }
}

h2.tracking-in-expand {
   font-size: 6em;
}

@@media (min-width:390px) and (max-width:720px) {
   h2.tracking-in-expand {
      font-size: 2em;
   }
}

@@media (max-width: 390px) {
   h2.tracking-in-expand {
      font-size: 1.5em;
   }
}


/* ── Gradient dark band ──────────────────────────────────────────── */
.wx-loc-dark-band {
   background: linear-gradient(135deg, #0E1628 0%, #0c2a4a 60%, #185FA5 100%);
   padding: 72px 0;
}

.wx-ldb-eyebrow {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: rgba(255,255,255,0.4);
   margin-bottom: 14px;
}

.wx-ldb-heading {
   font-size: clamp(1.5rem,2.5vw,2rem);
   font-weight: 700;
   color: #fff;
   line-height: 1.25;
   margin-bottom: 16px;
}

.wx-ldb-body {
   font-size: 1rem;
   color: rgba(255,255,255,0.6);
   line-height: 1.7;
   margin: 0;
}

.wx-ldb-list {
   list-style: none;
   padding: 0;
   margin: 16px 0 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

   .wx-ldb-list li {
      font-size: 14px;
      color: rgba(255,255,255,0.6);
      display: flex;
      align-items: flex-start;
      gap: 10px;
   }

      .wx-ldb-list li::before {
         content: "";
         width: 6px;
         height: 6px;
         border-radius: 50%;
         background: #185FA5;
         flex-shrink: 0;
         margin-top: 6px;
      }

.wx-ldb-actions {
   margin-top: 28px;
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

.wx-ldb-btn-primary {
   background: #ff5700;
   color: #fff;
   border: none;
   padding: 12px 26px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.15s,transform 0.15s;
}

   .wx-ldb-btn-primary:hover {
      background: #cc4400;
      transform: translateY(-1px);
   }

.wx-ldb-btn-outline {
   color: rgba(255,255,255,0.8);
   border: 1.5px solid rgba(255,255,255,0.3);
   padding: 11px 26px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
   display: inline-block;
   transition: border-color 0.15s,background 0.15s;
}

   .wx-ldb-btn-outline:hover {
      border-color: rgba(255,255,255,0.7);
      background: rgba(255,255,255,0.06);
      color: #fff;
   }

.wx-ldb-stat-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.wx-ldb-stat-card {
   background: #fff;
   border: 1px solid rgba(14,22,40,0.08);
   border-radius: 12px;
   padding: 22px 18px;
   box-shadow: 0 1px 3px rgba(14,22,40,0.06);
}

.wx-ldb-stat-orange {
   border-top: 3px solid #ff5700;
}

.wx-ldb-stat-blue {
   border-top: 3px solid #185FA5;
}

.wx-ldb-stat-number {
   font-size: 2.2rem;
   font-weight: 700;
   color: #0E1628;
   line-height: 1;
   margin-bottom: 6px;
}

.wx-ldb-stat-label {
   font-size: 13px;
   color: rgba(14,22,40,0.55);
   line-height: 1.4;
}

@@media (max-width:768px) {
   .wx-loc-dark-band {
      padding: 48px 0;
   }
}




.fx-features-hero {
   background: linear-gradient(135deg, #F8F6F2 0%, #EEE9E0 100%);
   border-bottom: 1px solid rgba(0,0,0,0.07);
   padding: 56px 0 48px;
}

.fx-features-icon {
   width: 64px;
   height: 64px;
   border-radius: 16px;
   background: #185FA5;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 28px;
   color: #fff;
   margin: 0 auto 20px;
}

.fx-features-h1 {
   font-size: clamp(1.7rem, 3vw, 2.2rem);
   font-weight: 700;
   color: #1C1C2E;
   margin-bottom: 14px;
}

.fx-features-lead {
   font-size: 1.05rem;
   color: #4B5563;
   max-width: 560px;
   margin: 0 auto;
   line-height: 1.7;
}

.fx-features-btn-primary {
   background: #ff5700;
   color: #fff;
   border: none;
   padding: 12px 26px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.15s;
}

   .fx-features-btn-primary:hover {
      background: #cc4400;
   }

.fx-features-btn-outline {
   color: #185FA5;
   border: 1.5px solid #185FA5;
   padding: 11px 26px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
   display: inline-block;
   transition: background 0.15s;
}

   .fx-features-btn-outline:hover {
      background: #EBF4FF;
   }