/* @import "tailwindcss";

 */
 :root {
   --bg: url("/web_assets/frontend/images/bg.png");
 }

body {
    font-family: 'Inter', sans-serif;
    background-color: #030007;
}

#hero {
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#hero {
    padding-top: 120px;
}

/* Additional custom styles can be added here */
.editor-container {
    min-height: 300px;
}

textarea::-webkit-scrollbar,
#rightPane::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
textarea,
#rightPane {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Divider styling */
/* Hide scrollbar for Chrome, Safari and Opera */
textarea::-webkit-scrollbar,
#rightPane::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
textarea,
#rightPane {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Divider styling */
#divider {
    transition: background-color 0.2s;
}

#divider:hover {
    background-color: #6A27F8;
}

#divider.dragging {
    background-color: #7D44FA;
}



/* Button hover effects */
#actionButtons button {
    transition: all 0.2s;
}

#actionButtons button:hover {
    background-color: #2a1f38;
    border-color: #A298FF;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .editor-container {
        min-height: 200px;
    }
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0;
    opacity: 0;
  }
  
  .faq-answer.active {
    max-height: 300px; /* Adjust based on your content */
    padding-bottom: 1rem;
    opacity: 1;
  }
  
  .faq-item {
    transition: all 0.3s ease;
  }
  
  .chevron {
    transition: transform 0.3s ease;
  }
  
  .chevron.active {
    transform: rotate(180deg);
  }