/* ==========================================================================
   HONOR promocija 08/2026 – landing page
   Design reference: /custom/honor-promocija-08-2026/dizajn/*.jpg
   Design files are 3199px wide = 1600 CSS px @2x, so every value below is
   read straight off the design at a 1600px wide viewport.
   No font-family is set anywhere on purpose.
   ========================================================================== */

*  {
    margin: 0;
    padding: 0;
    border: 0;
}

.main-section-wrapper {
	max-width: 1600px;
	background-color: #e7e7e7;
}

section {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* --------------------------------------------------------------------------
   SECTIONS 1–5 – one full width design image per section
   --------------------------------------------------------------------------
   Every design image carries 215px+ of empty background on each side.
   Section 1 is the tightest of the five: its content spans x 247–1349 of
   1600, so a 215px inset keeps ~32px of breathing room beside it.

   As the screen narrows that empty edge is cropped away first and the
   content keeps its design size. Once the screen edge reaches that inset,
   at 1600 - (2 x 215) = 1170px, the image starts scaling down instead.

   width: 136.7521% ->  1600 / 1170, i.e. always wide enough that the
                        crop stops 215px in on a 1170px screen
   max-width: 1600px -> caps the image at design size, so above 1170px it
                        crops rather than scales
   flex: 0 0 auto    ->  stops the flex container from shrinking it back

   All five sections share this rule, so they always scale in step with
   each other. Image maps stay in sync via imageMapResizer.
   -------------------------------------------------------------------------- */

.section1,
.section2,
.section3,
.section4,
.section5 {
	overflow: hidden;
}

.section1 img{
	margin-bottom: -2px;
}

/* The crop sizing lives on the section's DIRECT CHILD, so it works whether
   that child is the <img> itself or an <a> wrapping it. If you add or remove
   a link, move the .img-desktop / .img-mobile class along with it. */

.section1 > .img-desktop,
.section2 > .img-desktop,
.section3 > .img-desktop,
.section4 > .img-desktop,
.section5 > .img-desktop {
	display: block;
	width: 136.7521%;
	max-width: 1600px;
	height: auto;
	flex: 0 0 auto;
}

/* mobile art (shown under 992px) is composed portrait at 1000px wide with its
   own padding baked in, so it just fills the width – no crop needed */
.section1 > .img-mobile,
.section2 > .img-mobile,
.section3 > .img-mobile,
.section4 > .img-mobile,
.section5 > .img-mobile {
	display: none;
	width: 100%;
	max-width: 100%;
	height: auto;
	flex: 0 0 auto;
}

/* when the slot is a link, the image fills it */
.section1 > a > img,
.section2 > a > img,
.section3 > a > img,
.section4 > a > img,
.section5 > a > img {
	display: block;
	width: 100%;
	height: auto;
}

/* background per section matches the image edge, so no white flash while
   the images load and no seam if a row rounds to a sub-pixel */
.section1 {
	background-color: #d9d9d9;
}

.section2,
.section3,
.section4,
.section5 {
	background-color: #e7e7e7;
}

/* --------------------------------------------------------------------------
   SECTION 6 – background colour + text (design: 1600 x 426)
   -------------------------------------------------------------------------- */

.section6 {
	display: block;
	background-color: #cbcbcb;
	padding: 49px 20px 86px;
	text-align: center;
}

.section6 .gift-block p {
	font-size: 25px;
	line-height: 30px;
}

.section6 .gift-title {
	color: #da2028;
	font-weight: 700;
}

.section6 .gift-name {
	color: #3a3a3a;
	font-weight: 400;
}

.section6 .gift-divider {
	display: block;
	width: 397px;
	max-width: 100%;
	height: 2px;
	margin: 22px auto 36px;
	background-color: #797979;
}

.section6 .gift-benefit {
	margin-top: 51px;
	font-size: 25px;
	line-height: 30px;
	font-weight: 700;
	color: #3a3a3a;
}

/* forces the design's line break, but still wraps naturally when narrower */
.section6 .gift-benefit span {
	display: block;
}

/* --------------------------------------------------------------------------
   SECTION 7 – background colour + text (design: 1600 x 420)
   -------------------------------------------------------------------------- */

.section7 {
	display: block;
	background-color: #000000;
	padding: 36px 20px 94px;
	text-align: center;
}

.section7 .reg-info {
	font-size: 22px;
	line-height: 34px;
	color: #ffffff;
}

.section7 .reg-info a {
	color: #ffffff;
	text-decoration: none !important;
}

.section7 .reg-info span {
	display: block;
}

.section7 .btn-reg,
.section7 .btn-rules {
	display: inline-block;
	box-sizing: border-box;
	border-radius: 5px;
	color: #ffffff;
	white-space: nowrap;
}

.section7 .btn-reg {
	margin-top: 0;
	margin-bottom: 10px;
	min-width: 162px;
	height: 42px;
    padding: 6px 17px;
	line-height: 32px;
	background-color: #c72351;
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
}

.section7 .promo-period {
	margin-top: 34px;
	font-size: 28px;
	line-height: 37px;
	font-weight: 400;
	color: #ffffff;
}

.section7 .btn-rules {
	margin-top: 39px;
	min-width: 167px;
	height: 34px;
	padding: 0 17px;
	line-height: 34px;
	background-color: #3b3b3d;
	font-size: 16px;
	text-decoration: underline;
}

.section7 .btn-reg:hover,
.section7 .btn-rules:hover {
	color: #ffffff;
	opacity: .85;
}