.faq {
color: white;
font-family: Arial, sans-serif;
padding: 100px;
}

.faq h1 {
font-size: 2rem;
}

.faq-header {
display: flex;
align-items: center;
margin-bottom: 40px;
margin-top: 70px;
}

.faq-header h2{
    font-size: medium;
}

.faq-icon {
width: 24px;
height: 24px;
margin-right: 10px;
color: #2ecc71;
font-size: 24px;
}

.faq-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

.faq-item {
background: #1e1e1e;
padding: 30px;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}

.plus {
font-size: 1.5rem;
}

.faq-section {
background: #000;
color: #fff;
padding: 40px 20px;
}
.faq-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.faq-title {
font-size: 28px;
font-weight: bold;
margin-bottom: 10px;
}
.faq-subtitle {
color: #aaa;
margin-bottom: 30px;
}
.faqs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.faqs-item {
background: #111;
border-radius: 10px;
padding: 40px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
}
.faqs-item:hover {
background: #222;
}
.faqs-item i {
font-size: 30px;
margin-bottom: 15px;
color: #2ecc71;
}
.faqs-item span {
font-weight: bold;
color: #fff;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {

    .faq {
        padding: 30px;
    }
    .faq h1 {
        font-size: 1.5rem;
        margin-bottom: -50px;
    }

    .faq-header {
        align-items: center;
        text-align: center;
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .faq-item {
        padding: 15px;
    }

    .faqs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .faqs-item {
        padding: 50px;
    }
}

/* Small Devices */
@media (max-width: 480px) {
    .faq-title {
        font-size: 24px;
    }

    .faq-subtitle {
        font-size: 14px;
    }

    .faqs-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .faqs-item {
        padding: 50px;
    }
}
