h1 span {
    position: relative;
    z-index: 1;
  
}
h1 span:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -.3rem;
    right: -.3rem;
    border-radius: .5rem;
    background: #f7ca7a;
    z-index: -1;
}


.h-90 {
    height: 90%;
}

.h-110 {
    height: 110%;
}

.main_glass{
    padding: 14px 0; box-shadow: 0 12px 12px -4px rgba(0,0,0, .05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); max-width: 100%;
}

.card-img-top {
    width: 100%;
    height: 450px;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 576px) {
    .card-img-top {
        height: 200px;
    }
}



  /* Quiz-specific CSS Styles */

/* Quiz Button Styles */
.cta-button, .quiz-button { 
  display: inline-block; 
  background-color: #e59754; 
  color: white; 
  font-weight: 600; 
  padding: 0.8rem 2rem; 
  border-radius: 0.5rem; 
  box-shadow: 0 4px 10px rgba(229, 151, 84, 0.4); 
  transition: all 0.3s ease; 
  text-align: center; 
  border: none; 
  cursor: pointer; 
}

.cta-button:hover, .quiz-button:hover { 
  background-color: #d98743; 
  box-shadow: 0 6px 12px rgba(229, 151, 84, 0.5); 
  transform: translateY(-1px); 
} 

.cta-button:active, .quiz-button:active { 
  transform: translateY(0px); 
  box-shadow: 0 2px 5px rgba(229, 151, 84, 0.3); 
}

.cta-button-green, .quiz-button-green { 
  background-color: #6f9a71; 
  box-shadow: 0 4px 10px rgba(111, 154, 113, 0.4); 
} 

.cta-button-green:hover, .quiz-button-green:hover { 
  background-color: #5a7d5c; 
  box-shadow: 0 6px 12px rgba(111, 154, 113, 0.5); 
  transform: translateY(-1px); 
} 

.cta-button-green:active, .quiz-button-green:active { 
  transform: translateY(0px); 
  box-shadow: 0 2px 5px rgba(111, 154, 113, 0.3); 
}

.quiz-button-secondary { 
  background-color: #ffffff; 
  color: #4b5563; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
  font-weight: 500; 
  border: 1px solid #d1d5db; 
  padding: 0.75rem 1.5rem; 
} 

.quiz-button-secondary:hover { 
  background-color: #f9fafb; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.07); 
  transform: translateY(-1px); 
} 

.quiz-button-secondary:active { 
  transform: translateY(0px); 
  background-color: #f3f4f6; 
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); 
}

/* Quiz Container and Step Styles */
.quiz-step { 
  display: none; 
}

.quiz-step.active { 
  display: block; 
  animation: fadeIn 0.5s ease-in-out; 
}

@keyframes fadeIn { 
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  } 
  to { 
    opacity: 1; 
    transform: translateY(0); 
  } 
}

.quiz-container { 
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); 
  border: 1px solid #e5e7eb; 
  border-radius: 1rem; 
  padding: 2.5rem 1.5rem; 
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1), 0 5px 15px -5px rgba(0, 0, 0, 0.05); 
  max-width: 4xl; 
  margin: 2rem auto; 
  position: relative; 
  overflow: hidden; 
}

@media (min-width: 640px) {
  .quiz-container {
    padding: 3rem 2rem;
  }
}

@media (min-width: 768px) {
  .quiz-container {
    padding: 4rem 3rem;
  }
}

@media (min-width: 1024px) {
  .quiz-container {
    padding: 4rem 4rem;
  }
}

.quiz-step-heading { 
  font-size: 1.5rem; 
  line-height: 2rem; 
  font-weight: 600; 
  margin-bottom: 0.5rem; 
  text-align: center; 
  color: #374151; 
  padding-left: 10px; 
  padding-right: 10px;
}

.quiz-step-subheading { 
  font-size: 0.9rem; 
  color: #6b7280; 
  text-align: center; 
  margin-bottom: 2.5rem; 
  min-height: 1.25rem; 
}

.quiz-step-subheading strong { 
  color: #6f9a71; 
  font-weight: 600; 
}

/* Quiz Option Grid and Options */
.quiz-option-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 1.25rem; 
  margin-bottom: 3rem; 
  padding-left: 15px; 
  padding-right: 15px; 
}

@media (min-width: 640px) { 
  .quiz-option-grid { 
    grid-template-columns: repeat(3, 1fr); 
    gap: 1.5rem; 
  } 
}

@media (min-width: 1024px) { 
  .quiz-option-grid.cols-3 { 
    grid-template-columns: repeat(3, 1fr); 
  } 
}

.quiz-option { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  padding: 0; 
  border: 2px solid #e5e7eb; 
  border-radius: 0.75rem; 
  cursor: pointer; 
  transition: all 0.3s ease; 
  text-align: center; 
  background-color: #ffffff; 
  position: relative; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.03); 
  overflow: hidden; 
}

.quiz-option img { 
  width: 100%; 
  height: 175px; 
  object-fit: cover; 
  display: block; 
  transition: transform 0.3s ease; 
  border-radius: 5px; 
}

.quiz-option:hover img { 
  transform: scale(1.05); 
}

.quiz-option .option-label { 
  padding: 1rem 0.5rem; 
  font-weight: 500; 
  color: #374151; 
  width: 100%; 
  font-size: 0.95rem; 
  line-height: 1.4; 
  min-height: 60px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-top: 1px solid #f3f4f6; 
}

.quiz-option:hover { 
  border-color: #a5d6a7; 
  background-color: #f8fbf8; 
  transform: translateY(-3px); 
  box-shadow: 0 6px 12px rgba(0,0,0,0.05); 
}

.quiz-option input[type="radio"] { 
  display: none; 
}

.quiz-option input[type="radio"]:checked + .option-content { 
  border-color: #6f9a71; 
  box-shadow: 0 0 0 3px rgba(111, 154, 113, 0.3); 
}

.quiz-option input[type="radio"]:checked + .option-content .option-label { 
  background-color: #eaf0e9; 
  color: #386641; 
  font-weight: 600; 
  border-top-color: #c8dcc8; 
}

/* Quiz Input Styles */
.quiz-input-group { 
  margin-bottom: 1.75rem; 
  padding-left: 15px; 
  padding-right: 15px; 
}

.quiz-input-label { 
  display: block; 
  font-size: 0.9rem; 
  font-weight: 500; 
  color: #4b5563; 
  margin-bottom: 0.5rem; 
}

.quiz-input { 
  width: 100%; 
  padding: 0.85rem 1.1rem; 
  border: 1px solid #d1d5db; 
  border-radius: 0.5rem; 
  transition: border-color 0.3s, box-shadow 0.3s; 
  background-color: #f9fafb; 
  font-size: 1rem; 
}

.quiz-input:focus { 
  border-color: #6f9a71; 
  outline: none; 
  box-shadow: 0 0 0 3px rgba(111, 154, 113, 0.2); 
  background-color: #ffffff; 
}

/* International Telephone Input Styles */
.iti { 
  width: 100%; 
} 

.iti__flag-container { 
  border-right: 1px solid #d1d5db !important; 
} 

.iti input.quiz-input { 
  padding-left: 56px !important; 
}

/* Quiz Navigation Buttons */
.quiz-nav-buttons { 
  margin-top: 3rem; 
  display: flex; 
  flex-direction: column; 
  gap: 1rem; 
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 20px !important;  
  padding-left: 15px !important;
  padding-right: 15px !important;
}

@media (min-width: 640px) { 
  .quiz-nav-buttons { 
    flex-direction: row; 
    justify-content: space-between; 
    align-items: center; 
  } 
  
  .quiz-nav-buttons.center { 
    justify-content: center; 
  } 
  
  .quiz-nav-buttons.end { 
    justify-content: flex-end; 
  } 
  
  .quiz-nav-buttons.start { 
    justify-content: flex-start; 
  } 
}

/* Quiz Progress Bar */
.quiz-progress-container { 
  margin-bottom: 3rem; 
} 

.quiz-progress-outer { 
  overflow: hidden; 
  height: 12px; 
  border-radius: 6px; 
  background-color: #e5e7eb; 
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); 
} 

.quiz-progress-inner { 
  height: 100%; 
  box-shadow: none; 
  text-align: center; 
  white-space: nowrap; 
  color: white; 
  justify-content: center; 
  background: linear-gradient(90deg, #8bc34a, #6f9a71); 
  transition: width 0.6s ease; 
  border-radius: 6px; 
} 

.quiz-progress-text { 
  text-align: center; 
  margin-top: 0.75rem; 
  font-size: 0.9rem; 
  color: #4b5563; 
  font-weight: 500; 
}

/* Quiz Error and Success Messages */
#quiz-error-message { 
  margin-top: 1.5rem; 
  padding: 0.75rem 1rem; 
  font-weight: 500; 
  margin-bottom: 10px; 
  margin-left: 10px; 
  margin-right: 10px; 
} 

#phone-error { 
  display: block; 
  margin-top: 0.25rem; 
}

#quiz-success-message svg { 
  width: 5rem; 
  height: 5rem; 
  margin-bottom: 1.5rem; 
} 

#quiz-success-message h3 { 
  font-size: 1.75rem; 
} 

#quiz-success-message p { 
  font-size: 1.125rem; 
  color: #4b5563; 
}

/* Utility Classes */
.custom-green { 
  background-color: #6f9a71; 
} 

.text-custom-green { 
  color: #6f9a71; 
} 

.border-custom-green { 
  border-color: #6f9a71; 
}

.custom-light-green { 
  background-color: #eaf0e9; 
}

.mt15 {
  margin-top: 15px !important;
}

.hidden {
  display: none;
}

/* Quiz END */

.wd100px {
    width: 100px;
}

.cp{
  cursor: pointer;
}


.fab-floating-btns {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fab-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  border: none;
  outline: none;
  transition: box-shadow 0.2s;
  text-decoration: none;
}
.fab-btn-whatsapp { background: #25D366; }
.fab-btn-viber { background: #7360F2; }
.fab-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.25); }