.hone-banner-effect {
  background: url(../../../../uploads/dockloq/home-banner.png) no-repeat;
  background-size: cover;
      background-position: top center;
}
.chip-disc-primary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-2B62EF);
}
.ig-box {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, #ebf7ff 0%, var(--bg-white) 100%);
  box-shadow:
    0 1px 0 0 var(--bg-white) inset,
    0 0 0 1px var(--border-E2E9F0);
}
.counter-box {
  display: flex;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  color: var(--text-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  background: linear-gradient(135deg, var(--color-2B62EF) 0%, var(--color-30aff8) 100%); 
} 
.avatar-box {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  color: var(--text-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  background: linear-gradient(135deg, var(--color-63B3FF)  0%,  var(--color-2B62EF) 100%); 
} 

.card-hover-primary {
  transition: all 0.6s ease;
  background-position: left 110px bottom 44px;
}
.card-hover-primary:hover {
  border-color: var(--primary-color);
  box-shadow:
    0 4px 6px -1px rgba(10, 13, 18, 0.1),
    0 2px 4px -2px rgba(10, 13, 18, 0.06);
  background: radial-gradient(
      50% 50% at 50% 50%,
      rgba(166, 210, 255, 0.4) 0%,
      rgba(166, 210, 255, 0) 100%
    )
    no-repeat;
  background-position: left 110px bottom 44px;
}

.banner-floting-img{
  position: absolute;
  top: var(--top, auto);
  left: var(--left, auto);
  right: var(--right, auto);
  bottom: var(--bottom, auto); 
  height: auto;
  transition: all 0.6s ease;
}

.ig-box.ig-box-white{
  background: var(--bg-white);
  box-shadow: 0 4px 14px -6px rgba(40, 103, 228, 0.35);
   border: 1px solid var(--border-E2E9F0);
}
.ig-box.bg-EBF1FF{
  background: var(--bg-EBF1FF);
  box-shadow: 0 4px 14px -6px rgba(40, 103, 228, 0.35);
   border: 1px solid var(--border-E2E9F0);
}
 
.grid-box-conrainer{
  gap: 1px;
}
.grid-box-conrainer .grid-box{
   outline: 1px solid var(--border-E2E9F0);
   outline-offset: 0px;
   transition: all 0.6s ease;
}
.grid-box-conrainer .grid-box:hover{
   background: var(--bg-EBF1FF);
}

.grid-box-conrainer .grid-box .ig-grid-box{
  transition: all 0.6s ease;
  box-shadow: 0 0 0 0;
}
.grid-box-conrainer .grid-box:hover .ig-grid-box{
   border-color: var(--primary-color);
   box-shadow: 0 6px 24px -4px rgba(54, 112, 253, 0.20);


}
.hover-shadow{
  transition: box-shadow 0.6s ease;
}
.hover-shadow:hover{
  box-shadow: 0 12px 40px -8px rgba(72, 100, 145, 0.14), 0 2px 6px 0 rgba(93, 100, 111, 0.06);
}
/* 1. One Common Class for all lists */

/* 2. Different image classes that you just add to the <ul> */
.custom-list li::before {
  content: "";
  display: inline-block;
  background-image: var(--list-icon);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
}

.custom-list.list-check li::before {
  --list-icon: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" rx="8" fill="%23D6FAD6"/><path d="M12 5L6.5 10.5L4 8" stroke="%23005905" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.custom-list.list-demo-check li::before {
  --list-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M10.7362 24.0343C11.1186 23.9838 11.5048 24.0875 11.8094 24.3221L13.2132 25.3993C13.6773 25.7558 14.3228 25.7558 14.7855 25.3993L16.2424 24.2806C16.5146 24.0719 16.8581 23.9799 17.1977 24.0253L19.0201 24.2651C19.5995 24.3416 20.1582 24.0188 20.3824 23.4783L21.0837 21.7827C21.2146 21.4652 21.466 21.2137 21.7836 21.0828L23.479 20.3815C24.0195 20.1585 24.3423 19.5985 24.2658 19.0191L24.0351 17.2627C23.9845 16.8803 24.0882 16.494 24.3228 16.1894L25.4 14.7855C25.7564 14.3215 25.7564 13.6759 25.4 13.2132L24.2814 11.7562C24.0727 11.484 23.9807 11.1404 24.026 10.8008L24.2658 8.97828C24.3423 8.39885 24.0195 7.84017 23.479 7.61591L21.7836 6.91464C21.466 6.78371 21.2146 6.53224 21.0837 6.21466L20.3824 4.51915C20.1595 3.97861 19.5995 3.65584 19.0201 3.73232L17.1977 3.97213C16.8581 4.01879 16.5146 3.92676 16.2437 3.71935L14.7868 2.60068C14.3228 2.24421 13.6773 2.24421 13.2145 2.60068L11.7576 3.71935C11.4854 3.92676 11.1419 4.01879 10.8023 3.97472L8.97987 3.73491C8.40047 3.65843 7.84181 3.9812 7.61757 4.52174L6.91763 6.21725C6.78542 6.53354 6.53396 6.78501 6.21769 6.91723L4.52227 7.61721C3.98176 7.84146 3.65901 8.40015 3.73549 8.97958L3.97528 10.8021C4.01935 11.1417 3.92732 11.4852 3.71993 11.7562L2.60132 13.2132C2.24487 13.6772 2.24487 14.3228 2.60132 14.7855L3.71993 16.2425C3.92862 16.5147 4.02065 16.8582 3.97528 17.1979L3.73549 19.0204C3.65901 19.5998 3.98176 20.1585 4.52227 20.3828L6.21769 21.0841C6.53525 21.215 6.78672 21.4665 6.91763 21.784L7.61887 23.4795C7.84181 24.0201 8.40177 24.3429 8.98116 24.2664L10.7362 24.0343Z" fill="%23EBF1FF"/><path d="M10.5007 14L12.834 16.3333L18.084 11.0833M10.7362 24.0343C11.1186 23.9838 11.5048 24.0875 11.8094 24.3221L13.2132 25.3993C13.6773 25.7558 14.3228 25.7558 14.7855 25.3993L16.2424 24.2806C16.5146 24.0719 16.8581 23.9799 17.1977 24.0253L19.0201 24.2651C19.5995 24.3416 20.1582 24.0188 20.3824 23.4783L21.0837 21.7827C21.2146 21.4652 21.466 21.2137 21.7836 21.0828L23.479 20.3815C24.0195 20.1585 24.3423 19.5985 24.2658 19.0191L24.0351 17.2627C23.9845 16.8803 24.0882 16.494 24.3228 16.1894L25.4 14.7855C25.7564 14.3215 25.7564 13.6759 25.4 13.2132L24.2814 11.7562C24.0727 11.484 23.9807 11.1404 24.026 10.8008L24.2658 8.97828C24.3423 8.39885 24.0195 7.84017 23.479 7.61591L21.7836 6.91464C21.466 6.78371 21.2146 6.53224 21.0837 6.21466L20.3824 4.51915C20.1595 3.97861 19.5995 3.65584 19.0201 3.73232L17.1977 3.97213C16.8581 4.01879 16.5146 3.92676 16.2437 3.71935L14.7868 2.60068C14.3228 2.24421 13.6773 2.24421 13.2145 2.60068L11.7576 3.71935C11.4854 3.92676 11.1419 4.01879 10.8023 3.97472L8.97987 3.73491C8.40047 3.65843 7.84181 3.9812 7.61757 4.52174L6.91763 6.21725C6.78542 6.53354 6.53396 6.78501 6.21769 6.91723L4.52227 7.61721C3.98176 7.84146 3.65901 8.40015 3.73549 8.97958L3.97528 10.8021C4.01935 11.1417 3.92732 11.4852 3.71993 11.7562L2.60132 13.2132C2.24487 13.6772 2.24487 14.3228 2.60132 14.7855L3.71993 16.2425C3.92862 16.5147 4.02065 16.8582 3.97528 17.1979L3.73549 19.0204C3.65901 19.5998 3.98176 20.1585 4.52227 20.3828L6.21769 21.0841C6.53525 21.215 6.78672 21.4665 6.91763 21.784L7.61887 23.4795C7.84181 24.0201 8.40177 24.3429 8.98116 24.2664L10.7362 24.0343Z" stroke="%230248F2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  width: 28px;
  height: 28px;
}
.custom-list.list-disc li::before {
  --list-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"><circle cx="4" cy="4" r="4" fill="%23A4A7AE"/></svg>');
  width: 8px;
  height: 8px;
  margin-top: 11px;
}

.pricing-box-conatiner .pricing-box.pricing-box-primary {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(43, 98, 239, 0.25),
    0 20px 60px -20px rgba(41, 108, 216, 0.35);
}
.pricing-box-conatiner .pricing-box.pricing-box-primary .pricing-box-badge {
  position: absolute;
  padding: 2px 8px;
  gap: 4px;
  left: 50%;
  transform: translateX(-50%);
  top: -11px;
  border-radius: 33554400px;
  &::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><g clip-path="url(%23clip0_162_5068)"><path d="M5.50872 1.40722C5.53014 1.29252 5.59101 1.18893 5.68077 1.11438C5.77053 1.03983 5.88354 0.999023 6.00022 0.999023C6.1169 0.999023 6.22991 1.03983 6.31967 1.11438C6.40943 1.18893 6.4703 1.29252 6.49172 1.40722L7.01722 4.18622C7.05454 4.38379 7.15056 4.56553 7.29274 4.70771C7.43491 4.84988 7.61665 4.9459 7.81422 4.98322L10.5932 5.50872C10.7079 5.53014 10.8115 5.59101 10.8861 5.68077C10.9606 5.77053 11.0014 5.88354 11.0014 6.00022C11.0014 6.1169 10.9606 6.22991 10.8861 6.31967C10.8115 6.40943 10.7079 6.4703 10.5932 6.49172L7.81422 7.01722C7.61665 7.05454 7.43491 7.15056 7.29274 7.29274C7.15056 7.43491 7.05454 7.61665 7.01722 7.81422L6.49172 10.5932C6.4703 10.7079 6.40943 10.8115 6.31967 10.8861C6.22991 10.9606 6.1169 11.0014 6.00022 11.0014C5.88354 11.0014 5.77053 10.9606 5.68077 10.8861C5.59101 10.8115 5.53014 10.7079 5.50872 10.5932L4.98322 7.81422C4.9459 7.61665 4.84988 7.43491 4.70771 7.29274C4.56553 7.15056 4.38379 7.05454 4.18622 7.01722L1.40722 6.49172C1.29252 6.4703 1.18893 6.40943 1.11438 6.31967C1.03983 6.22991 0.999023 6.1169 0.999023 6.00022C0.999023 5.88354 1.03983 5.77053 1.11438 5.68077C1.18893 5.59101 1.29252 5.53014 1.40722 5.50872L4.18622 4.98322C4.38379 4.9459 4.56553 4.84988 4.70771 4.70771C4.84988 4.56553 4.9459 4.38379 4.98322 4.18622L5.50872 1.40722Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 1V3" stroke="white" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 2H9" stroke="white" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 11C2.55228 11 3 10.5523 3 10C3 9.44772 2.55228 9 2 9C1.44772 9 1 9.44772 1 10C1 10.5523 1.44772 11 2 11Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_162_5068"><rect width="12" height="12" fill="white"/></clipPath></defs></svg>');
  }
}

.faqs-container {
  border: 1px solid var(--border-E2E9F0);
  border-radius: 32px;
}
.faqs-container .faqs-box-wrap .faqs-box {
  padding: 22px 24px;
  &:not(:last-child) {
    border-bottom: 1px solid var(--border-E2E9F0);
  }
}

.faqs-container .faqs-box-wrap .faqs-box .question::after {
  content: "";
  width: 32px;
  height: 32px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3.33301 8H12.6663" stroke="%23414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 3.3335V12.6668" stroke="%23414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center center no-repeat;
  border: 1px solid var(--border-E2E9F0);
  border-radius: 9999px;
  transition: transform 0.3s ease;
}
.faqs-container .faqs-box-wrap .faqs-box.active .question::after {
  transform: rotate(45deg);
}

.content-section > *:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Custom CF7 Form Framework Styling
   ========================================================================== */

/* Outer structural wrapper */

/* Dynamic width fallback block for textarea row */
.custom-form-container > .form-group {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.custom-form-container .form-group.form-submit .wpcf7-spinner{
  margin-top: -24px;
}

.custom-form-container .form-label {
  display: block;
  &.form-input-required{
    &::after{
      content: "*";
      color: #D92D20;
    }
  }
}
.custom-form-container .form-control {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-D5D7DA);
  height: 36px;
}

.custom-form-container .form-control:focus {
  border-color: var(--primary-color);
  outline: none;
}

.custom-form-container .form-group .wpcf7-form-control-wrap{
  display: block;
  width: 100%;
}
.custom-form-container select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="%23717680" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

.custom-form-container textarea.form-control {
  min-height: 128px;
  resize: vertical;
}
.custom-form-container .primary-btn {
  border: none;
  appearance: none;
  -webkit-appearance: none;
  width: auto;
}