.elementor-1636 .elementor-element.elementor-element-5141ac6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-0a6edf4 */.faq-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 60px 10%;
  background: #f0fbff;
  flex-wrap: wrap;
}

/* Left FAQ */
.faq-content {
  flex: 1;
  max-width: 500px;
}

.faq-content h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #0099cc;
}

/* Accordion style */
.faq-item {
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  text-align: left;
  font-size: 18px;
  font-weight: bold;
  padding: 12px 0;
  cursor: pointer;
  color: #333;
  transition: color 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question:hover {
  color: #0099cc;
}

.faq-toggle {
  font-size: 20px;
  font-weight: bold;
  color: #0099cc;
  margin-left: 10px;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  color: #555;
}

.faq-answer p {
  padding: 0;
  margin: 0;
  font-size: 15px;
}

.faq-item.active .faq-answer {
  max-height: 200px;
  padding: 10px 0;
}

/* Right Animation (same as before) */
.faq-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 280px;
  margin-top: 20px;
}

.orbit-animation {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #f8fdff, #e2f5fc);
  box-shadow: 0 0 20px rgba(0, 153, 204, 0.1);
  overflow: visible;
}

.center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background: #0099cc;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px rgba(0,153,204,0.7);
  z-index: 2;
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed rgba(0,153,204,0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit1 { width: 120px; height: 120px; animation: rotate1 8s linear infinite; }
.orbit2 { width: 180px; height: 180px; animation: rotate2 12s linear infinite; }
.orbit3 { width: 240px; height: 240px; animation: rotate3 18s linear infinite; }

.orbit-dot {
  width: 14px;
  height: 14px;
  background: #0099cc;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,153,204,0.6);
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
}

.connections {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 280px;
  pointer-events: none;
}

.connections line {
  stroke: rgba(0,153,204,0.5);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  animation: dashmove 4s linear infinite;
}

@keyframes dashmove {
  to { stroke-dashoffset: -100; }
}
@keyframes rotate1 { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rotate2 { 100% { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes rotate3 { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

/* Responsive */
@media (max-width: 768px) {
  .faq-section {
    flex-direction: column;
    text-align: center;
  }

  .faq-content {
    max-width: 100%;
    margin-bottom: 30px;
  }
}/* End custom CSS */