* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial;
}

html,
body {
    overflow-x: clip;
    width: 100%;
}

.services-page {
width: 100%;
}

.block {
display: flex;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
padding: 30px 20px;
}

.service-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 50px;
width: 100%;
margin-top: 50px;
}

.temporary {
flex: 1;
width: 540px;
height: 300px;
overflow: hidden;
border: 2px solid #782121;
}

.temporary img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.service-texts {
width: 540px;
}

.service-title {
font-size: 24px;
margin-bottom: 15px;
}

.service-text {
font-size: 17px;
margin-bottom: 15px;
text-align: justify;
line-height: 1.5;
}

.largebox {
width: 100%;
height: 342px;
background-image: url("/static/images/cover.jpg");
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
}

.largebox__title {
color: #fff;
font-size: 46px;
text-align: center;
}

.coverIcon {
width: 100%;
display: block;
}

.reveal {
opacity: 0;
transition: all 0.8s ease;
}

.reveal.left {
transform: translateX(-30px);
}

.reveal.right {
transform: translateX(30px);
}

.reveal.active {
opacity: 1;
transform: translateX(0);
}

.contactSection {
clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
position: relative;
width: 100%;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.contactOverlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}

.contactContent {
max-width: 700px;
text-align: center;
color: #222;
z-index: 2;
}

.contactTitle {
font-size: 1.8rem;
margin-bottom: 1rem;
}

.contactText {
font-size: 1rem;
line-height: 1.6;
}

@media (max-width: 1024px) {

.service-row {
    gap: 30px;
}

.service-texts,
.temporary {
    width: 45%;
}

}

@media (max-width: 768px) {

.service-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.service-texts,
.temporary {
    width: 100%;
}

.largebox {
    height: 250px;
}

.largebox__title {
    font-size: 32px;
}

}

@media (max-width: 1000px) {

.contactSection {
    min-height: 400px;
    height: auto;

    padding: 80px 20px;

    background-size: cover;
    background-position: center;
}

.contactContent {
    width: 100%;
    max-width: 700px;
}

.contactTitle {
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.contactText {
    font-size: clamp(0.9rem, 2vw, 1rem);
    line-height: 1.7;
}

}