/* ===== Packages Section ===== */

.packages-section .section-heading h2 {
   font-family: var(--Font-Primary);
   color: var(--Heading);
}

.packages-section .section-heading {
   margin-bottom: 24px;
}

.packages-section .row.g-4 {
   margin-top: -10px;
}

.package-card {
   height: 100%;
   background-color: var(--Background);
   border-radius: 20px;
   padding: 30px;
   display: flex;
   flex-direction: column;
   border: 1px solid transparent;
   transition: var(--Animation-Duration);
}

.package-card:hover {
   transform: translateY(-10px);
   border-color: var(--Primary);
   box-shadow: 0 20px 40px rgba(49, 71, 255, 0.25);
}

.package-card .package-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   margin-bottom: 24px;
}

.package-card .package-icon {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.08);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   color: var(--White);
   transition: var(--Animation-Duration);
}

.package-card:hover .package-icon {
   background-color: var(--Primary);
   color: var(--White);
}

.package-card .package-badge {
   display: inline-block;
   padding: 5px 16px;
   border-radius: 50px;
   font-family: var(--Font-Primary);
   font-size: 12px;
   font-weight: 600;
   color: var(--White);
   background-color: rgba(255, 255, 255, 0.18);
   border: 1px solid rgba(255, 255, 255, 0.25);
}

.package-card .package-badge--optimized,
.package-card .package-badge--recommended {
   background-color: var(--Primary);
   border-color: var(--Primary);
   color: var(--White);
}

.package-card h3 {
   font-family: var(--Font-Primary);
   color: var(--White);
   font-size: 24px;
   margin-bottom: 8px;
}

.package-card .package-price {
   font-family: var(--Font-Primary);
   color: var(--White);
   font-size: clamp(28px, 3vw, 34px);
   font-weight: 700;
   margin-bottom: 6px;
}

.package-card .package-note {
   font-family: var(--Font-Secondary);
   color: var(--Primary);
   font-weight: 600;
   font-size: 12px;
   margin-bottom: 16px;
}

.package-card--highlight .package-note {
   color: var(--White);
   opacity: 0.85;
}

.package-card .package-desc {
   font-family: var(--Font-Secondary);
   color: rgba(255, 255, 255, 0.72);
   font-size: 14px;
   line-height: 1.6;
   margin-bottom: 20px;
   min-height: 62px;
}

.package-card .package-divider {
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   margin-bottom: 20px;
}

.package-card .package-features {
   list-style: none;
   padding: 0 10px 0 0;
   margin: 0 0 28px 0;
   height: 200px;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 14px;
   scrollbar-width: thin;
   scrollbar-color: var(--Primary) rgba(255, 255, 255, 0.1);
}

.package-card .package-features::-webkit-scrollbar {
   width: 5px;
}

.package-card .package-features::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
}

.package-card .package-features::-webkit-scrollbar-thumb {
   background-color: var(--Primary);
   border-radius: 10px;
}

.package-card .package-features li {
   font-family: var(--Font-Secondary);
   color: rgba(255, 255, 255, 0.85);
   font-size: 14px;
   display: flex;
   align-items: flex-start;
   gap: 10px;
}

.package-card .package-features li i {
   color: #fff;
   font-size: 16px;
   margin-top: 2px;
   flex-shrink: 0;
}

.package-card--highlight .package-features li i {
   color: var(--White);
}

.package-card .package-cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   width: 100%;
   padding: 14px 16px;
   border-radius: 50px;
   font-family: var(--Font-Primary);
   font-weight: 600;
   font-size: clamp(12px, 1.4vw, 13px);
   line-height: 1.3;
   text-align: center;
   text-decoration: none;
   white-space: normal;
   transition: var(--Animation-Duration);
}

.package-card .package-cta .arrow {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   flex-shrink: 0;
   transition: var(--Animation-Duration);
}

.package-card--outline .package-cta {
   color: var(--White);
   background-color: transparent;
   border: 1px solid rgba(255, 255, 255, 0.4);
}

.package-card--outline .package-cta .arrow {
   border: 1px solid rgba(255, 255, 255, 0.4);
   color: var(--White);
}

.package-card--outline .package-cta:hover {
   border-color: var(--Primary);
   background-color: var(--Primary);
   color: var(--White);
}

.package-card--outline .package-cta:hover .arrow {
   background-color: var(--White);
   border-color: var(--White);
   color: var(--Primary);
}

.package-card--highlight .package-cta {
   background-color: var(--Primary);
   color: var(--White);
}

.package-card--highlight .package-cta .arrow {
   background-color: var(--White);
   color: var(--Primary);
}

.package-card--highlight .package-cta:hover {
   background-color: var(--Heading);
   color: var(--White);
}

.package-card--highlight .package-cta:hover .arrow {
   background-color: var(--Primary);
   color: var(--White);
}

/* ===== Responsive (down to 320px) ===== */
@media (max-width: 575px) {
   .package-card {
      padding: 24px 20px;
   }

   .package-card .package-icon {
      width: 50px;
      height: 50px;
      font-size: 18px;
   }

   .package-card h3 {
      font-size: 20px;
   }

   .package-card .package-price {
      font-size: 28px;
   }

   .package-card .package-features {
      height: 180px;
   }

   .package-card .package-badge {
      font-size: 11px;
      padding: 4px 12px;
   }
}

@media (max-width: 360px) {
   .package-card {
      padding: 20px 16px;
   }

   .package-card .package-top {
      flex-wrap: wrap;
      gap: 10px;
   }

   .package-card .package-icon {
      width: 44px;
      height: 44px;
      font-size: 16px;
   }

   .package-card .package-price {
      font-size: 24px;
   }

   .package-card .package-desc {
      font-size: 13px;
      min-height: auto;
   }

   .package-card .package-features li {
      font-size: 13px;
   }

   .package-card .package-cta {
      padding: 12px 10px;
      font-size: 11px;
      gap: 6px;
   }

   .package-card .package-cta .arrow {
      width: 22px;
      height: 22px;
      font-size: 12px;
   }
}