/* === CSS pentru  .service-description === */
.service-description {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
line-height: 1.6;
color: #000000;
max-width: 1200px;
}
.service-description h1,
.service-description h2,
.service-description h3 {
margin-top: 1.8rem;
margin-bottom: 1rem;
font-weight: 600;
color: #000000;
}
.service-description h1 {
font-size: 1.8rem;
margin-top: 0;
}
.section-title {
font-size: 1.6rem;
position: relative;
padding-bottom: 0.4rem;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: #17cec0;
}
.cta-section {
background-color: #f9f9f9;
padding: 1.8rem;
border-radius: 8px;
border-left: 4px solid #17cec0;
margin: 2rem 0;
}
.cta-title {
color: #17cec0;
margin-top: 0;
font-size: 1.4rem;
}
.feature-list,
.included-list {
padding-left: 1.5rem;
margin: 1rem 0;
}
.feature-list li,
.included-list li {
margin-bottom: 0.2rem;
color: #444444;
}
/* === Video gallery === */
.video-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.4rem;
margin: 2rem 0;
}
.video-item {
background: #f5f5f5;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.07);
position: relative;
}
.video-item.autoplay iframe {
width: 100%;
height: 200px;
display: block;
border: none;
}
.video-item.modal-trigger {
cursor: pointer;
height: 200px;
position: relative;
}
.video-item.modal-trigger img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.video-item.modal-trigger::after {
content: '▶';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.2rem;
color: white;
background: rgba(23, 206, 192, 0.8);
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
/* === Modal video === */
.video-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
justify-content: center;
align-items: center;
}
.video-modal.active {
display: flex;
}
.video-modal-content {
position: relative;
width: 90%;
max-width: 800px;
aspect-ratio: 16 / 9;
}
#modalIframe {
width: 100%;
height: 100%;
border: none;
}
.close-modal {
position: absolute;
top: -40px;
right: 0;
background: #17cec0;
color: white;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
/* === Image gallery === */
.image-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.2rem;
margin: 2rem 0;
}
.image-item {
height: 250px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.07);
}
.image-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.image-item img:hover {
transform: scale(1.03);
}
/* === Responsive === */
@media (max-width: 768px) {
.service-description {
padding: 1.5rem;
}
.video-gallery,
.image-gallery {
grid-template-columns: 1fr;
}
.section-title::after {
width: 40px;
}
}