#service {
	padding-top: 3rem;
}

#service article {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

#service article .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding:2rem;
}

#service h2 {
	padding:0;
}

#service .header-article {
	min-height:100vh;
    justify-content: center;
}

#service .header-article .list {
	min-width:600px;
}

#service .list,
#service .text {
	min-width: 400px;
	display:flex;
	flex-direction:column;
	gap:1rem;
	max-width: 800px;
}

#service .header-article .links {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:0.5rem;
}

#service .header-article .links a {
	font-size: 1.5rem;
	background:#ffffff3d;
	color:white;
	padding:0.5rem;
	cursor: pointer;
	border-radius: 0.5rem;
	border:2px solid white;
	width:fit-content;
	display:flex;
	align-items:center;
	gap:0.5rem;
}

#service article .text {
	color:white;
	font-size: 2rem;
	text-align: center;
	flex:1;
}

#service article .text p {
	margin-bottom: 2rem;
}

#service article .list {
	flex:1;
	min-width:500px;
	display:flex;
	justify-content:center;
	align-items:center;
}

@media screen and (max-width:750px) {

    #service .header-article h2 i {
        font-size: 2.8rem;
    }
    #service article h2 {
        transition: none;
        text-align: center;
        font-size: 2rem;
        
    }
    #service article .text {
        font-size: 1.5rem;
        text-align: center;
    }
}

/* examples of services */
#service_examples_list {
    width:100%;
	overflow:hidden;
	padding:1rem;
}

.scroll-container {
    display:flex;
    gap:1rem;
    width:200%;
}

.scroll-left {
    animation: scroll-left 60s linear infinite;
}

.scroll-right {
    animation: scroll-right 60s linear infinite;
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

#service_examples_list_left:hover .scroll-container,
#service_examples_list_right:hover .scroll-container {
    animation-play-state: paused;
}

.service_container {
    width:220px;
    height:220px;
    flex-shrink: 0;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

/* web service */
.web_service_container {
	margin:0px auto;
	max-width:600px;
}

.web_service_container .text a {
	background:green;
	color:white;
	padding:10px;
	display: block;
	width:300px;
	text-align: center;
}

.web_service_container h3 {
	padding:20px;
	text-align: center;
	color:white;
}

.web_service_container #service_examples_list {
	max-width:300px;
}

#service_examples_list a {
    transition: all 0.3s ease;
	width:220px;
	display: block;
	box-shadow: 0px 0px 2px black;
}

#service_examples_list img {
	width:100%;
	height:100%;
	object-fit: cover;
}

#service_examples_list a:hover {
    background:gray;
    color:white;
}

#theme1 {border:2px solid lightgray;background:#e6e6e6;}
#theme2 {border:2px solid transparent;background:#230138;}
#theme3 {border:2px solid transparent;background:#439e39;}
#theme4 {border:2px solid transparent;background:darkred;}
#theme1:checked,
#theme2:checked,
#theme3:checked,
#theme4:checked {
	border:2px solid red;
}