@media (min-width: 1701px) { .hero_sec .container, .cust_logo_sec .container, .unlock_sec .container, .benefits_sec .container, .soft_skil_sec .container, .key_point_sec .container { max-width: 1664px; } }
@media (max-width: 1700px) { .hero_sec .container, .cust_logo_sec .container, .unlock_sec .container, .benefits_sec .container, .soft_skil_sec .container, .key_point_sec .container { max-width: 1649px; } }
@media (max-width: 1400px) { .hero_sec .container, .cust_logo_sec .container, .unlock_sec .container, .benefits_sec .container, .soft_skil_sec .container, .key_point_sec .container { max-width: 1340px !important; } }
@media (max-width: 1200px) { .hero_sec .container, .cust_logo_sec .container, .unlock_sec .container, .benefits_sec .container, .soft_skil_sec .container, .key_point_sec .container { max-width: 1140px !important; } }
@media (max-width: 992px) { .hero_sec .container, .cust_logo_sec .container, .unlock_sec .container, .benefits_sec .container, .soft_skil_sec .container, .key_point_sec .container { max-width: 960px !important; } }
@media (max-width: 768px) { .hero_sec .container, .cust_logo_sec .container, .unlock_sec .container, .benefits_sec .container, .soft_skil_sec .container, .key_point_sec .container { max-width: 720px !important; } }
@media (max-width: 576px) { .hero_sec .container, .cust_logo_sec .container, .unlock_sec .container, .benefits_sec .container, .soft_skil_sec .container, .key_point_sec .container { max-width: 540px !important; } }
/* ---------- Paragraph line-height (NL style.css uses 150%, EN uses 170%) ---------- */
.hero_sec p, .cust_logo_sec p, .unlock_sec p, .benefits_sec p, .soft_skil_sec p, .waaren_dev_sec p, .voordelen_sec p { line-height: 150%; }
/* ---------- Hero ---------- */
.banner.react-banner.hero_sec { padding: 290px 0 calc(290px - 128px); }
.banner.hero_sec { background-image: url(/assets/images/soft-ont/hero-sec.webp); background-size: cover; background-repeat: no-repeat; background-position: center; }
.banner.hero_sec:before { content: ""; position: absolute; background-color: #00000094; width: 100%; height: 100%; top: 0; left: 0; }
section.hero_sec > .container > .row { display: flex; }
.hero_sec .banner-inner { width: 81%; padding-bottom: 40px; }
.hero_sec .banner-inner .banner-heading { font-size: 66px; }
.hero_sec .banner-inner .banner-heading > span { font-weight: 700; }
.hero_sec .banner-inner p { width: 100%; max-width: none; font-size: 20px; line-height: 150%; }
.hero_sec .btn-primary { background-color: #f57c20; border-color: #f57c20; }
.hero_sec .btn-primary:hover { border-color: #f57c20; }
.hero_sec .banner-inner button.btn-primary.hero_cta_tech:hover { background-color: #f17e2f !important; }
.hero_sec.react-banner .banner-inner button span { font-size: 16px; line-height: 1.2; text-align: left; padding-right: 8px; }
.hero_sec button.hero_cta_tech { position: relative; }
.hero_sec a.hero_n_btn button.hero_cta_tech { position: relative; padding: 14px 12px 14px 12px; color: #FFFFFF; transition: padding .3s ease; }
.hero_sec a.hero_n_btn button.hero_cta_tech:after { content: ""; position: absolute; top: 50%; right: 20px; width: 20px; height: 20px; background-image: url(/assets/images/soft-ont/arrow-icon.svg); background-size: cover; background-repeat: no-repeat; background-position: center; transform: translateY(-50%) translateX(-10px); opacity: 0; transition: all .3s ease; }
.hero_sec a.hero_n_btn:hover button.hero_cta_tech { padding: 14px 40px 14px 12px; }
.hero_sec a.hero_n_btn:hover button.hero_cta_tech:after { transform: translateY(-50%) translateX(0); opacity: 1; }
@media screen and (min-width: 1700px) {
.hero_sec .banner-inner .banner-heading { font-size: 64px; }
}
@media screen and (max-width: 1700px) {
.banner.react-banner.hero_sec { padding: 238px 0 calc(238px - 72px); }
}
@media screen and (max-width: 1480px) {
.hero_sec .banner-inner .banner-heading { font-size: 56px; }
}
@media screen and (max-width: 1367px) {
.hero_sec .banner-inner .banner-heading { font-size: 38px; margin-bottom: 20px; }
}
@media screen and (max-width: 1267px) {
.hero_sec .banner-inner .banner-heading { font-size: 30px; }
}
@media screen and (max-width: 1024px) {
.hero_sec .banner-inner p { font-size: 18px; }
}
@media screen and (max-width: 991px) {
.hero_sec.react-banner .banner-inner button span { padding-left: 4px; }
}
@media (max-width: 992px) {
.banner.react-banner.hero_sec { padding: 140px 0 calc(140px - 109px); }
.hero_sec .banner-inner .banner-heading { font-size: 40px; }
.hero_sec.react-banner .banner-inner button span { max-width: unset; }
.hero_sec a.hero_n_btn:hover button.hero_cta_tech { padding: 14px 30px 14px 12px; }
.hero_sec a.hero_n_btn button.hero_cta_tech:after { right: 25px; width: 15px; height: 15px; }
}
@media (max-width: 768px) {
.hero_sec .banner-inner .banner-heading { font-size: 34px; }
}
@media screen and (max-width: 767px) {
.hero_sec .banner-inner { width: 100%; }
.hero_sec .banner-inner .banner-heading { line-height: 1.2; }
.hero_sec.react-banner .button-wrapper button { min-width: 190px; }
.hero_sec.react-banner .banner-inner button span { font-size: 14px; }
.hero_sec .banner-inner p { font-size: 16px; }
}
@media screen and (min-width: 768px) {
.hero_sec .banner-inner .banner-heading > span { line-height: 111%; }
}
/* ---------- Shared inline rules ---------- */
.image-border { border-radius: 15px; }
.image-border img { border-radius: 15px; }
.heading-top p { margin-bottom: 20px; }
/* ---------- Our Customers ---------- */
.cust_logo_sec { padding: 64px 0; }
.cust_logo_sec .mar-b-48 { margin-bottom: 48px; }
.cust_logo_block { display: flex; flex-wrap: wrap; gap: 10px 150px; justify-content: space-between; }
.cust_logo { max-width: 200px; height: 44px; }
/* ---------- Text + image blocks (unlock_sec, soft_skil_sec) ---------- */
.unlock_sec { padding: 150px 0; }
.soft_dev_sec { display: flex; gap: 96px; }
.soft_dev_txt { display: flex; flex-direction: column; align-items: flex-start; max-width: 765px; }
.soft_dev_txt p { font-size: 20px; line-height: 30px; }
.soft_skil_sec { padding: 160px 0; }
/* ---------- What does a developer do (benefits_sec) ---------- */
.benefits_sec { padding: 100px 0; }
.benefits_sec p { font-size: 20px; line-height: 30px; font-weight: 400; }
.soft_eig { display: flex; gap: 48px; margin-bottom: 72px; }
.soft_eig h2 { margin-bottom: 48px; }
.img_htfull img { height: 80%; object-fit: cover; border-radius: 20px; margin-bottom: 30px; }
.soft_eig_cont { max-width: 921px; }
.soft_eig_cont ul { margin-top: 16px; display: inline-block; }
.soft_eig_cont ul li { position: relative; padding-bottom: 17px; }
.soft_eig_cont ul li:before { content: ""; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; background: url('data:image/svg+xml,'); background-repeat: no-repeat; background-size: 100%; }
.soft_eig_cont ul li strong { font-weight: 700; font-size: 20px; line-height: 30px; padding-left: 32px; }
/* Stat counters */
.soft_eig_feat { max-width: 1600px; margin: auto; display: flex; justify-content: space-between; flex-wrap: wrap; text-align: center; }
.stat-box { min-width: 250px; margin: 0; padding: 24px; text-align: left; }
.stat-box h3, .stat-box h3 span { font-size: 72px; font-weight: 500; margin-bottom: 8px; color: #2B2B2B; font-family: "Roboto", sans-serif; }
.stat-box p { font-size: 20px; font-weight: 400; color: #2B2B2B; line-height: 27px; margin-bottom: 0; }
/* ---------- Why choose Zedrox (navy block) ---------- */
.waaren_dev_sec { background-color: #12213E !important; }
.waaren_block { display: flex; gap: 20px 72px; }
.waaren_block .soft_eig_cont { padding: 178.5px 0 178.5px 160px; }
.waaren_block .soft_eig_cont h2,
.waaren_block .soft_eig_cont p,
.waaren_block .soft_eig_cont ul li strong { color: #fff; }
.waaren_block .soft_eig_cont h2 { margin-bottom: 12px; }
.waaren_block .soft_eig_cont ul { margin-top: 32px; }
.waaren_img img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
/* ---------- Process steps + Dani CTA (page-level tweaks only) ---------- */
.project-steps .container { max-width: 1649px; }
.project-steps .circle-wrapper > div { z-index: 2 !important; }
.dani_cta_secW .hiring-developer-inner { max-width: 1330px; margin: -25px auto 0; }
/* ---------- Benefits list (voordelen_sec) ---------- */
.voordelen_sec { background-color: #F4F4F4 !important; }
.key_point_sec { max-width: 1344px; margin: auto; padding: 100px 0; }
.key_point_sec h2 { margin-bottom: 12px; }
.key_point_sec .new_servop.service_points { max-width: 1263px; margin: 64px auto 0; }
.new_servop.service_points ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.new_servop.service_points ul li { margin: 0 0 54px; padding: 0 0 0 40px; width: 50%; position: relative; }
.new_servop.service_points ul li:before { content: ""; position: absolute; left: 0; top: 4px; width: 24px; height: 24px; background: url('data:image/svg+xml,'); background-repeat: no-repeat; background-size: 100%; }
.new_servop.service_points ul li h4 { font-size: 22px; margin-bottom: 8px; line-height: 140%; }
.new_servop.service_points ul li p { max-width: 90%; text-align: left; font-size: 16px; line-height: 27px; font-weight: 400; margin-bottom: 0; }
/* ==========================================================================
Responsive (same order as custom-style.css so the cascade matches NL)
========================================================================== */
@media (max-width: 1700px) {
.benefits_sec p { font-size: 18px; }
.benefits_sec { padding: 50px 0 70px; }
}
@media screen and (max-width: 991px) {
.benefits_sec { padding: 60px 0 60px; }
}
@media screen and (max-width: 767px) {
.benefits_sec p { font-size: 16px; }
.benefits_sec { padding: 40px 0 40px; }
}
@media screen and (max-width: 1700px) {
.soft_dev_sec { gap: 56px; }
}
@media screen and (max-width: 1400px) {
.soft_eig_cont ul li strong { font-size: 17px; line-height: 25px; }
.soft_eig_cont ul li:before { top: 2px; }
}
@media screen and (max-width: 1200px) {
.project-steps .circle-wrapper { justify-content: center; max-width: 800px; margin: 0 auto; }
}
@media (min-width: 1201px) and (max-width: 1700px) {
.cust_logo_block { gap: 10px 50px; }
.cust_logo { max-width: 200px; height: 40px; }
.unlock_sec { padding: 100px 0; }
.waaren_block .soft_eig_cont { padding: 120px 0 120px 120px; }
.soft_eig_cont { max-width: 750px; }
}
@media (max-width: 1367px) {
.unlock_sec { padding: 100px 0; }
.benefits_sec { padding: 50px 0; }
.benefits_sec p, .soft_dev_txt p { font-size: 16px; line-height: 24px; }
.soft_dev_txt { max-width: 550px; }
.soft_eig { gap: 32px; margin-bottom: 52px; }
.soft_eig_cont { max-width: 700px; }
.stat-box { min-width: 200px; padding: 18px; }
.stat-box h3, .stat-box h3 span { font-size: 44px; }
.soft_skil_sec { padding: 90px 0; }
.dani_cta_secW.hiring-developer .hiring-developer-inner { background-color: #13213e !important; }
.dani_cta_secW.hiring-developer .hiring-developer-inner p { font-size: 20px; color: #fff; }
.key_point_sec { padding: 70px 0; }
.waaren_block { gap: 20px 32px; }
.waaren_block .soft_eig_cont { padding: 70px 0 70px 50px; }
}
@media (min-width: 992px) and (max-width: 1200px) {
.cust_logo_block { gap: 10px 30px; }
.cust_logo { max-width: 160px; height: 32px; }
.soft_eig_cont { max-width: 600px; }
}
@media (max-width: 992px) {
.soft_dev_sec { flex-direction: column; gap: 36px; }
.cust_logo_block { gap: 10px 30px; }
.cust_logo { max-width: 140px; height: 30px; }
.unlock_sec { padding: 70px 0; }
.soft_dev_txt { max-width: 100%; }
.soft_dev_txt p { font-size: 16px; line-height: 24px; }
.soft_eig { gap: 30px; margin-bottom: 52px; flex-direction: column; }
.img_htfull img { margin-bottom: 0; }
.soft_eig_cont { max-width: 100%; }
.stat-box { min-width: 100px; padding: 12px; }
.stat-box h3, .stat-box h3 span { font-size: 36px; }
.soft_skil_sec { padding: 50px 0; }
.soft_dev_sec { gap: 42px; }
.new_servop.service_points ul li { margin: 0 0 28px; width: 100%; }
.waaren_block { flex-direction: column; }
}
@media (max-width: 768px) {
.cust_logo_block { justify-content: space-evenly; gap: 10px 15px; }
.cust_logo { max-width: 90px; height: 20px; }
.unlock_sec { padding: 40px 0; }
.stat-box { width: 50%; }
.stat-box h3, .stat-box h3 span { font-size: 32px; }
.soft_dev_txt .heading-top { margin-bottom: 0; }
.dani_cta_secW .right-content { padding-top: 20px; }
}
@media (max-width: 450px) {
.waaren_block .soft_eig_cont { padding: 50px 20px; }
.hero_sec p, .cust_logo_sec p, .unlock_sec p, .benefits_sec p, .soft_skil_sec p, .waaren_dev_sec p,
.project-steps p, .dani_cta_secW p, .voordelen_sec p { font-size: 13px !important; }
}