.documents-section {
display: flex;
flex-direction: column;
align-items: flex-start;
background: #ffffff;
margin-top: 80px;
box-sizing: border-box;
}
.documents-section__title {
width: 100%;
max-width: 974px;
margin: 0;
letter-spacing: 0;
color: #113555;
font-family: Montserrat, sans-serif;
font-size: 34px;
font-weight: 700;
line-height: 1.2;
} .documents-section__big-card {
display: flex;
position: relative;
align-items: center;
width: 100%;
justify-content: space-between;
margin-top: 32px;
border-radius: 7px;
background: #f6f7f9;
padding: 30px;
min-height: 500px;
box-sizing: border-box;
}
.documents-section__content {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 0 0 auto;
width: 100%;
max-width: 440px;
}
.documents-section__intro {
width: 100%;
margin: 0;
letter-spacing: 0.22px;
color: #113555;
font-family: Montserrat, sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.3;
}
.documents-section__bullets {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin-top: 24px;
gap: 16px;
}
.documents-section__bullet {
display: flex;
align-items: flex-start;
width: 100%;
gap: 12px;
}
.documents-section__bullet-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
object-fit: contain;
}
.documents-section__bullet-text {
flex: 1;
margin: 0;
line-height: 22px;
letter-spacing: 0;
color: #2f2f2f;
font-size: 16px;
font-family: Montserrat, sans-serif;
}
.documents-section__bullet-text--bold {
font-weight: 700;
}
.documents-section__bullet-text--normal {
font-weight: 500;
}
.documents-section__image-wrapper {
flex: 0 0 auto;
width: 100%;
max-width: 634px;
margin-left: 29px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.documents-section__software-image {
width: 100%;
height: 440px;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 5px;
background-image: url(//panel-tek.ru/wp-content/themes/panel/template-parts/home-page/documents/software-screenshot.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.documents-section__video {
position: absolute;
bottom: 12px;
right: 12px;
width: 273px;
height: 158px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 3px;
box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.15);
overflow: hidden;
cursor: pointer;
}
.documents-section__video-preview {
display: flex;
align-items: flex-end;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
url(//panel-tek.ru/wp-content/themes/panel/template-parts/home-page/documents/video-preview.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
padding: 12px;
box-sizing: border-box;
}
.documents-section__video-title {
width: 100%;
margin: 0;
text-align: center;
letter-spacing: 0;
color: #ffffff;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
}
.documents-section__video-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: 0px 0px 26px rgba(217, 149, 23, 0.37);
background: #ffbd45;
padding: 19px;
width: 62px;
height: 62px;
box-sizing: border-box;
z-index: 1;
}
.documents-section__video-play-icon {
width: 25px;
height: 25px;
object-fit: contain;
} .documents-section__mini-card {
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin-top: 20px;
border-radius: 7px;
background: #f6f7f9;
padding: 30px;
box-sizing: border-box;
overflow: hidden;
}
.documents-section__documents-preview {
position: absolute;
top: -18px;
right: -14px;
width: 100%;
max-width: 735px;
min-height: 229px;
}
.documents-section__document {
position: absolute;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 5px;
width: 243px;
height: 171px;
transform: rotate(-15deg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
filter: drop-shadow(0px 8px 16px rgba(6, 17, 26, 0.1));
}
.documents-section__document--1 {
top: 30px;
left: 18px;
background-image: url(//panel-tek.ru/wp-content/themes/panel/template-parts/home-page/documents/doc-1.png);
}
.documents-section__document--2 {
top: 29px;
left: 157px;
height: 172px;
background-image: url(//panel-tek.ru/wp-content/themes/panel/template-parts/home-page/documents/doc-2.png);
}
.documents-section__document--3 {
top: 29px;
left: 324px;
height: 172px;
background-image: url(//panel-tek.ru/wp-content/themes/panel/template-parts/home-page/documents/doc-3.png);
}
.documents-section__document--4 {
top: 30px;
left: 474px;
background-image: url(//panel-tek.ru/wp-content/themes/panel/template-parts/home-page/documents/doc-4.png);
}
.documents-section__mini-content {
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
width: 100%;
z-index: 1;
}
.documents-section__mini-title {
margin: 0;
line-height: 1.2;
letter-spacing: 0.22px;
color: #113555;
font-family: Montserrat, sans-serif;
font-size: 22px;
font-weight: 700;
}
.documents-section__mini-description {
margin: 16px 0 0;
width: 100%;
line-height: 22px;
letter-spacing: 0;
color: #2f2f2f;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 500;
}
.documents-section__form-block {
display: flex;
position: relative;
align-items: center;
width: 100%;
justify-content: space-between;
margin-top: 24px;
border-radius: 7px;
background-color: #0e3456;
padding: 18px 30px;
min-height: 147px;
box-sizing: border-box;
background-image: linear-gradient(90deg, rgba(28, 87, 142, 0) 2.11%, #1c568d 91.56%);
overflow: hidden;
}
.documents-section__form-bg {
position: absolute;
top: -94px;
right: 0;
opacity: 0.1;
width: 100%;
max-width: 547px;
height: 338px;
background-image: url(//panel-tek.ru/wp-content/themes/panel/template-parts/home-page/documents/form-bg.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
}
.documents-section__form-content {
display: flex;
position: relative;
align-items: center;
width: 100%;
justify-content: space-between;
z-index: 1;
}
.documents-section__form-text {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.documents-section__form-title {
margin: 0;
line-height: 29px;
letter-spacing: 0.24px;
color: #ffffff;
font-family: Montserrat, sans-serif;
font-size: 24px;
font-weight: 700;
}
.documents-section__form-subtitle {
margin: 16px 0 0;
width: 100%;
max-width: 450px;
line-height: 21px;
letter-spacing: 0;
color: #ffffff;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 500;
}
.documents-section__form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
.recaptcha-v2-container {
margin: 5px 0;
display: flex;
justify-content: center;
}
.documents-section__form-inputs {
display: flex;
align-items: center;
gap: 24px;
}
.documents-section__input-group {
display: flex;
flex-direction: column;
align-items: center;
}
.documents-section__input-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
padding: 0 1px;
box-sizing: border-box;
}
.documents-section__input-content {
display: flex;
align-items: flex-start;
width: 100%;
gap: 5px;
padding: 2px 9px 0;
box-sizing: border-box;
}
.documents-section__input-icon {
flex-shrink: 0;
width: 24px;
height: 41px;
object-fit: contain;
}
.documents-section__input {
width: 100%;
padding: 14px 0 11px;
border: none;
outline: none;
background: transparent;
color: #ffffff;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
}
.documents-section__input::placeholder {
color: rgba(255, 255, 255, 0.5);
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
}
.documents-section__input-border {
flex-shrink: 0;
width: 100%;
height: 5px;
object-fit: contain;
}
.documents-section__input-label {
opacity: 0.5;
margin: 10px 0 0;
line-height: 18px;
letter-spacing: 0;
color: #ffffff;
font-family: Montserrat, sans-serif;
font-size: 12px;
font-weight: 500;
}
.documents-section__form-button {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 4px;
background: #ffbd45;
padding: 18px 19px 15px;
min-width: 299px;
height: 55px;
box-sizing: border-box;
cursor: pointer;
}
.documents-section__form-button-text {
flex-shrink: 0;
margin: 0;
line-height: 16px;
letter-spacing: 0.68px;
color: #113555;
font-family: "Exo", sans-serif;
font-size: 17px;
font-weight: 700;
text-transform: uppercase;
}
.documents-section__form-checkbox {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
margin: 0 16px;
min-width: 481px;
height: 18px;
}
.documents-section__checkbox-icon {
width: 14px;
height: 14px;
object-fit: contain;
flex-shrink: 0;
}
.documents-section__checkbox-text {
margin: 0;
line-height: 18px;
letter-spacing: 0;
color: #000000;
font-family: Montserrat, sans-serif;
font-size: 12px;
font-weight: 500;
}
.documents-section__checkbox-text--normal {
color: #ffffff;
}
.documents-section__checkbox-text--link {
color: #ffbd45;
}
@media (max-width: 991px) {
.documents-section {
margin-top: 50px;
}
.documents-section br {
display: none;
}
.documents-section__title {
font-size: 26px;
text-align: center;
}
.documents-section__big-card {
min-height: unset;
margin-top: 24px;
padding: 8px;
flex-direction: column-reverse;
gap: 12px;
}
.documents-section__image-wrapper {
max-width: 100%;
margin: 0;
}
.documents-section__software-image {
height: 218px;
}
.documents-section__content {
max-width: unset;
padding: 0 8px;
}
.documents-section__intro {
font-size: 18px;
line-height: 1.4;
}
.documents-section__bullets {
margin-top: 12px;
gap: 12px;
}
.documents-section__bullet {
gap: 8px;
}
.documents-section__bullet-icon {
width: 22px;
}
.documents-section__bullet-text {
font-size: 15px;
line-height: 1.4;
}
.documents-section__video {
position: relative;
bottom: unset;
right: unset;
width: 100%;
height: 181px;
}
.documents-section__video-preview {
padding: 20px;
}
.documents-section__mini-card {
margin-top: 10px;
padding: 16px;
}
.documents-section__mini-title {
font-size: 18px;
letter-spacing: unset;
}
.documents-section__mini-description {
line-height: 1.4;
font-size: 15px;
margin-top: 12px;
}
.documents-section__form {
width: 100%;
box-sizing: border-box;
}
.documents-section__form-block {
margin-top: 120px;
padding: 16px;
min-height: unset;
}
.documents-section__form-bg {
display: none;
}
.documents-section__form-content {
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 16px;
}
.documents-section__form-text {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
}
.documents-section__form-title {
font-size: 18px;
line-height: 1.4;
text-align: center;
}
.documents-section__form-subtitle {
font-size: 15px;
line-height: 1.4;
text-align: center;
margin-top: 12px;
}
.documents-section__form-inputs {
flex-direction: column;
}
.documents-section__form {
gap: 12px;
}
.documents-section__form-inputs {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
.documents-section__input-wrapper { }
.documents-section__input-group {
width: 100%;
}
.documents-section__form-button {
min-width: unset;
width: 100%;
}
.documents-section__checkbox-icon {
margin-top: 4px;
}
.documents-section__form-checkbox {
min-width: unset;
height: unset;
align-items: flex-start;
margin: 0 auto;
justify-content: center;
gap: 6px;
width: 268px;
}
.documents-section__form-inputs {
width: 100%;
}
.documents-section__input-border {
height: auto;
}
.documents-section__documents-preview {
position: absolute;
top: 140px;
right: auto;
left: 50%;
transform: translateX(-50%);
width: 420px;
height: 130px;
}
.documents-section__document {
width: 138px !important;
height: 98px !important;
top: 16px !important;
}
.documents-section__document--1 {
left: 20px !important;
}
.documents-section__document--2 {
left: 110px !important;
}
.documents-section__document--3 {
left: 200px !important;
}
.documents-section__document--4 {
left: 280px !important;
}
.documents-section__form-block br,
.documents-section__mini-description br {
display: none;
}
}