/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document ========================================================================== */
/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */
html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/* Sections ========================================================================== */
/** Remove the margin in all browsers. */
body { margin: 0; }

/** Render the `main` element consistently in IE. */
main { display: block; }

/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/* Grouping content ========================================================================== */
/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/* Text-level semantics ========================================================================== */
/** Remove the gray background on active links in IE 10. */
a { background-color: transparent; }

/** 1. Remove the bottom border in Chrome 57- 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content ========================================================================== */
/** Remove the border on images inside links in IE 10. */
img { border-style: none; }

/* Forms ========================================================================== */
/** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */
button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** Correct the inability to style clickable types in iOS and Safari. */
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Correct the padding in Firefox. */
fieldset { padding: 0.35em 0.75em 0.625em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/** Remove the default vertical scrollbar in IE 10+. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10. 2. Remove the padding in IE 10. */
[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

/** Remove the inner padding in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/* Interactive ========================================================================== */
/* Add the correct display in Edge, IE 10+, and Firefox. */
details { display: block; }

/* Add the correct display in all browsers. */
summary { display: list-item; }

/* Misc ========================================================================== */
/** Add the correct display in IE 10+. */
template { display: none; }

/** Add the correct display in IE 10. */
[hidden] { display: none; }

:root { --color-header: #0a3983; --color-main: #0f2d5f; --color-white: #fff; --color-black: #000; --color-dark-blue: #092046; }

body, html { margin: 0; background-color: var(--color-main); font-family: 'Poppins', sans-serif; line-height: 16px; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html { display: flex; min-height: 100%; }

body { display: flex; flex: 1; flex-direction: column; align-items: center; overflow-x: hidden; color: var(--color-white); line-height: 16px; }

*, :after, :before { box-sizing: border-box; -webkit-tap-highlight-color: transparent; transition: all 0.5s ease; }

h1, h2, h3 { margin: 0; }

h1 { font-size: 86px; font-weight: 700; line-height: 114px; }

h2 { font-size: 48px; font-weight: 700; line-height: 72px; }

ul { margin: 0; padding: 0; list-style: none; }

p { margin: 0; padding: 0; }

.wrapper { width: 100%; }

.holder { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px; }

.holder > section { overflow: hidden; }

@media (max-width: 992px) { h1 { font-size: 68px; line-height: 76px; }
  h2 { font-size: 38px; line-height: 46px; } }

@media (max-width: 768px) { .holder { padding: 0 16px; } }

@media (max-width: 576px) { h1 { font-size: 54px; line-height: 60px; }
  h2 { font-size: 28px; line-height: 36px; } }

.button { display: inline-flex; padding: 18px 40px; background-color: var(--color-white); border: 2px solid var(--color-white); border-radius: 20px; color: var(--color-black); font-size: 17px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }

.button--bordered { background-color: transparent; color: var(--color-white); }

.button:hover { filter: drop-shadow(0px 0px 8px #000000); }

@media (max-width: 1200px) { .button { padding: 12px 30px; border-radius: 10px; font-size: 16px; } }

.header { position: fixed; top: 0; right: 0; left: 0; width: 100%; height: 96px; background-color: var(--color-header); z-index: 10; }

.header .holder { display: flex; align-items: center; justify-content: space-between; height: 100%; }

.header__brand { display: flex; justify-self: flex-start; width: 204px; height: 68px; background-image: url("../images/brand-spinpay.svg"); text-decoration: none; }

.header__nav { display: flex; justify-self: center; gap: 40px; padding: 0 20px; }

.header__nav-item { color: var(--color-white); font-size: 18px; font-weight: 600; text-decoration: none; white-space: nowrap; }

.header__nav-item:hover { transform: scale(1.1); }

.header__btns { display: none; flex-wrap: nowrap; justify-self: flex-end; gap: 14px; }

.header__btns-burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 55px; height: 55px; padding: 0 12px; z-index: 10; }

.header__btns-burger > div { background-color: var(--color-white); width: 100%; height: 4px; border-radius: 4px; }

.header__btns-burger--open { gap: 0; }

.header__btns-burger--open > div:nth-child(3) { display: none; }

.header__btns-burger--open > div:nth-of-type(1) { transform: rotate(-45deg); }

.header__btns-burger--open > div:nth-of-type(2) { position: relative; top: -3px; transform: rotate(45deg); }

@media (max-width: 1200px) { .header__nav { gap: 26px; } }

@media (max-width: 1024px) { .header__nav { gap: 20px; }
  .header__nav-item { font-size: 16px; } }

@media (max-width: 992px) { .header__nav { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 28px; width: 100%; background-color: #0f2d5f; }
  .header__nav--open { display: flex; }
  .header__btns { display: flex; }
  .header__btns-burger { display: flex; } }

.hero { overflow: hidden; position: relative; padding: 84px 0; margin-top: 96px; z-index: 2; }

.hero :where(h1) { width: 800px; margin: 0 0 84px; }

.hero__list { display: flex; flex-direction: column; gap: 20px; }

.hero__list-item { display: flex; align-items: center; gap: 22px; font-size: 20px; line-height: 30px; }

.hero__list-item :where(span) { display: flex; align-items: center; height: 42px; font-size: 36px; }

.hero__connect { display: flex; align-items: center; gap: 60px; margin-top: 106px; }

.hero__connect-icons { display: flex; gap: 20px; height: 30px; }

.hero__bgr { position: absolute; right: -70px; bottom: 0; z-index: -1; }

.hero__bgr :where(img) { height: 740px; }

@media (max-width: 1200px) { .hero { padding-top: 48px; }
  .hero__bgr { right: -56px; }
  .hero__bgr :where(img) { height: 626px; } }

@media (max-width: 992px) { .hero :where(h1) { width: auto; } }

@media (max-width: 768px) { .hero :where(h1) { text-align: center; }
  .hero__connect { flex-wrap: wrap; }
  .hero__bgr { right: -46px; }
  .hero__bgr :where(img) { height: 500px; } }

@media (max-width: 576px) { .hero :where(h1) { margin-bottom: 48px; }
  .hero__list-item { font-size: 18px; line-height: 26px; }
  .hero__connect { justify-content: center; gap: 30px; margin-top: 64px; }
  .hero__bgr { right: -14px; }
  .hero__bgr :where(img) { height: 340px; } }

.section__one { padding-top: 120px; }

.section__one :where(h2) { text-align: center; }

.section__one-list { display: grid; grid-template-columns: repeat(3, 1fr); margin: 58px 0 20px; }

.section__one-list-item { display: flex; align-items: center; gap: 15px; min-height: 250px; font-size: 18px; line-height: 26px; }

.section__one-list-item:nth-of-type(1), .section__one-list-item:nth-of-type(4) { justify-content: flex-start; padding-right: 40px; border-right: 1px solid rgba(10, 57, 131, 0.5); }

.section__one-list-item:nth-of-type(2), .section__one-list-item:nth-of-type(5) { justify-content: center; padding: 0 40px; border-right: 1px solid var(--color-header); }

.section__one-list-item:nth-of-type(3), .section__one-list-item:nth-of-type(6) { padding-left: 40px; }

.section__one-list-item:nth-of-type(1), .section__one-list-item:nth-of-type(2), .section__one-list-item:nth-of-type(3) { border-bottom: 1px solid var(--color-header); }

.section__one-list-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 120px; height: 120px; background-color: var(--color-header); border-radius: 50%; }

.section__one-list-icon :where(span) { font-size: 46px; }

.section__one-btn { text-align: right; }

.section__two { position: relative; display: flex; flex-direction: column; align-items: flex-end; padding-top: 120px; z-index: 2; }

.section__two :where(h2) { text-align: right; }

.section__two-blocks { display: flex; flex-direction: column; gap: 20px; width: 800px; margin-top: 58px; }

.section__two-blocks-item { display: flex; align-items: center; gap: 24px; padding: 30px 46px; background-color: var(--color-header); border-radius: 20px; }

.section__two-blocks-item-icon { position: relative; display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 120px; height: 120px; background-color: var(--color-main); border-radius: 50%; }

.section__two-blocks-item-icon :where(div) { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: #092046; border-radius: 50%; color: var(--color-white); }

.section__two-blocks-item-icon :where(span) { font-size: 46px; }

.section__two-blocks-item-info :where(h3) { margin-bottom: 10px; font-size: 22px; line-height: 32px; }

.section__two-blocks-item-info :where(p) { font-size: 18px; line-height: 24px; }

.section__two-bgr { position: absolute; left: -260px; bottom: 0; z-index: -1; }

.section__two-bgr :where(img) { height: 757px; }

.section__three { position: relative; margin-top: 100px; padding-top: 120px; padding-bottom: 48px; z-index: 2; }

.section__three :where(h2) { margin-bottom: 70px; }

.section__three-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 100px; width: 100%; max-width: 920px; }

.section__three-list-item { display: flex; align-items: center; gap: 15px; }

.section__three-list-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 120px; height: 120px; background-color: var(--color-header); border-radius: 50%; }

.section__three-list-icon :where(span) { font-size: 46px; }

.section__three-list-info :where(h3) { margin-bottom: 10px; font-size: 18px; font-weight: 600; line-height: 26px; }

.section__three-list-info :where(p) { font-size: 16px; line-height: 24px; }

.section__three-bgr { position: absolute; right: -50px; bottom: -15px; z-index: -1; }

.section__three-bgr :where(img) { height: 550px; }

.section__four { padding-top: 120px; }

.section__four :where(h2) { text-align: center; }

.section__four-slist { position: relative; display: flex; flex-wrap: wrap; margin-top: 60px; background-image: url(../images/bgr-wheel.svg); background-repeat: no-repeat; background-position: center; }

.section__four-slist-item { display: flex; }

.section__four-slist-item:nth-of-type(1) { flex-basis: 100%; justify-content: center; margin-bottom: 160px; }

.section__four-slist-item:nth-of-type(1) .section__four-slist-block { width: 550px; }

.section__four-slist-item:nth-of-type(2) { flex-basis: 50%; justify-content: flex-start; margin-bottom: 160px; }

.section__four-slist-item:nth-of-type(2) .section__four-slist-block { flex-direction: column; width: 250px; }

.section__four-slist-item:nth-of-type(2) .section__four-slist-block :where(p) { text-align: center; }

.section__four-slist-item:nth-of-type(3) { flex-basis: 50%; justify-content: flex-end; margin-bottom: 160px; }

.section__four-slist-item:nth-of-type(3) .section__four-slist-block { flex-direction: column; width: 250px; }

.section__four-slist-item:nth-of-type(3) .section__four-slist-block :where(p) { text-align: center; }

.section__four-slist-item:nth-of-type(4) { flex-basis: 50%; justify-content: flex-end; }

.section__four-slist-item:nth-of-type(4) .section__four-slist-block { width: 450px; margin-right: 20px; }

.section__four-slist-item:nth-of-type(5) { flex-basis: 50%; justify-content: flex-start; }

.section__four-slist-item:nth-of-type(5) .section__four-slist-block { width: 450px; margin-left: 20px; }

.section__four-slist-block { display: flex; align-items: center; gap: 15px; padding: 30px 40px; background-color: var(--color-header); border-radius: 25px; }

.section__four-slist-block :where(p) { font-size: 18px; line-height: 26px; }

.section__four-slist-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 120px; height: 120px; background-color: var(--color-main); border-radius: 50%; color: var(--color-white); font-size: 40px; font-weight: 700; line-height: 40px; }

.section__four-slist-atm { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.section__four-slist-atm :where(img) { height: 820px; }

.section__contact { padding: 120px 0 86px; }

.section__contact :where(h2) { margin-bottom: 50px; }

.section__contact :where(h3) { margin-bottom: 50px; font-size: 30px; font-weight: 700; line-height: 45px; }

.section__contact-list { display: flex; gap: 60px; }

.section__contact-list-item :where(b) { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 600; }

.section__contact-list-item :where(a) { color: #B2BAD8; font-size: 16px; font-weight: 400; line-height: 24px; text-decoration: none; }

.section__contact-list-item :where(a):hover { text-decoration: underline; }

@media (max-width: 1200px) { .section__two-blocks { width: 700px; }
  .section__four-slist { background-size: contain; } }

@media (max-width: 1024px) { .section__one-list-item { min-height: 200px; font-size: 16px; line-height: 22px; }
  .section__two-blocks { width: 600px; }
  .section__three-list { gap: 20px 30px; }
  .section__four-slist { min-height: auto; }
  .section__four-slist-block { padding: 20px 30px; }
  .section__four-slist-block :where(p) { font-size: 16px; line-height: 22px; }
  .section__four-slist-icon { width: 100px; height: 100px; }
  .section__four-slist-atm :where(img) { height: 676px; } }

@media (max-width: 992px) { .section__four-slist-item:nth-of-type(4) .section__four-slist-block, .section__four-slist-item:nth-of-type(5) .section__four-slist-block { width: auto; } }

@media (max-width: 768px) { .section__one-list { grid-template-columns: repeat(2, 1fr); }
  .section__one-list-item { padding: 0 20px !important; border: none; }
  .section__one-list-item:nth-of-type(1), .section__one-list-item:nth-of-type(4), .section__one-list-item:nth-of-type(2), .section__one-list-item:nth-of-type(5) { border-right: none; }
  .section__one-list-item:nth-of-type(4) { border-bottom: 1px solid var(--color-header); }
  .section__one-list-item:nth-of-type(1), .section__one-list-item:nth-of-type(3), .section__one-list-item:nth-of-type(5) { border-right: 1px solid var(--color-header); }
  .section__two { align-items: center; }
  .section__two :where(h2) { text-align: center; }
  .section__two-blocks { width: auto; }
  .section__two-bgr { display: none; }
  .section__three :where(h2) { text-align: center; }
  .section__four-slist { gap: 16px; }
  .section__four-slist-item:nth-of-type(1) { order: 1; }
  .section__four-slist-item:nth-of-type(2) { order: 5; }
  .section__four-slist-item:nth-of-type(3) { order: 2; }
  .section__four-slist-item:nth-of-type(4) { order: 4; }
  .section__four-slist-item:nth-of-type(5) { order: 3; }
  .section__four-slist-item:nth-of-type(1), .section__four-slist-item:nth-of-type(2), .section__four-slist-item:nth-of-type(3), .section__four-slist-item:nth-of-type(4), .section__four-slist-item:nth-of-type(5) { flex-basis: 100%; margin: 0; }
  .section__four-slist-item:nth-of-type(1) .section__four-slist-block, .section__four-slist-item:nth-of-type(2) .section__four-slist-block, .section__four-slist-item:nth-of-type(3) .section__four-slist-block, .section__four-slist-item:nth-of-type(4) .section__four-slist-block, .section__four-slist-item:nth-of-type(5) .section__four-slist-block { flex-direction: row; width: 100%; margin: 0; }
  .section__four-slist-item:nth-of-type(1) .section__four-slist-block :where(p), .section__four-slist-item:nth-of-type(2) .section__four-slist-block :where(p), .section__four-slist-item:nth-of-type(3) .section__four-slist-block :where(p), .section__four-slist-item:nth-of-type(4) .section__four-slist-block :where(p), .section__four-slist-item:nth-of-type(5) .section__four-slist-block :where(p) { text-align: left; }
  .section__four-slist-atm { display: none; }
  .section__four-slist-atm :where(img) { height: 562px; }
  .section__contact-list { gap: 30px; } }

@media (max-width: 576px) { .section__one-list { display: flex; flex-direction: column; gap: 18px; }
  .section__one-list-icon { transform: scale(0.9); }
  .section__one-list-item { min-height: 0; border: none !important; }
  .section__one-btn { text-align: center; }
  .section__two-blocks-item { gap: 16px; padding: 30px 30px 30px 16px; }
  .section__two-blocks-item-icon { transform: scale(0.9); }
  .section__two-blocks-item-info :where(h3) { font-size: 18px; }
  .section__two-blocks-item-info :where(p) { font-size: 16px; line-height: 22px; }
  .section__three-list { display: flex; flex-direction: column; }
  .section__three-list-icon { transform: scale(0.9); }
  .section__three-bgr { display: none; }
  .section__four-slist-icon { transform: scale(0.9); }
  .section__contact-list { flex-wrap: wrap; } }

.footer { margin-top: 40px; background-color: var(--color-header); }

.footer .holder { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: flex-start;
    gap: 20px; 
    padding: 30px 20px; 
}

.footer__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
}

.footer__pci-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer__pci { 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100px; 
    height: 48px; 
}

.footer__pci :where(img) { 
    position: absolute; 
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.footer__pci--black svg path {
    fill: #000000;
}

.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); z-index: 100; }

.modal--open { display: flex; }

.modal__holder { position: relative; width: 100%; min-width: 300px; max-width: 600px; margin: 0 16px; padding: 30px; background-color: var(--color-main); border-radius: 20px; }

.modal__header { margin-bottom: 20px; }

.modal__close { position: absolute; top: 18px; right: 18px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 28px; cursor: pointer; user-select: none; }

.modal__base :where(form) { display: grid; flex-direction: column; align-items: flex-start; gap: 18px; }

.modal__base :where(label) { display: flex; flex-direction: column; gap: 6px; width: 100%; color: var(--color-white); font-size: 13px; font-weight: 700; }

.modal__base :where(input) { all: unset; height: 48px; padding: 0 10px; background-color: var(--color-header); border-radius: 8px; cursor: auto; }

.modal__base :where(textarea) { max-width: 100%; min-height: 150px; padding: 10px; margin-bottom: 28px; background-color: var(--color-header); border: none; border-radius: 8px; color: var(--color-white); font-weight: 700; }

.modal__base :where(textarea):focus-visible { outline: none; }

.modal__base :where(button) { justify-self: flex-end; }

.footer__pci--black a {
    display: block;
    width: 100%;
    height: 100%;
}

.footer__pci--black a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer__pci--black img {
    filter: brightness(0);
}

.footer__pci-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .footer__pci-container {
        flex-wrap: wrap;
    }
}