:root {
  --default-color: #807A79 !important;
  --heading-color: #030202 !important;
}
 
.about .about-title {
  color: var(--blackColor, #030202) !important;
  font-family: Roboto !important;
  font-size: 40px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: normal !important;
}
 
.card-text {
  color: var(--grey, #807A79) !important;
  font-family: Roboto !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 24px !important;
}
 
.esim-card .esim-card-img {
  width: 69.631px !important;
  height: 69.631px !important;
  flex-shrink: 0 !important;
  aspect-ratio: 69.63/69.63 !important;
}
 
.esim-card strong {
  color: var(--Dark-500, #0F1416) !important;
  font-family: Roboto !important;
  font-size: 24px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: normal !important;
}
 
.myesim-heading {
  color: var(--Dark-500, #0F1416) !important;
  font-family: Roboto !important;
  font-size: 40px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: normal !important;
}
 
.top-section h2 {
  font-size: 30px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}
 
.top-section h3 {
  font-size: 26px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}
 
.top-section h4 {
  color: var(--blackColor, #030202) !important;
  font-family: Roboto !important;
  font-size: 20px !important;
}
 
.top-section ul li {
  margin-bottom: 5px !important;
}
 
.top-section ul li::marker {
  color: #030202 !important;
}
 
.top-section ol li::marker {
  color: #030202 !important;
  font-weight: 700 !important;
}
 
.top {
  color: var(--blackColor, #030202) !important;
  font-weight: 700 !important;
}
 
.top-section p {
  color: var(--grey, #807A79) !important;
  font-family: Roboto !important;
  font-size: 16px !important;
  margin-top: 5px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 26px !important;
  text-align: justify !important;
}
 
.span-item {
  color: black !important;
  font-weight: 700 !important;
}
 
.brand-color {
  color: #F67C1E !important;
}
 
.text-dark {
  color: #302020 !important;
}
 
.content-color {
  color: #807A79 !important;
}
 
.step-card {
  background-color: #fff !important;
  border-radius: 1rem !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
 
.step-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}
 
@media (max-width: 768px) {
  .step-card {
    margin-bottom: 20px !important;
  }
}
 
.card-top-text h5 {
  color: var(--blackColor, #030202) !important;
  font-family: Roboto !important;
  font-size: 24px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  letter-spacing: 0.15px !important;
  margin: 30px 0px 16px 0px !important;
}
 
.card-top-text p {
  color: var(--grey, #807A79) !important;
  font-family: Roboto !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 26px !important;
  letter-spacing: 0.5px !important;
}
 
.custom-font {
  font-size: 50px !important;
}
 
.btn-complete {
  height: 70px !important;
  border-radius: 18px !important;
  background: linear-gradient(91deg, #FFC77D 0.48%, #F67C1E 81.23%, #FF6F00 98.37%) !important;
  box-shadow: 0px 2px 8px 2px rgba(226, 137, 21, 0.25), 0px 10px 40px -4px rgba(16, 24, 40, 0.02), 0px 8px 8px -4px rgba(16, 24, 40, 0.02) !important;
  color: white !important;
  padding: 12px !important;
  border: none !important;
  width: 100% !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
 
.confirmation-container {
  margin: 20px auto !important;
  width: 90% !important;
  max-width: 607px !important;
  height: auto !important;
  min-height: 374px !important;
  padding: 15px !important;
  border-radius: 32px !important;
  border-bottom: 3px solid rgba(82, 38, 5, 0.4) !important;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.19) 0%, rgba(255, 184, 124, 0.19) 100%) !important;
}
 
.btn-orange,
.btn-guide {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 96px !important;
  font-size: 22px !important;
  width: 483px !important;
  padding: 15px !important;
  margin: 10px auto !important;
  border-radius: 28px !important;
  background: linear-gradient(91deg, #FFC77D 0.48%, #F67C1E 81.23%, #FF6F00 98.37%) !important;
  box-shadow: 0px 2px 8px 2px rgba(226, 137, 21, 0.25), 0px 10px 40px -4px rgba(16, 24, 40, 0.02), 0px 8px 8px -4px rgba(16, 24, 40, 0.02) !important;
  font-weight: bold !important;
}
 
.kk {
  color: #000 !important;
  font-family: Roboto !important;
  font-size: 22px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 30px !important;
}
 
.plan-card1 {
  display: flex !important;
  padding: 20px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 20px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(172, 168, 166, 0.20) !important;
  width: 170px !important;
  background: #F7F7F7 !important;
}
 
.card {
  text-align: center !important;
  border: 2px solid #ddd !important;
  cursor: pointer !important;
  transition: all 0.3s ease-in-out !important;
  padding: 15px !important;
}
 
@media (max-width: 480px) {
  img[alt="Logo"] {
    width: 120px !important;
    height: 120px !important;
  }
}
 
.success-esim-btn {
  color: var(--blackColor, #030202) !important;
  text-align: center !important;
  font-family: Roboto !important;
  font-size: 26px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 26px !important;
}