/* General */
#main { padding: 128px 0 100px; background: no-repeat url( '../../images/pages/scissor/bg/main.webp' ) center bottom/cover; }
#headline { color: #fff; }
body > .container { max-width: calc( 100% - 40px ); }

/* Description */
#description { max-width: 100%; width: 800px; margin: auto; }
#description h2 { margin: 0 0 19px; }
#description .text > *:last-child { margin-bottom: 0; }

/* What we offer */
#benefits { padding: 60px 0 80px; text-align: center; }
#benefits img { max-width: 55px; max-height: 55px; }
.blocks { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; }
.blocks div { line-height: 1.6; transition: all .4s; opacity: 0; text-align: left; width: 300px; padding: 21px 30px; box-sizing: border-box; border-radius: 10px; box-shadow: 0 0 14px 0 rgba( 0, 0, 0, .12 ); background: no-repeat url( '../../images/pages/scissor/bg/block.webp' ) #FFF top right; }
.blocks div.appear { animation: fade-up 2s forwards; }
.blocks h3 { letter-spacing: 0; margin: 13px 0; line-height: 1.2; min-height: 50px; font-size: 15pt; }
.blocks div > *:last-child { margin-bottom: 0; }
@keyframes fade-up { 0% { opacity: 0; transform: translateY( 20px ); } 100% { opacity: 1; transform: translateY( 0 ); } }

/* What we cover */
#coverage { padding: 65px 0 80px; margin: 23px auto 96px; text-align: center; background: no-repeat url( '../../images/pages/scissor/bg/coverage.webp' ) center/cover fixed; }
#coverage h2 { margin: 0 0 52px; color: #fff; }
#coverage .blocks { flex-wrap: nowrap; gap: 12px; }
#coverage .blocks div { padding: 40px 40px 30px; box-shadow: 0 0 10px #00000059; background: #FFF; border-radius: 12px; width: 543px; max-width: 100%; text-align: center; transition: all .4s; }
#coverage .blocks .appear:hover { margin: -10px 0; background: linear-gradient( 180deg, #176ec6 0%, #39c4f7 100% ); color: #fff; }
#coverage .blocks h3 { margin: 0 auto 30px; min-height: auto; width: max-content; max-width: 100%; background: linear-gradient( 110deg, #ff7802, #8500d3 ); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent;  font-size: 18pt; }
#coverage .blocks .appear:hover h3 { color: #fff; background: 0; -webkit-background-clip: unset; -webkit-text-fill-color: unset; }
#coverage ul { text-align: left; padding: 0; margin: 0; }
#coverage li { padding: 0 0 0 30px; }
#coverage li + li { margin: 14px 0 0; }
#coverage li:before { content: ' '; background: no-repeat url( '../../images/pages/scissor/icons/check-mark.svg' ) center/cover; width: 21px; aspect-ratio: 1; top: 1px; }
#coverage b { display: block; line-height: 1.2; }

/* Why choose us */
#why { margin: 0 0 96px; }
#why h2 { text-align: center; }
#why .blocks { gap: 24px; }
#why .blocks div { width: calc( ( 100% - 72px ) / 4 ); padding: 25px 30px 31px; background: 0; }
#why h3 { font-size: 15pt; margin: 0 0 13px; min-height: auto; }
#why img { display: block; height: 55px; margin: 0 0 20px; }

/* Sign-up */
#sign-up { color: #fff; position: relative; }
#sign-up:before { content: ' '; display: block; position: absolute; top: 0; left: 0; right: 50%; bottom: 0; z-index: 0; background: no-repeat url( '../../images/pages/scissor/bg/sign-up.webp' ) right center/cover; }
#sign-up section { font-size: 13pt; box-sizing: border-box; line-height: 1.8; background: linear-gradient( 130deg, #2c5ca8, #b398ee); padding: 80px 100px; width: 50%; margin: 0 0 0 auto; position: relative; z-index: 1; }
#sign-up h2 { font-size: 25pt; color: #fff; margin: 0 0 18px; }
#sign-up p { width: 390px; max-width: 100%; margin: 0; }
#sign-up p + p { margin-top: 21px; }
#sign-up a { border-bottom: 1px solid #FFF; }
#sign-up a:hover { border-bottom: 1px solid #FFF; }

@media (max-width: 900px) {
	#sign-up section { padding: 25px 32px; }
}

@media (max-width: 860px) {
    .blocks h3 { font-size: 15pt; }
}

@media (max-width: 800px) {
    #coverage .blocks { flex-wrap: wrap; flex-direction: column; align-items: center; gap: 30px; }

	#sign-up section { font-size: 11pt; }
}

@media (max-width: 760px) {
    #benefits, #coverage { padding: 50px 0; }

    #coverage h2 { margin: 0 0 40px; }
}

@media (max-width: 550px) {
	#sign-up section { width: 100%; padding: 25px 4%; }
	#sign-up:before { display: none; }
}

@media (max-width: 500px) {
    .blocks h3 { font-size: 13pt; }
}

@media (max-width: 480px) {
    #benefits, #coverage { padding: 40px 0; }

    .blocks, #coverage .blocks { gap: 20px; }
}