.elementor-7 .elementor-element.elementor-element-798b45a{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-7 .elementor-element.elementor-element-798b45a:not(.elementor-motion-effects-element-type-background), .elementor-7 .elementor-element.elementor-element-798b45a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-edadaa8{--display:flex;}.elementor-7 .elementor-element.elementor-element-c718e91{--display:flex;}.elementor-7 .elementor-element.elementor-element-2223d52{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:2px;}.elementor-7 .elementor-element.elementor-element-90f0198{--display:flex;}.elementor-7 .elementor-element.elementor-element-d0442e7{--display:flex;}.elementor-7 .elementor-element.elementor-element-8f4982a{--display:flex;}.elementor-7 .elementor-element.elementor-element-6e2119d{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-798b45a */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAQ Section</title>
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

        .faq-wrapper {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .gradient-text {
            background: -webkit-linear-gradient(45deg, #005bea, #e33b3b);
            background: linear-gradient(45deg, #005bea, #e33b3b);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
        }

        .faq-section {
            background-color: #ffffff;
            padding: 90px 20px;
        }

        .section-header {
            max-width: 800px;
            margin: 0 auto 50px auto;
            text-align: center;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 15px;
            line-height: 1.3;
        }

        .section-subtitle {
            font-size: 1.1rem;
            color: #666;
            margin-bottom: 0;
            line-height: 1.6;
        }

        /* Accordion Styles */
        .faq-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .faq-item {
            background: white;
            border: 1px solid #eee;
            border-radius: 10px;
            margin-bottom: 15px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.03);
            transition: all 0.3s ease;
            overflow: hidden;
        }

        /* HOVER EFFECT: Background Blue, Text White */
        .faq-item:hover {
            box-shadow: 0 10px 25px rgba(0, 91, 234, 0.15);
            border-color: #005bea;
            background-color: #005bea; /* Blue Background */
            transform: translateY(-2px); /* Slight lift */
        }

        /* Change question text color on parent hover */
        .faq-item:hover .faq-question {
            color: #ffffff;
        }

        /* Change icon color on parent hover */
        .faq-item:hover .faq-icon {
            color: #ffffff;
        }

        .faq-question {
            padding: 20px 25px;
            width: 100%;
            text-align: left;
            background: none;
            border: none;
            outline: none;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: 'Poppins', sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
            transition: color 0.3s ease;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out;
            background-color: #fcfcfc; /* Keeps answer area light/white */
        }

        .faq-answer p {
            margin: 0;
            padding: 0 25px 25px 25px;
            color: #666;
            line-height: 1.6;
            font-size: 0.95rem;
        }

        /* Icon Animation */
        .faq-icon {
            font-size: 1rem;
            color: #005bea;
            transition: transform 0.3s ease, color 0.3s ease;
        }

        .faq-item.active .faq-icon {
            transform: rotate(45deg);
            color: #e33b3b;
        }
        
        /* If active item is hovered, force icon white for contrast */
        .faq-item.active:hover .faq-icon {
            color: #ffffff;
        }
        
        .faq-item.active {
             border-color: #005bea;
        }

        /* Mobile */
        @media (max-width: 768px) {
            .section-title { font-size: 1.8rem; }
            .faq-question { font-size: 1rem; padding: 15px 20px; }
            .faq-answer p { padding: 0 20px 20px 20px; }
        }
    </style>
</head>
<body>

    <div class="faq-wrapper">
        <section class="faq-section">
            <div class="section-header">
                <h2 class="section-title">Frequently Asked <span class="gradient-text">Questions</span></h2>
                <p class="section-subtitle">
                    Got questions? We have answers. Here is everything you need to know about our courses and placement support.
                </p>
            </div>

            <div class="faq-container">
                
                <!-- FAQ Item 1 -->
                <div class="faq-item">
                    <button class="faq-question">
                        Do you provide 100% placement assistance?
                        <i class="fa-solid fa-plus faq-icon"></i>
                    </button>
                    <div class="faq-answer">
                        <p>Yes! We have a dedicated placement cell that helps every student with resume building, mock interviews, and scheduling interviews with our 500+ hiring partners until you get placed.</p>
                    </div>
                </div>

                <!-- FAQ Item 2 -->
                <div class="faq-item">
                    <button class="faq-question">
                        Are classes available online or offline?
                        <i class="fa-solid fa-plus faq-icon"></i>
                    </button>
                    <div class="faq-answer">
                        <p>We offer both modes. You can join our classroom training in Delhi for a hands-on experience, or opt for live online interactive sessions if you are joining from another city.</p>
                    </div>
                </div>

                <!-- FAQ Item 3 -->
                <div class="faq-item">
                    <button class="faq-question">
                        What if I miss a class?
                        <i class="fa-solid fa-plus faq-icon"></i>
                    </button>
                    <div class="faq-answer">
                        <p>Don't worry. We provide access to recorded sessions of every class. You can also attend a backup class on weekends to clear your doubts.</p>
                    </div>
                </div>

                <!-- FAQ Item 4 -->
                <div class="faq-item">
                    <button class="faq-question">
                        Is the certificate valid for jobs?
                        <i class="fa-solid fa-plus faq-icon"></i>
                    </button>
                    <div class="faq-answer">
                        <p>Absolutely. You receive an ISO-certified diploma that is recognized globally. We also prepare you for Google, Microsoft, and Hubspot certifications.</p>
                    </div>
                </div>

                 <!-- FAQ Item 5 -->
                 <div class="faq-item">
                    <button class="faq-question">
                        Can I pay the fee in installments?
                        <i class="fa-solid fa-plus faq-icon"></i>
                    </button>
                    <div class="faq-answer">
                        <p>Yes, we offer flexible EMI options at 0% interest. You can pay the course fee in easy monthly installments without any burden.</p>
                    </div>
                </div>

            </div>
        </section>
    </div>

    <!-- Simple Script for Accordion Functionality -->
    <script>
        document.querySelectorAll('.faq-question').forEach(button => {
            button.addEventListener('click', () => {
                const faqItem = button.parentElement;
                
                // Toggle active class
                faqItem.classList.toggle('active');

                // Toggle logic for max-height
                const answer = button.nextElementSibling;
                if (button.parentElement.classList.contains('active')) {
                    answer.style.maxHeight = answer.scrollHeight + "px";
                } else {
                    answer.style.maxHeight = 0;
                }

                // Optional: Close other open items (Accordion behavior)
                document.querySelectorAll('.faq-item').forEach(otherItem => {
                    if (otherItem !== faqItem && otherItem.classList.contains('active')) {
                        otherItem.classList.remove('active');
                        otherItem.querySelector('.faq-answer').style.maxHeight = 0;
                    }
                });
            });
        });
    </script>

</body>
</html>/* End custom CSS */