.topbar-text a, .cover-image a { text-decoration: none; }

/* FAQ Styles */
.faq {
    padding: 2em 4em;
    text-align: center;
    background-color: #FFFFE0;
}

.faq h2, .servis h2 {
    color: #8B0000; /* Dark red color */
    padding: 10px 0; margin: 0;  
}

.faq h2 { margin-bottom: 1.2em; }

.faq div {
    margin-bottom: 1em;
    text-align: left;
    width: 80%;
    margin: 0 auto 1em auto;
    padding: 1em;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.faq h3 {
    font-size: 1.2em;
    cursor: pointer;
    margin: 0;
}

.faq p {
    display: none;
    font-size: 1em;
    margin: 0.5em 0 0 0;
    line-height: 1.6;
    color: #555;
}

/* Add this CSS for active styles */
.faq div.active {
    background-color: #f0f0f0; /* Change background color for active question */
}

.faq h3.active {
    color: #8B0000; /* Change text color for active question */
}

.services {
    padding: 2em 0;
}

.service-box {
    margin-bottom: 1em;
    text-align: left;
    width: 80%;
    margin: 0 auto 2em auto;
    padding: 1.5em;
    background: white;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.service-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.service-box h3 {
    font-size: 1.5em;
    color: #8B0000;
    margin-bottom: 0.5em;
}

.service-box p {
    font-size: 1em;
    color: #333;
    line-height: 1.6;
}

.service-box {	
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 15px;
	align-items: start;
}

.service-box img {
	grid-row: 1 / span 2;
	max-width: 100%;
}

@media (max-width: 768px) {
	.faq div { width: 90%; }
	.faq { margin: 0; padding: 2em; }
    .service-box {
        display: block;
    }
    .service-box img {
        width: 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }
    .service-box h3 {
        margin-top: 0;
    }
}