/* =========================================
GLOBAL STYLES
========================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
color: #333;
background: #fff;
}
/* Container width */
.container {
width: 1450px;
max-width: 90%;
margin: auto;
}
/* Buttons */
.btn {
padding: 12px 22px;
border-radius: 6px;
text-decoration: none;
display: inline-block;
font-weight: 500;
}
.primary {
background: #1f2a44;
color: #fff;
}
/* Section Title */
.section-title {
text-align: center;
margin-bottom: 40px;
font-size: 28px;
}
/* =========================================
HEADER
========================================= */
.header {
background: #fff;
border-bottom: 1px solid #eee;
}
.nav-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
display: -webkit-box;
display: -webkit-flex;
}
.nav-menu ul {
display: flex;
list-style: none;
gap: 18px;
flex-wrap: wrap;
}
.nav-menu a {
text-decoration: none;
color: #333;
font-weight: 500;
text-transform: uppercase;
color: #708090ee;
font-size: 15px;
}
.nav-actions .btn.login {
border: 1px solid #1f2a44;
margin-right: 10px;
color: #1f2a44;
font-weight: 700;
text-transform: uppercase;
}
.nav-actions .cart {
background: #0f2a44;
color: #fff;
}
.nav-actions {
display: flex;
align-items: center;
}
nav.nav-menu {
margin-right: 16px;
}
a.btn.cart span {
background: #339FD0;
display: inline-block;
padding: 4px 10px 1px;
border-radius: 10px;
}
a.btn.cart {
padding-left: 53px;
position: relative;
margin-left: 8px;
}
a.btn.cart span {
background: #339FD0;
display: inline-block;
padding: 7px 10px 4px;
border-radius: 10px;
position: absolute;
left: -5px;
top: 0px;
}
.menu-toggle {
display: none;
align-items: center;
gap: 6px;
font-weight: 600;
cursor: pointer;
}
/* =========================================
HERO SECTION
========================================= */
.hero {
padding: 0px 0 0;
background: #e7eaea;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 40px;
}
/* Allow grid items to shrink below their content's intrinsic size
(the slider image would otherwise force the track wider than the viewport). */
.hero-content,
.hero-image {
min-width: 0;
}
.hero-content {
padding-left: 16%;
}
.hero-content h1 {
font-size: clamp(22px, 3vw, 56px);
overflow-wrap: break-word;
margin-bottom: 10px;
font-family: "Asap", sans-serif;
text-transform: uppercase;
color: #1f2a44;
}
.hero-content span {
color: #339FD0;
}
.hero-content p {
color: #788796;
font-weight: 500;
margin-bottom: 30px;
}
/*.hero-image {
background: url(../images/right-arrow.png);
}*/
.slider {
position: relative;
width: 100%;
max-width: 100%;
margin: auto;
/*overflow: hidden;*/
border-radius: 20px;
}
.slides {
position: relative;
}
.slides:before {
position: absolute;
content: "";
width: 279px;
height: 364px;
bottom: 0;
background: url(../images/banner-new.png);
background-repeat: no-repeat;
left: -216px;
overflow: hidden !important;
}
.slides img {
width: 100%;
display: block;
}
.slide {
position: relative;
display: none;
}
.slide.active {
display: block;
}
.slide .slide-caption{
position: absolute;
top: 5%;
left: 50%;
transform: translateX(-50%);
width: 90%;
text-align: center;
color: #ffffff;
font-size: clamp(15px, 2.4vw, 28px);
font-weight: 700;
line-height: 1.3;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
z-index: 5;
}
.slide-caption--low {
top: 30%;
left: 360px;
}
.slide-caption--mid {
top: 50%;
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
color: #339FD0;
border: none;
padding: 12px 16px;
cursor: pointer;
font-size: 25px;
border-radius: 50%;
z-index: 99;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
/* =========================================
WE SERVE
========================================= */
/* SECTION BACKGROUND */
.serve-section {
padding: 100px 0;
text-align: center;
background: linear-gradient(180deg,
rgb(51 159 208) -40.74%,
#fff 67.78%);
}
/* TITLE */
.serve-title {
font-size: 40px;
font-weight: 700;
margin-bottom: 30px;
color: #24314a;
}
span.swiper-pagination-bullet.swiper-pagination-bullet-active {
color: #339FD0 !important;
background: #339FD0;
width: 22px;
height: 4px;
border-radius: 10px;
}
/* CARD */
.swiper-wrapper {
padding-bottom: 60px;
}
.swiper-slide.serve-card {
background: #fff;
border-radius: 40px;
/*width: 278px !important;*/
height: 325px;
margin-right: 15px !important;
box-shadow: 0px 4px 32px 0px #339FD026;
}
.swiper-slide.serve-card:hover {
background: #339FD0;
}
.swiper-slide.serve-card:hover .top-sec {
/*background: url(../images/serve-img-new.png);*/
/*width: 280px;*/
/*background-repeat: no-repeat;
background-size: contain;*/
border-radius: 40px 40px 70px 70px;
border: 1px solid #339FD0;
background: #1f2a44;
box-shadow: 0 4px 44px 0 rgba(28, 167, 166, 0.5);
}
.swiper-slide.serve-card a {
display: flex;
justify-content: center;
gap: 10px;
align-items: center;
}
.swiper-slide.serve-card:hover h3 {
color: #fff;
}
.swiper-slide.serve-card:hover p {
color: #fff;
}
.swiper-slide.serve-card:hover a {
color: #fff;
}
.swiper-slide.serve-card:hover p {
color: #fff;
}
.swiper-slide.serve-card:hover path {
fill: #fff;
}
.swiper-slide.serve-card:hover .top-sec img {
filter: brightness(0) invert(1);
}
/* ICON */
.serve-card img {
width: 50px;
margin-bottom: 20px;
}
/* TEXT */
.serve-card h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
color: #1f2a44;
padding: 0 50px;
}
.top-sec img {
padding-top: 20px;
}
.top-sec {
padding-bottom: 20px;
margin-bottom: 20px;
height: 180px;
}
.serve-card p {
font-size: 16px;
line-height: 20px;
color: #708090ee;
margin-bottom: 20px;
padding: 0 20px;
}
/* LINK */
.serve-card a {
color: #339FD0;
font-weight: 700;
text-decoration: none;
font-size: 17px;
}
/* ACTIVE CENTER CARD */
/*.swiper-slide-active{
background:linear-gradient(180deg,#253250,#1fa7a8);
color:#fff;
transform:scale(1.08);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}
.swiper-slide-active p{
color:#e6f7f8;
}
.swiper-slide-active a{
color:#fff;
}*/
/* SLIDER */
.serve-slider {
padding-bottom: 50px;
}
/* PAGINATION */
.swiper-pagination-bullet {
background: #b0b7bd;
}
.swiper-pagination-bullet-active {
background: #1fa7a8;
}
.swiper-pagination {
margin-top: 40px;
position: relative;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
background: #ccc;
opacity: 1;
}
.swiper-pagination-bullet-active {
background: #1fa7a8;
}
/* =========================================
ABOUT SECTION
========================================= */
.about {
padding: 0px 0 80px 0;
}
.about-content h2 {
font-size: 50px;
}
.about-content p {
font-size: 20px;
line-height: 30px;
color: #708090ee;
}
.about-content ul {
list-style: none;
}
.about-content ul li {
display: flex;
align-items: center;
gap: 10px;
padding: 6px;
color: #1f2a44;
font-size: 20px;
line-height: 30px;
background: url(../images/background-list-new.png);
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.about-images img {
border-radius: 12px;
}
.small-img {
margin-top: 20px;
width: 100%;
}
.about-content ul {
margin: 20px 0;
}
.about-content li {
margin-bottom: 10px;
}
.mobile-show {
display: none;
}
/* =========================================
SERVICES
========================================= */
section.services-section, .why-approach-section,.staff-section,.page-banner-image,.reporting-why-section,.reporting-realworld-section, .reporting-confidence-section,.core-svc-section,.svc-why-section,
.dist-challenge-section,.dist-strategic-section,.resources-block.how-to-block {
position: relative;
}
section.services-section:before,.staff-section:before,.page-banner-image:before,.reporting-realworld-section:before,.reporting-confidence-section:before,.core-svc-section:before,.dist-challenge-section:before {
position: absolute;
content: "";
width: 340px;
height: 390px;
background: url(../images/banner-new.png);
right: -86px;
bottom: 0;
background-repeat: no-repeat!important;
}
.staff-section:before {width: 127px!important;
height: 315px!important;bottom: 0!important;
}
.page-banner-image:before ,.reporting-why-section:before,.svc-why-section:before,.dist-strategic-section:before {background: url(../images/banner-new.png); width: 100%; left: -190px !important;
bottom: 0;
height: 380px;}
.reporting-confidence-section:before{height: 500px;right: -40px}
.why-approach-section:before,.svc-why-section:before,.dist-strategic-section:before,.resources-block.how-to-block:before {
position: absolute;
content: "";
width: 214px;
height: 400px;
background: url(../images/banner-new.png);
left: 10px !important;
bottom: 22px;
transform: scale(-1.5);
background-repeat: no-repeat;
}
.services-section .container {
position: relative;
overflow: visible;
}
section.services-section h2 {
font-size: 50px;
color: #1f2a44;
font-weight: 700;
}
/* Section */
.services-section, .why-approach-section {
padding: 80px 0 130px 0;
text-align: center;
background: url("../images/service-background.png");
background-repeat: no-repeat;
background-size: cover;
}
/* Title */
.section-title {
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
}
.section-desc {
max-width: 641px;
margin: auto;
margin-bottom: 30px;
color: #708090ee;
font-size: 20px;
line-height: 30px;
}
/* Service Card */
.service-card {
background: #fff;
border: 1px solid #dce7ef;
border-radius: 10px;
padding: 30px;
text-align: left;
transition: 0.3s;
}
.service-card img {
margin-bottom: 10px;
width: 100px;
height: 100px;
}
.service-card h3 {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px;
}
.service-card p {
font-size: 18px;
color: #708090ee;
margin-bottom: 20px;
line-height: 26px;
}
.service-card a {
color: #339FD0;
font-weight: 600;
text-decoration: none;
width: 100%;
text-align: right;
float: right;
font-size: 20px;
}
/* Hover */
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.swiper-slide.service-card {
height: 320px;
/*width: 340px !important;*/
margin: 0 3px 0 16px !important;
border-style: solid;
border-color: #339FD0;
border-width: 1px, 1px, 1px, 1px;
border-radius: 15px;
}
.services-slider {
position: relative;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
content: "next";
font-size: 26px !important;
}
.services-section .swiper-button-next {
right: -16px !important;
color: #1f2a444d;
width: 36px;
height: 26px;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: "prev";
font-size: 26px !important;
}
.services-section .swiper-button-prev {
right: -16px !important;
color: #1f2a444d;
width: 36px;
height: 26px;
}
.services-section .swiper-button-prev,
.services-section .swiper-button-next {
width: 50px;
height: 50px;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
/* move arrows slightly outside */
.services-section .swiper-button-prev {
left: -19px;
}
.services-section .swiper-button-next {
right: -25px;
}
/* =========================================
OUR SERVICES — Center 3 cards
(JS skips Swiper init when ≤ 3 cards;
this CSS turns the row into a centered flex grid)
========================================= */
.services-section .services-slider {
max-width: 1200px;
margin: 0 auto;
}
.services-section .swiper-wrapper {
justify-content: center;
}
.services-section .swiper-slide.service-card {
max-width: 360px;
width: 100% !important;
margin: 0 12px !important;
flex-shrink: 0;
}
/* Hide arrows when there's nothing to scroll */
.services-section.no-slider .swiper-button-next,
.services-section.no-slider .swiper-button-prev {
display: none !important;
}
/* ==================================================================
SERVICES PAGE — only the styles unique to this page.
Hero, .reporting-row, .centered-title, .btn.primary, .reporting-arc
already come from your global style.css — we just compose them.
================================================================== */
/* =====================================================
1. WHAT WE DO (uses .reporting-row layout)
===================================================== */
.svc-whatwedo {
padding: 80px 0;
}
.svc-wwd-composite {
position: relative;
max-width: 600px;
}
.svc-wwd-composite .composite-main {
border-radius: 14px;
overflow: hidden;
position: relative;
z-index: 2;
}
.svc-wwd-composite .composite-main img {
width: 100%;
height: auto;
display: block;
border-radius: 14px;
}
.svc-wwd-overlay {
position: absolute;
bottom: -40px;
right: -20px;
width: 220px;
z-index: 3;
border: 8px solid #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 10px 28px rgba(31, 42, 68, 0.14);
}
.svc-wwd-overlay img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
}
.svc-whatwedo .composite-arc {
width: 200px;
height: 200px;
border: 18px solid #339FD0;
bottom: -60px;
left: -60px;
right: auto;
}
/* =====================================================
2. OUR CORE SERVICES
===================================================== */
.core-svc-section {
padding: 160px 0 160px 0;
background: #f6f9fb;
position: relative;
overflow: hidden;
}
.core-svc-section .container {
position: relative;
z-index: 2;
}
.core-svc-section .centered-title {
text-align: center;
margin: 0 0 55px 0;
}
.svc-card {
display: flex;
align-items: center;
gap: 70px;
/* padding: 28px; */
margin-bottom: 36px;
}
.svc-card:last-child {
margin-bottom: 0;
}
span.reporting-arc.reporting-arc-right.service-arc.overlap-section-service-page {
right: -260px;
left: initial;
}
.svc-card.svc-card-reversed {
flex-direction: row-reverse;
padding-top: 40px;
padding-bottom: 40px;
}
.svc-card-image {
flex: 0 0 42%;
border-radius: 12px;
overflow: hidden;
position: absolute;
z-index: 990;
}
.svc-card-image img {
display: block;
/* width: 100%; */
/* height: 100%; */
object-fit: cover;
border-radius: 12px;
max-width: 777px;
}
.svc-card-content {
flex: 1;
position: relative;
display: flex;
flex-direction: column;
padding: 50px 6px;
border: 1px solid #000000;
border-radius: 12px;
padding-left: 348px;
width: 70%;
flex: 0 0 70%;
margin-left: auto;
}
.verification-card-section {
flex: 1;
position: relative;
display: flex;
flex-direction: column;
padding: 50px 6px;
border: 1px solid #000000;
border-radius: 12px;
padding-right: 270px;
width: 70%;
flex: 0 0 70%;
margin-right: auto;
padding-left: 50px;
margin: 0;
margin-right: auto;
}
.svc-card-content h3 {
font-family: "Asap", sans-serif;
font-size: 35px;
font-weight: 700;
color: #1f2a44;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 10px 0;
line-height: 1.15;
}
.svc-card-content h4 {
font-family: "Asap", sans-serif;
font-size: 20px;
font-weight: 700;
color: #708090ee;
margin: 0 0 16px 0;
line-height: 1.4;
}
.svc-card-content>p {
font-family: "Inter", sans-serif;
font-size: 20px;
color: #708090ee;
line-height: 1.6;
margin: 0 0 18px 0;
width: 75%;
}
.svc-card-label {
font-family: "Asap", sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
color: #1f2a44 !important;
letter-spacing: 0.5px;
margin: 0 0 14px 0 !important;
text-transform: uppercase;
}
/* Checkbox list — uses your global ic_baseline-check-box.png like .check-list */
.svc-check-list {
list-style: none;
padding: 0;
margin: 0 0 18px 0;
}
.svc-check-list li {
position: relative;
padding: 6px 7px 6px 40px;
font-family: "Inter", sans-serif;
font-size: 20px;
color: #000000;
line-height: 1.5;
background-image: url(../images/blue-check-box.png);
background-repeat: no-repeat;
background-position: 0 9px;
background-size: 25px 25px;
font-weight: 600;
}
.svc-card-closing {
font-family: "Inter", sans-serif !important;
font-size: 20px !important;
color: #708090ee !important;
line-height: 1.6 !important;
margin: 4px 0 22px 0 !important;
}
.svc-card-content .btn.primary {
align-self: flex-start;
padding: 12px 32px;
font-size: 20px;
font-weight: 600;
border-radius: 6px;
background: #1f2a44;
color: #fff;
text-decoration: none;
transition: background 0.25s ease, transform 0.2s ease;
}
.svc-card-content .btn.primary:hover {
background: #339FD0;
transform: translateY(-2px);
}
/* =====================================================
3. HOW IT ALL WORKS TOGETHER
===================================================== */
.hiw-section {
padding: 118px 0 126px;
background: #fff;
text-align: center;
}
.hiw-section .centered-title {
text-align: center;
margin: 0 0 14px 0;
}
.hiw-sub {
font-family: "Inter", sans-serif;
font-size: 20px;
color: #708090ee;
line-height: 1.6;
margin: 0 0 18px 0;
}
.hiw-prompt {
font-family: "Asap", sans-serif;
font-size: 21px;
font-weight: 700;
color: #708090ee;
margin: 35px 0 40px 0;
}
.hiw-grid {
display: flex;
/* Forces columns to be exactly equal and allows them to shrink to 0 */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 68px;
justify-content: start;
/* Removes extra horizontal distribution */
align-content: start;
/* Removes extra vertical distribution */
margin-bottom: 36px;
max-width: 1036px;
margin: auto;
}
.hiw-step {
background: #fff;
border: 1px solid rgba(28, 167, 166, 0.45);
border-radius: 12px;
padding: 17px 26px 31px 26px;
text-align: left;
box-shadow: 0 4px 16px rgba(31, 42, 68, 0.04);
transition: transform 0.2s ease, box-shadow 0.25s ease;
position: relative;
width: 33.33%;
}
.hiw-step:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(28, 167, 166, 0.15);
}
.hiw-step-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.hiw-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
background: #339FD0;
color: #fff;
font-family: "Asap", sans-serif;
font-size: 30px;
font-weight: 700;
border-radius: 50%;
line-height: 1;
}
span.hiw-num {
position: absolute;
top: -12px;
left: -25px;
}
.hiw-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-left: auto;
}
.hiw-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.hiw-step p {
font-family: "Inter", sans-serif;
font-size: 19px;
color: #708090ee;
margin: 0;
line-height: 1.5;
}
.hiw-step p strong {
font-weight: 700;
color: #708090ee;
}
.hiw-closing {
font-family: "Inter", sans-serif;
font-size: 20px;
color: #708090ee;
line-height: 1.6;
margin: 31px;
text-align: center;
}
/* =====================================================
4. WHY WINDOR (services-page specific layout —
different from .reporting-why-section on reporting page)
===================================================== */
.svc-why-section {
padding: 90px 0;
background: #f9f9f9;
position: relative;
overflow: hidden;
}
.svc-why-row {
display: flex;
align-items: center;
gap: 70px;
padding-bottom: 150px;
}
.svc-why-left {
flex: 0 0 50%;
max-width: 45%;
}
.svc-why-title {
font-family: "Asap", sans-serif;
font-size: 42px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
margin: 0 0 28px 0;
text-transform: uppercase;
line-height: 1.15;
}
.svc-why-list {
list-style: none;
padding: 0;
margin: 0 0 41px 0;
display: flex;
flex-direction: column;
gap: 33px;
}
.svc-why-item {
display: flex;
align-items: center;
gap: 18px;
background: #fff;
border: 1px solid rgb(14 14 14 / 40%);
border-radius: 10px;
transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.svc-why-item:hover {
transform: translateX(4px);
box-shadow: 0 8px 22px rgba(28, 167, 166, 0.14);
}
.svc-why-icon {
flex-shrink: 0;
width: 75px;
height: 80px;
background: #313030;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.svc-why-icon img {
width: 45px;
height: 45px;
object-fit: contain;
}
.svc-why-item p {
font-family: "Inter", sans-serif;
font-size: 25px;
color: #708090ee;
margin: 0;
line-height: 1.2;
padding: 10px 38px;
padding-left: 10px;
}
.svc-why-item p strong {
font-weight: 700;
color: #535f7c;
}
.reporting-arc-right.service-arc {
bottom: -306px;
right: inherit;
left: -270px;
width: 510px;
height: 556px;
border: 66px solid #339FD0;
}
.svc-why-btn {
display: inline-block;
padding: 12px 32px;
font-size: 20px;
font-weight: 600;
border-radius: 6px;
background: #1f2a44;
color: #fff;
text-decoration: none;
transition: background 0.25s ease, transform 0.2s ease;
}
.svc-why-btn:hover {
background: #339FD0;
transform: translateY(-2px);
}
.svc-why-image {
flex: 1;
position: relative;
border-radius: 14px;
}
.svc-why-image>img {
display: block;
width: 100%;
height: auto;
border-radius: 14px;
position: relative;
z-index: 2;
}
.svc-why-arc {
width: 200px;
height: 200px;
border: 22px solid #339FD0;
bottom: -60px;
right: -60px;
left: auto;
opacity: 0.9;
}
/* =====================================================
5. FINAL CTA (teal panel)
===================================================== */
.svc-cta-section {
padding: 50px 0 100px 0;
background: #fff;
}
.svc-cta-card {
background: #339FD0;
border-radius: 18px;
padding: 50px 55px;
display: flex;
align-items: center;
gap: 50px;
box-shadow: 0 16px 50px rgba(28, 167, 166, 0.22);
border: 4px solid white;
}
.svc-cta-text {
flex: 1;
color: #fff;
}
.svc-cta-text h2 {
font-family: "Asap", sans-serif;
font-size: 50px;
font-weight: 700;
color: #fff;
margin: 0 0 16px 0;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
}
.container.bring-section {
margin-top: -265px;
position: relative;
z-index: 999;
padding-left: 60px;
}
.svc-cta-text p {
font-family: "Inter", sans-serif;
font-size: 20px;
color: rgba(255, 255, 255, 0.92);
line-height: 1.7;
margin: 0 0 24px 0;
padding-right: 60px;
}
.svc-cta-btn {
display: inline-block;
background: #1f2a44 !important;
color: #fff !important;
padding: 13px 32px;
font-size: 20px;
font-weight: 600;
border-radius: 6px;
text-decoration: none;
transition: background 0.25s ease, transform 0.2s ease;
}
.svc-cta-btn:hover {
background: #fff !important;
color: #339FD0 !important;
transform: translateY(-2px);
}
.svc-cta-image {
flex: 0 0 40%;
position: relative;
min-height: 260px;
}
.svc-cta-img-back {
width: 79%;
margin-left: auto;
border-radius: 12px;
overflow: hidden;
position: relative;
z-index: 1;
}
.svc-cta-img-back img {
display: block;
width: 100%;
height: 255px;
object-fit: cover;
border-radius: 12px;
}
.svc-cta-img-front {
position: absolute;
bottom: -10px;
left: 0;
width: 55%;
border: 5px solid #339FD0;
border-radius: 12px;
overflow: hidden;
z-index: 2;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.svc-cta-img-front img {
display: block;
width: 100%;
height: 140px;
object-fit: cover;
border-radius: 6px;
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 1199px) {
.svc-card-content h3 {
font-size: 24px;
}
.svc-why-title {
font-size: 34px;
}
.svc-cta-text h2 {
font-size: 30px;
}
}
@media (max-width: 991px) {
.svc-whatwedo {
padding: 60px 0;
}
.svc-wwd-composite {
max-width: 560px;
margin: 0 auto 40px auto;
}
.svc-card,
.svc-card.svc-card-reversed {
flex-direction: column;
gap: 22px;
}
.svc-card-image {
flex: 1 1 auto;
max-height: 300px;
}
.svc-card-content h3 {
font-size: 22px;
}
.hiw-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.hiw-section {
padding: 70px 0;
}
.svc-why-row {
flex-direction: column;
gap: 40px;
}
.svc-why-left,
.svc-why-image {
flex: 1 1 auto;
max-width: 100%;
width: 100%;
}
.svc-why-title {
font-size: 30px;
}
.svc-cta-card {
flex-direction: column;
padding: 36px 30px;
gap: 36px;
}
.svc-cta-image {
flex: 1 1 auto;
width: 100%;
min-height: auto;
}
.svc-cta-img-back {
width: 100%;
margin: 0;
}
.svc-cta-img-back img {
height: 220px;
}
.svc-cta-img-front {
position: relative;
width: 65%;
bottom: 0;
margin-top: -40px;
}
.svc-cta-text h2 {
font-size: 26px;
}
}
@media (max-width: 767px) {
.core-svc-section {
padding: 60px 0 70px 0;
}
.core-svc-section .centered-title {
margin-bottom: 40px;
}
.svc-card {
padding: 18px;
}
.svc-card-content h3 {
font-size: 20px;
}
.svc-card-content h4 {
font-size: 16px;
}
.hiw-num {
width: 42px;
height: 42px;
font-size: 14px;
}
.hiw-icon {
width: 38px;
height: 38px;
}
.svc-wwd-overlay {
width: 160px;
bottom: -30px;
right: -10px;
}
.svc-why-title {
font-size: 26px;
}
.svc-cta-card {
padding: 28px 22px;
}
.svc-cta-text h2 {
font-size: 22px;
}
}
@media (max-width: 575px) {
.svc-card-content h3 {
font-size: 18px;
}
.svc-check-list li,
.svc-card-content>p,
.svc-why-item p,
.hiw-step p {
font-size: 14.5px;
}
.svc-wwd-overlay {
width: 130px;
}
.svc-why-icon {
width: 40px;
height: 40px;
}
.svc-why-icon img {
width: 22px;
height: 22px;
}
.svc-cta-text h2 {
font-size: 20px;
}
.svc-cta-img-back img {
height: 180px;
}
.svc-cta-img-front img {
height: 110px;
}
}
/* =========================================
PROPERTIES
========================================= */
section.properties-section {
position: relative;
padding: 80px 0 120px 0;
background: #fff;
overflow: hidden;
}
section.properties-section:before {
position: absolute;
content: "";
transform: scaleX(-1);
width: 311px;
height: 382px;
background: url(../images/banner-new.png);
bottom: -17px;
left: -78px;
background-repeat: no-repeat;
overflow: hidden;
}
.section-title {
text-align: center;
font-size: 42px;
font-weight: 700;
margin-bottom: 50px;
color: #1f2a44;
margin-bottom: 70px;
}
.property-row {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 70px 40px 30px 40px;
border-bottom: 1px solid #dcdcdc;
cursor: pointer;
overflow: visible;
}
.property-row:hover .property-arrow {
background: #339FD0;
}
.property-row:hover {
box-shadow: 0px 14px 54px 0px #259fa026;
border-bottom: 1px solid #339FD0;
}
.property-title {
font-size: 24px;
font-weight: 700;
color: #1f2a44;
}
/* Arrow */
.property-arrow {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #fff;
background: #1f2a44;
}
.arrow-light {
background: #2aa7a0;
}
.arrow-dark {
background: #1f2a44;
}
/* Image Card (Hidden by default) */
.property-image {
position: absolute;
left: 50%;
transform: translateX(-50%) scale(0);
top: -40px;
transition: 0.4s ease;
}
/*.property-image img{
width:260px;
border-radius:12px;
border:3px solid #2aa7a0;
box-shadow:0 8px 25px rgba(0,0,0,0.15);
}*/
/* Hover Effect */
.property-row:hover .property-image {
transform: translateX(0%) scale(1);
}
/* =========================================
FOOTER
========================================= */
.footer {
background: #243452;
color: #fff;
padding: 65px 80px 0 80px;
}
.footer a {
color: #e5e8e8;
text-decoration: none;
display: block;
margin: 12px 0;
font-size: 15px;
}
.footer a:hover {
color: #e5e8e8;
}
.footer-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 50px;
}
p.address {
padding-bottom: 15px;
padding-top: 10px;
}
p.footer-description {
color: #e5e8e8;
font-size: 16px;
font-weight: 400;
line-height: 26px;
}
.footer-menu a {
display: inline-block;
margin-right: 25px;
font-size: 15px;
}
.footer-email {
font-size: 15px;
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
text-decoration: underline;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin: 50px 0 80px 0;
}
.footer-col h4 {
margin-bottom: 10px;
color: #ffffffee;
}
.footer-col p {
font-size: 15px;
color: #e5e8e8;
}
.social a {
display: inline-block;
color: #fff;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
border-radius: 50%;
margin-right: 10px;
}
.footer-bottom {
display: flex;
justify-content: space-between;
font-size: 15px;
color: #e5e8e8;
padding-top: 30px;
}
.footer-links a {
display: inline-block;
margin-left: 15px;
}
hr {
border: 0;
border-top: 1px solid #ffffff80;
}
/*- contractor page css ------*/
/* =========================================
CONTRACTOR PAGE ONLY (NO CONFLICT)
========================================= */
.contractor-page .hero {
padding: 70px 0;
text-align: center;
background: linear-gradient(180deg,
rgb(51 159 208 / 74%) -40.74%,
#fff 67.78%);
}
.contractor-page .hero .container {
max-width: 900px;
}
.contractor-page .hero h1 {
font-family: "Asap", sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1.2;
color: #1f2a44;
}
.contractor-page .hero .subheader {
font-size: 18px;
color: #708090ee;
margin-top: 20px;
line-height: 1.5;
}
/* HEADINGS */
.contractor-page h2 {
font-family: "Asap", sans-serif;
font-size: 36px;
font-weight: 700;
margin-bottom: 13px;
color: #1f2a44;
}
.contractor-page section.about {
padding: 0px 0 70px;
}
.contractor-page section.features h2 {
margin-bottom: 0;
}
/* LIST STYLE */
.contractor-page .content ul {
margin-top: 20px;
}
.contractor-page .content ul li {
position: relative;
padding-left: 25px;
margin-bottom: 12px;
color: #1f2a44;
font-size: 20px;
line-height: 30px;
list-style: none;
}
.contractor-page .content ul li::before {
content: "";
width: 10px;
height: 10px;
background: #339FD0;
border-radius: 50%;
position: absolute;
left: 0;
top: 7px;
}
/* FEATURES */
.contractor-page .features {
background: #f9fbfc;
font-size: 18px;
color: #708090ee;
margin-top: 0px;
line-height: 1.5;
margin-bottom: 00px;
}
.contractor-page .feature-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
margin-top: 40px;
}
.contractor-page .feature-box {
background: #fff;
padding: 30px;
transition: 0.3s;
border-width: 1px;
border-style: solid;
border-color: #339FD0;
border-radius: 15px;
}
.contractor-page .feature-box:hover {
transform: translateY(-5px);
}
.contractor-page .feature-box .icon {
font-size: 28px;
margin-bottom: 15px;
}
/* STORY */
.contractor-page .story .container {
max-width: 900px;
}
/* FAQ */
section.faq,
section.features {
padding: 60px 0;
}
.contractor-page .faq {
background: #f9fbfc;
font-size: 20px;
line-height: 30px;
color: #708090ee;
}
.contractor-page .faq-item {
background: #fff;
padding: 25px;
border-radius: 10px;
margin-bottom: 15px;
border: 1px solid #eee;
}
.contractor-page .faq h2 {
margin-bottom: 40px;
}
.contractor-page .faq-item h3 {
font-size: 20px;
font-weight: 600;
}
section.cta h2,
section.cta p {
margin-bottom: 20px;
}
/* CTA */
.contractor-page .cta {
text-align: center;
padding: 50px 0 70px;
font-size: 20px;
line-height: 30px;
color: #708090ee;
}
.contractor-page .cta .btn.primary {
background: #339FD0;
color: #fff;
}
.contractor-page .cta .btn.secondary {
border: 1px solid #339FD0;
color: #339FD0;
}
.contractor-page .cta .btn.secondary:hover {
background: #339FD0;
color: #fff;
}
.windor-help p {
font-size: 20px;
line-height: 30px;
color: #708090ee;
margin-bottom: 10px;
}
.contractor-page .faq-item {
border-bottom: 1px solid #eee;
padding: 15px 15px;
cursor: pointer;
}
.contractor-page .faq-question {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 18px;
font-weight: 600;
color: #1f2a44;
}
.contractor-page .faq-icon {
font-size: 22px;
transition: 0.3s;
}
.contractor-page .faq-answer {
max-height: 0;
overflow: hidden;
transition: 0.3s ease;
color: #708090ee;
}
/* ACTIVE STATE */
.contractor-page .faq-item.active .faq-answer {
max-height: 200px;
margin-top: 10px;
}
.contractor-page .faq-item.active .faq-icon {
transform: rotate(45deg);
/* turns + into × */
}
/* RESPONSIVE */
@media (max-width: 992px) {
.contractor-page .feature-grid {
grid-template-columns: repeat(2, 1fr);
}
.contractor-page .hero h1 {
font-size: 36px;
}
}
@media (max-width: 600px) {
.contractor-page .feature-grid {
grid-template-columns: 1fr;
}
}
/* Parent menu item needs relative positioning */
.nav-menu ul li.has-submenu {
position: relative;
}
/* Small arrow indicator */
.nav-menu .arrow {
font-size: 10px;
margin-left: 4px;
transition: transform 0.3s ease;
}
/* Submenu - hidden by default */
.nav-menu .submenu {
position: absolute;
top: 100%;
left: 0;
background: #fff;
min-width: 200px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 6px;
padding: 8px 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 1000;
list-style: none;
margin: 0;
}
/* Show submenu on hover */
.nav-menu .has-submenu:hover .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Rotate arrow on hover */
.nav-menu .has-submenu:hover .arrow {
transform: rotate(180deg);
}
/* Submenu items */
.nav-menu .submenu li {
display: block;
width: 100%;
}
.nav-menu .submenu li a {
display: block;
padding: 10px 18px;
color: #333;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s ease;
}
.nav-menu .submenu li a:hover {
background: #f5f5f5;
color: #000;
}
/* ==============================================================
WE SERVE / SERVICES DROPDOWN SUBMENU
============================================================== */
.nav-menu ul li.has-submenu {
position: relative;
}
.nav-menu .arrow {
font-size: 14px;
margin-left: 4px;
display: inline-block;
transition: transform 0.3s ease;
}
.nav-menu .submenu {
display: block;
gap: 0;
flex-wrap: nowrap;
position: absolute;
top: 100%;
left: 0;
margin: 8px 0 0 0;
background: #fff;
min-width: 220px;
box-shadow: 0 8px 24px rgba(31, 42, 68, 0.12);
border-radius: 8px;
border-top: 3px solid #339FD0;
padding: 4px 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.25s ease;
z-index: 1000;
list-style: none;
}
.nav-menu .has-submenu::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 12px;
}
.nav-menu .has-submenu:hover .submenu,
.nav-menu .has-submenu:focus-within .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-menu .has-submenu:hover .arrow,
.nav-menu .has-submenu:focus-within .arrow {
transform: rotate(180deg);
}
.nav-menu .submenu li {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.nav-menu .submenu li a {
display: block;
padding: 8px 20px;
color: #708090ee;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition:
background 0.2s ease,
color 0.2s ease;
}
.nav-menu .submenu li a:hover {
background: #f5fafa;
color: #339FD0;
}
/* Active nav underline */
.nav-menu ul>li.active>a {
color: #339FD0;
position: relative;
padding-bottom: 6px;
}
.nav-menu ul>li.active>a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
background: #339FD0;
border-radius: 2px;
}
/* ==============================================================
PAGE BANNER + BREADCRUMB (About, Insurance Companies, etc.)
============================================================== */
.page-banner {
background: #edeff1;
overflow: hidden;
position: relative;
}
.page-banner .page-banner-grid {
display: grid;
grid-template-columns: 1fr 0.2fr;
gap: 80px;
align-items: center;
padding: 25px 0;
}
.page-banner-content {
padding: 35px 0 20px 0;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 5px;
font-family: "Inter", sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 28px;
}
a {
text-decoration: none;
}
img.client-image {
border-radius: 4px;
height: 250px;
padding-bottom: 20px;
}
.breadcrumb a {
color: #708090ee;
text-decoration: none;
transition: color 0.2s ease;
}
.breadcrumb a:hover {
color: #339FD0;
}
.breadcrumb .sep {
color: #339FD0;
font-size: 20px;
}
.breadcrumb .current {
color: #339FD0;
}
.page-banner-content h1 {
font-family: "Asap", sans-serif;
font-size: 55px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 1px;
margin: 0 0 14px 0;
line-height: 1.1;
}
.page-banner-content p {
color: #708090ee;
font-size: 18px;
line-height: 1.6;
margin: 0;
font-family: "Inter", sans-serif;
}
.page-banner-image {
position: relative; width: 700px;
}
.page-banner-image img {
position: relative;
z-index: 2;
display: block;
height: auto;
width: 100%;
border-radius: 12px;
}
/* ==============================================================
ABOUT PAGE: single composite image (portrait + roof + teal arc
are baked into About-image.png)
============================================================== */
.about-composite img {
display: block;
width: 100%;
height: auto;
}
/* ==============================================================
PILL LIST (About Us feature rows: icon + text with teal gradient)
============================================================== */
.pill-list {
list-style: none;
padding: 0;
margin: 24px 0 0 0;
}
.pill-list li {
display: flex;
align-items: center;
gap: 20px;
padding: 12px 18px;
margin-bottom: 12px;
background: linear-gradient( 69deg, rgba(255, 255, 255, 0) 0%, rgba(51, 159, 208, 0.25) 55%, rgba(255, 255, 255, 0) 100%);
border-radius: 4px;
font-family: "Inter", sans-serif;
font-size: 20px;
font-weight: 500;
color: #1f2a44;
line-height: 1.4;
}
.pill-list .pill-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex-shrink: 0;
}
.pill-list .pill-icon img {
width: 22px;
height: 22px;
object-fit: contain;
display: block;
}
.check-list {
list-style: none;
padding: 0;
margin: 20px 0 0 0;
}
.check-list li {
position: relative;
padding: 8px 0 8px 32px;
font-family: "Inter", sans-serif;
font-size: 18px;
font-weight: 600;
color: #1F2A44;
line-height: 1.5;
background-image: url("../images/ic_baseline-check-box-new.png");
background-repeat: no-repeat;
background-position: 0 12px;
background-size: 20px 20px;
}
/* ==============================================================
EXPERIENCE SECTION (OUR EXPERIENCE card)
============================================================== */
.experience-section {
padding: 70px 0;
background: #f2f4f5;
position: relative;
}
.experience-section .about-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 50px;
align-items: center;
}
.experience-section .about-images {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.experience-section .small-img {
display: block;
}
.experience-section .deco-arc {
position: absolute;
right: -40px;
bottom: -40px;
width: 120px;
height: auto;
z-index: -1;
pointer-events: none;
}
/* ==============================================================
WHY US + OUR APPROACH (bordered card with two columns)
============================================================== */
/* ==============================================================
WHY US + OUR APPROACH
============================================================== */
.why-approach-section {
padding: 30px 0 70px 0;
background: #fff;
position: relative;
overflow: hidden;
}
.why-deco-arc {
position: absolute;
left: -20px;
bottom: -20px;
width: 120px;
height: auto;
z-index: 0;
pointer-events: none;
transform: scaleX(-1);
}
.why-approach-wrapper {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 90px;
align-items: center;
}
/* -------- Left: Ecosystem logo (no border, no card) -------- */
.why-card {
display: flex;
align-items: center;
justify-content: center;
}
.why-card .why-image {
width: 100%;
}
.why-card .why-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
/* no border, no background, no frame */
}
/* -------- Right: Approach content -------- */
.approach-card {
background: #fff;
padding: 0;
}
.approach-card h3 {
font-family: "Asap", sans-serif;
font-size: 44px;
font-weight: 700;
margin: 0 0 18px 0;
color: #1f2a44;
letter-spacing: 1px;
line-height: 1.1;
}
.approach-card>p {
color: #5a6675;
font-size: 17px;
line-height: 1.7;
margin: 0 0 14px 0;
font-family: "Inter", sans-serif;
}
.approach-sub {
color: #339FD0;
font-size: 24px;
font-weight: 700;
margin: 28px 0 18px 0;
font-family: "Inter", sans-serif;
}
/* -------- Steps -------- */
.approach-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 20px;
}
.approach-step {
text-align: left;
}
.approach-num {
width: 50px;
height: 50px;
border-radius: 50%;
background: #339FD0;
color: #fff;
font-family: "Asap", sans-serif;
font-weight: 700;
font-size: 16px;
margin: 0 0 12px 0;
display: flex;
align-items: center;
justify-content: center;
/* dark border removed */
}
.step-title {
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 700;
color: #1f2a44;
margin: 0 0 8px 0;
line-height: 1.3;
}
.approach-step p {
font-family: "Inter", sans-serif;
font-size: 14px;
color: #5a6675;
line-height: 1.6;
margin: 0;
font-weight: 400;
}
/* -------- Confidence Through Accountability (closing block) -------- */
.confidence-block {
margin-top: 36px;
padding: 24px 28px;
background: #f4fbfb;
border-left: 4px solid #339FD0;
border-radius: 4px;
}
.confidence-title {
font-family: "Asap", sans-serif;
font-size: 22px;
font-weight: 700;
color: #339FD0;
margin: 0 0 10px 0;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.confidence-block p {
font-family: "Inter", sans-serif;
font-size: 16px;
color: #1f2a44;
line-height: 1.65;
margin: 0;
font-weight: 500;
}
/* ==============================================================
RESPONSIVE
============================================================== */
/* Tablet: ≤ 992px — stack the two columns */
@media (max-width: 992px) {
.why-approach-wrapper {
grid-template-columns: 1fr;
gap: 30px;
}
.why-card .why-image img {
max-width: 480px;
margin: 0 auto;
}
.approach-card h3 {
font-size: 38px;
}
}
/* Small tablet / large phone: ≤ 768px */
@media (max-width: 768px) {
.why-approach-section {
padding: 20px 0 50px 0;
}
.approach-card h3 {
font-size: 32px;
}
.approach-card>p {
font-size: 16px;
}
.approach-sub {
font-size: 20px;
}
.confidence-title {
font-size: 19px;
}
.confidence-block p {
font-size: 15px;
}
.why-deco-arc {
width: 80px;
left: -10px;
bottom: -10px;
}
}
/* Mobile: ≤ 576px — stack the 3 steps */
@media (max-width: 576px) {
.approach-steps {
grid-template-columns: 1fr;
gap: 22px;
}
.approach-step {
display: grid;
grid-template-columns: 50px 1fr;
gap: 14px;
align-items: start;
}
.approach-step .approach-num {
margin: 0;
}
.approach-step .step-title,
.approach-step p {
grid-column: 2;
}
.approach-step .step-title {
margin-top: 4px;
}
.approach-card h3 {
font-size: 28px;
}
.confidence-block {
padding: 20px;
}
}
/* ==============================================================
STAFF & SPN NETWORK
============================================================== */
.staff-section {
padding: 70px 0;
background: #f2f4f5;
}
.staff-title {
font-family: "Asap", sans-serif;
text-align: center;
font-size: 50px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 1px;
margin: 0 0 40px 0;
}
.staff-list {
display: flex;
flex-direction: column;
gap: 18px;
margin: 0 auto;
}
.staff-card {
display: grid;
grid-template-columns: 120px 1fr;
gap: 20px;
align-items: flex-start;
background: #fff;
padding: 22px 26px;
border-radius: 10px;
border: 1px solid rgba(51, 159, 208, 0.35);
box-shadow: 0 4px 16px rgba(31, 42, 68, 0.04);
}
.staff-logo {
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
}
.staff-logo img {
max-width: 100%;
max-height: 80px;
object-fit: contain;
}
.staff-body h4 {
font-family: "Asap", sans-serif;
font-size: 20px;
font-weight: 700;
color: #339FD0;
margin: 0 0 10px 0;
letter-spacing: 0.3px;
}
.staff-body p {
font-family: "Inter", sans-serif;
font-size: 18px;
color: #708090ee;
line-height: 1.7;
margin: 0 0 10px 0;
}
/* ==============================================================
ABOUT PAGE: section spacing overrides
The about page uses .about-page wrapper to scope styling.
Keep h2/p sizes in line with the Figma (smaller than .contractor-page 36px),
matching the design screenshot precisely.
============================================================== */
.about-page section.about {
padding: 70px 0;
background: #fff;
}
.about-page .about-grid {
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.about-page .windor-help h2 {
font-family: "Asap", sans-serif;
font-size: 50px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 1px;
margin: 0 0 14px 0;
}
.about-page .windor-help p {
font-family: "Inter", sans-serif;
font-size: 20px;
line-height: 1.7;
color: #708090ee;
margin: 0 0 12px 0;
font-weight: 400;
}
.about-page .experience-section .windor-help h2 {
font-size: 50px;
}
.about-page .experience-section .windor-help p {
font-size: 20px;
color: #708090ee;
}
/* ==============================================================
INSURANCE COMPANIES PAGE
============================================================== */
/* ---------- PRODUCT VERIFICATION ---------- */
.product-verification {
padding: 70px 0;
background: #fff;
}
.product-verification .about-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 60px;
align-items: center;
}
.product-verification .about-images {
display: flex;
align-items: center;
justify-content: center;
}
/* Prod-verification.png already has a white frame + shadow baked in,
so no extra border, radius, or box-shadow here. */
.product-verification .small-img {
display: block;
width: 100%;
max-width: 560px;
height: auto;
}
.product-verification .windor-help h2 {
font-family: "Asap", sans-serif;
font-size: 50px;
font-weight: 700;
letter-spacing: 1px;
color: #1F2A44;
margin: 0 0 18px 0;
}
.product-verification .windor-help p {
color: #708090EE;
font-family: "Inter", sans-serif;
font-size: 20px;
line-height: 1.7;
margin: 0 0 14px 0;
font-style: italic;
}
.product-verification .btn.primary {
display: inline-block;
background: #1F2A44;
color: #fff;
padding: 12px 26px;
border-radius: 6px;
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 600;
text-decoration: none;
margin-top: 12px;
transition: background 0.2s ease, transform 0.15s ease;
}
.product-verification .btn.primary:hover {
background: #339FD0;
transform: translateY(-1px);
}
/* ---------- FEATURE CARDS (Comparative Bids / Product Availability Support / etc.) ---------- */
.insurance-features {
padding: 50px 0 80px 0;
background: #F2F4F5;
position: relative;
overflow: hidden;
}
.features-deco-arc {
position: absolute;
right: -40px;
bottom: -40px;
width: 140px;
height: auto;
pointer-events: none;
z-index: 0;
}
.insurance-features .container {
position: relative;
z-index: 1;
}
.feature-card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 1450px;
margin: 0 auto;
}
.ins-card {
background: #fff;
border-radius: 12px;
padding: 28px 26px;
display: grid;
grid-template-columns: 80px 1fr;
gap: 22px;
align-items: flex-start;
border: 1px solid rgba(28, 167, 166, 0.35);
box-shadow: 0 4px 18px rgba(31, 42, 68, 0.05);
}
.ins-card.ins-card-dark {
background: #339FD0;
border-color: #339FD0;
}
.ins-card-dark h3,
.ins-card-dark p {
color: #fff;
}
.ins-icon {
width: 80px;
height: 80px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* White cards: icon chip is TEAL, glyph is WHITE
(source icons are navy, we invert to white) */
.ins-icon-light {
background: #339FD0;
}
.ins-icon-light img {
filter: brightness(0) invert(1);
}
/* Teal card: icon chip is WHITE, glyph stays NAVY */
.ins-icon-dark {
background: #fff;
}
.ins-icon img {
width: 44px;
height: 44px;
object-fit: contain;
display: block;
}
.ins-body h3 {
font-family: "Asap", sans-serif;
font-size: 37px;
font-weight: 700;
color: #1F2A44;
letter-spacing: 0.5px;
margin: 8px 0 12px 0;
line-height: 1.3;
}
.product-h3 {
font-family: "Asap", sans-serif;
font-size: 37px;
font-weight: 700;
color: white;
letter-spacing: 0.5px;
margin: 8px 0 12px 0;
line-height: 1.3;
}
.ins-body p {
font-family: "Inter", sans-serif;
font-size: 17px;
color: #708090EE;
line-height: 1.7;
margin: 0;
}
.ins-body-para {
font-family: "Inter", sans-serif;
font-size: 13.5px;
color: #ffffff;
line-height: 1.7;
margin: 0;
}
/* ---------- SERVICES AVAILABLE (tabs) ---------- */
.services-available {
padding: 80px 0;
background: #fff;
}
.section-heading {
font-family: "Asap", sans-serif;
text-align: center;
font-size: 37px;
font-weight: 700;
color: #1F2A44;
letter-spacing: 1px;
margin: 0 0 40px 0;
}
.services-tabs-wrapper {
max-width: 1450px;
margin: 0 auto;
border: 1px solid #1F2A44;
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.services-tabs {
display: grid;
grid-template-columns: repeat(5, 1fr);
background: #fff;
border-bottom: 1px solid #E6E9EC;
}
.tab-btn {
background: transparent;
border: 0;
padding: 16px 14px;
font-family: "Inter", sans-serif;
font-size: 13px;
font-weight: 600;
color: #708090EE;
cursor: pointer;
text-align: center;
line-height: 1.3;
border-right: 1px solid #EDEFF1;
transition: all 0.2s ease;
}
.tab-btn:last-child {
border-right: 0;
}
.tab-btn:hover {
background: #F7F9FA;
}
.tab-btn.active {
background: #1F2A44;
color: #fff;
}
.services-tab-panel {
padding: 36px 40px;
background: #fff;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.tab-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 40px;
align-items: center;
}
.tab-text h3 {
font-family: "Asap", sans-serif;
font-size: 30px;
font-weight: 700;
color: #1F2A44;
letter-spacing: 0.5px;
margin: 0 0 18px 0;
}
/* Tab image is a composite PNG (photos + arc baked in); render as-is */
.tab-image {
display: flex;
align-items: center;
justify-content: center;
}
.tab-image img {
display: block;
width: 100%;
max-width: 520px;
height: auto;
}
/* ==============================================================
PROPERTIES PAGE
============================================================== */
/* ---------- Search bar (teal outer frame + inner white pill) ---------- */
.properties-search-section {
padding: 60px 0 40px 0;
background: #fff;
}
.properties-search {
max-width: 1100px;
margin: -30px auto 0 auto;
background: #339FD0;
/* soft teal frame */
border-radius: 14px;
padding: 8px;
box-shadow: 0 10px 28px rgba(51, 159, 208, 0.2);
display: flex;
align-items: stretch;
gap: 8px;
}
/* Inner white pill that holds the icon + input */
.properties-search .search-inner {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border-radius: 10px;
padding: 0 20px;
min-height: 56px;
}
.properties-search .search-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.properties-search .search-icon img {
width: 20px;
height: 20px;
opacity: 0.7;
}
.properties-search input[type="search"] {
flex: 1;
border: 0;
outline: none;
background: transparent;
padding: 10px 4px;
font-family: "Inter", sans-serif;
font-size: 15px;
color: #1f2a44;
-webkit-appearance: none;
appearance: none;
}
.properties-search input[type="search"]::placeholder {
color: #708090aa;
}
.properties-search input[type="search"]::-webkit-search-cancel-button {
display: none;
}
.properties-search .search-submit {
padding: 0 42px;
background: #1f2a44;
color: #fff;
border: 0;
border-radius: 10px;
font-family: "Inter", sans-serif;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
flex-shrink: 0;
}
.properties-search .search-submit:hover {
background: #339FD0;
}
/* ---------- Properties grid ---------- */
.properties-grid-section {
padding: 30px 0 70px 0;
background: #fff;
}
.properties-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px 28px;
}
.property-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 22px rgba(31, 42, 68, 0.08);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.property-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(31, 42, 68, 0.14);
}
.properties-images {
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #f2f4f5;
}
.properties-images img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.property-body {
padding: 18px 20px 20px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.property-title {
font-family: "Asap", sans-serif;
font-size: 20px;
font-weight: 700;
color: #1f2a44;
margin: 0;
letter-spacing: 0.2px;
line-height: 1.25;
}
/* Location: teal pin icon + two-line address */
.property-location {
display: flex;
align-items: flex-start;
gap: 8px;
}
.property-location .loc-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.property-location .loc-icon img {
width: 20px;
height: 20px;
}
.property-location .loc-text {
font-family: "Inter", sans-serif;
font-size: 15px;
color: #708090ee;
line-height: 1.45;
}
/* Checkbox grid: 2 cols, small teal squares */
.property-checks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 12px;
}
.property-checks label {
display: flex;
align-items: center;
gap: 8px;
font-family: "Inter", sans-serif;
font-size: 14px;
color: #9aa4ac;
/* unchecked label = muted gray */
cursor: default;
line-height: 1.3;
}
.property-checks input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 13px;
height: 13px;
border: 1.5px solid #ccd3d9;
border-radius: 3px;
background: #fff;
position: relative;
flex-shrink: 0;
margin: 0;
}
/* Checked: teal fill + darker label */
.property-checks input[type="checkbox"]:checked {
background: #339FD0;
border-color: #339FD0;
}
.property-checks input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 3px;
top: 0px;
width: 4px;
height: 7px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
}
.property-btn {
align-self: flex-start;
display: inline-block;
padding: 10px 22px;
background: #1f2a44;
color: #fff;
border-radius: 6px;
font-family: "Inter", sans-serif;
font-size: 13px;
font-weight: 600;
text-decoration: none;
margin-top: 4px;
transition: background 0.2s ease;
}
.property-btn:hover {
background: #339FD0;
}
/* ---------- Pagination ---------- */
.properties-pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 4px;
margin-top: 40px;
padding: 12px 20px;
font-family: "Inter", sans-serif;
font-size: 14px;
color: #9aa4ac;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(31, 42, 68, 0.04);
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
/* Buttons inside pagination reset to look like inline text controls */
.properties-pagination button {
background: transparent;
border: 0;
font-family: inherit;
font-size: inherit;
color: #9aa4ac;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
transition:
color 0.2s ease,
background 0.2s ease,
border-color 0.2s ease;
}
.properties-pagination button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Container that holds the dynamic page-number buttons */
.properties-pagination .page-numbers {
display: inline-flex;
align-items: center;
gap: 4px;
}
.properties-pagination .page-prev {
color: #9aa4ac;
margin-right: 6px;
}
.properties-pagination .page-num {
min-width: 28px;
text-align: center;
border: 1px solid transparent;
}
.properties-pagination .page-num:hover:not(.active) {
color: #339FD0;
}
.properties-pagination .page-num.active {
color: #339FD0;
border: 1px solid #339FD0;
font-weight: 600;
}
.properties-pagination .page-next {
color: #339FD0;
font-weight: 600;
margin-left: 6px;
}
.properties-pagination .page-next:disabled {
color: #9aa4ac;
}
.properties-pagination .page-ellipsis {
color: #9aa4ac;
padding: 0 6px;
}
/* "Go to ● Page" toggle-like switch */
.properties-pagination .page-jump {
display: inline-flex;
align-items: center;
gap: 10px;
margin-left: 22px;
font-size: 13px;
color: #9aa4ac;
}
.page-jump .switch {
position: relative;
display: inline-block;
width: 36px;
height: 18px;
background: #e6e9ec;
border-radius: 999px;
cursor: pointer;
transition: background 0.2s ease;
}
.page-jump .switch::before {
content: "";
position: absolute;
left: 2px;
top: 2px;
width: 14px;
height: 14px;
background: #339FD0;
border-radius: 50%;
transition: transform 0.2s ease;
}
.page-jump .switch.on {
background: #c4eceb;
}
.page-jump .switch.on::before {
transform: translateX(18px);
}
/* ==============================================================
CONTACT PAGE
============================================================== */
.contact-page .page-banner-image img {
max-height: 380px;
}
.contact-section {
padding: 60px 0 110px 0;
background: #fff;
position: relative;
overflow: hidden;
}
.contact-grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 0;
align-items: stretch;
position: relative;
z-index: 1;
}
/* ---------- Left: form card (soft teal background) ---------- */
.contact-form-card {
background: #339FD010;
border-radius: 16px 0 0 16px;
padding: 50px 56px;
}
.contact-form-card h2 {
font-family: "Asap", sans-serif;
font-size: 30px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
margin: 0 0 10px 0;
}
.contact-form-card .contact-intro {
font-family: "Inter", sans-serif;
font-size: 14px;
color: #708090ee;
line-height: 1.55;
margin: 0 0 28px 0;
max-width: 440px;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.form-row {
display: grid;
grid-template-columns: 96px 1fr;
align-items: center;
gap: 18px;
}
.form-row label {
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 600;
color: #1f2a44;
}
.form-row label .req {
color: #1f2a44;
margin-left: 1px;
}
.form-row input,
.form-row select {
height: 38px;
width: 100%;
padding: 0 14px;
background: #fff;
border: 0;
border-radius: 6px;
font-family: "Inter", sans-serif;
font-size: 14px;
color: #1f2a44;
outline: none;
}
.form-row select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 12px;
padding-right: 36px;
cursor: pointer;
}
.form-row input:focus,
.form-row select:focus {
box-shadow: 0 0 0 2px rgba(28, 167, 166, 0.45);
}
.form-row-submit {
display: grid;
grid-template-columns: 96px 1fr;
gap: 18px;
margin-top: 12px;
}
.form-row-submit::before {
content: "";
/* empty cell under the label column */
}
.btn-submit {
width: 100%;
padding: 14px 22px;
background: #1f2a44;
color: #fff;
border: 0;
border-radius: 6px;
font-family: "Inter", sans-serif;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition:
background 0.2s ease,
transform 0.15s ease;
}
.btn-submit:hover {
background: #339FD0;
transform: translateY(-1px);
}
/* ---------- Right: info card (dark navy) ---------- */
.contact-info-card {
background: #1f2a44;
color: #fff;
border-radius: 16px;
padding: 40px 38px;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
margin-left: -10px;
/* slight overlap over the form card */
z-index: 2;
box-shadow: 0 10px 30px rgba(31, 42, 68, 0.12);
}
.contact-info-card h3 {
font-family: "Asap", sans-serif;
font-size: 22px;
font-weight: 700;
color: #fff;
margin: 0 0 12px 0;
line-height: 1.25;
max-width: 260px;
}
.info-row {
display: flex;
align-items: center;
gap: 16px;
background: #2c3956;
border-radius: 12px;
padding: 16px 20px;
}
.info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
}
.info-icon img {
width: 35px;
height: 35px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.info-text {
font-family: "Inter", sans-serif;
font-size: 14px;
color: #fff;
line-height: 1.5;
}
.info-text strong {
display: block;
font-family: "Asap", sans-serif;
font-size: 15px;
font-weight: 700;
margin-bottom: 2px;
}
.info-text a {
color: #fff;
text-decoration: none;
font-weight: 500;
}
.info-text a:hover {
color: #339FD0;
}
.contact-social {
display: flex;
gap: 12px;
margin-top: 6px;
}
.contact-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
transition: transform 0.15s ease;
}
.contact-social a:hover {
transform: translateY(-2px);
}
/* Source social icons are white-on-black; invert so they render as
dark glyphs on the white circle (matches Figma) */
.contact-social img {
width: 34px;
height: 34px;
object-fit: contain;
}
/* ---------- Decorative teal arc bottom-right ---------- */
.contact-deco-arc {
position: absolute;
right: -50px;
bottom: -60px;
width: 220px;
height: auto;
pointer-events: none;
z-index: 0;
}
/* ==============================================================
WINDOR STORY (About page narrative section)
============================================================== */
.windor-story-section {
padding: 70px 0;
background: #fff;
}
.windor-story {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.windor-story h2 {
font-family: "Asap", sans-serif;
font-size: 32px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 1px;
margin: 0 0 10px 0;
}
.windor-story h2::after {
content: "";
display: block;
width: 60px;
height: 3px;
background: #339FD0;
border-radius: 2px;
margin: 14px auto 30px auto;
}
.windor-story p {
font-family: "Inter", sans-serif;
font-size: 15px;
line-height: 1.8;
color: #708090ee;
margin: 0 0 18px 0;
text-align: left;
}
.windor-story p strong {
color: #1f2a44;
font-weight: 700;
}
/* Opening lede — slightly larger, navy, centered */
.windor-story .story-lede {
font-family: "Asap", sans-serif;
font-size: 20px;
font-weight: 600;
color: #1f2a44;
line-height: 1.5;
text-align: center;
margin: 0 0 26px 0;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* Callout lines — italic, navy, slightly indented */
.windor-story .story-callout {
font-style: italic;
color: #339FD0;
font-weight: 500;
border-left: 3px solid #339FD0;
padding-left: 18px;
margin-left: 10px;
margin-right: 10px;
}
.windor-story .story-callout-accent {
color: #339FD0;
font-weight: 600;
}
/* Closing lines — centered, larger, resonant */
.windor-story .story-closing {
text-align: center;
font-size: 17px;
font-weight: 500;
color: #1f2a44;
font-style: italic;
margin: 20px 0 10px 0;
}
.windor-story .story-closing-accent {
color: #339FD0;
font-weight: 700;
font-style: normal;
font-size: 18px;
margin-bottom: 0;
}
/* ==============================================================
LOGIN PAGE
============================================================== */
.login-section {
position: relative;
min-height: calc(100vh - 100px);
/* fill between header and footer */
display: flex;
align-items: center;
padding: 60px 0;
overflow: hidden;
background: #EDEFF1;
}
/* Full-bleed background image */
.login-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.login-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.login-container {
position: relative;
z-index: 1;
display: flex;
justify-content: flex-end;
/* push card to the right */
}
/* ---------- Login card ---------- */
.login-card {
width: 100%;
max-width: 520px;
background: #339FD0;
/* solid teal */
border: 3px solid #fff;
/* white inner ring */
border-radius: 16px;
padding: 40px 44px 36px 44px;
color: #fff;
box-shadow: 0 20px 50px rgba(15, 42, 68, 0.18);
}
.login-title {
font-family: "Asap", sans-serif;
font-size: 40px;
font-weight: 800;
color: #fff;
margin: 0 0 6px 0;
letter-spacing: 1.5px;
line-height: 1;
}
.login-subtitle {
font-family: "Inter", sans-serif;
font-size: 14px;
color: #fff;
opacity: 0.95;
margin: 0 0 26px 0;
}
.login-form {
display: flex;
flex-direction: column;
gap: 14px;
}
/* ---------- Input fields ---------- */
.login-field {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
}
.login-field label {
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 600;
color: #fff;
}
.login-field input[type="email"],
.login-field input[type="password"],
.login-field input[type="text"] {
height: 46px;
width: 100%;
padding: 0 16px;
background: #fff;
border: 0;
border-radius: 4px;
font-family: "Inter", sans-serif;
font-size: 15px;
color: #1F2A44;
outline: none;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.03);
}
.login-field input:focus {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}
/* Forgot Password — top-right under the password input */
.login-forgot {
align-self: flex-end;
font-family: "Inter", sans-serif;
font-size: 13px;
color: #fff;
text-decoration: none;
margin-top: 4px;
font-weight: 500;
}
.login-forgot:hover {
text-decoration: underline;
}
/* ---------- Keep me logged in ---------- */
.login-remember{
display: flex;
align-items: center;
gap: 10px;
font-family: "Inter", sans-serif;
font-size: 14px;
color: #fff;
cursor: pointer;
user-select: none;
margin-top: -18px;
/* sit next to Forgot Password row */
}
.login-remember.signup{margin-top: 0px;}
.login-remember input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
background: transparent;
border: 2px solid #fff;
border-radius: 3px;
position: relative;
flex-shrink: 0;
cursor: pointer;
margin: 0;
}
.login-remember input[type="checkbox"]:checked {
background: #fff;
}
.login-remember input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 10px;
border-right: 2px solid #339FD0;
border-bottom: 2px solid #339FD0;
transform: rotate(45deg);
}
/* ---------- Submit button ---------- */
.login-submit {
width: 100%;
padding: 16px 20px;
background: #1F2A44;
color: #fff;
border: 0;
border-radius: 6px;
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, transform 0.15s ease;
margin-top: 10px;
}
.login-submit:hover {
background: #132036;
transform: translateY(-1px);
}
/* ---------- Signup link ---------- */
.login-signup {
text-align: center;
font-family: "Inter", sans-serif;
font-size: 14px;
color: #fff;
margin: 14px 0 0 0;
}
.login-signup a {
color: #fff;
font-weight: 700;
text-decoration: none;
}
.login-signup a:hover {
text-decoration: underline;
}
/* ---------- "Or Continue" divider ---------- */
.login-divider {
display: flex;
align-items: center;
gap: 12px;
color: #fff;
font-family: "Inter", sans-serif;
font-size: 14px;
margin: 18px 0 4px 0;
}
.login-divider::before,
.login-divider::after {
content: "";
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.6);
}
.login-divider span {
white-space: nowrap;
}
/* ---------- Social buttons (Facebook + Google) ---------- */
.login-social {
display: flex;
justify-content: center;
gap: 14px;
margin-top: 6px;
}
.soc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.soc-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}
.soc-btn svg {
width: 22px;
height: 22px;
display: block;
}
.soc-fb {
background: #1877F2;
color: #fff;
}
.soc-google {
background: #fff;
}
/* Apple */
.soc-apple {
background: #000;
color: #fff;
}
/* =====================================================
Windor FAQ Page - Main Stylesheet
Fonts: Asap (headings/buttons) + Inter (body text)
Container: 1450px max-width
===================================================== */
/* ===== CSS VARIABLES ===== */
:root {
--teal: #1ab5a0;
--teal-dark: #16a08c;
--navy: #1c2c4c;
--navy-light: #243553;
--gray-bg: #ececec;
--text-light: #6b7589;
--white: #ffffff;
--font-heading: 'Asap', sans-serif;
--font-body: 'Inter', sans-serif;
}
/* =====================================================
FAQ BANNER SECTION
===================================================== */
.faq-banner {
background: var(--gray-bg);
padding: 20px 0;
position: relative;
overflow: hidden;
font-family: var(--font-body);
}
.faq-banner .container {
max-width: 1450px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.banner-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 50px;
}
.banner-text {
flex: 1;
}
/* Breadcrumb */
.faq-banner .breadcrumb {
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
margin-bottom: 25px;
color: #708090ee;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.faq-banner .breadcrumb a {
color: #708090ee;
text-decoration: none;
transition: color 0.3s ease;
}
.faq-banner .breadcrumb a:hover {
color: var(--teal);
}
.faq-banner .breadcrumb a.active {
color: var(--teal);
}
.faq-banner .breadcrumb .separator {
margin: 0 8px;
color: #1ab5a0;
font-weight: 800;
font-size: 20px;
}
/* Title */
.banner-title {
font-family: var(--font-heading);
font-size: 52px;
font-weight: 700;
color: var(--navy);
margin: 0 0 18px;
line-height: 1.1;
letter-spacing: -0.5px;
}
/* Subtitle */
.banner-subtitle {
font-family: var(--font-body);
font-size: 20px;
color: var(--text-light);
line-height: 1.7;
font-weight: 400;
margin: 0;
}
/* Banner Image */
.banner-image {
flex: 0 0 auto;
position: relative;
width: 580px;
height: 290px;
}
.banner-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
position: relative;
z-index: 2;
display: block;
}
.banner-shape {
position: absolute;
width: 140px;
height: 140px;
border: 8px solid var(--teal);
border-radius: 50%;
bottom: -35px;
left: -55px;
z-index: 1;
}
/* =====================================================
FAQ MAIN SECTION
===================================================== */
.faq-section {
padding: 100px 0 110px;
background: var(--white);
font-family: var(--font-body);
}
.faq-section .container {
max-width: 1450px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
/* ===== TABS ===== */
.faq-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-bottom: 65px;
}
.tab-btn {
font-family: var(--font-heading);
padding: 14px 36px;
font-size: 25px;
font-weight: 600;
color: var(--navy);
border: none;
border-radius: 10px;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
outline: none;
line-height: 1.2;
}
.tab-btn:hover {
color: var(--teal);
}
.tab-btn.active {
background: var(--teal);
color: var(--white);
box-shadow: 0 4px 14px rgba(26, 181, 160, 0.3);
}
.tab-btn.active:hover {
color: var(--white);
}
/* ===== TAB CONTENT ===== */
.tab-content {
display: none;
animation: faqFadeIn 0.4s ease;
}
.tab-content.active {
display: block;
}
@keyframes faqFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== ACCORDION ===== */
.accordion {
display: flex;
flex-direction: column;
gap: 22px;
max-width: 1300px;
margin: 0 auto;
}
.accordion-item {
border-radius: 10px;
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.accordion-item.active {
box-shadow: 0 8px 30px rgba(26, 181, 160, 0.18);
}
.accordion-header {
width: 100%;
padding: 26px 36px;
background: var(--navy);
color: var(--white);
font-family: var(--font-heading);
font-size: 25px;
font-weight: 600;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
border: none;
cursor: pointer;
transition: background 0.3s ease;
border-radius: 10px;
outline: none;
line-height: 1.3;
}
.accordion-header span {
flex: 1;
line-height: 1.3;
}
.accordion-header:hover {
background: var(--navy-light);
}
.accordion-item.active .accordion-header {
background: var(--teal);
border-radius: 10px 10px 0 0;
}
.accordion-item.active .accordion-header:hover {
background: var(--teal-dark);
}
/* ===== Arrow Icon ===== */
.accordion-header .arrow {
width: 14px;
height: 14px;
border-right: 2.5px solid var(--white);
border-bottom: 2.5px solid var(--white);
transform: rotate(-45deg);
transition: transform 0.3s ease;
flex-shrink: 0;
margin-right: 6px;
display: inline-block;
}
.accordion-item.active .accordion-header .arrow {
transform: rotate(-135deg);
margin-top: 6px;
}
/* ===== Accordion Body ===== */
.accordion-body {
max-height: 0;
overflow: hidden;
background: var(--white);
transition: max-height 0.4s ease, padding 0.3s ease;
border-radius: 0 0 10px 10px;
}
.accordion-item.active .accordion-body {
max-height: 600px;
padding: 26px 36px 30px;
border: 1px solid #e8e8e8;
border-top: none;
}
.accordion-body p {
font-family: var(--font-body);
font-size: 16px;
color: var(--text-light);
line-height: 1.75;
font-weight: 400;
margin: 0;
}
/* ==============================================================
PAGE BANNER OVERRIDES (Resources image is wider/landscape)
============================================================== */
.resources-banner-image img {
max-height: 290px;
width: 120%;
object-fit: cover;
border-radius: 8px;
}
/* ==============================================================
FAQ PAGE
============================================================== */
.faq-section {
padding: 90px 0 110px;
background: #fff;
}
/* ---------- Tabs ---------- */
.faq-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 16px;
margin-bottom: 60px;
}
.faq-tab-btn {
font-family: "Asap", sans-serif;
padding: 12px 32px;
font-size: 25px;
font-weight: 600;
color: #1f2a44;
background: transparent;
border: 0;
border-radius: 10px;
cursor: pointer;
line-height: 1.2;
white-space: nowrap;
transition: all 0.25s ease;
}
.faq-tab-btn:hover {
color: #339FD0;
}
.faq-tab-btn.active {
background: #339FD0;
color: #fff;
box-shadow: 0 4px 16px rgba(28, 167, 166, 0.28);
}
.faq-tab-btn.active:hover {
color: #fff;
}
/* ---------- Tab content ---------- */
.faq-tab-content {
display: none;
animation: faqFadeIn 0.4s ease;
}
.faq-tab-content.active {
display: block;
}
@keyframes faqFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ---------- Accordion ---------- */
.accordion {
display: flex;
flex-direction: column;
gap: 22px;
max-width: 1300px;
margin: 0 auto;
}
.accordion-item {
border-radius: 10px;
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.accordion-item.active {
box-shadow: 0 8px 30px rgba(28, 167, 166, 0.18);
}
.accordion-header {
width: 100%;
padding: 24px 34px;
background: #1f2a44;
color: #fff;
font-family: "Asap", sans-serif;
font-size: 25px;
font-weight: 600;
line-height: 1.3;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
gap: 22px;
border: 0;
border-radius: 10px;
cursor: pointer;
transition: background 0.3s ease;
}
.accordion-header span {
flex: 1;
}
.accordion-header:hover {
background: #2a3656;
}
.accordion-item.active .accordion-header {
background: #339FD0;
border-radius: 10px 10px 0 0;
}
.accordion-item.active .accordion-header:hover {
background: #169691;
}
/* Chevron */
.accordion-header .arrow {
width: 14px;
height: 14px;
border-right: 2.5px solid #fff;
border-bottom: 2.5px solid #fff;
transform: rotate(-45deg);
transition: transform 0.3s ease;
flex-shrink: 0;
margin-right: 6px;
display: inline-block;
}
.accordion-item.active .accordion-header .arrow {
transform: rotate(-135deg);
margin-top: 6px;
}
.accordion-body {
max-height: 0;
overflow: hidden;
background: #fff;
transition: max-height 0.4s ease, padding 0.3s ease;
border-radius: 0 0 10px 10px;
}
.accordion-item.active .accordion-body {
max-height: 600px;
padding: 24px 34px 28px;
border: 1px solid #e8e8e8;
border-top: 0;
}
.accordion-body p {
font-family: "Inter", sans-serif;
font-size: 17px;
color: #708090ee;
line-height: 1.75;
margin: 0;
}
/* ==============================================================
RESOURCES PAGE
============================================================== */
/* ---------- Common section block ---------- */
.resources-block {
padding: 90px 0;
position: relative;
overflow: hidden;
}
.resources-block .container {
position: relative;
z-index: 2;
}
.blogs-block {
background: #fff;
}
.howto-block {
background: #f2f4f5;
}
.faqs-help-block {
background: #fff;
}
/* Two-column row used by Blogs + How-To */
.resources-row {
display: flex;
align-items: center;
gap: 80px;
}
.resources-row.reverse {
flex-direction: row;
}
.resources-image {
flex: 1;
max-width: 700px;
}
.resources-image img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}
.resources-text {
flex: 1;
}
.resources-text h2 {
font-family: "Asap", sans-serif;
font-size: 42px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
margin: 0 0 14px 0;
line-height: 1.15;
text-transform: uppercase;
}
.resources-text .lead {
font-family: "Inter", sans-serif;
font-size: 18px;
font-weight: 500;
color: #1f2a44;
line-height: 1.6;
margin: 0 0 16px 0;
}
.resources-text p {
font-family: "Inter", sans-serif;
font-size: 17px;
color: #708090ee;
line-height: 1.7;
margin: 0 0 26px 0;
}
.resources-text p strong {
color: #1f2a44;
font-weight: 700;
}
/* Reuse global .btn.primary — but make it slightly more padded here */
.resources-block .btn.primary {
background: #1f2a44;
color: #fff;
padding: 13px 30px;
font-size: 15px;
font-weight: 600;
border-radius: 6px;
transition: background 0.25s ease, transform 0.15s ease;
}
.resources-block .btn.primary:hover {
background: #339FD0;
transform: translateY(-1px);
}
/* ---------- Decorative teal arcs ---------- */
.resources-arc {
position: absolute;
width: 280px;
height: 280px;
border: 35px solid #339FD0;
border-radius: 50%;
z-index: 1;
pointer-events: none;
opacity: 0.9;
}
.resources-arc-right {
bottom: -150px;
right: -100px;
}
.resources-arc-left {
bottom: -160px;
left: -120px;
}
/* ---------- FAQs preview + Need Help row ---------- */
.faqs-help-row {
display: flex;
gap: 80px;
align-items: flex-start;
}
.faqs-col,
.help-col {
flex: 1;
}
.faqs-col h2,
.help-col h2 {
font-family: "Asap", sans-serif;
font-size: 42px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
margin: 0 0 14px 0;
text-transform: uppercase;
}
.faqs-col .lead,
.help-col .lead {
font-family: "Inter", sans-serif;
font-size: 17px;
color: #708090ee;
line-height: 1.6;
margin: 0 0 22px 0;
font-weight: 500;
}
/* FAQ card */
.faqs-card {
background: #339FD0;
border-radius: 14px;
padding: 36px 40px;
}
.faqs-list {
list-style: none;
padding: 0;
margin: 0 0 28px 0;
}
.faqs-list li {
/* font-family: "Inter", sans-serif; */
font-size: 20px;
color: #fff;
font-weight: 600;
padding: 12px 0;
line-height: 1.5;
display: flex;
align-items: flex-start;
gap: 8px;
}
.faqs-list .q-mark {
color: #fff;
font-weight: 700;
font-size: 16px;
flex-shrink: 0;
}
/* Need Help column */
.help-col {
text-align: center;
padding-top: 30px;
}
.help-col .help-icon {
margin-bottom: 22px;
display: flex;
justify-content: center;
}
.help-col .help-icon img {
width: 100px;
height: auto;
display: block;
}
/* ---------- Page banner extras ---------- */
.reporting-page .page-banner-content .banner-tag {
font-family: "Inter", sans-serif;
font-size: 18px;
font-weight: 700;
color: #1f2a44;
line-height: 1.5;
margin: 0 0 18px 0;
}
.reporting-banner-image img {
width: 100%;
object-fit: cover;
border-radius: 12px;
}
p.banner-title {
font-size: 25px;
}
/* ==============================================================
COMMON BUILDING BLOCKS
============================================================== */
/* Two-column row used across the page */
.reporting-row {
display: flex;
align-items: center;
gap: 35px;
}
.reporting-row.reverse {
flex-direction: row-reverse;
}
.reporting-text {
flex: 1;
}
.reporting-image {
flex: 1;
max-width: 700px;
}
.reporting-image img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}
/* Section headings */
.reporting-text h2,
.centered-title {
font-family: "Asap", sans-serif;
font-size: 42px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
line-height: 1.15;
margin: 0 0 18px 0;
text-transform: uppercase;
}
.reporting-text p {
font-family: "Inter", sans-serif;
font-size: 20px;
color: #708090ee;
line-height: 1.75;
margin: 0 0 18px 0;
width: 85%;
}
.report-includes-title,
.ideal-for-title {
font-family: "Asap", sans-serif;
font-size: 18px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
text-transform: uppercase;
margin: 8px 0 4px 0;
}
.reporting-closing {
margin-top: 22px !important;
}
/* Decorative teal arcs */
.reporting-arc {
position: absolute;
width: 260px;
height: 260px;
border: 45px solid #339FD0;
border-radius: 50%;
z-index: 1;
pointer-events: none;
opacity: 0.9;
}
.reporting-arc-right {
bottom: -140px;
right: -100px;
}
.reporting-arc-left {
bottom: -140px;
left: -110px;
}
/* ==============================================================
1. WHAT OUR REPORTING SERVICES DELIVER
============================================================== */
.reporting-deliver-section {
padding: 135px 0;
background: #fff;
position: relative;
overflow: hidden;
}
.reporting-deliver-section .container {
position: relative;
z-index: 2;
}
/* Composite image (main + arc) */
.reporting-composite {
position: relative;
flex: 1;
max-width: 666px;
}
.composite-main {
position: relative;
overflow: hidden;
}
.composite-main img {
display: block;
width: 100%;
height: auto;
}
.composite-arc {
position: absolute;
width: 260px;
height: 260px;
border: 18px solid #339FD0;
border-radius: 50%;
bottom: -50px;
right: -100px;
z-index: 1;
opacity: 0.9;
}
/* ==============================================================
2. BUILT FOR REAL-WORLD USE
============================================================== */
.reporting-realworld-section {
padding: 90px 0;
background: #f2f4f5;
position: relative;
overflow: hidden;
}
.reporting-realworld-section .container {
position: relative;
z-index: 2;
}
.reporting-realworld-section .centered-title {
text-align: center;
}
.reporting-realworld-section .centered-sub {
text-align: center;
font-family: "Inter", sans-serif;
font-size: 17px;
color: #708090ee;
line-height: 1.7;
margin: 0 auto 60px auto;
max-width: 720px;
}
.reporting-do-dont-section {
padding: 80px 0;
position: relative;
}
.reporting-do-dont-section .centered-title {
text-align: center;
margin-bottom: 48px;
}
.do-dont-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
max-width: 1000px;
margin: 0 auto;
}
.do-dont-card {
padding: 36px 32px;
border-radius: 12px;
background: #fff;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
border-top: 4px solid transparent;
}
.do-card {
border-top-color: #1ab5a0;
/* green accent */
}
.dont-card {
border-top-color: #e04848;
/* red accent */
}
.do-dont-title {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.04em;
margin-bottom: 20px;
}
.do-list,
.dont-list {
list-style: none;
padding: 0;
margin: 0;
}
.do-list li,
.dont-list li {
position: relative;
padding: 10px 0 10px 36px;
font-size: 1rem;
line-height: 1.5;
border-bottom: 1px solid #f0f0f0;
}
.do-list li:last-child,
.dont-list li:last-child {
border-bottom: none;
}
/* Green checkmark */
.do-list li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
border-radius: 50%;
background: #1ab5a0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 14px 14px;
}
/* Red cross */
.dont-list li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
border-radius: 50%;
background: #e04848;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
}
.do-dont-closing {
text-align: center;
margin-top: 36px;
font-style: italic;
font-size: 1.05rem;
color: #555;
}
/* Mobile */
@media (max-width: 768px) {
.do-dont-grid {
grid-template-columns: 1fr;
}
.reporting-do-dont-section {
padding: 56px 0;
}
.do-dont-card {
padding: 28px 22px;
}
}
/* ==============================================================
3. WHY WINDOR REPORTING IS DIFFERENT
============================================================== */
.reporting-why-section {
padding: 90px 0;
background: #fff;
position: relative;
overflow: hidden;
}
.reporting-why-section .container {
position: relative;
z-index: 2;
}
.why-row {
display: flex;
align-items: flex-start;
gap: 70px;
}
.why-heading {
flex: 0 0 44%;
}
.why-heading h2 {
font-family: "Asap", sans-serif;
font-size: 42px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
line-height: 1.15;
margin: 0 0 30px 0;
text-transform: uppercase;
}
/* Image — no shadow, aligned to same left edge as heading */
.why-heading .windor-report {
display: block;
margin: 0;
padding: 0;
}
.why-heading .windor-report img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
border-radius: 12px;
box-shadow: none;
}
.why-cards {
flex: 1;
display: flex;
flex-direction: column;
gap: 18px;
}
/* SCOPED override: fixes legacy .why-card { flex-direction: column } from line ~1821 */
.reporting-why-section .why-card {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 22px;
background: #fff;
color: inherit;
border: 1px solid rgba(51, 159, 208, 0.4);
border-radius: 12px;
padding: 22px 26px;
transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.reporting-why-section .why-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(51, 159, 208, 0.15);
}
.reporting-why-section .why-card-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.reporting-why-section .why-card-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.reporting-why-section .why-card-body h3 {
font-family: "Asap", sans-serif;
font-size: 19px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.4px;
margin: 0 0 8px 0;
text-transform: uppercase;
line-height: 1.3;
}
.reporting-why-section .why-card-body p {
font-family: "Inter", sans-serif;
font-size: 15px;
color: #708090ee;
line-height: 1.65;
margin: 0;
}
/* ==============================================================
4. CONFIDENCE IN EVERY COMPLETED PROJECT
============================================================== */
.reporting-confidence-section {
padding: 90px 0;
background: #fff;
position: relative;
overflow: hidden;
}
.reporting-confidence-section .container {
position: relative;
z-index: 2;
}
.reporting-confidence-section .reporting-image {
max-width: 700px;
}
/* ==============================================================
5. NEED HELP
============================================================== */
.reporting-help-section {
padding: 40px 0 90px 0;
background: #fff;
}
.help-row {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
text-align: left;
}
.help-row-icon {
flex-shrink: 0;
}
.help-row-icon img {
width: 120px;
height: auto;
display: block;
}
.help-row-text h2 {
font-family: "Asap", sans-serif;
font-size: 32px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
margin: 0 0 8px 0;
text-transform: uppercase;
}
.help-row-text p {
font-family: "Inter", sans-serif;
font-size: 16px;
color: #708090ee;
line-height: 1.6;
margin: 0 0 16px 0;
}
.help-row-text .btn.primary {
background: #1f2a44;
color: #fff;
padding: 12px 28px;
font-size: 14px;
font-weight: 600;
border-radius: 6px;
transition: background 0.25s ease, transform 0.15s ease;
}
.help-row-text .btn.primary:hover {
background: #339FD0;
transform: translateY(-1px);
}
/* ==============================================================
WE HELP SECTION
Append to your existing style.css
============================================================== */
.we-help-section {
padding: 70px 0;
background: #fff;
}
/* Outer gradient-bordered wrapper (teal at top → navy at bottom) */
.we-help-wrapper {
position: relative;
padding: 50px 60px;
border-radius: 24px;
background: #fff;
display: flex;
align-items: center;
gap: 60px;
}
.we-help-wrapper::before {
content: "";
position: absolute;
inset: 0;
border-radius: 24px;
padding: 4px;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 0;
}
.we-help-wrapper>* {
position: relative;
z-index: 1;
}
/* ---------- Left column: heading + description ---------- */
.we-help-left {
flex: 1;
max-width: 480px;
}
.we-help-left h2 {
font-family: "Asap", sans-serif;
font-size: 42px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
margin: 0 0 22px 0;
text-transform: uppercase;
line-height: 1.1;
}
.we-help-left p {
font-family: "Inter", sans-serif;
font-size: 20px;
color: #708090ee;
line-height: 1.7;
margin: 0 0 22px 0;
}
.we-help-left p:last-child {
margin-bottom: 0;
}
/* ---------- Right column: cards ---------- */
.we-help-right {
flex: 1;
display: flex;
flex-direction: column;
gap: 22px;
}
.help-card {
display: flex;
align-items: stretch;
gap: 22px;
}
/* Navy icon tile */
.help-card-icon {
flex-shrink: 0;
width: 130px;
height: 130px;
background: #1f2a44;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
padding: 22px;
}
.help-card-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
/* Forces uploaded icon to render white-on-navy */
filter: brightness(0) invert(1);
}
/* Card body with thin teal border */
.help-card-body {
flex: 1;
border: 1px solid rgba(51, 159, 208, 0.5);
border-radius: 12px;
padding: 22px 26px;
display: flex;
flex-direction: column;
justify-content: center;
background: #fff;
transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.help-card-body:hover {
box-shadow: 0 8px 24px rgba(28, 167, 166, 0.15);
transform: translateY(-2px);
}
.help-card-body h3 {
font-family: "Asap", sans-serif;
font-size: 22px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
margin: 0 0 8px 0;
text-transform: uppercase;
line-height: 1.2;
}
.help-card-body p {
font-family: "Inter", sans-serif;
font-size: 18px;
color: #708090ee;
line-height: 1.6;
margin: 0 0 14px 0;
}
/* "Learn More ↗" link */
.help-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: "Inter", sans-serif;
font-size: 15px;
font-weight: 700;
color: #339FD0;
text-decoration: none;
transition: gap 0.25s ease, color 0.2s ease;
align-self: flex-start;
}
.help-card-link:hover {
color: #339FD0;
gap: 10px;
}
.help-card-link svg {
flex-shrink: 0;
}
/* ---------- Banner image ---------- */
.realtors-banner-image img {
max-height: 360px;
width: 100%;
object-fit: cover;
border-radius: 0 0 0 12px;
}
/* ==============================================================
COMMON BUILDING BLOCKS
============================================================== */
.realtors-row {
display: flex;
align-items: flex-start;
gap: 70px;
}
.realtors-text {
flex: 1;
}
.realtors-image {
flex: 1;
max-width: 700px;
}
.realtors-image img {
width: 100%;
height: auto;
display: block;
border-radius: 14px;
}
.realtors-text h2 {
font-family: "Asap", sans-serif;
font-size: 42px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
line-height: 1.15;
margin: 0 0 20px 0;
text-transform: uppercase;
}
.realtors-text p {
font-family: "Inter", sans-serif;
font-size: 19px;
color: #708090ee;
line-height: 1.7;
margin: 0 0 18px 0;
}
.realtors-text p strong {
color: #1f2a44;
font-weight: 700;
}
/* Decorative teal arcs */
.realtors-arc {
position: absolute;
width: 280px;
height: 280px;
border: 18px solid #339FD0;
border-radius: 50%;
z-index: 1;
pointer-events: none;
opacity: 0.9;
}
.realtors-arc-right {
bottom: -150px;
right: -110px;
}
/* ==============================================================
1. BUYERS & SELLERS BENEFITS
============================================================== */
.realtors-benefits-section {
padding: 90px 0;
background: #fff;
position: relative;
overflow: hidden;
}
.realtors-benefits-section .realtors-row {
align-items: flex-start;
}
/* ---------- House-shaped numbered list ---------- */
.house-numbered-list {
list-style: none;
padding: 0;
margin: 30px 0 0 0;
display: flex;
flex-direction: column;
gap: 22px;
}
.house-numbered-list li {
display: flex;
align-items: flex-start;
gap: 18px;
}
.house-numbered-list li p {
margin: 0;
padding-top: 4px;
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 700;
color: #1f2a44;
line-height: 1.55;
}
/* House-shaped marker */
.house-num {
flex-shrink: 0;
width: 38px;
height: 38px;
background: #339FD0;
/* House silhouette: pentagon (square + triangle roof) */
clip-path: polygon(50% 0%, 100% 35%, 100% 100%, 0% 100%, 0% 35%);
display: flex;
align-items: center;
justify-content: center;
padding-top: 6px;
}
.house-num span {
font-family: "Asap", sans-serif;
font-size: 16px;
font-weight: 700;
color: #fff;
line-height: 1;
}
/* ==============================================================
2. PROPERTY OWNER / RISK SECTION
============================================================== */
.realtors-risk-section {
padding: 90px 0 110px 0;
background: #f2f4f5;
position: relative;
overflow: hidden;
}
.realtors-risk-section .container {
position: relative;
z-index: 2;
}
.realtors-risk-section .realtors-row {
align-items: center;
}
.risk-cta-text {
margin-top: 10px !important;
}
/* ---------- Learn More banner ---------- */
.learn-more-banner {
display: flex;
align-items: stretch;
background: #5cd0c5;
border-radius: 8px;
overflow: hidden;
margin: 24px 0 26px 0;
box-shadow: 0 4px 14px rgba(28, 167, 166, 0.18);
}
.learn-more-tag {
flex-shrink: 0;
background: #339FD0;
color: #fff;
font-family: "Asap", sans-serif;
font-size: 16px;
font-weight: 800;
line-height: 1.1;
padding: 14px 22px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
letter-spacing: 0.5px;
}
.learn-more-text {
flex: 1;
padding: 14px 22px;
font-family: "Inter", sans-serif;
font-size: 14.5px;
color: #fff;
line-height: 1.5;
font-weight: 500;
display: flex;
align-items: center;
background: #339FD0;
}
/* ---------- Set Up Verification button ---------- */
.setup-btn {
background: #1f2a44 !important;
color: #fff !important;
padding: 13px 32px !important;
font-size: 15px !important;
font-weight: 600 !important;
border-radius: 8px !important;
transition: background 0.25s ease, transform 0.15s ease !important;
display: inline-block;
}
.setup-btn:hover {
background: #339FD0 !important;
transform: translateY(-2px);
}
.eco-system-section img {
width: 100%;
max-width: 900px;
}
.container-eco {
width: 1450px;
max-width: 90%;
margin: auto;
text-align: center;
}
.property-row {
flex: 1 0 44%;
}
.properties-section {
display: flex;
gap: 20px;
}
/* ==============================================================
CAREER PAGE — DESKTOP STYLES
Append to your existing assets/css/style.css
Scope: body.career-page
Fonts: Asap (headings) + Inter (body) — inherited from global
Colors: navy #1f2a44, teal #339FD0, mint #d8edec, muted #708090ee
============================================================== */
/* ==============================================================
1. PAGE BANNER (extends global .page-banner)
============================================================== */
.career-page .career-banner {
padding: 0;
}
.career-page .career-banner .page-banner-grid {
grid-template-columns: 1fr 1.15fr;
gap: 50px;
min-height: 300px;
align-items: center;
}
.career-page .career-banner .page-banner-content {
padding: 30px 0 40px 0;
}
.career-page .career-banner .breadcrumb {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.6px;
margin-bottom: 24px;
}
.career-page .career-banner .page-banner-content h1 {
font-family: "Asap", sans-serif;
font-size: 50px;
font-weight: 700;
letter-spacing: 0.5px;
color: #1f2a44;
line-height: 1.05;
margin: 0 0 14px 0;
text-transform: uppercase;
}
.career-page .career-banner .page-banner-content p {
font-family: "Inter", sans-serif;
font-size: 18px;
font-weight: 400;
color: #708090ee;
line-height: 1.55;
margin: 0;
max-width: 360px;
}
.career-banner-image {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 10px 0;
}
.career-banner-image img {
height: auto;
max-height: 290px;
object-fit: cover;
object-position: center;
border-radius: 10px;
display: block;
}
/* ==============================================================
2. WORKING WITH US
============================================================== */
.career-working-section {
padding: 80px 0 90px 0;
background: #ffffff;
}
.career-working-head {
text-align: center;
margin: 0 auto 45px auto;
max-width: 720px;
}
.career-working-head h2 {
font-family: "Asap", sans-serif;
font-size: 40px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
text-transform: uppercase;
margin: 0 0 10px 0;
line-height: 1.15;
}
.career-working-head p {
font-family: "Inter", sans-serif;
font-size: 20px;
font-weight: 400;
color: #708090ee;
line-height: 1.55;
margin: 0;
}
/* Cards row */
.career-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.career-card {
position: relative;
padding: 26px 24px 28px 24px;
border-radius: 14px;
min-height: 260px;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
}
.career-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 28px rgba(31, 42, 68, 0.10);
}
.career-card-icon {
width: 75px;
height: 75px;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0 0 auto 0;
}
.career-card-icon img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.career-card-body {
margin-top: 48px;
}
.career-card-body h3 {
font-family: "Asap", sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.4px;
line-height: 1.3;
margin: 0 0 8px 0;
text-transform: uppercase;
}
.career-card-body p {
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
margin: 0;
}
/* Dark navy card */
.career-card-dark {
background: #1f2a44;
}
.career-card-dark .career-card-body h3 {
color: #ffffff;
}
.career-card-dark .career-card-body p {
color: #cdd5de;
}
/* Light mint card */
.career-card-light {
background: #d8edec;
}
.career-card-light .career-card-body h3 {
color: #1f2a44;
}
.career-card-light .career-card-body p {
color: #5a6675;
}
/* ==============================================================
3. OUR OPEN ROLES
============================================================== */
.open-roles-section {
position: relative;
padding: 80px 0 100px 0;
background: #f6f7f8;
overflow: hidden;
}
.open-roles-section .container {
position: relative;
z-index: 2;
}
/* Decorative teal arc bottom-right */
.career-deco-arc {
position: absolute;
width: 340px;
height: 340px;
right: -160px;
bottom: -170px;
border: 32px solid #339FD0;
border-radius: 50%;
opacity: 0.85;
z-index: 1;
pointer-events: none;
}
/* Two-column layout */
.open-roles-grid {
display: grid;
grid-template-columns: 300px 1fr;
gap: 60px;
align-items: start;
}
/* ----- Left column ----- */
.open-roles-aside h2 {
font-family: "Asap", sans-serif;
font-size: 45px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.8px;
line-height: 1.05;
margin: 0 0 180px 0;
text-transform: uppercase;
}
.open-roles-contact {
margin-top: 0;
}
.contact-label {
font-family: "Inter", sans-serif;
font-size: 15px;
font-weight: 400;
color: #708090ee;
margin: 0 0 14px 0;
line-height: 1.4;
}
.contact-email {
display: inline-flex;
align-items: center;
gap: 10px;
color: #1f2a44;
text-decoration: none;
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
transition: color 0.2s ease;
}
.contact-email-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: #d8edec;
border-radius: 5px;
flex-shrink: 0;
}
.contact-email-icon img {
width: 16px;
height: auto;
display: block;
}
.contact-email-text {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: #1f2a44;
text-decoration-thickness: 1px;
}
.contact-email:hover {
color: #339FD0;
}
.contact-email:hover .contact-email-text {
text-decoration-color: #339FD0;
}
/* ----- Right column: role list ----- */
.open-roles-list {
display: flex;
flex-direction: column;
}
.role-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 26px 0;
border-top: 1px solid #d6dadf;
}
.role-item:last-child {
border-bottom: 1px solid #d6dadf;
}
.role-info {
flex: 1;
min-width: 0;
}
.role-tag {
display: inline-block;
font-family: "Inter", sans-serif;
font-size: 13px;
font-weight: 500;
color: #339FD0;
letter-spacing: 0.3px;
margin: 0 0 8px 0;
}
.role-title {
font-family: "Asap", sans-serif;
font-size: 30px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
line-height: 1.2;
margin: 0 0 11px 0;
text-transform: uppercase;
}
.role-meta {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0 38px;
}
.role-meta li {
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 400;
color: #708090ee;
line-height: 1.5;
}
/* Apply button group (arrow.png includes the circle bg) */
.role-apply {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex-shrink: 0;
}
.apply-label {
background: #1f2a44;
color: #ffffff;
padding: 15px 28px;
border-radius: 7px;
font-family: "Inter", sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 1.2;
transition: background 0.25s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.apply-arrow-icon {
width: 60px;
height: 60px;
display: block;
flex-shrink: 0;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.role-apply:hover .apply-label {
background: #339FD0;
}
.role-apply:hover .apply-arrow-icon {
transform: translate(2px, -2px);
}
/* ==============================================================
4. PAGINATION
============================================================== */
.open-roles-pagination-wrap {
display: flex;
justify-content: center;
margin-top: 50px;
}
.open-roles-pagination {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 12px 22px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(31, 42, 68, 0.05);
font-family: "Inter", sans-serif;
font-size: 13px;
font-weight: 500;
color: #9aa4ac;
}
.open-roles-pagination button {
background: transparent;
border: 0;
font-family: inherit;
font-size: inherit;
color: #9aa4ac;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.open-roles-pagination button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.open-roles-pagination .page-prev {
color: #9aa4ac;
font-weight: 500;
margin-right: 6px;
}
.open-roles-pagination .page-numbers {
display: inline-flex;
align-items: center;
gap: 3px;
}
.open-roles-pagination .page-num {
min-width: 26px;
text-align: center;
border: 1px solid transparent;
font-weight: 500;
}
.open-roles-pagination .page-num:hover:not(.active) {
color: #339FD0;
}
.open-roles-pagination .page-num.active {
color: #339FD0;
border: 1px solid #339FD0;
font-weight: 600;
}
.open-roles-pagination .page-ellipsis {
color: #9aa4ac;
padding: 0 6px;
user-select: none;
}
.open-roles-pagination .page-next {
color: #339FD0;
font-weight: 600;
margin-left: 6px;
}
/* "Go to ● Page" toggle */
.open-roles-pagination .page-jump {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: 18px;
font-size: 13px;
color: #9aa4ac;
}
.page-jump .switch {
position: relative;
display: inline-block;
width: 32px;
height: 16px;
background: #e6e9ec;
border-radius: 999px;
cursor: pointer;
transition: background 0.2s ease;
}
.page-jump .switch::before {
content: "";
position: absolute;
left: 2px;
top: 2px;
width: 12px;
height: 12px;
background: #339FD0;
border-radius: 50%;
transition: transform 0.2s ease;
}
.page-jump .switch.on {
background: #c4eceb;
}
.page-jump .switch.on::before {
transform: translateX(16px);
}
/* ==============================================================
DISTRIBUTORS PAGE — DESKTOP STYLES
Append to your existing assets/css/style.css
Scope: body.distributors-page
============================================================== */
/* ==============================================================
1. PAGE BANNER
============================================================== */
.distributors-page .dist-banner {
padding: 0;
}
.distributors-page .dist-banner .page-banner-grid {
grid-template-columns: 1fr 1.2fr;
gap: 50px;
min-height: 320px;
align-items: center;
}
.distributors-page .dist-banner .page-banner-content {
padding: 30px 0 40px 0;
}
.distributors-page .dist-banner .breadcrumb {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.6px;
margin-bottom: 22px;
}
.distributors-page .dist-banner .page-banner-content h1 {
font-family: "Asap", sans-serif;
font-size: 40px;
font-weight: 700;
letter-spacing: 0.5px;
color: #1f2a44;
line-height: 1.15;
margin: 0 0 16px 0;
text-transform: uppercase;
max-width: 480px;
}
.distributors-page .dist-banner .page-banner-content p {
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 400;
color: #708090ee;
line-height: 1.55;
margin: 0;
max-width: 380px;
}
.dist-banner-image {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
/*padding: 24px 0;*/
}
.dist-banner-image img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 10px;
display: block;
}
/* ==============================================================
SHARED — checklist + sub heading
============================================================== */
.dist-sub {
font-family: "Asap", sans-serif;
font-size: 20px;
font-weight: 700;
color: #5a6675;
margin: 0 0 16px 0;
line-height: 1.4;
}
.dist-check-list {
list-style: none;
padding: 0;
margin: 14px 0 18px 0;
}
.dist-check-list li {
position: relative;
padding: 8px 0 8px 34px;
font-family: "Inter", sans-serif;
font-size: 20px;
font-weight: 500;
color: #1f2a44;
line-height: 1.5;
background-image: url(../images/blue-check-box.png);
background-repeat: no-repeat;
background-position: 0 11px;
background-size: 20px 20px;
}
.dist-closing {
font-family: "Inter", sans-serif;
font-size: 20px;
color: #708090ee;
line-height: 1.6;
margin: 14px 0 0 0;
}
/* ==============================================================
2. ABOUT WINDOR
============================================================== */
.dist-about-section {
padding: 80px 0;
background: #ffffff;
}
.dist-about-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 70px;
align-items: center;
}
.dist-about-image {
display: flex;
align-items: center;
justify-content: center;
}
.dist-about-image img {
width: 100%;
max-width: 560px;
height: auto;
display: block;
}
.dist-about-content h2 {
font-family: "Asap", sans-serif;
font-size: 55px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
line-height: 1.1;
margin: 0 0 12px 0;
text-transform: uppercase;
}
.dist-about-content>p {
font-family: "Inter", sans-serif;
font-size: 20px;
color: #708090ee;
line-height: 1.6;
margin: 0 0 10px 0;
}
/* ==============================================================
3. THE CHALLENGE
============================================================== */
.dist-challenge-section {
position: relative;
padding: 80px 0 100px 0;
background: #f6f7f8;
overflow: hidden;
}
.dist-challenge-section .container {
position: relative;
z-index: 2;
}
.dist-challenge-head {
text-align: center;
margin: 0 auto 40px auto;
max-width: 720px;
}
.dist-challenge-head h2 {
font-family: "Asap", sans-serif;
font-size: 55px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
text-transform: uppercase;
margin: 0 0 10px 0;
line-height: 1.15;
}
.dist-challenge-sub {
font-family: "Asap", sans-serif;
font-size: 20px;
font-weight: 700;
color: #5a6675;
margin: 0 0 6px 0;
line-height: 1.4;
}
.dist-challenge-prompt {
font-family: "Inter", sans-serif;
font-size: 22px;
font-weight: 400;
color: #708090ee;
margin: 0;
line-height: 1.55;
}
.dist-challenge-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
max-width: 1000px;
margin: 0 auto;
}
.dist-challenge-card {
background: #ffffff;
border: 1px solid #e2e5e9;
border-radius: 12px;
padding: 28px 22px 26px 22px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.3s ease, box-shadow 0.3s ease;
cursor: default;
}
.dist-challenge-card:hover,
.dist-challenge-card.is-active {
background: #339FD0;
border-color: #339FD0;
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(28, 167, 166, 0.25);
}
.dist-challenge-icon {
position: relative;
width: 54px;
height: 54px;
margin-bottom: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.dist-challenge-icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.25s ease;
}
.dist-challenge-icon .icon-default {
opacity: 1;
}
.dist-challenge-icon .icon-hover {
opacity: 0;
}
.dist-challenge-card:hover .icon-default,
.dist-challenge-card.is-active .icon-default {
opacity: 0;
}
.dist-challenge-card:hover .icon-hover,
.dist-challenge-card.is-active .icon-hover {
opacity: 1;
}
.dist-challenge-card h3 {
font-family: "Asap", sans-serif;
font-size: 22px;
font-weight: 700;
color: #1f2a44;
margin: 0;
line-height: 1.3;
letter-spacing: 0.2px;
transition: color 0.25s ease;
}
.dist-challenge-card:hover h3,
.dist-challenge-card.is-active h3 {
color: #ffffff;
}
/* ==============================================================
4. THE WINDOR SOLUTION
============================================================== */
.dist-solution-section {
position: relative;
padding: 80px 0 100px 0;
background: #ffffff;
overflow: hidden;
}
.dist-solution-section .container {
position: relative;
z-index: 2;
}
.dist-solution-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 60px;
align-items: center;
}
.dist-solution-content h2 {
font-family: "Asap", sans-serif;
font-size: 55px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
line-height: 1.1;
margin: 0 0 12px 0;
text-transform: uppercase;
}
.dist-solution-content>p {
font-family: "Inter", sans-serif;
font-size: 18px;
color: #708090ee;
line-height: 1.6;
margin: 0 0 10px 0;
}
.dist-projects-label {
color: #1f2a44 !important;
font-weight: 600 !important;
margin: 14px 0 8px 0 !important;
}
.dist-projects-label strong {
font-weight: 700;
}
.dist-projects-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 30px;
margin: 8px 0 12px 0;
}
.dist-projects-cols .dist-check-list {
margin: 0;
}
.dist-solution-diagram {
display: flex;
align-items: center;
justify-content: center;
}
.dist-solution-diagram img {
width: 100%;
max-width: 600px;
height: auto;
display: block;
}
/* ==============================================================
5. STRATEGIC VALUE
============================================================== */
.dist-strategic-section {
position: relative;
padding: 80px 0 110px 0;
background: #f6f7f8;
overflow: hidden;
}
.dist-strategic-section .container {
position: relative;
z-index: 2;
}
.dist-strategic-grid {
display: grid;
grid-template-columns: 0.95fr 1.1fr;
gap: 60px;
align-items: center;
}
.dist-strategic-image {
display: flex;
align-items: center;
justify-content: center;
}
.dist-strategic-image img {
width: 100%;
max-width: 650px;
height: auto;
display: block;
}
.dist-strategic-content h2 {
font-family: "Asap", sans-serif;
font-size: 35px;
font-weight: 700;
color: #1f2a44;
letter-spacing: 0.5px;
line-height: 1.1;
margin: 0 0 8px 0;
text-transform: uppercase;
}
.dist-strategic-content .dist-sub {
margin-bottom: 24px;
}
.dist-value-cards {
display: flex;
flex-direction: column;
gap: 14px;
}
.dist-value-card {
display: flex;
align-items: stretch;
gap: 14px;
background: #ffffff;
border: 1px solid #e2e5e9;
border-radius: 10px;
overflow: hidden;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.dist-value-card:hover {
transform: translateX(2px);
box-shadow: 0 8px 20px rgba(31, 42, 68, 0.10);
}
.dist-value-icon {
flex-shrink: 0;
width: 64px;
background: #1f2a44;
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
}
.dist-value-icon img {
width: 32px;
height: 32px;
object-fit: contain;
display: block;
filter: brightness(0) invert(1);
}
.dist-value-text {
padding: 14px 18px 14px 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.dist-value-text h3 {
font-family: "Asap", sans-serif;
font-size: 25px;
font-weight: 700;
color: #818797;
margin: 0 0 4px 0;
line-height: 1.3;
letter-spacing: 0.2px;
transition: color 0.25s ease;
}
.dist-value-text p {
font-family: "Inter", sans-serif;
font-size: 20px;
color: #708090ee;
margin: 0;
line-height: 1.5;
transition: color 0.25s ease;
}
/* Featured / active card (#4 - AI-Driven Innovation) */
.dist-value-card.is-active {
background: #1f2a44;
border-color: #1f2a44;
}
.dist-value-card.is-active .dist-value-icon {
background: #2a3656;
}
.dist-value-card.is-active .dist-value-text h3 {
color: #ffffff;
}
.dist-value-card.is-active .dist-value-text p {
color: rgba(255, 255, 255, 0.78);
}
/* ==============================================================
DECORATIVE TEAL ARCS
============================================================== */
.dist-arc {
position: absolute;
width: 340px;
height: 340px;
border: 60px solid #339FD0;
border-radius: 50%;
opacity: 0.85;
z-index: 1;
pointer-events: none;
}
.dist-arc-right {
right: -170px;
bottom: -170px;
}
.dist-arc-left {
left: -170px;
bottom: -170px;
}
/* =========================================================================
GLOBAL RESPONSIVE LAYER
Shared header / hero / footer + homepage sections.
Appended last so it overrides earlier desktop rules.
========================================================================= */
/* Stop decorative arcs / negative-positioned elements from forcing
a horizontal scrollbar on narrow viewports. */
html,
body {
overflow-x: hidden;
}
/* ---------- HEADER: collapse to hamburger on laptop & below ----------
The full nav needs a ~1450px viewport to fit on one line, so common
laptops (1280 / 1366) get the hamburger. */
@media (max-width: 1366px) {
.header {
position: relative;
}
.menu-toggle {
display: flex;
}
nav.nav-menu {
margin-right: 0;
}
.nav-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
display: none;
background: #fff;
border-top: 1px solid #eee;
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1);
max-height: calc(100vh - 80px);
overflow-y: auto;
z-index: 999;
}
.nav-menu.active {
display: block;
}
.nav-menu ul {
flex-direction: column;
flex-wrap: nowrap;
gap: 0;
padding: 6px 0;
}
.nav-menu ul li {
width: 100%;
}
.nav-menu>ul>li>a {
display: block;
padding: 13px 24px;
}
/* Submenus become static, always-open nested lists inside the panel */
.nav-menu .submenu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
border-radius: 0;
margin: 0;
min-width: 0;
padding: 0 0 6px 0;
background: #f6f9f9;
}
.nav-menu .submenu li a {
padding: 10px 40px;
white-space: normal;
}
.nav-menu .has-submenu::after {
display: none;
}
.nav-menu .arrow {
display: none;
}
.nav-menu ul>li.active>a::after {
display: none;
}
}
/* ---------- HEADER: tighten action buttons on phones ---------- */
@media (max-width: 575px) {
.nav-wrapper {
padding: 8px 0;
}
.logo img {
max-height: 46px;
width: auto;
}
.nav-actions .login {
padding: 9px 12px;
font-size: 13px;
}
a.btn.cart {
padding: 9px 12px 9px 44px;
font-size: 13px;
}
.menu-toggle .menu-text {
display: none;
}
}
/* ---------- HERO ---------- */
@media (max-width: 1199px) {
.hero-content {
padding-left: 6%;
}
/* Teal arc sits between the columns and overlaps text once they narrow */
.slides:before {
display: none;
}
}
@media (max-width: 991px) {
.hero {
padding: 30px 0 40px 0;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 26px;
padding: 0 20px;
}
.hero-content {
padding-left: 0;
text-align: center;
}
.hero-image {
max-width: 620px;
margin: 0 auto;
}
}
/* ---------- HEADINGS: keep large display type from overflowing ---------- */
@media (max-width: 991px) {
section.services-section h2 {
font-size: clamp(30px, 5.5vw, 50px);
}
.section-title,
.serve-title {
font-size: clamp(26px, 5vw, 42px);
}
}
/* ---------- WE SERVE / SERVICES card grids ---------- */
@media (max-width: 991px) {
.serve-section {
padding: 70px 0;
}
}
/* ---------- HOMEPAGE: generic two-column sections stack ---------- */
@media (max-width: 991px) {
.about-grid,
.experience-section .about-grid,
.about-page .about-grid,
.product-verification .about-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.small-img {
width: 100%;
}
.properties-section {
flex-direction: column;
}
.property-row {
flex: 1 1 100%;
padding: 40px 20px 24px 20px;
}
}
/* ---------- ECO-SYSTEM ---------- */
@media (max-width: 991px) {
.container-eco {
width: 100%;
}
}
/* ---------- PAGE BANNER (About / inner pages): stack image below text ---------- */
@media (max-width: 767px) {
.page-banner .page-banner-grid {
grid-template-columns: 1fr;
gap: 24px;
min-height: 0;
}
.page-banner-content {
padding: 30px 0 0 0;
}
/* Image now sits below the text instead of cramped beside it */
.page-banner-image {
margin-bottom: 30px;
}
.page-banner-image img {
max-height: 280px;
margin: 0 auto;
object-position: center;
}
.page-banner-content h1 {
font-size: clamp(30px, 8vw, 55px);
}
.page-banner-content p {
font-size: 17px;
}
}
/* ---------- FOOTER ---------- */
@media (max-width: 991px) {
.footer {
padding: 50px 28px 0 28px;
}
.footer-top {
flex-direction: column;
align-items: flex-start;
gap: 22px;
}
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 32px;
margin: 40px 0 60px 0;
}
}
@media (max-width: 575px) {
.footer {
padding: 40px 20px 0 20px;
}
.footer-content {
grid-template-columns: 1fr;
gap: 26px;
}
.footer-menu a {
margin-right: 16px;
}
.footer-bottom {
flex-direction: column;
gap: 12px;
text-align: center;
}
.footer-links a {
margin-left: 0;
margin-right: 14px;
}
}