.hero-container { padding: 20px 16px 0 16px; } .hero-title { font-size: 40px; font-weight: 700; line-height: 52px; margin: 0 0 20px 0; } .hero-text { margin: 0 0 20px 0; } .hero-text:nth-child(1) { margin: 0 0 16px 0; } .hero-reviews { display: flex; gap: 20px; margin: 0 0 20px 0; } .partners-container { padding: 40px 16px; } .reviews-left { display: flex; align-items: center; justify-content: center; } .reviews-right { max-width: 230px; } .review-avatar { width: 44px; height: 44px; position: relative; } .reviews-text { font-weight: 700; margin: 0 0 8px 0; } .reviews-stars { display: flex; } .flags-text { line-height: 25.6px; } .flags-imgs { display: flex; gap: 28px; margin: 16px 0 35px 0; } .hero-form { padding: 24px; border-radius: 12px; background: #DE920B; } .form-title { text-align: center; font-size: 20px; font-weight: 700; line-height: 120%; margin: 0 0 16px 0; } .form-body { border-radius: 12px; background: #FBF2EB; padding: 16px 12px; } .form-input { border-radius: 4px; background: #FFF; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04); color: #949599; margin: 0 0 12px 0; width: 100%; padding: 10px 12px; } .form-text { color: #949599; text-align: center; font-size: 12px; font-weight: 400; line-height: 130%; } .partners-title { text-align: center; font-size: 28px; font-weight: 700; line-height: 33.6px; margin: 0 0 24px 0; } .partners-imgs { justify-content: center; } .partners-img { margin: 0 0 21px 0; } .hero-block { } .hero-button { background: #EDAB16; border: 1px solid #EDAB16; color: #FFFFFF; position: relative; left: 50%; transform: translateX(-50%); width: 210px; padding: 11px 0; display: flex; justify-content: center; border-radius: 6px; font-weight: 700; } .form-top-title { font-size: 22px; line-height: 26.4px; font-weight: 500; margin: 0 0 16px 0; text-align: center; } @media (min-width: 500px) { .reviews-right { max-width: unset; } .hero-form { max-width: 400px; margin: 0 auto; } } .services-container { background: #17153B; border-radius: 12px; padding: 60px 12px; margin: 0 16px 40px 16px; } .services-title { margin: 0 0 40px 0; } .services-cards { display: block; } .services-block { margin: 0 0 40px 0; } .service-card-img { margin: 0 auto 32px auto; } .service-card { margin: 0 0 20px 0; } .service-card-title { font-weight: 500; text-align: center; font-size: 20px; line-height: 24px; margin: 0 0 16px 0; } .services-subtitle { font-size: 16px; line-height: 24px; text-align: center; margin: 0 0 40px 0; } .services-block:has(.services-subtitle) .services-title { margin: 0 0 16px 0; } .services-index { width: 72px; height: 72px; display: flex; justify-content: center; margin: 0 auto 32px auto; align-items: center; font-size: 32px; font-weight: 900; border-radius: 8px; } .services-btn { background: #EDAB16; padding: 11px 40px; width: fit-content; display: flex; justify-content: center; align-items: center; margin: 40px auto 0 auto; border-radius: 6px; border: 1px solid #EDAB16; transition: all 0.5s ease; cursor: pointer; } .services-btn:hover { background: transparent; color: #EDAB16; } @media (min-width: 650px) { .services-cards { justify-content: center; display: flex; } .service-card { max-width: 45%; } .service-card { text-align: center; } .services-container { margin: 0 auto; } .service-card { margin: 0; } } .feedback-title { margin: 0 0 40px 0; } .feedback-container { padding: 60px 16px; } .feedback-card { background: #424560; padding: 24px 12px; border-radius: 6px; width: 100%; } .feedback-card-img { } .feedback-card-top { display: flex; justify-content: space-between; margin: 0 0 17.29px 0; align-items: center; gap: 8px; } .user-info { display: flex; gap: 16px; align-items: center; } .feedback-name { max-width: 88px; } .video-container { display: flex; align-items: center; background: rgba(0, 0, 0, 0.2); border-radius: 6px; position: relative; } .feedback-video { max-height: 245px; margin: 0 auto; } .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 0, 0, 0.4); border: none; color: white; font-size: 25px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; z-index: 3; } .play-btn:hover { background: rgba(0, 0, 0, 0.8); } .feedback-result { display: flex; background: #FBF2EB; border-radius: 6px; padding: 8px; } .result-num { color: #212332; font-weight: 800; } .result-text { color: #EDAB16; font-weight: 500; font-size: 16px; line-height: 19.2px; margin: 0 0 6px 0; } .result-left { border-right: 1px solid #EDAB16; padding: 0 8px 0 0; margin: 0 8px 0 0; } .client-name { font-size: 18px; font-weight: 700; line-height: 21.6px; } .feedback-stars { margin: 7.5px 0 0 0; } @media (min-width: 650px) { .video-container { max-width: 307px; margin: 0 auto; } .feedback-card { padding: 24px; } } @media (min-width: 840px) { .feedback-cards { justify-content: center; display: flex; } .feedback-card { max-width: 45%; } } .techno-container { padding: 20px 16px; } .techno-text { text-align: center; margin: 0 auto 78px auto; max-width: 902px; } .techno-title { margin: 0 0 29px 0; } .techno-line { background: linear-gradient(90deg, rgba(222, 146, 11, 0) 0%, #DE920B 50%, rgba(222, 146, 11, 0) 100%); --s: 40px; --d: 20s; --n: 3; display: flex; overflow: hidden; } .techno-line img { width: var(--s); offset: shape(from calc(var(--s)/-2) 50%,hline by calc(sibling-count()*max(100%/var(--n),var(--s) + 10px))); animation: x var(--d) linear infinite calc(-1*sibling-index()*var(--d)/sibling-count()); } @keyframes x { to {offset-distance: 100%} } .advantages-container { padding: 40px 16px; } .advantages-title { margin: 0 0 40px 0; } .advantage-card { background: #424560; border-radius: 6px; padding: 24px 12px; } .advantage-card-img { margin: 0 auto 16px auto; } .advantage-card-title { font-size: 28px; line-height: 42px; font-weight: 500; text-align: center; margin: 0 0 16px 0; } .advantages-button { border: 1px solid #EDAB16; font-weight: 500; padding: 11px 53.5px; max-width: 280px; text-align: center; color: #EDAB16; margin: 0 auto; border-radius: 20px; display: flex; } .advantages-cards { margin: 0 0 40px 0; } @media (min-width: 650px) { .advantage-card { padding: 24px; } } @media (min-width: 840px) { .advantages-cards { justify-content: center; display: flex; } .advantage-card { max-width: 45%; } .advantage-card { text-align: center; } } .readmore-wrapper { max-height: 380px; overflow-y: scroll; border-radius: 4px; padding-right: 20px; } .readmore .container { padding-top: 30px; padding-bottom: 30px; } .readmore-wrapper h1 { font-size: 32px; margin: 0 0 8px 0; line-height: 120%; } .readmore-wrapper h2 { font-size: 24px; margin: 0 0 8px 0; line-height: 120%; } .readmore-wrapper h3 { font-size: 19px; margin: 0 0 8px 0; line-height: 120%; } .readmore-wrapper h5 { font-size: 14px; margin: 0 0 8px 0; line-height: 120%; } .readmore-wrapper h6 { font-size: 11px; margin: 0 0 8px 0; line-height: 120%; } .readmore-wrapper h4 { font-size: 16px; font-weight: 700; line-height: 21px; margin: 0 0 8px 0; } .readmore-wrapper li { font-size: 16px; line-height: 21px; } .readmore-wrapper ul, .readmore-wrapper ol { padding-left: 35px; margin: 0 0 8px 0; } .readmore-wrapper ul { list-style: disc; } .readmore-wrapper ol { list-style: decimal; } .readmore-wrapper p { font-size: 16px; line-height: 21px; margin: 0 0 8px 0; } .readmore-wrapper::-webkit-scrollbar { width: 10px; opacity: 1; background: #EDAB161A; } .readmore-wrapper::-webkit-scrollbar-track { border-radius: 10px; } .readmore-wrapper::-webkit-scrollbar-thumb { background: #EDAB16; border-radius: 10px; } .faq-container { padding: 80px 16px; } .faq-item { border-bottom: 1px solid #FFFFFF1A; margin: 0 0 24px 0; cursor: pointer; } .faq-question-title { font-weight: 700; font-size: 20px; line-height: 24px; max-width: 90%; } .faq-block-title { margin: 0 0 40px 0; } .faq-question { width: 100%; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: left; } .faq-question, .question-answer { max-width: 90%; margin: 0 auto; } .faq-item.active .faq-icon { transform: rotate(-180deg); transition: transform 0.3s ease; } .faq-item.active .question-answer { margin-bottom: 20px; } .question-answer { height: 0; overflow: hidden; transition: height 0.3s ease; } .faq-item.active .faq-question { padding: 24px 0 16px 0; }