.feature-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}
.feature-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
.icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: linear-gradient(135deg,#007bff,#0056d2);
  color: #fff;
  font-size: 28px;
  box-shadow: 0 6px 15px rgba(0,123,255,0.3);
}



.feature-card {
  background:#fff;
  border-radius:12px;
  box-shadow:0 5px 15px rgba(0,0,0,0.05);
  transition:all 0.3s ease;
}
.feature-card:hover {
  transform:translateY(-6px);
  box-shadow:0 10px 25px rgba(0,0,0,0.12);
}
.icon-wrap {
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  background:linear-gradient(135deg,#007bff,#0056d2);
  color:#fff;
  font-size:28px;
  box-shadow:0 6px 15px rgba(0,123,255,0.3);
}

/* Extra styling for pricing cards */
.pricing-card {
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
  position: relative;
  background: #fff;
}
.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}
.pricing-card.featured {
  border: 2px solid var(--color-main);
  transform: scale(1.05);
  z-index: 2;
}
.pricing-card ul {
  list-style: none;
  padding: 0;
}
.pricing-card ul li {
  padding: 6px 0;
  font-size: 15px;
  display: flex;
  align-items: center;
}
.badge {
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 50px;
}
.plan-img {
  width: 60px;
  height: 60px;
  margin: 0 auto;
}
.divider {
  height: 2px;
  background: #eee;
  margin: 15px 0;
}
.feature-list li {
  padding: 6px 0;
  font-size: 15px;
  display: flex;
  align-items: center;
}
.feature-list i {
  font-size: 18px;
  min-width: 22px;
  text-align: center;
  color: rgb(6, 10, 244); 
}

    /* Features */
    .feature-box {
      text-align:center; background:#fff; padding:25px; border-radius:12px;
      box-shadow:0 5px 20px rgba(0,0,0,0.05); transition:0.3s;
    }
    .feature-box:hover {transform:translateY(-8px);}
    .feature-box i {font-size:36px; color:#007bff; margin-bottom:12px;}

    .support-card {
  background: #fff;
  border: 1px solid rgba(0, 102, 255, 0.1);
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  height: 100%;
}
.support-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 102, 255, 0.15);
}
.support-card .icon i {
  transition: transform 0.3s ease;
}
.support-card:hover .icon i {
  transform: scale(1.15);
}

/* Responsive Fixes */
@media (max-width: 991px) {
  .support-card {
    margin-bottom: 15px;
  }
}








.support-box {
  border-radius: 18px;
  background: #fff;
}

.support-item {
  transition: all 0.3s ease-in-out;
  background: #f9fbff;
}
.support-item:hover {
  transform: translateY(-6px);
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 102, 255, 0.15);
}
.support-item .icon img {
  transition: transform 0.3s ease;
}
.support-item:hover .icon img {
  transform: scale(1.1);
}



.bg-gradient {
  background: linear-gradient(135deg, #f9fbff 0%, #eef5ff 100%);
}

.support-wrapper {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  border-radius: 20px;
}

.support-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 102, 255, 0.1);
  transition: all 0.3s ease-in-out;
}
.support-card:hover {
  background: #fff;
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 102, 255, 0.15);
}
.support-card .icon i {
  transition: transform 0.3s ease, color 0.3s ease;
}
.support-card:hover .icon i {
  transform: scale(1.2);
  color: #0056d6;
}

.support-img {
  max-height: 280px;
  object-fit: contain;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}
  /* Badge Hover Effect */
.badge-box {
  background: #fff;
  transition: all 0.4s ease-in-out;
  border: 1px solid rgba(0,0,0,0.05);
}
.badge-box i {
  color: #007bff;
  transition: transform 0.4s ease, color 0.4s ease;
}
.unique-hover:hover {
  background: linear-gradient(135deg, #007bff, #00c6ff);
  color: #fff;
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}
.unique-hover:hover i {
  color: #fff;
  transform: rotate(15deg) scale(1.2);
}

/* Testimonial Cards */
.testimonial-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.4s ease-in-out;
  position: relative;
}
.testimonial-card:hover {
  transform: translateY(-10px);
  border: 1px solid #007bff;
  box-shadow: 0 12px 25px rgba(0,123,255,0.2);
}
.testimonial-card .stars {
  font-size: 14px;
  letter-spacing: 2px;
  animation: glowStars 2s infinite alternate;
}
@keyframes glowStars {
  from { text-shadow: 0 0 5px rgba(255,193,7,0.5); }
  to { text-shadow: 0 0 15px rgba(255,193,7,0.9); }
}
.accordion-button {
  font-weight: 600;
  color: #0d1b2a;
  background: #fff;
  transition: all 0.3s ease;
}
.accordion-button::after {
  background-image: none !important;
  content: '+';
  font-size: 20px;
  font-weight: bold;
  color: #0066ff;
  transition: transform 0.3s ease;
}
.accordion-button:not(.collapsed)::after {
  content: '−';
  color: #0066ff;
  transform: rotate(180deg);
}

.accordion-item {
  border: 1px solid #e9ecef;
  border-radius: 10px !important;
  overflow: hidden;
}
.accordion-button:focus {
  box-shadow: none;
}
.accordion-button:hover {
  background: #f8faff;
}
.accordion-body {
  color: #555;
  font-size: 15px;
  line-height: 1.6;
}





/* hide scrollbar but keep content layout as-is */
.dd-panel {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}
.dd-panel::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Opera */
}

.dd-panel {
  max-height: none !important;
  overflow-y: visible !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.dd-panel::-webkit-scrollbar { display: none; }


 .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
  #pricing { padding: 40px 0; }
  h2.section-title { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
  .section-sub { color: #6b7280; font-size: 14px; margin-bottom: 24px; }

  /* ---------- Pricing card ---------- */
  .pricing-card{
    border-radius:12px; background:#fff;
    border:1px solid rgba(12,34,57,0.04);
    box-shadow:0 8px 24px rgba(2,6,23,0.04);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .pricing-card:hover{ transform: translateY(-4px); box-shadow:0 12px 36px rgba(15,23,42,0.06); }
  .card-top{ height:6px; border-top-left-radius:12px; border-top-right-radius:12px; }
  .card-body{ padding:16px; }
  .plan-title{ font-weight:700; font-size:18px; margin-bottom:4px; }
  .plan-sub{ color:#6b7280; font-size:13px; }

  /* Dropdown toggle */
  .dd-toggle{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:8px; border-radius:8px; border:1px solid rgba(12,34,57,0.06);
    background:#f3f4f6; cursor:pointer; font-size:14px; text-align:left;
  }
  .dd-toggle .main{ font-weight:700; font-size:15px; }
  .dd-toggle .meta{ font-size:12px; color:#6b7280; }

  .toggle-save{ display:inline-flex; align-items:center; margin-left:8px; }

.toggle-save .chip {
  background: linear-gradient(90deg,#144197,#1b3cbd);
  color: #fff;
  padding: 2px 6px;      
  border-radius: 4px;   
  font-weight: 600;
  font-size: 10px;      
  line-height: 1.2;
  white-space: nowrap;
}


.dd-option .opt-save {
  background: linear-gradient(90deg,#144197,#1b3cbd);
  color: #fff;
  padding: 2px 5px;      
  border-radius: 4px;
  font-weight: 600;
  font-size: 10px;       
  white-space: nowrap;
}

  /* ---------- Dropdown panel - compact styles ---------- */
  .dd-panel {
    position: absolute; top: calc(100% + 6px); right: 0;
    width: 240px; background: #fff; border-radius:8px;
    border:1px solid rgba(0,0,0,0.06); box-shadow:0 8px 20px rgba(0,0,0,0.08);
    z-index:1000; display:none; max-height:none; overflow:auto;
  }
  .dd-panel::-webkit-scrollbar{ width:6px; }
  .dd-panel::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.08); border-radius:6px; }

  .dd-option{
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 8px; font-size:12px; cursor:pointer; transition:background .12s;
    line-height:1.1;
  }
  .dd-option:hover{ background:#f8fafc; }
  .dd-option .opt-title{ font-weight:700; font-size:12px; }
  .dd-option .opt-old, .dd-option .opt-renew{ font-size:11px; color:#9ca3af; text-decoration:line-through; }
  .dd-option .opt-save{ background:linear-gradient(90deg,#144197,#1b3cbd); color:#fff; padding:3px 6px; border-radius:6px; font-weight:700; font-size:11px; white-space:nowrap; }

  /* Price area */
  .price-main{ text-align:center; margin-top:12px; }
  .price-main .currency{ font-size:16px; color:#111827; vertical-align:baseline; }
  .price-main .amount{ font-size:28px; font-weight:900; display:inline-block; color: var(--color-main);}
  .price-main .term{ color:#6b7280; margin-left:6px; font-size:13px; }
  .price-sub{ color:#6b7280; font-size:13px; margin-top:6px; }

  .feature-list{ list-style:none; padding:0; margin:12px 0; }
  .feature-list li{ padding:5px 0; color:#374151; font-size:14px; }

  .badge-pill{ border-radius:8px; padding:5px 8px; font-weight:700; color:#fff; font-size:12px; }
  .btn-start{ padding:8px 12px; border-radius:8px; font-weight:700; font-size:14px; }

  /* Responsive */
  @media (max-width:767px){
    .section-header{ flex-direction:column; align-items:center; text-align:center; }
    .server-location{ margin-top:16px; width:100%; max-width:300px; text-align:center; }
    .dd-panel{ position:absolute; width:90%; left:50%; transform:translateX(-50%); margin-top:6px; box-shadow:none; border:1px solid rgba(12,34,57,0.06); }
    #loc-panel{ width:90%; max-width:280px; }
  }
  @media (max-width:991px){
    .dd-panel{ width:260px; right:8px; }
  }



/* Server location button */
.server-location { position: relative; display:inline-block; }
#loc-btn {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:999px;
  cursor:pointer;
}
#loc-flag {
  display:inline-block;
  width:18px;
  height:18px;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
#loc-name { font-size:14px; color:#111827; }

/* location panel */
.server-location .dd-panel {
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,0.08);
  border-radius:8px;
  padding:8px;
  z-index:400;
  min-width:220px;
  display:none;
}



/* server flag in feature list - round PNG */
.server-flag {
  display:inline-block;
  width:22px;
  height:22px;
  border-radius:50%;
  margin-left:8px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  vertical-align:middle;
}
.server-flag--with-border { border:1px solid rgba(0,0,0,0.08); }

/* small styling for card (demo) */
.card { border:1px solid #e6e6e6; border-radius:10px; overflow:hidden; background:#fff; }
.card .card-body { padding:16px; }
.badge-pill { color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; }
.price-main { font-size:20px; font-weight:700; margin:12px 0; }