:root{
--primary:#1B3F7A;
--accent:#F05A1A;
--primary-dark:#142f5c;
--accent-dark:#d44d14;
--footer-bg:#0d2247;
--light-bg:#f8f9fa;
--white:#ffffff;
--text-dark:#1a1a2e;
--text-muted:#6c757d;
--border-color:#dee2e6;
--shadow-sm:0 2px 8px rgba(27,63,122,0.08);
--shadow-md:0 4px 20px rgba(27,63,122,0.14);
--shadow-lg:0 8px 40px rgba(27,63,122,0.18);
--radius-sm:4px;
--radius-md:8px;
--radius-lg:16px;
--transition:0.3s ease;
--transition-fast:0.18s ease;
}
*,
*::before,
*::after{
box-sizing:border-box;
margin:0;
padding:0;
}
html{
font-size:16px;
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
Arial,"Noto Sans",sans-serif,"Apple Color Emoji";
font-size:1rem;
line-height:1.7;
color:var(--text-dark);
background-color:var(--white);
overflow-x:hidden;
}
img{
max-width:100%;
height:auto;
display:block;
}
a{
color:var(--primary);
text-decoration:none;
transition:color var(--transition-fast);
}
a:hover{
color:var(--accent);
}
ul{
list-style:none;
padding:0;
margin:0;
}
h1,h2,h3,h4,h5,h6{
font-weight:700;
line-height:1.3;
color:var(--text-dark);
}
p{
margin-bottom:1rem;
}
p:last-child{
margin-bottom:0;
}
.section-padding{
padding:80px 0;
}
.text-primary-custom{
color:var(--primary) !important;
}
.text-accent{
color:var(--accent) !important;
}
.bg-primary-custom{
background-color:var(--primary) !important;
}
.bg-accent{
background-color:var(--accent) !important;
}
.bg-light-custom{
background-color:var(--light-bg) !important;
}
.btn-primary-custom{
display:inline-block;
background-color:var(--accent);
color:var(--white) !important;
padding:12px 32px;
border-radius:var(--radius-sm);
font-weight:600;
font-size:0.95rem;
border:2px solid var(--accent);
cursor:pointer;
transition:background-color var(--transition),border-color var(--transition),
transform var(--transition-fast),box-shadow var(--transition-fast);
text-align:center;
will-change:transform;
}
.btn-primary-custom:hover,
.btn-primary-custom:focus{
background-color:var(--accent-dark);
border-color:var(--accent-dark);
color:var(--white) !important;
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(240,90,26,0.35);
outline:none;
}
.btn-outline-custom{
display:inline-block;
background-color:transparent;
color:var(--white) !important;
padding:12px 32px;
border-radius:var(--radius-sm);
font-weight:600;
font-size:0.95rem;
border:2px solid var(--white);
cursor:pointer;
transition:background-color var(--transition),color var(--transition),
transform var(--transition-fast),box-shadow var(--transition-fast);
text-align:center;
will-change:transform;
}
.btn-outline-custom:hover,
.btn-outline-custom:focus{
background-color:var(--white);
color:var(--primary) !important;
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(255,255,255,0.25);
outline:none;
}
.btn-outline-primary-custom{
display:inline-block;
background-color:transparent;
color:var(--primary) !important;
padding:10px 28px;
border-radius:var(--radius-sm);
font-weight:600;
font-size:0.9rem;
border:2px solid var(--primary);
cursor:pointer;
transition:background-color var(--transition),color var(--transition),
transform var(--transition-fast);
will-change:transform;
}
.btn-outline-primary-custom:hover{
background-color:var(--primary);
color:var(--white) !important;
transform:translateY(-2px);
}
@keyframes fadeInUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@keyframes fadeIn{
from{opacity:0;}
to{opacity:1;}
}
@keyframes slideInLeft{
from{
opacity:0;
transform:translateX(-40px);
}
to{
opacity:1;
transform:translateX(0);
}
}
@keyframes slideInRight{
from{
opacity:0;
transform:translateX(40px);
}
to{
opacity:1;
transform:translateX(0);
}
}
@keyframes pulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.05);}
}
@keyframes countUp{
from{opacity:0;transform:translateY(20px);}
to{opacity:1;transform:translateY(0);}
}
.animate-fadeInUp{
animation:fadeInUp 0.65s ease both;
will-change:transform,opacity;
}
.animate-fadeIn{
animation:fadeIn 0.65s ease both;
will-change:opacity;
}
.animate-delay-1{animation-delay:0.1s;}
.animate-delay-2{animation-delay:0.2s;}
.animate-delay-3{animation-delay:0.3s;}
.animate-delay-4{animation-delay:0.4s;}
.animate-delay-5{animation-delay:0.5s;}
.reveal{
opacity:0;
transform:translateY(40px);
transition:opacity 0.65s ease,transform 0.65s ease;
will-change:transform,opacity;
}
.reveal.visible{
opacity:1;
transform:translateY(0);
}
#mainNav{
position:sticky;
top:0;
z-index:1030;
background-color:#ffffff;
transition:box-shadow var(--transition);
padding:0;
}
#mainNav.scrolled{
box-shadow:0 2px 20px rgba(27,63,122,0.12);
}
#mainNav .navbar-brand{
padding:8px 0;
font-size:1.35rem;
font-weight:800;
letter-spacing:-0.5px;
line-height:1;
display:flex;
align-items:center;
}
.brand-js{
color:var(--primary);
font-weight:900;
}
.brand-kenya{
color:var(--accent);
font-weight:900;
}
.brand-solutions{
color:var(--text-dark);
font-weight:700;
font-size:0.9em;
}
#mainNav .nav-link{
color:var(--text-dark);
font-weight:600;
font-size:0.92rem;
padding:24px 14px !important;
position:relative;
transition:color var(--transition-fast);
letter-spacing:0.01em;
}
#mainNav .nav-link::after{
content:'';
position:absolute;
bottom:16px;
left:14px;
right:14px;
height:2px;
background-color:var(--accent);
transform:scaleX(0);
transform-origin:left center;
transition:transform var(--transition);
}
#mainNav .nav-link:hover,
#mainNav .nav-link:focus{
color:var(--primary);
}
#mainNav .nav-link:hover::after,
#mainNav .nav-link:focus::after{
transform:scaleX(1);
}
#mainNav .nav-link.active{
color:var(--accent) !important;
}
#mainNav .nav-link.active::after{
transform:scaleX(1);
}
#mainNav .dropdown-menu{
border:none;
border-radius:var(--radius-md);
box-shadow:var(--shadow-lg);
padding:8px 0;
min-width:240px;
margin-top:0;
border-top:3px solid var(--accent);
animation:fadeInUp 0.2s ease both;
}
#mainNav .dropdown-item{
padding:8px 20px;
font-size:0.875rem;
font-weight:500;
color:var(--text-dark);
transition:background-color var(--transition-fast),color var(--transition-fast),
padding-left var(--transition-fast);
}
#mainNav .dropdown-item i{
width:20px;
color:var(--accent);
margin-right:8px;
font-size:0.8rem;
}
#mainNav .dropdown-item:hover,
#mainNav .dropdown-item:focus{
background-color:rgba(240,90,26,0.07);
color:var(--accent);
padding-left:26px;
}
.nav-quote-btn{
background-color:#952d0a;
color:var(--white) !important;
padding:8px 22px !important;
border-radius:var(--radius-sm);
font-weight:700;
font-size:0.875rem;
border:2px solid #952d0a;
margin-left:8px;
transition:background-color var(--transition),transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.nav-quote-btn::after{
display:none !important;
}
.nav-quote-btn:hover,
.nav-quote-btn:focus{
background-color:#7a2507;
border-color:#7a2507;
color:var(--white) !important;
transform:translateY(-2px);
box-shadow:0 4px 14px rgba(240,90,26,0.35);
}
.navbar-toggler{
border:2px solid var(--primary);
border-radius:var(--radius-sm);
padding:4px 8px;
}
.navbar-toggler:focus{
box-shadow:0 0 0 3px rgba(27,63,122,0.25);
}
.navbar-toggler-icon{
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231B3F7A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.hero-section{
min-height:100vh;
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 60%,#0d2247 100%);
display:flex;
align-items:center;
position:relative;
overflow:hidden;
color:var(--white);
}
.hero-section::before{
content:'';
position:absolute;
inset:0;
background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events:none;
}
.hero-section::after{
content:'';
position:absolute;
bottom:-2px;
left:0;
right:0;
height:80px;
background:var(--white);
clip-path:ellipse(55% 100% at 50% 100%);
z-index:2;
}
.hero-content{
position:relative;
z-index:2;
padding:120px 0 100px;
}
.hero-badge{
display:inline-block;
background-color:rgba(240,90,26,0.2);
border:1px solid rgba(240,90,26,0.5);
color:#ffb088;
padding:6px 16px;
border-radius:50px;
font-size:0.8rem;
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
margin-bottom:20px;
}
.hero-heading{
font-size:clamp(2.2rem,5vw,3.8rem);
font-weight:900;
color:var(--white);
line-height:1.15;
margin-bottom:24px;
}
.hero-heading .highlight{
color:var(--accent);
}
.hero-subtitle{
font-size:clamp(1rem,2vw,1.2rem);
color:rgba(255,255,255,0.82);
max-width:540px;
margin-bottom:40px;
line-height:1.75;
}
.hero-cta-group{
display:flex;
flex-wrap:wrap;
gap:16px;
align-items:center;
}
.hero-stats{
display:flex;
gap:40px;
margin-top:56px;
flex-wrap:wrap;
}
.hero-stat{
color:var(--white);
}
.hero-stat .number{
display:block;
font-size:2rem;
font-weight:900;
color:var(--accent);
line-height:1;
}
.hero-stat .label{
font-size:0.8rem;
color:rgba(255,255,255,0.7);
text-transform:uppercase;
letter-spacing:0.06em;
margin-top:4px;
}
.section-title{
text-align:center;
margin-bottom:56px;
}
.section-title .pre-heading{
display:inline-block;
color:var(--accent);
font-size:0.8rem;
font-weight:700;
letter-spacing:0.12em;
text-transform:uppercase;
margin-bottom:10px;
}
.section-title h2{
font-size:clamp(1.8rem,3.5vw,2.6rem);
font-weight:800;
color:var(--primary);
margin-bottom:0;
position:relative;
display:inline-block;
}
.section-title h2::after{
content:'';
display:block;
width:60px;
height:4px;
background:linear-gradient(90deg,var(--accent),var(--accent-dark));
border-radius:2px;
margin:14px auto 0;
}
.section-title p{
color:var(--text-muted);
font-size:1.05rem;
max-width:600px;
margin:16px auto 0;
}
.section-title.text-start h2{
display:block;
}
.section-title.text-start h2::after{
margin:14px 0 0;
}
.card-custom{
background-color:var(--white);
border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
border:1px solid var(--border-color);
transition:transform var(--transition),box-shadow var(--transition),
border-top-color var(--transition);
overflow:hidden;
height:100%;
will-change:transform;
}
.card-custom:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-lg);
border-top:3px solid var(--accent);
}
.service-card{
background-color:var(--white);
border-radius:var(--radius-md);
padding:36px 28px;
box-shadow:var(--shadow-sm);
border:1px solid var(--border-color);
transition:transform var(--transition),box-shadow var(--transition),
border-color var(--transition);
height:100%;
position:relative;
overflow:hidden;
will-change:transform;
}
.service-card::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:3px;
background:linear-gradient(90deg,var(--accent),var(--accent-dark));
transform:scaleX(0);
transform-origin:left center;
transition:transform var(--transition);
}
.service-card:hover{
transform:translateY(-8px);
box-shadow:var(--shadow-lg);
border-color:rgba(240,90,26,0.3);
}
.service-card:hover::before{
transform:scaleX(1);
}
.service-icon-wrap{
width:64px;
height:64px;
background:linear-gradient(135deg,var(--accent),var(--accent-dark));
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
flex-shrink:0;
transition:transform var(--transition);
}
.service-card:hover .service-icon-wrap{
transform:scale(1.08) rotate(3deg);
}
.service-icon-wrap i{
font-size:1.5rem;
color:var(--white);
}
.service-card h3{
font-size:1.15rem;
font-weight:700;
color:var(--primary);
margin-bottom:10px;
}
.service-card p{
font-size:0.9rem;
color:var(--text-muted);
line-height:1.65;
margin-bottom:16px;
}
.service-card .read-more{
font-size:0.85rem;
font-weight:700;
color:var(--accent);
display:inline-flex;
align-items:center;
gap:6px;
transition:gap var(--transition-fast);
}
.service-card:hover .read-more{
gap:10px;
}
.pricing-card{
background-color:var(--white);
border-radius:var(--radius-md);
border:2px solid var(--border-color);
padding:36px 28px;
position:relative;
transition:transform var(--transition),box-shadow var(--transition),
border-color var(--transition);
height:100%;
will-change:transform;
}
.pricing-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-lg);
}
.pricing-card.popular{
border-color:var(--accent);
box-shadow:0 0 0 4px rgba(240,90,26,0.12);
}
.pricing-card.popular:hover{
box-shadow:0 0 0 4px rgba(240,90,26,0.18),var(--shadow-lg);
}
.popular-badge{
position:absolute;
top:-14px;
left:50%;
transform:translateX(-50%);
background:linear-gradient(90deg,var(--accent),var(--accent-dark));
color:var(--white);
font-size:0.72rem;
font-weight:800;
padding:4px 18px;
border-radius:50px;
text-transform:uppercase;
letter-spacing:0.08em;
white-space:nowrap;
}
.pricing-card .plan-name{
font-size:1.1rem;
font-weight:700;
color:var(--primary);
margin-bottom:8px;
}
.pricing-card .plan-price{
font-size:2.6rem;
font-weight:900;
color:var(--text-dark);
line-height:1;
margin-bottom:4px;
}
.pricing-card .plan-price small{
font-size:1rem;
font-weight:500;
color:var(--text-muted);
}
.pricing-card .plan-period{
font-size:0.8rem;
color:var(--text-muted);
margin-bottom:20px;
}
.pricing-features{
list-style:none;
padding:0;
margin:0 0 28px;
}
.pricing-features li{
padding:7px 0;
font-size:0.875rem;
color:var(--text-dark);
display:flex;
align-items:flex-start;
gap:10px;
border-bottom:1px solid var(--border-color);
}
.pricing-features li:last-child{
border-bottom:none;
}
.pricing-features li i{
color:var(--accent);
margin-top:3px;
flex-shrink:0;
font-size:0.8rem;
}
.pricing-features li.disabled{
color:var(--text-muted);
text-decoration:line-through;
}
.pricing-features li.disabled i{
color:#ccc;
}
.stats-section{
background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 50%,#1d4080 100%);
padding:72px 0;
position:relative;
overflow:hidden;
color:var(--white);
}
.stats-section::before{
content:'';
position:absolute;
inset:0;
background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04' fill-rule='evenodd'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
.stat-item{
text-align:center;
position:relative;
z-index:1;
padding:20px;
animation:countUp 0.65s ease both;
will-change:transform,opacity;
}
.stat-item .stat-number{
font-size:clamp(2.4rem,5vw,3.5rem);
font-weight:900;
color:var(--accent);
line-height:1;
display:block;
margin-bottom:8px;
}
.stat-item .stat-label{
font-size:0.95rem;
color:rgba(255,255,255,0.85);
font-weight:500;
text-transform:uppercase;
letter-spacing:0.06em;
}
.stat-item .stat-icon{
font-size:2rem;
color:rgba(255,255,255,0.2);
margin-bottom:12px;
}
.stats-divider{
width:1px;
background:rgba(255,255,255,0.15);
align-self:stretch;
margin:10px 0;
}
.portfolio-section{
background-color:var(--light-bg);
}
.portfolio-filter{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-bottom:40px;
}
.filter-btn{
padding:7px 20px;
border-radius:50px;
border:2px solid var(--border-color);
background-color:var(--white);
color:var(--text-muted);
font-size:0.85rem;
font-weight:600;
cursor:pointer;
transition:all var(--transition-fast);
}
.filter-btn.active,
.filter-btn:hover{
background-color:var(--accent);
border-color:var(--accent);
color:var(--white);
}
.portfolio-item{
position:relative;
border-radius:var(--radius-md);
overflow:hidden;
box-shadow:var(--shadow-sm);
aspect-ratio:4/3;
cursor:pointer;
will-change:transform;
}
.portfolio-item img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.5s ease;
}
.portfolio-item:hover img{
transform:scale(1.08);
}
.portfolio-overlay{
position:absolute;
inset:0;
background:linear-gradient(
to bottom,
rgba(27,63,122,0.0) 0%,
rgba(27,63,122,0.85) 100%
);
opacity:0;
transition:opacity var(--transition);
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:24px;
}
.portfolio-item:hover .portfolio-overlay{
opacity:1;
}
.portfolio-overlay h4{
color:var(--white);
font-size:1rem;
font-weight:700;
margin-bottom:4px;
transform:translateY(10px);
transition:transform var(--transition);
}
.portfolio-overlay span{
color:rgba(255,255,255,0.75);
font-size:0.8rem;
transform:translateY(10px);
transition:transform var(--transition) 0.05s;
display:block;
margin-bottom:12px;
}
.portfolio-overlay .overlay-icons{
display:flex;
gap:10px;
transform:translateY(10px);
transition:transform var(--transition) 0.1s;
}
.portfolio-item:hover .portfolio-overlay h4,
.portfolio-item:hover .portfolio-overlay span,
.portfolio-item:hover .portfolio-overlay .overlay-icons{
transform:translateY(0);
}
.overlay-icon-btn{
width:36px;
height:36px;
background-color:var(--accent);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:var(--white);
font-size:0.8rem;
transition:background-color var(--transition-fast),transform var(--transition-fast);
}
.overlay-icon-btn:hover{
background-color:var(--accent-dark);
transform:scale(1.12);
color:var(--white);
}
.testimonials-section{
background-color:var(--white);
}
.testimonial-card{
background-color:var(--white);
border-radius:var(--radius-md);
padding:36px 28px 28px;
box-shadow:var(--shadow-md);
border:1px solid var(--border-color);
position:relative;
height:100%;
transition:transform var(--transition),box-shadow var(--transition);
will-change:transform;
}
.testimonial-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-lg);
}
.quote-icon{
position:absolute;
top:20px;
right:24px;
font-size:3rem;
color:var(--accent);
opacity:0.18;
line-height:1;
}
.testimonial-stars{
display:flex;
gap:3px;
margin-bottom:14px;
}
.testimonial-stars i{
color:#ffc107;
font-size:0.9rem;
}
.testimonial-text{
font-size:0.92rem;
color:var(--text-dark);
line-height:1.75;
font-style:italic;
margin-bottom:20px;
}
.testimonial-author{
display:flex;
align-items:center;
gap:14px;
border-top:1px solid var(--border-color);
padding-top:16px;
}
.testimonial-avatar{
width:48px;
height:48px;
border-radius:50%;
object-fit:cover;
border:2px solid var(--accent);
flex-shrink:0;
}
.testimonial-author-info .name{
font-weight:700;
font-size:0.9rem;
color:var(--primary);
margin-bottom:2px;
}
.testimonial-author-info .role{
font-size:0.78rem;
color:var(--text-muted);
}
.contact-section{
background-color:var(--light-bg);
}
.contact-form-wrap{
background-color:var(--white);
border-radius:var(--radius-lg);
padding:48px;
box-shadow:var(--shadow-md);
}
.form-label-custom{
font-size:0.875rem;
font-weight:600;
color:var(--text-dark);
margin-bottom:6px;
display:block;
}
.form-control-custom{
width:100%;
padding:12px 16px;
border:2px solid var(--border-color);
border-radius:var(--radius-sm);
font-size:0.925rem;
color:var(--text-dark);
background-color:var(--white);
transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
outline:none;
font-family:inherit;
line-height:1.5;
}
.form-control-custom:focus{
border-color:var(--accent);
box-shadow:0 0 0 4px rgba(240,90,26,0.12);
}
.form-control-custom::placeholder{
color:#bbb;
}
.form-control-custom.is-invalid{
border-color:#dc3545;
}
.form-select-custom{
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
background-size:14px;
padding-right:40px !important;
}
textarea.form-control-custom{
resize:vertical;
min-height:130px;
}
.contact-info-item{
display:flex;
align-items:flex-start;
gap:16px;
margin-bottom:28px;
}
.contact-info-icon{
width:48px;
height:48px;
background:linear-gradient(135deg,var(--accent),var(--accent-dark));
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.contact-info-icon i{
color:var(--white);
font-size:1rem;
}
.contact-info-item h5{
font-size:0.9rem;
font-weight:700;
color:var(--primary);
margin-bottom:4px;
}
.contact-info-item p{
font-size:0.875rem;
color:var(--text-muted);
margin:0;
}
.site-footer{
background-color:var(--footer-bg);
color:rgba(255,255,255,0.8);
padding-top:72px;
}
.footer-brand{
font-size:1.4rem;
font-weight:800;
margin-bottom:16px;
display:inline-block;
}
.footer-description{
font-size:0.875rem;
line-height:1.75;
color:rgba(255,255,255,0.80);
margin-bottom:24px;
max-width:300px;
}
.footer-social{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.social-icon{
width:38px;
height:38px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.2);
display:flex;
align-items:center;
justify-content:center;
color:rgba(255,255,255,0.75);
font-size:0.85rem;
transition:background-color var(--transition-fast),border-color var(--transition-fast),
color var(--transition-fast),transform var(--transition-fast);
will-change:transform;
}
.social-icon:hover{
background-color:var(--accent);
border-color:var(--accent);
color:var(--white);
transform:translateY(-3px);
}
.footer-heading{
font-size:0.85rem;
font-weight:700;
color:var(--white);
text-transform:uppercase;
letter-spacing:0.1em;
margin-bottom:20px;
position:relative;
padding-bottom:12px;
}
.footer-heading::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:32px;
height:2px;
background-color:var(--accent);
border-radius:2px;
}
.footer-links{
list-style:none;
padding:0;
margin:0;
}
.footer-links li{
margin-bottom:10px;
}
.footer-links a{
font-size:0.875rem;
color:rgba(255,255,255,0.65);
transition:color var(--transition-fast),padding-left var(--transition-fast);
display:inline-flex;
align-items:center;
gap:8px;
}
.footer-links a:hover{
color:var(--accent);
padding-left:4px;
}
.footer-links a i{
font-size:0.7rem;
color:var(--accent);
width:12px;
}
.footer-contact-item{
display:flex;
align-items:flex-start;
gap:12px;
margin-bottom:16px;
font-size:0.875rem;
color:rgba(255,255,255,0.65);
}
.footer-contact-item i{
color:var(--accent);
margin-top:3px;
flex-shrink:0;
width:16px;
font-size:0.9rem;
}
.footer-contact-item a{
color:rgba(255,255,255,0.65);
}
.footer-contact-item a:hover{
color:var(--accent);
}
.footer-divider{
border-top:1px solid rgba(255,255,255,0.1);
margin-top:48px;
padding:20px 0;
}
.footer-copyright{
font-size:0.8rem;
color:rgba(255,255,255,0.87);
text-align:center;
margin:0;
}
.footer-copyright span{
color:rgba(255,255,255,0.87);
font-weight:600;
}
.footer-copyright a{
color:#ffb088;
font-weight:600;
}
.footer-copyright a:hover{
color:#ffb088;
}
.about-image-wrap{
position:relative;
border-radius:var(--radius-lg);
overflow:hidden;
}
.about-image-wrap img{
border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);
}
.about-badge{
position:absolute;
bottom:24px;
right:-20px;
background-color:var(--accent);
color:var(--white);
padding:16px 20px;
border-radius:var(--radius-md);
text-align:center;
box-shadow:var(--shadow-md);
}
.about-badge .number{
display:block;
font-size:2rem;
font-weight:900;
line-height:1;
}
.about-badge .text{
font-size:0.72rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.06em;
}
.check-list{
list-style:none;
padding:0;
margin:0;
}
.check-list li{
display:flex;
align-items:flex-start;
gap:12px;
margin-bottom:10px;
font-size:0.9rem;
}
.check-list li i{
color:var(--accent);
margin-top:3px;
flex-shrink:0;
}
.team-card{
background-color:var(--white);
border-radius:var(--radius-md);
overflow:hidden;
box-shadow:var(--shadow-sm);
border:1px solid var(--border-color);
transition:transform var(--transition),box-shadow var(--transition);
will-change:transform;
}
.team-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-lg);
}
.team-img-wrap{
position:relative;
overflow:hidden;
aspect-ratio:3/4;
}
.team-img-wrap img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.5s ease;
}
.team-card:hover .team-img-wrap img{
transform:scale(1.06);
}
.team-social-overlay{
position:absolute;
bottom:0;
left:0;
right:0;
background:linear-gradient(to top,rgba(27,63,122,0.9),transparent);
padding:20px 16px 14px;
display:flex;
gap:8px;
justify-content:center;
transform:translateY(100%);
transition:transform var(--transition);
}
.team-card:hover .team-social-overlay{
transform:translateY(0);
}
.team-info{
padding:18px 20px;
text-align:center;
}
.team-info h4{
font-size:1rem;
font-weight:700;
color:var(--primary);
margin-bottom:4px;
}
.team-info span{
font-size:0.8rem;
color:var(--accent);
font-weight:600;
}
.blog-card{
background-color:var(--white);
border-radius:var(--radius-md);
overflow:hidden;
box-shadow:var(--shadow-sm);
border:1px solid var(--border-color);
transition:transform var(--transition),box-shadow var(--transition);
height:100%;
will-change:transform;
}
.blog-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-lg);
}
.blog-img{
aspect-ratio:16/9;
overflow:hidden;
}
.blog-img img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.5s ease;
}
.blog-card:hover .blog-img img{
transform:scale(1.06);
}
.blog-body{
padding:24px;
}
.blog-category{
display:inline-block;
font-size:0.72rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--accent);
margin-bottom:10px;
}
.blog-body h4{
font-size:1rem;
font-weight:700;
color:var(--primary);
margin-bottom:10px;
line-height:1.4;
}
.blog-meta{
display:flex;
align-items:center;
gap:14px;
font-size:0.78rem;
color:var(--text-muted);
margin-top:14px;
}
.blog-meta i{
color:var(--accent);
margin-right:4px;
font-size:0.75rem;
}
.page-header{
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
padding:64px 0 48px;
color:var(--white);
position:relative;
overflow:hidden;
}
.page-header::after{
content:'';
position:absolute;
bottom:-2px;
left:0;
right:0;
height:50px;
background:var(--white);
clip-path:ellipse(55% 100% at 50% 100%);
}
.page-header h1{
font-size:clamp(1.8rem,4vw,2.8rem);
font-weight:900;
color:var(--white);
margin-bottom:10px;
position:relative;
z-index:1;
}
.breadcrumb-custom{
position:relative;
z-index:1;
display:flex;
flex-wrap:wrap;
gap:4px;
align-items:center;
font-size:0.85rem;
}
.breadcrumb-custom .bc-item{
color:rgba(255,255,255,0.65);
}
.breadcrumb-custom .bc-item a{
color:rgba(255,255,255,0.65);
}
.breadcrumb-custom .bc-item a:hover{
color:var(--accent);
}
.breadcrumb-custom .bc-item.active{
color:var(--accent);
}
.breadcrumb-custom .bc-sep{
color:rgba(255,255,255,0.35);
font-size:0.7rem;
}
.alert-custom{
padding:14px 20px;
border-radius:var(--radius-md);
font-size:0.9rem;
display:flex;
align-items:flex-start;
gap:12px;
margin-bottom:20px;
}
.alert-custom i{
margin-top:2px;
flex-shrink:0;
}
.alert-success-custom{
background-color:rgba(25,135,84,0.1);
border:1px solid rgba(25,135,84,0.3);
color:#0a6640;
}
.alert-success-custom i{
color:#198754;
}
.alert-error-custom{
background-color:rgba(220,53,69,0.1);
border:1px solid rgba(220,53,69,0.3);
color:#a71d2a;
}
.alert-error-custom i{
color:#dc3545;
}
.admin-wrapper{
display:flex;
min-height:100vh;
background-color:#f0f2f5;
}
.admin-sidebar{
width:260px;
flex-shrink:0;
background:linear-gradient(180deg,var(--primary-dark) 0%,var(--footer-bg) 100%);
color:rgba(255,255,255,0.85);
position:sticky;
top:0;
height:100vh;
overflow-y:auto;
display:flex;
flex-direction:column;
transition:width var(--transition);
}
.admin-sidebar-header{
padding:20px 20px 16px;
border-bottom:1px solid rgba(255,255,255,0.08);
flex-shrink:0;
}
.admin-sidebar-brand{
font-size:1.15rem;
font-weight:800;
color:var(--white);
display:flex;
align-items:center;
gap:10px;
}
.admin-sidebar-brand i{
color:var(--accent);
font-size:1.3rem;
}
.admin-nav-section{
padding:8px 0;
}
.admin-nav-section-label{
font-size:0.68rem;
font-weight:700;
color:rgba(255,255,255,0.35);
text-transform:uppercase;
letter-spacing:0.12em;
padding:10px 20px 6px;
}
.admin-nav-link{
display:flex;
align-items:center;
gap:12px;
padding:10px 20px;
color:rgba(255,255,255,0.7);
font-size:0.875rem;
font-weight:500;
border-left:3px solid transparent;
transition:all var(--transition-fast);
cursor:pointer;
}
.admin-nav-link i{
width:20px;
font-size:0.9rem;
text-align:center;
flex-shrink:0;
}
.admin-nav-link:hover{
color:var(--white);
background-color:rgba(255,255,255,0.07);
border-left-color:var(--accent);
padding-left:24px;
}
.admin-nav-link.active{
color:var(--white);
background-color:rgba(240,90,26,0.15);
border-left-color:var(--accent);
}
.admin-content{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
}
.admin-topbar{
background-color:var(--white);
padding:14px 28px;
display:flex;
align-items:center;
justify-content:space-between;
box-shadow:0 1px 6px rgba(27,63,122,0.08);
position:sticky;
top:0;
z-index:100;
}
.admin-main{
padding:28px;
flex:1;
}
.admin-page-title{
font-size:1.4rem;
font-weight:800;
color:var(--primary);
margin-bottom:4px;
}
.admin-stat-card{
background-color:var(--white);
border-radius:var(--radius-md);
padding:24px;
box-shadow:var(--shadow-sm);
border:1px solid var(--border-color);
transition:transform var(--transition),box-shadow var(--transition);
height:100%;
will-change:transform;
}
.admin-stat-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-md);
}
.admin-stat-card .stat-icon-wrap{
width:52px;
height:52px;
border-radius:var(--radius-md);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
}
.admin-stat-card .stat-icon-wrap.orange{
background-color:rgba(240,90,26,0.12);
color:var(--accent);
}
.admin-stat-card .stat-icon-wrap.blue{
background-color:rgba(27,63,122,0.1);
color:var(--primary);
}
.admin-stat-card .stat-icon-wrap.green{
background-color:rgba(25,135,84,0.1);
color:#198754;
}
.admin-stat-card .stat-icon-wrap.purple{
background-color:rgba(111,66,193,0.1);
color:#6f42c1;
}
.admin-stat-card .stat-icon-wrap i{
font-size:1.3rem;
}
.admin-stat-card .stat-value{
font-size:1.9rem;
font-weight:900;
color:var(--text-dark);
line-height:1;
margin-bottom:4px;
}
.admin-stat-card .stat-title{
font-size:0.8rem;
color:var(--text-muted);
font-weight:600;
text-transform:uppercase;
letter-spacing:0.06em;
}
.admin-stat-card .stat-change{
font-size:0.78rem;
margin-top:8px;
font-weight:600;
}
.admin-stat-card .stat-change.up{
color:#198754;
}
.admin-stat-card .stat-change.down{
color:#dc3545;
}
.admin-table-card{
background-color:var(--white);
border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
border:1px solid var(--border-color);
overflow:hidden;
}
.admin-table-header{
padding:18px 24px;
border-bottom:1px solid var(--border-color);
display:flex;
align-items:center;
justify-content:space-between;
}
.admin-table-header h5{
font-size:1rem;
font-weight:700;
color:var(--primary);
margin:0;
}
.admin-table{
width:100%;
border-collapse:collapse;
}
.admin-table th{
background-color:var(--light-bg);
font-size:0.75rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.06em;
color:var(--text-muted);
padding:12px 20px;
text-align:left;
border-bottom:1px solid var(--border-color);
white-space:nowrap;
}
.admin-table td{
padding:14px 20px;
font-size:0.875rem;
color:var(--text-dark);
border-bottom:1px solid var(--border-color);
vertical-align:middle;
}
.admin-table tbody tr:last-child td{
border-bottom:none;
}
.admin-table tbody tr:hover td{
background-color:rgba(27,63,122,0.03);
}
.status-badge{
display:inline-block;
padding:3px 10px;
border-radius:50px;
font-size:0.72rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.05em;
}
.status-badge.active{
background-color:rgba(25,135,84,0.12);
color:#0a6640;
}
.status-badge.pending{
background-color:rgba(255,193,7,0.15);
color:#856404;
}
.status-badge.inactive{
background-color:rgba(108,117,125,0.12);
color:#495057;
}
.process-step{
text-align:center;
position:relative;
}
.step-number{
width:56px;
height:56px;
background:linear-gradient(135deg,var(--accent),var(--accent-dark));
color:var(--white);
font-size:1.3rem;
font-weight:900;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 16px;
}
.cta-banner{
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
padding:72px 0;
text-align:center;
color:var(--white);
position:relative;
overflow:hidden;
}
.cta-banner h2{
color:var(--white);
font-size:clamp(1.6rem,3.5vw,2.4rem);
font-weight:900;
margin-bottom:16px;
}
.cta-banner p{
color:rgba(255,255,255,0.8);
font-size:1.05rem;
margin-bottom:32px;
}
.partners-strip{
padding:48px 0;
background-color:var(--light-bg);
border-top:1px solid var(--border-color);
border-bottom:1px solid var(--border-color);
}
.partner-logo{
opacity:1;
filter:none;
transition:transform var(--transition);
max-height:70px;
width:auto;
margin:auto;
}
.partner-logo:hover{
opacity:1;
filter:none;
}
#scrollTop{
position:fixed;
bottom:28px;
right:28px;
width:44px;
height:44px;
background-color:var(--accent);
color:var(--white);
border:none;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
opacity:0;
pointer-events:none;
transition:opacity var(--transition),transform var(--transition-fast),
background-color var(--transition-fast);
box-shadow:0 4px 14px rgba(240,90,26,0.4);
z-index:999;
will-change:transform;
}
#scrollTop.visible{
opacity:1;
pointer-events:auto;
}
#scrollTop:hover{
background-color:var(--accent-dark);
transform:translateY(-3px);
}
.spinner-custom{
width:40px;
height:40px;
border:3px solid rgba(27,63,122,0.15);
border-top-color:var(--accent);
border-radius:50%;
animation:spin 0.7s linear infinite;
}
@keyframes spin{
to{transform:rotate(360deg);}
}
@media (max-width:991.98px){
.section-padding{
padding:60px 0;
}
#mainNav .navbar-collapse{
background-color:var(--white);
padding:12px 0 16px;
border-top:1px solid var(--border-color);
margin-top:0;
}
#mainNav .nav-link{
padding:10px 16px !important;
}
#mainNav .nav-link::after{
bottom:6px;
left:16px;
right:16px;
}
#mainNav .dropdown-menu{
box-shadow:none;
border-top:none;
border-left:3px solid var(--accent);
border-radius:0;
margin-left:16px;
padding:4px 0;
animation:none;
}
.nav-quote-btn{
margin:8px 16px 0;
display:inline-block;
padding:10px 22px !important;
}
.hero-content{
padding:80px 0 70px;
}
.hero-stats{
gap:24px;
}
.contact-form-wrap{
padding:32px 24px;
}
.about-badge{
right:0;
}
.admin-sidebar{
position:fixed;
left:-260px;
z-index:1040;
height:100%;
transition:left var(--transition);
}
.admin-sidebar.open{
left:0;
}
.admin-main{
padding:20px;
}
}
@media (max-width:767.98px){
html{
font-size:15px;
}
.section-padding{
padding:48px 0;
}
.hero-section{
min-height:auto;
}
.hero-content{
padding:60px 0 50px;
}
.hero-cta-group{
flex-direction:column;
align-items:center;
}
.hero-cta-group .btn-primary-custom,
.hero-cta-group .btn-outline-custom{
width:100%;
max-width:320px;
text-align:center;
justify-content:center;
}
.hero-stats{
gap:20px;
margin-top:36px;
}
.hero-stat .number{
font-size:1.6rem;
}
.section-title{
margin-bottom:36px;
}
.section-title h2{
font-size:1.7rem;
}
.service-card{
padding:28px 20px;
}
.stats-section{
padding:48px 0;
}
.stat-item .stat-number{
font-size:2.2rem;
}
.testimonial-card{
padding:28px 20px 22px;
}
.contact-form-wrap{
padding:24px 16px;
border-radius:var(--radius-md);
}
.cta-banner{
padding:48px 0;
}
.site-footer{
padding-top:48px;
}
.footer-description{
max-width:100%;
}
.about-badge{
position:static;
transform:none;
display:inline-block;
margin-top:16px;
}
.portfolio-filter{
gap:8px;
}
.filter-btn{
padding:6px 14px;
font-size:0.8rem;
}
#scrollTop{
bottom:16px;
right:16px;
width:40px;
height:40px;
}
.admin-main{
padding:16px;
}
.admin-topbar{
padding:12px 16px;
}
.footer-divider{
margin-top:32px;
}
}
@media print{
#mainNav,
.site-footer,
#scrollTop,
.hero-section::after{
display:none !important;
}
body{
font-size:12pt;
color:#000;
}
a{
color:#000;
text-decoration:underline;
}
.section-padding{
padding:24pt 0;
}
}
.section-label{
display:inline-block;
font-size:0.78rem;
font-weight:700;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--accent);
background:rgba(240,90,26,0.08);
padding:4px 14px;
border-radius:20px;
margin-bottom:12px;
}
.section-subtitle{
font-size:1.05rem;
color:var(--text-muted);
max-width:640px;
margin:0 auto 0;
line-height:1.7;
}
.body-text{
font-size:1rem;
line-height:1.8;
color:#444;
}
.service-body-text{
font-size:1rem;
line-height:1.8;
color:#444;
margin-bottom:1rem;
}
.hero-section{
position:relative;
background:linear-gradient(135deg,var(--primary) 0%,#0d2247 60%,#1a3a6b 100%);
min-height:100vh;
display:flex;
align-items:center;
padding:120px 0 80px;
overflow:hidden;
}
.hero-section::before{
content:'';
position:absolute;
inset:0;
background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events:none;
}
.hero-bg-gradient{
position:absolute;
inset:0;
background:radial-gradient(ellipse at 70% 50%,rgba(240,90,26,0.15) 0%,transparent 60%);
pointer-events:none;
}
.hero-badge{
display:inline-flex;
align-items:center;
background:rgba(240,90,26,0.15);
border:1px solid rgba(240,90,26,0.4);
color:#ffb08a;
font-size:0.78rem;
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
padding:6px 18px;
border-radius:30px;
margin-bottom:24px;
}
.hero-title{
font-size:clamp(2rem,5vw,3.4rem);
font-weight:800;
color:#ffffff;
line-height:1.18;
margin-bottom:24px;
text-shadow:0 2px 20px rgba(0,0,0,0.2);
}
.hero-subtitle{
font-size:clamp(1rem,2vw,1.15rem);
color:rgba(255,255,255,0.82);
line-height:1.8;
margin-bottom:36px;
max-width:700px;
margin-left:auto;
margin-right:auto;
}
.hero-cta-group{
display:flex;
flex-wrap:wrap;
gap:16px;
justify-content:center;
margin-bottom:48px;
}
.btn-hero-primary{
background:var(--accent);
color:#fff !important;
border:2px solid var(--accent);
padding:14px 36px;
border-radius:4px;
font-weight:700;
font-size:1rem;
transition:background 0.3s,transform 0.2s,box-shadow 0.2s;
}
.btn-hero-primary:hover{
background:var(--accent-dark);
border-color:var(--accent-dark);
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(240,90,26,0.4);
color:#fff !important;
}
.btn-hero-outline{
background:transparent;
color:#fff !important;
border:2px solid rgba(255,255,255,0.6);
padding:14px 36px;
border-radius:4px;
font-weight:700;
font-size:1rem;
transition:background 0.3s,border-color 0.3s,transform 0.2s;
}
.btn-hero-outline:hover{
background:rgba(255,255,255,0.1);
border-color:#fff;
transform:translateY(-2px);
color:#fff !important;
}
.hero-quick-stats{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:nowrap;
gap:0;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.12);
border-radius:12px;
padding:16px 24px;
max-width:680px;
margin:0 auto;
}
.quick-stat{
display:flex;
flex-direction:column;
align-items:center;
padding:0 18px;
flex:1;
}
.quick-stat-number{
font-size:1.45rem;
font-weight:800;
color:var(--accent);
line-height:1;
}
.quick-stat-label{
font-size:0.68rem;
color:rgba(255,255,255,0.7);
text-transform:uppercase;
letter-spacing:0.06em;
margin-top:4px;
white-space:nowrap;
}
.quick-stat-divider{
width:1px;
height:36px;
background:rgba(255,255,255,0.2);
flex-shrink:0;
}
.stats-section{
background:var(--white);
border-bottom:1px solid var(--border-color);
}
.stat-card{
background:var(--white);
border:1px solid var(--border-color);
border-radius:var(--radius-md);
padding:32px 20px;
text-align:center;
transition:box-shadow var(--transition),transform var(--transition);
height:100%;
}
.stat-card:hover{
box-shadow:var(--shadow-md);
transform:translateY(-4px);
}
.stat-icon-wrap{
width:56px;
height:56px;
background:rgba(27,63,122,0.08);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 16px;
font-size:1.4rem;
color:var(--primary);
}
.stat-icon{
font-size:1.4rem;
color:var(--primary);
}
.stat-number{
font-size:2.2rem;
font-weight:800;
color:var(--primary);
line-height:1;
margin-bottom:8px;
}
.stat-label{
font-size:0.85rem;
color:var(--text-muted);
text-transform:uppercase;
letter-spacing:0.06em;
}
.page-hero-section{
background:linear-gradient(135deg,var(--primary) 0%,#0d2247 100%);
padding:100px 0 64px;
position:relative;
overflow:hidden;
}
.page-hero-section::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(ellipse at 80% 50%,rgba(240,90,26,0.12) 0%,transparent 55%);
pointer-events:none;
}
.page-hero-title{
font-size:clamp(1.8rem,4vw,2.8rem);
font-weight:800;
color:#ffffff;
margin-bottom:16px;
line-height:1.2;
}
.page-hero-subtitle{
font-size:1.05rem;
color:rgba(255,255,255,0.8);
line-height:1.75;
max-width:580px;
margin:0 auto;
}
.page-hero-breadcrumb{
background:transparent;
}
.page-hero-breadcrumb .breadcrumb-item a{
color:rgba(255,255,255,0.7);
text-decoration:none;
}
.page-hero-breadcrumb .breadcrumb-item a:hover{
color:var(--accent);
}
.page-hero-breadcrumb .breadcrumb-item.active{
color:rgba(255,255,255,0.5);
}
.page-hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before{
color:rgba(255,255,255,0.4);
}
.page-hero-service-icon{
width:72px;
height:72px;
background:rgba(240,90,26,0.15);
border:2px solid rgba(240,90,26,0.4);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 24px;
font-size:1.8rem;
color:#ffb08a;
}
.why-us-section{
background:linear-gradient(135deg,#0d2247 0%,#1B3F7A 60%,#1a3a6e 100%);
}
.why-us-card{
background:var(--white);
border:1px solid var(--border-color);
border-radius:var(--radius-md);
padding:32px 28px;
height:100%;
transition:box-shadow var(--transition),transform var(--transition),border-color var(--transition);
position:relative;
overflow:hidden;
}
.why-us-card::before{
content:'';
position:absolute;
top:0;
left:0;
width:4px;
height:100%;
background:var(--accent);
transform:scaleY(0);
transform-origin:bottom;
transition:transform 0.35s ease;
}
.why-us-card:hover{
box-shadow:var(--shadow-md);
transform:translateY(-4px);
border-color:transparent;
}
.why-us-card:hover::before{
transform:scaleY(1);
}
.why-us-label{
display:inline-block;
font-size:0.72rem;
font-weight:700;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--accent);
margin-bottom:8px;
}
.why-us-title{
font-size:1.1rem;
font-weight:700;
color:var(--text-dark);
margin-bottom:10px;
}
.why-us-desc{
font-size:0.92rem;
color:var(--text-muted);
line-height:1.7;
margin:0;
}
.cta-section{
background:linear-gradient(135deg,var(--primary) 0%,#0d2247 100%);
padding:80px 0;
position:relative;
overflow:hidden;
}
.cta-section::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(ellipse at 30% 50%,rgba(240,90,26,0.15) 0%,transparent 60%);
pointer-events:none;
}
.cta-title{
font-size:clamp(1.6rem,3.5vw,2.4rem);
font-weight:800;
color:#ffffff;
margin-bottom:16px;
line-height:1.25;
}
.cta-subtitle{
font-size:1.05rem;
color:rgba(255,255,255,0.8);
max-width:540px;
margin:0 auto 36px;
line-height:1.7;
}
.cta-buttons{
display:flex;
flex-wrap:wrap;
gap:16px;
justify-content:center;
}
.about-stats-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}
.about-stat-box{
background:var(--white);
border:1px solid var(--border-color);
border-radius:var(--radius-md);
padding:28px 20px;
text-align:center;
transition:box-shadow var(--transition),transform var(--transition);
}
.about-stat-box:hover{
box-shadow:var(--shadow-md);
transform:translateY(-3px);
}
.about-stat-icon{
font-size:2rem;
color:var(--accent);
margin-bottom:12px;
display:block;
}
.about-stat-number{
font-size:2rem;
font-weight:800;
color:var(--primary);
line-height:1;
margin-bottom:6px;
}
.about-stat-label{
font-size:0.82rem;
color:var(--text-muted);
text-transform:uppercase;
letter-spacing:0.06em;
}
.value-icon-wrap{
width:60px;
height:60px;
background:rgba(27,63,122,0.08);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:1.5rem;
color:var(--primary);
margin-bottom:16px;
transition:background var(--transition),color var(--transition);
}
.value-icon-wrap:hover{
background:var(--accent);
color:#fff;
}
.value-title{
font-size:1rem;
font-weight:700;
color:var(--text-dark);
margin-bottom:8px;
}
.value-desc{
font-size:0.9rem;
color:var(--text-muted);
line-height:1.7;
margin:0;
}
.team-photo{
width:100%;
height:240px;
object-fit:cover;
border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.team-avatar-placeholder{
width:100%;
height:240px;
background:linear-gradient(135deg,var(--primary),#2a5ab0);
border-radius:var(--radius-md) var(--radius-md) 0 0;
display:flex;
align-items:center;
justify-content:center;
font-size:3rem;
font-weight:800;
color:rgba(255,255,255,0.7);
}
.team-role{
font-size:0.8rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--accent);
margin-bottom:4px;
}
.team-social-link{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:50%;
border:1px solid var(--border-color);
color:var(--text-muted);
font-size:0.85rem;
transition:background var(--transition),color var(--transition),border-color var(--transition);
margin:0 3px;
}
.team-social-link:hover{
background:var(--primary);
color:#fff;
border-color:var(--primary);
}
.testimonial-stars{
color:#f59e0b;
font-size:0.95rem;
margin-bottom:14px;
letter-spacing:2px;
}
.testimonial-quote{
font-size:0.97rem;
line-height:1.8;
color:#444;
font-style:italic;
margin-bottom:20px;
position:relative;
}
.testimonial-quote::before{
content:'\201C';
font-size:3rem;
color:rgba(27,63,122,0.12);
position:absolute;
top:-16px;
left:-8px;
line-height:1;
font-family:Georgia,serif;
}
.testimonial-avatar{
width:48px;
height:48px;
border-radius:50%;
object-fit:cover;
border:2px solid var(--border-color);
margin-right:12px;
}
.testimonial-name{
font-size:0.95rem;
font-weight:700;
color:var(--text-dark);
margin-bottom:2px;
}
.testimonial-author{
display:flex;
align-items:center;
}
.testimonial-info{
flex:1;
}
.testimonial-role{
font-size:0.78rem;
color:var(--text-muted);
}
.portfolio-card{
background:var(--white);
border:1px solid var(--border-color);
border-radius:var(--radius-md);
overflow:hidden;
transition:box-shadow var(--transition),transform var(--transition);
height:100%;
}
.portfolio-card:hover{
box-shadow:var(--shadow-lg);
transform:translateY(-5px);
}
.portfolio-card-img{
width:100%;
height:220px;
object-fit:cover;
}
.portfolio-card-placeholder{
width:100%;
height:220px;
background:linear-gradient(135deg,var(--primary),#2a5ab0);
display:flex;
align-items:center;
justify-content:center;
}
.portfolio-initial{
font-size:2.5rem;
font-weight:800;
color:rgba(255,255,255,0.4);
}
.portfolio-card-body{
padding:20px;
}
.portfolio-industry-badge{
display:inline-block;
font-size:0.72rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--accent);
background:rgba(240,90,26,0.08);
padding:3px 10px;
border-radius:12px;
margin-bottom:10px;
}
.portfolio-card-title{
font-size:1rem;
font-weight:700;
color:var(--text-dark);
margin-bottom:8px;
}
.portfolio-card-excerpt{
font-size:0.87rem;
color:var(--text-muted);
line-height:1.65;
margin-bottom:12px;
}
.portfolio-client{
font-size:0.8rem;
color:var(--text-muted);
margin-bottom:10px;
}
.portfolio-tech-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
}
.tech-tag{
font-size:0.72rem;
background:rgba(27,63,122,0.08);
color:var(--primary);
padding:3px 8px;
border-radius:4px;
font-weight:600;
}
.portfolio-filter-section{
background:var(--white);
padding:32px 0 0;
border-bottom:1px solid var(--border-color);
}
.portfolio-filter-bar{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
padding-bottom:24px;
}
.portfolio-filter-btn{
background:transparent;
border:2px solid var(--border-color);
color:var(--text-muted);
padding:8px 22px;
border-radius:25px;
font-size:0.85rem;
font-weight:600;
cursor:pointer;
transition:all var(--transition);
}
.portfolio-filter-btn:hover,
.portfolio-filter-btn.active{
background:var(--primary);
border-color:var(--primary);
color:#fff;
}
.contact-form{
background:var(--white);
border:1px solid var(--border-color);
border-radius:var(--radius-lg);
padding:40px;
box-shadow:var(--shadow-sm);
}
.form-label-custom{
font-size:0.87rem;
font-weight:600;
color:var(--text-dark);
margin-bottom:6px;
display:block;
}
.form-control-custom{
width:100%;
padding:12px 16px;
border:1.5px solid var(--border-color);
border-radius:var(--radius-sm);
font-size:0.95rem;
color:var(--text-dark);
background:var(--white);
transition:border-color var(--transition),box-shadow var(--transition);
outline:none;
}
.form-control-custom:focus{
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(27,63,122,0.1);
}
.form-control-custom.is-invalid{
border-color:#dc3545;
}
.input-icon-wrap{
position:relative;
}
.input-icon-wrap .input-icon{
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
color:var(--text-muted);
font-size:0.9rem;
pointer-events:none;
}
.input-icon-wrap .form-control-custom{
padding-left:40px;
}
.contact-info-item{
display:flex;
align-items:flex-start;
gap:16px;
margin-bottom:24px;
}
.contact-info-icon{
width:48px;
height:48px;
min-width:48px;
background:rgba(27,63,122,0.08);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
color:var(--primary);
}
.contact-info-title{
font-size:0.82rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--text-muted);
margin-bottom:4px;
}
.contact-info-content{
font-size:0.95rem;
color:var(--text-dark);
line-height:1.6;
}
.contact-info-content a{
color:var(--primary);
}
.contact-info-content a:hover{
color:var(--accent);
}
.contact-social-links{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:8px;
}
.contact-social-card{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:80px;
height:80px;
background:var(--white);
border:1px solid var(--border-color);
border-radius:var(--radius-md);
font-size:1.4rem;
color:var(--primary);
transition:all var(--transition);
text-decoration:none;
}
.contact-social-card:hover{
background:var(--primary);
color:#fff;
border-color:var(--primary);
transform:translateY(-3px);
box-shadow:var(--shadow-sm);
}
.contact-social-title{
font-size:0.65rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.05em;
margin-top:6px;
}
.contact-social-link{
color:inherit;
text-decoration:none;
}
.contact-step{
display:flex;
gap:20px;
align-items:flex-start;
padding:24px;
background:var(--white);
border:1px solid var(--border-color);
border-radius:var(--radius-md);
margin-bottom:16px;
transition:box-shadow var(--transition);
}
.contact-step:hover{
box-shadow:var(--shadow-sm);
}
.contact-step-number{
width:42px;
height:42px;
min-width:42px;
background:var(--primary);
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:1rem;
font-weight:800;
}
.sps-content{
position:relative;
}
.sps-title{
font-size:1.05rem;
font-weight:700;
color:var(--text-dark);
margin-bottom:8px;
}
.sps-desc{
font-size:0.9rem;
color:var(--text-muted);
line-height:1.7;
margin:0;
}
.process-step{
background:var(--white);
border:1px solid rgba(27,63,122,0.08);
border-radius:16px;
padding:32px 28px;
height:100%;
text-align:center;
position:relative;
overflow:hidden;
transition:box-shadow 0.3s ease,transform 0.2s ease,border-color 0.3s ease;
}
.process-step::after{
content:'';
position:absolute;
bottom:0;left:0;right:0;
height:3px;
background:linear-gradient(90deg,#1B3F7A,#F05A1A);
transform:scaleX(0);
transform-origin:left;
transition:transform 0.3s ease;
}
.process-step:hover{
box-shadow:0 12px 40px rgba(27,63,122,0.1);
transform:translateY(-5px);
border-color:rgba(27,63,122,0.15);
}
.process-step:hover::after{
transform:scaleX(1);
}
.process-step-number{
font-size:3rem;
font-weight:900;
color:rgba(27,63,122,0.1);
line-height:1;
margin-bottom:16px;
letter-spacing:-0.02em;
}
.process-step-icon{
width:64px;
height:64px;
border-radius:14px;
background:rgba(27,63,122,0.08);
display:flex;
align-items:center;
justify-content:center;
font-size:1.6rem;
color:#1B3F7A;
margin:0 auto 20px;
transition:background 0.3s ease,color 0.3s ease,transform 0.3s ease;
}
.process-step:hover .process-step-icon{
background:#F05A1A;
color:#ffffff;
transform:scale(1.08) rotate(4deg);
}
.process-step-title{
font-size:1.05rem;
font-weight:700;
color:#1B3F7A;
margin-bottom:10px;
line-height:1.3;
}
.process-step-desc{
font-size:0.875rem;
color:#6c757d;
line-height:1.65;
margin:0;
}
.product-icon-wrap{
width:56px;
height:56px;
background:rgba(240,90,26,0.1);
border-radius:var(--radius-md);
display:flex;
align-items:center;
justify-content:center;
font-size:1.5rem;
color:var(--accent);
margin-bottom:0;
margin-right:16px;
flex-shrink:0;
}
.product-feature-item{
display:flex;
align-items:flex-start;
gap:12px;
padding:12px 0;
border-bottom:1px solid var(--border-color);
font-size:0.93rem;
color:var(--text-dark);
}
.product-feature-item:last-child{
border-bottom:none;
}
.product-feature-item i{
color:var(--accent);
margin-top:2px;
flex-shrink:0;
}
.product-list-cta-group{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:24px;
}
.product-showcase-icon-wrap{
width:80px;
height:80px;
background:rgba(27,63,122,0.08);
border-radius:var(--radius-lg);
display:flex;
align-items:center;
justify-content:center;
font-size:2.2rem;
color:var(--primary);
margin:0 auto 24px;
}
.product-showcase-visual{
background:linear-gradient(135deg,var(--primary) 0%,#0d2247 100%);
border-radius:var(--radius-lg);
padding:40px;
display:flex;
align-items:center;
justify-content:center;
min-height:320px;
}
.service-sidebar-card{
background:var(--white);
border:1px solid var(--border-color);
border-radius:var(--radius-md);
padding:28px;
margin-bottom:24px;
}
.service-sidebar-title{
font-size:0.95rem;
font-weight:700;
color:var(--text-dark);
margin-bottom:16px;
padding-bottom:10px;
border-bottom:2px solid var(--accent);
}
.service-sidebar-text{
font-size:0.9rem;
color:var(--text-muted);
line-height:1.7;
}
.service-sidebar-list{
list-style:none;
padding:0;
margin:0;
}
.service-sidebar-list li{
padding:8px 0;
border-bottom:1px solid var(--border-color);
font-size:0.9rem;
color:var(--text-dark);
display:flex;
align-items:center;
gap:10px;
}
.service-sidebar-list li:last-child{
border-bottom:none;
}
.service-highlight-list{
list-style:none;
padding:0;
margin:0;
}
.service-highlight-list li{
display:flex;
align-items:flex-start;
gap:12px;
padding:10px 0;
border-bottom:1px solid var(--border-color);
font-size:0.95rem;
color:var(--text-dark);
}
.service-highlight-list li:last-child{
border-bottom:none;
}
.service-includes-list{
list-style:none;
padding:0;
margin:0;
}
.service-includes-list li{
display:flex;
align-items:flex-start;
gap:10px;
padding:8px 0;
font-size:0.93rem;
color:var(--text-dark);
}
.faq-item{
border:1px solid var(--border-color);
border-radius:var(--radius-md);
margin-bottom:12px;
overflow:hidden;
}
.faq-button{
width:100%;
text-align:left;
background:var(--white);
border:none;
padding:18px 24px;
font-size:0.97rem;
font-weight:600;
color:var(--text-dark);
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
transition:background var(--transition);
}
.faq-button:hover{
background:rgba(27,63,122,0.04);
}
.faq-button[aria-expanded="true"]{
color:var(--primary);
background:rgba(27,63,122,0.04);
}
.faq-body{
padding:0 24px 20px;
font-size:0.93rem;
color:var(--text-muted);
line-height:1.75;
}
.content-heading{
font-size:1.4rem;
font-weight:700;
color:var(--primary);
margin-bottom:16px;
padding-bottom:10px;
border-bottom:2px solid rgba(27,63,122,0.1);
}
@media (max-width:767.98px){
.hero-section{
padding:100px 0 60px;
min-height:auto;
}
.hero-quick-stats{
padding:14px 16px;
max-width:100%;
}
.quick-stat{
padding:0 10px;
}
.quick-stat-number{
font-size:1.15rem;
}
.quick-stat-label{
font-size:0.6rem;
}
.about-stats-grid{
grid-template-columns:1fr 1fr;
gap:12px;
}
.about-stat-box{
padding:20px 14px;
}
.contact-form{
padding:24px 20px;
}
.cta-buttons{
flex-direction:column;
align-items:center;
}
.portfolio-filter-bar{
gap:8px;
}
.portfolio-filter-btn{
padding:7px 16px;
font-size:0.8rem;
}
.page-hero-section{
padding:80px 0 48px;
}
.product-showcase-visual{
min-height:200px;
padding:24px;
}
}
.product-card{
background:#ffffff;
border:1px solid #dee2e6;
border-radius:12px;
padding:28px;
height:100%;
display:flex;
flex-direction:column;
transition:box-shadow 0.3s ease,transform 0.3s ease,border-color 0.3s ease;
position:relative;
overflow:hidden;
}
.product-card::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:linear-gradient(90deg,#1B3F7A,#F05A1A);
transform:scaleX(0);
transform-origin:left;
transition:transform 0.35s ease;
}
.product-card:hover{
box-shadow:0 8px 40px rgba(27,63,122,0.18);
transform:translateY(-5px);
border-color:transparent;
}
.product-card:hover::before{
transform:scaleX(1);
}
.product-card-header{
display:flex;
align-items:flex-start;
gap:16px;
margin-bottom:16px;
}
.product-icon-wrap{
width:64px;
height:64px;
min-width:64px;
background:rgba(240,90,26,0.1);
border:2px solid rgba(240,90,26,0.2);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.8rem;
color:#F05A1A;
transition:background 0.3s ease,color 0.3s ease;
flex-shrink:0;
margin-right:0;
margin-bottom:0;
}
.product-card:hover .product-icon-wrap{
background:#F05A1A;
color:#ffffff;
}
.product-card-name{
font-size:1.15rem;
font-weight:700;
color:#1a1a2e;
margin-bottom:4px;
line-height:1.3;
}
.product-card-tagline{
font-size:0.83rem;
color:#6c757d;
line-height:1.5;
margin:0;
}
.product-feature-list{
list-style:none;
padding:0;
padding-top:16px;
margin:0 0 20px;
border-top:1px solid #dee2e6;
flex:1;
}
.product-feature-list li{
display:flex;
align-items:flex-start;
gap:10px;
padding:8px 0;
font-size:0.9rem;
color:#444;
border-bottom:1px solid rgba(0,0,0,0.05);
}
.product-feature-list li:last-child{
border-bottom:none;
}
.product-feature-list li i{
color:#F05A1A;
margin-top:2px;
flex-shrink:0;
font-size:1rem;
}
.product-card-footer{
margin-top:auto;
padding-top:16px;
border-top:1px solid #dee2e6;
}
.btn-product-cta{
display:inline-block;
width:100%;
text-align:center;
background:#1B3F7A;
color:#ffffff !important;
padding:11px 24px;
border-radius:6px;
font-weight:600;
font-size:0.9rem;
border:2px solid #1B3F7A;
transition:background 0.3s ease,border-color 0.3s ease,transform 0.2s ease;
text-decoration:none;
}
.btn-product-cta:hover{
background:#F05A1A;
border-color:#F05A1A;
color:#ffffff !important;
transform:translateY(-2px);
}
.why-us-icon-wrap{
width:64px;
height:64px;
background:rgba(27,63,122,0.08);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.8rem;
color:#1B3F7A;
margin-bottom:20px;
transition:background 0.3s ease,color 0.3s ease,transform 0.3s ease;
}
.why-us-card:hover .why-us-icon-wrap{
background:#F05A1A;
color:#ffffff;
transform:scale(1.08);
}
.btn-cta-primary{
display:inline-flex;
align-items:center;
gap:10px;
background:#F05A1A;
color:#ffffff !important;
padding:14px 36px;
border-radius:6px;
font-weight:700;
font-size:1rem;
border:2px solid #F05A1A;
text-decoration:none;
transition:background 0.3s ease,border-color 0.3s ease,transform 0.2s ease,box-shadow 0.2s ease;
}
.btn-cta-primary:hover{
background:#d44d14;
border-color:#d44d14;
color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(240,90,26,0.4);
}
.btn-cta-outline{
display:inline-flex;
align-items:center;
gap:10px;
background:transparent;
color:#ffffff !important;
padding:14px 36px;
border-radius:6px;
font-weight:700;
font-size:1rem;
border:2px solid rgba(255,255,255,0.6);
text-decoration:none;
transition:background 0.3s ease,border-color 0.3s ease,transform 0.2s ease;
}
.btn-cta-outline:hover{
background:rgba(255,255,255,0.12);
border-color:#ffffff;
color:#ffffff !important;
transform:translateY(-2px);
}
.testimonial-card{
background:#ffffff;
border:1px solid #dee2e6;
border-radius:12px;
padding:28px;
height:100%;
display:flex;
flex-direction:column;
transition:box-shadow 0.3s ease,transform 0.3s ease;
position:relative;
}
.testimonial-card:hover{
box-shadow:0 8px 32px rgba(27,63,122,0.12);
transform:translateY(-4px);
}
.testimonial-stars{
display:flex;
gap:3px;
margin-bottom:16px;
}
.testimonial-stars i{
color:#f59e0b;
font-size:1rem;
}
.testimonial-quote{
font-size:0.95rem;
line-height:1.8;
color:#444;
font-style:italic;
flex:1;
margin-bottom:20px;
padding-top:8px;
border-top:1px solid #dee2e6;
position:relative;
}
.testimonial-quote::before{
content:none;
}
.testimonial-author{
display:flex;
align-items:center;
gap:14px;
margin-top:auto;
border-top:none;
padding-top:0;
}
.testimonial-avatar-circle{
width:48px;
height:48px;
min-width:48px;
border-radius:50%;
background:linear-gradient(135deg,#1B3F7A,#2a5ab0);
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
font-weight:800;
color:#ffffff;
text-transform:uppercase;
flex-shrink:0;
}
.testimonial-name{
font-size:0.97rem;
font-weight:700;
color:#1a1a2e;
margin-bottom:2px;
display:block;
}
.testimonial-role{
font-size:0.78rem;
color:#6c757d;
line-height:1.4;
display:block;
}
.testimonial-info{
flex:1;
min-width:0;
}
.value-icon-wrap{
width:64px;
height:64px;
min-width:64px;
background:rgba(27,63,122,0.08);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.8rem;
color:#1B3F7A;
margin-bottom:20px;
transition:background 0.3s ease,color 0.3s ease;
}
.value-card:hover .value-icon-wrap{
background:#F05A1A;
color:#ffffff;
}
.about-stat-icon{
font-size:2.2rem;
color:#F05A1A;
margin-bottom:14px;
display:block;
}
.contact-form-card{
background:#ffffff;
border-radius:12px;
padding:40px;
box-shadow:0 4px 24px rgba(27,63,122,0.10);
height:100%;
}
.contact-info-card{
background:#ffffff;
border-radius:12px;
padding:32px;
box-shadow:0 4px 24px rgba(27,63,122,0.08);
margin-bottom:24px;
}
.contact-sidebar-card{
background:#ffffff;
border-radius:12px;
padding:32px;
box-shadow:0 4px 24px rgba(27,63,122,0.08);
height:100%;
}
.contact-sidebar-heading,
.contact-info-title{
font-size:1.3rem;
font-weight:700;
color:#1B3F7A;
margin-bottom:28px;
padding-bottom:12px;
border-bottom:3px solid #F05A1A;
text-transform:none;
letter-spacing:normal;
}
.contact-form-title{
font-size:1.3rem;
font-weight:700;
color:#1B3F7A;
margin-bottom:8px;
padding-bottom:12px;
border-bottom:3px solid #F05A1A;
}
.contact-form-subtitle{
font-size:0.95rem;
color:#6c757d;
margin-bottom:28px;
margin-top:4px;
}
.contact-info-item{
display:flex;
align-items:flex-start;
gap:16px;
margin-bottom:24px;
}
.contact-info-icon{
width:48px;
height:48px;
min-width:48px;
background:rgba(27,63,122,0.08);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:1.15rem;
color:#1B3F7A;
}
.contact-info-content{
font-size:0.95rem;
color:#1a1a2e;
line-height:1.65;
}
.contact-info-content strong{
display:block;
font-size:0.78rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.09em;
color:#6c757d;
margin-bottom:4px;
}
.contact-info-content span{
display:block;
}
.contact-info-content a{
color:#1B3F7A;
text-decoration:none;
}
.contact-info-content a:hover{
color:#F05A1A;
}
.btn-whatsapp{
display:inline-flex;
align-items:center;
gap:10px;
background:#25D366;
color:#ffffff !important;
padding:13px 28px;
border-radius:6px;
font-weight:700;
font-size:0.95rem;
text-decoration:none;
width:100%;
justify-content:center;
margin-top:8px;
transition:background 0.3s ease,transform 0.2s ease;
}
.btn-whatsapp:hover{
background:#1ebe5d;
color:#ffffff !important;
transform:translateY(-2px);
}
.contact-whatsapp-alt{
background:rgba(37,211,102,0.05);
border:1px solid rgba(37,211,102,0.25);
border-radius:8px;
padding:20px;
}
.contact-whatsapp-text{
font-size:0.93rem;
color:#444;
margin-bottom:12px;
}
.contact-response-card{
background:rgba(27,63,122,0.04);
border:1px solid rgba(27,63,122,0.12);
border-radius:10px;
padding:20px 24px;
display:flex;
gap:16px;
align-items:flex-start;
margin-bottom:24px;
}
.crp-icon{
width:44px;
height:44px;
min-width:44px;
background:#F05A1A;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
color:#ffffff;
}
.crp-content strong{
font-size:0.97rem;
font-weight:700;
color:#1B3F7A;
display:block;
margin-bottom:6px;
}
.crp-content p{
font-size:0.88rem;
color:#6c757d;
margin:0;
line-height:1.65;
}
.contact-social-card{
display:block !important;
width:auto !important;
height:auto !important;
flex-direction:unset !important;
align-items:unset !important;
justify-content:unset !important;
background:#ffffff;
border-radius:12px;
padding:24px;
box-shadow:0 4px 24px rgba(27,63,122,0.06);
}
.contact-social-title{
font-size:0.85rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.08em;
color:#1B3F7A;
margin-bottom:16px;
}
.contact-social-links{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.contact-social-link{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 16px;
background:rgba(27,63,122,0.06);
border:1px solid rgba(27,63,122,0.12);
border-radius:6px;
font-size:0.85rem;
font-weight:600;
color:#1B3F7A;
text-decoration:none;
transition:background 0.3s ease,color 0.3s ease,border-color 0.3s ease;
}
.contact-social-link:hover{
background:#1B3F7A;
color:#ffffff;
border-color:#1B3F7A;
}
.contact-social-link i{
font-size:1rem;
}
.form-group-custom{
margin-bottom:20px;
}
.submit-btn-custom{
display:inline-flex;
align-items:center;
gap:10px;
background:#F05A1A;
color:#ffffff !important;
padding:14px 40px;
border-radius:6px;
font-weight:700;
font-size:1rem;
border:none;
cursor:pointer;
transition:background 0.3s ease,transform 0.2s ease,box-shadow 0.2s ease;
width:100%;
justify-content:center;
}
.submit-btn-custom:hover{
background:#d44d14;
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(240,90,26,0.4);
}
.contact-process-section{
background:#f8f9fa;
padding:72px 0;
}
.contact-process-card{
background:#ffffff;
border:1px solid #dee2e6;
border-radius:12px;
padding:32px 24px;
height:100%;
text-align:center;
transition:box-shadow 0.3s ease,transform 0.3s ease,border-color 0.3s ease;
position:relative;
overflow:hidden;
}
.contact-process-card::after{
content:'';
position:absolute;
bottom:0;
left:0;
right:0;
height:4px;
background:linear-gradient(90deg,#1B3F7A,#F05A1A);
transform:scaleX(0);
transform-origin:left;
transition:transform 0.35s ease;
}
.contact-process-card:hover{
box-shadow:0 8px 32px rgba(27,63,122,0.14);
transform:translateY(-5px);
border-color:transparent;
}
.contact-process-card:hover::after{
transform:scaleX(1);
}
.contact-process-header{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
margin-bottom:20px;
}
.contact-process-number{
width:48px;
height:48px;
min-width:48px;
background:#1B3F7A;
color:#ffffff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:1rem;
font-weight:800;
letter-spacing:0.02em;
flex-shrink:0;
}
.contact-process-icon{
width:56px;
height:56px;
min-width:56px;
background:rgba(240,90,26,0.10);
border:2px solid rgba(240,90,26,0.2);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.6rem;
color:#F05A1A;
transition:background 0.3s ease,color 0.3s ease,border-color 0.3s ease;
flex-shrink:0;
}
.contact-process-card:hover .contact-process-icon{
background:#F05A1A;
color:#ffffff;
border-color:#F05A1A;
}
.contact-process-title{
font-size:1.05rem;
font-weight:700;
color:#1B3F7A;
margin-bottom:12px;
line-height:1.35;
}
.contact-process-desc{
font-size:0.9rem;
color:#6c757d;
line-height:1.75;
margin:0;
}
.icon-md{font-size:1.6rem;}
.icon-lg{font-size:2rem;}
.icon-xl{font-size:2.5rem;}
.map-placeholder{
background:linear-gradient(135deg,#1B3F7A 0%,#0d2247 100%);
padding:72px 0;
text-align:center;
color:#ffffff;
position:relative;
overflow:hidden;
}
.map-placeholder::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(ellipse at 50% 50%,rgba(240,90,26,0.12) 0%,transparent 60%);
pointer-events:none;
}
.map-placeholder-inner{
position:relative;
z-index:1;
}
.map-placeholder-icon{
font-size:3rem;
color:rgba(255,255,255,0.4);
margin-bottom:20px;
display:block;
}
.map-placeholder-title{
font-size:1.5rem;
font-weight:700;
color:#ffffff;
margin-bottom:10px;
}
.map-placeholder-text{
font-size:1rem;
color:rgba(255,255,255,0.75);
line-height:1.7;
margin-bottom:0;
}
.btn-cta-white{
display:inline-flex;
align-items:center;
gap:10px;
background:#ffffff;
color:#1B3F7A !important;
padding:12px 28px;
border-radius:6px;
font-weight:700;
font-size:0.95rem;
border:2px solid #ffffff;
text-decoration:none;
transition:background 0.3s ease,color 0.3s ease,transform 0.2s ease;
}
.btn-cta-white:hover{
background:transparent;
color:#ffffff !important;
transform:translateY(-2px);
}
@media (max-width:767.98px){
.contact-form-card{
padding:24px 18px;
margin-bottom:24px;
}
.contact-info-card,
.contact-sidebar-card{
padding:24px 18px;
}
.contact-process-card{
padding:24px 18px;
}
.contact-process-header{
flex-direction:column;
gap:10px;
}
.contact-process-section{
padding:48px 0;
}
}
.feature-grid-card{
display:flex;
align-items:flex-start;
gap:16px;
background:#ffffff;
border-radius:12px;
padding:20px;
border:1px solid rgba(27,63,122,0.08);
box-shadow:0 4px 16px rgba(27,63,122,0.05);
height:100%;
transition:box-shadow 0.3s ease,transform 0.2s ease;
}
.feature-grid-card:hover{
box-shadow:0 8px 32px rgba(27,63,122,0.13);
transform:translateY(-3px);
}
.feature-grid-icon{
flex-shrink:0;
width:48px;
height:48px;
border-radius:10px;
background:rgba(27,63,122,0.08);
display:flex;
align-items:center;
justify-content:center;
font-size:1.3rem;
color:#1B3F7A;
transition:background 0.3s ease,color 0.3s ease;
}
.feature-grid-card:hover .feature-grid-icon{
background:#F05A1A;
color:#ffffff;
}
.feature-grid-content{
flex:1;
min-width:0;
}
.feature-grid-title{
font-size:1rem;
font-weight:700;
color:#1B3F7A;
margin-bottom:4px;
line-height:1.35;
}
.feature-grid-desc{
font-size:0.875rem;
color:#6c757d;
margin:0;
line-height:1.6;
}
.industry-badge-card{
display:flex;
flex-direction:column;
align-items:center;
background:#ffffff;
border-radius:12px;
border:1px solid rgba(27,63,122,0.1);
padding:20px 12px 16px;
text-align:center;
transition:box-shadow 0.3s ease,transform 0.2s ease,border-color 0.3s ease;
}
.industry-badge-card:hover{
box-shadow:0 8px 28px rgba(27,63,122,0.12);
border-color:rgba(27,63,122,0.25);
transform:translateY(-3px);
}
.industry-badge-icon{
display:inline-block;
width:60px;
height:60px;
line-height:60px;
text-align:center;
border-radius:50%;
background:rgba(27,63,122,0.08);
font-size:1.7rem;
color:#1B3F7A;
margin-bottom:12px;
transition:background 0.3s ease,color 0.3s ease;
}
.industry-badge-card:hover .industry-badge-icon{
background:#1B3F7A;
color:#ffffff;
}
.industry-badge-card span{
font-size:0.78rem;
font-weight:700;
color:#1B3F7A;
line-height:1.35;
text-transform:uppercase;
letter-spacing:0.04em;
}
.pricing-period-badge{
display:inline-block;
font-size:0.72rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.06em;
background:rgba(240,90,26,0.12);
color:#F05A1A;
border-radius:4px;
padding:3px 10px;
margin-bottom:10px;
}
.pricing-card-popular .pricing-period-badge{
background:rgba(255,255,255,0.2);
color:#ffffff;
}
.pricing-price-usd{
display:flex;
align-items:flex-start;
justify-content:center;
gap:2px;
line-height:1;
}
.pricing-currency-usd{
font-size:1.3rem;
font-weight:700;
color:#1B3F7A;
padding-top:8px;
}
.pricing-amount-usd{
font-size:3.2rem;
font-weight:800;
color:#1B3F7A;
line-height:1;
}
.pricing-card-popular .pricing-currency-usd,
.pricing-card-popular .pricing-amount-usd{
color:#ffffff;
}
.pricing-per-period{
font-size:0.85rem;
color:#6c757d;
margin-top:6px;
}
.pricing-card-popular .pricing-per-period{
color:rgba(255,255,255,0.8);
}
.pricing-best-value-note{
font-size:0.78rem;
color:#198754;
font-weight:600;
margin-top:4px;
}
.pricing-card-popular .pricing-best-value-note{
color:rgba(255,255,255,0.9);
}
.why-jskenya-section{
background:#ffffff;
border-bottom:1px solid rgba(27,63,122,0.08);
}
.wj-item{
display:flex;
align-items:flex-start;
gap:18px;
padding:36px 32px;
border-right:1px solid rgba(27,63,122,0.08);
height:100%;
position:relative;
transition:background 0.3s ease;
}
.wj-item:last-child{
border-right:none;
}
.wj-item:hover{
background:rgba(27,63,122,0.025);
}
.wj-item--1{border-top:3px solid #1B3F7A;}
.wj-item--2{border-top:3px solid #F05A1A;}
.wj-item--3{border-top:3px solid #1B3F7A;}
.wj-item--4{border-top:3px solid #F05A1A;}
.wj-icon{
flex-shrink:0;
width:48px;
height:48px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.3rem;
}
.wj-item--1 .wj-icon,
.wj-item--3 .wj-icon{background:rgba(27,63,122,0.08);color:#1B3F7A;}
.wj-item--2 .wj-icon,
.wj-item--4 .wj-icon{background:rgba(240,90,26,0.1);color:#F05A1A;}
.wj-item:hover .wj-icon{
background:#1B3F7A;
color:#ffffff;
transition:background 0.3s ease,color 0.3s ease;
}
.wj-item--2:hover .wj-icon,
.wj-item--4:hover .wj-icon{
background:#F05A1A;
}
.wj-content{flex:1;min-width:0;}
.wj-title{
font-size:1rem;
font-weight:700;
color:#1B3F7A;
margin-bottom:6px;
line-height:1.3;
}
.wj-desc{
font-size:0.875rem;
color:#6c757d;
margin:0;
line-height:1.6;
}
@media (max-width:767.98px){
.wj-item{
border-right:none;
border-bottom:1px solid rgba(27,63,122,0.08);
padding:24px 20px;
}
.wj-item:last-child{border-bottom:none;}
}
.service-intro-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 20px;
background:rgba(27,63,122,0.05);
border:1px solid rgba(27,63,122,0.12);
border-radius:100px;
font-size:0.875rem;
font-weight:600;
color:#1B3F7A;
transition:background 0.2s ease,border-color 0.2s ease;
}
.service-intro-badge:hover{
background:rgba(27,63,122,0.1);
border-color:rgba(27,63,122,0.2);
}
.service-intro-badge i{
color:#F05A1A;
}
.service-full-card{
display:flex;
align-items:flex-start;
gap:28px;
background:#ffffff;
border-radius:16px;
padding:32px;
border:1px solid rgba(27,63,122,0.08);
box-shadow:0 4px 20px rgba(27,63,122,0.05);
transition:box-shadow 0.3s ease,transform 0.25s ease,border-color 0.3s ease;
position:relative;
overflow:hidden;
}
.service-full-card::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:3px;
background:linear-gradient(90deg,#1B3F7A,#F05A1A);
transform:scaleX(0);
transform-origin:left;
transition:transform 0.35s ease;
}
.service-full-card:hover{
box-shadow:0 16px 48px rgba(27,63,122,0.13);
transform:translateY(-5px);
border-color:rgba(27,63,122,0.14);
}
.service-full-card:hover::before{
transform:scaleX(1);
}
.service-full-card-icon{
flex-shrink:0;
width:80px;
height:80px;
border-radius:16px;
background:rgba(27,63,122,0.08);
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
color:#1B3F7A;
transition:background 0.3s ease,color 0.3s ease,transform 0.3s ease;
}
.service-full-card:hover .service-full-card-icon{
background:#F05A1A;
color:#ffffff;
transform:scale(1.06) rotate(4deg);
}
.service-full-card-body{
flex:1;
min-width:0;
}
.service-full-card-title{
font-size:1.2rem;
font-weight:700;
color:#1B3F7A;
margin-bottom:10px;
line-height:1.3;
}
.service-full-card-desc{
font-size:0.9rem;
color:#6c757d;
line-height:1.7;
margin-bottom:16px;
}
.service-full-card .service-highlight-list li i{
color:#F05A1A;
margin-top:2px;
flex-shrink:0;
}
.btn-service-learn-more{
display:inline-flex !important;
align-items:center;
gap:6px;
font-size:0.875rem;
font-weight:700;
color:#1B3F7A !important;
text-decoration:none;
background:none;
border:none;
padding:0;
transition:color 0.2s ease,gap 0.2s ease;
}
.btn-service-learn-more:hover{
color:#F05A1A !important;
gap:10px;
}
.btn-service-learn-more i{
font-size:0.78rem;
}
.service-card-icon{
width:68px;
height:68px;
border-radius:14px;
background:rgba(27,63,122,0.08);
display:flex;
align-items:center;
justify-content:center;
font-size:1.8rem;
color:#1B3F7A;
margin-bottom:22px;
transition:background 0.3s ease,color 0.3s ease,transform 0.3s ease;
}
.service-card:hover .service-card-icon{
background:#F05A1A;
color:#ffffff;
transform:scale(1.06) rotate(3deg);
}
.service-card-title{
font-size:1.1rem;
font-weight:700;
color:#1B3F7A;
margin-bottom:10px;
line-height:1.3;
}
.service-card-desc{
font-size:0.875rem;
color:#6c757d;
line-height:1.65;
margin-bottom:18px;
flex:1;
}
.service-card-link{
display:inline-flex;
align-items:center;
gap:6px;
font-size:0.875rem;
font-weight:700;
color:#1B3F7A;
text-decoration:none;
transition:color 0.2s ease,gap 0.2s ease;
}
.service-card:hover .service-card-link{
color:#F05A1A;
gap:10px;
}
@media (max-width:767.98px){
.service-full-card{
flex-direction:column;
gap:20px;
padding:24px 20px;
}
.service-full-card-icon{
width:64px;
height:64px;
font-size:1.7rem;
}
}
.service-sidebar-sticky{
position:sticky;
top:90px;
max-height:calc(100vh - 110px);
overflow-y:auto;
overflow-x:hidden;
}
.service-sidebar-sticky::-webkit-scrollbar{
width:3px;
}
.service-sidebar-sticky::-webkit-scrollbar-track{
background:transparent;
}
.service-sidebar-sticky::-webkit-scrollbar-thumb{
background:rgba(27,63,122,0.2);
border-radius:2px;
}
.service-sidebar-sticky::-webkit-scrollbar-thumb:hover{
background:rgba(27,63,122,0.4);
}
.service-body-text p{
font-size:1rem;
color:#444c5c;
line-height:1.8;
margin-bottom:1.2rem;
}
.service-body-text p:last-child{
margin-bottom:0;
}
.content-heading{
font-size:1.6rem;
font-weight:800;
color:#1B3F7A;
margin-bottom:20px;
line-height:1.25;
}
.content-subheading{
font-size:1.25rem;
font-weight:700;
color:#1B3F7A;
margin-bottom:4px;
line-height:1.3;
padding-bottom:10px;
border-bottom:2px solid rgba(27,63,122,0.08);
}
.service-highlight-item{
display:flex;
align-items:flex-start;
gap:12px;
background:#ffffff;
border:1px solid rgba(27,63,122,0.08);
border-radius:10px;
padding:14px 16px;
font-size:0.9rem;
color:#2d3748;
font-weight:500;
line-height:1.5;
transition:box-shadow 0.2s ease,border-color 0.2s ease;
}
.service-highlight-item:hover{
box-shadow:0 4px 16px rgba(27,63,122,0.08);
border-color:rgba(27,63,122,0.16);
}
.shi-icon{
flex-shrink:0;
width:28px;
height:28px;
border-radius:50%;
background:rgba(240,90,26,0.1);
display:flex;
align-items:center;
justify-content:center;
font-size:0.9rem;
color:#F05A1A;
margin-top:1px;
}
.service-process-steps{
display:flex;
flex-direction:column;
gap:0;
}
.service-process-step{
display:flex;
gap:20px;
align-items:flex-start;
padding:20px 0;
border-bottom:1px solid rgba(27,63,122,0.07);
position:relative;
}
.service-process-step:last-child{
border-bottom:none;
}
.sps-number{
flex-shrink:0;
width:40px;
height:40px;
border-radius:50%;
background:#1B3F7A;
color:#ffffff;
font-size:0.85rem;
font-weight:800;
display:flex;
align-items:center;
justify-content:center;
margin-top:2px;
transition:background 0.3s ease;
}
.service-process-step:hover .sps-number{
background:#F05A1A;
}
.sps-content{flex:1;min-width:0;}
.sps-title{
font-size:1rem;
font-weight:700;
color:#1B3F7A;
margin-bottom:4px;
line-height:1.35;
}
.sps-desc{
font-size:0.875rem;
color:#6c757d;
line-height:1.65;
margin:0;
}
.service-faq-accordion .faq-item{
border:1px solid rgba(27,63,122,0.1);
border-radius:10px !important;
margin-bottom:10px;
overflow:hidden;
}
.service-faq-accordion .faq-button{
font-size:0.95rem;
font-weight:600;
color:#1B3F7A;
padding:16px 20px;
background:#ffffff;
}
.service-faq-accordion .faq-button:not(.collapsed){
background:rgba(27,63,122,0.04);
color:#1B3F7A;
box-shadow:none;
}
.service-faq-accordion .faq-body{
font-size:0.9rem;
color:#444c5c;
line-height:1.75;
padding:0 20px 16px;
}
.service-sidebar-card{
background:#ffffff;
border-radius:14px;
border:1px solid rgba(27,63,122,0.08);
padding:24px;
box-shadow:0 4px 20px rgba(27,63,122,0.05);
}
.service-sidebar-title{
font-size:0.82rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.08em;
color:#1B3F7A;
margin-bottom:16px;
padding-bottom:10px;
border-bottom:2px solid rgba(27,63,122,0.08);
}
.service-sidebar-text{
font-size:0.875rem;
color:#6c757d;
line-height:1.65;
margin-bottom:16px;
}
.service-sidebar-list{
list-style:none;
padding:0;
margin:0;
}
.service-sidebar-list li{
display:flex;
align-items:flex-start;
gap:10px;
padding:8px 0;
font-size:0.875rem;
color:#2d3748;
border-bottom:1px solid rgba(27,63,122,0.06);
line-height:1.5;
}
.service-sidebar-list li:last-child{
border-bottom:none;
padding-bottom:0;
}
.service-sidebar-list li i{
color:#F05A1A;
margin-top:2px;
flex-shrink:0;
width:16px;
}
.service-sidebar-list li a{
color:inherit;
transition:color 0.2s ease;
}
.service-sidebar-list li a:hover{
color:#F05A1A;
}
.service-tech-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.service-tech-tag{
display:inline-block;
padding:4px 12px;
background:rgba(27,63,122,0.07);
border:1px solid rgba(27,63,122,0.12);
border-radius:100px;
font-size:0.78rem;
font-weight:600;
color:#1B3F7A;
transition:background 0.2s ease,color 0.2s ease;
}
.service-tech-tag:hover{
background:#1B3F7A;
color:#ffffff;
border-color:#1B3F7A;
}
@media (max-width:991.98px){
.service-sidebar-sticky{
position:static;
max-height:none;
overflow-y:visible;
overflow-x:visible;
padding-right:0;
}
.col-lg-4 .service-sidebar-sticky{
margin-top:8px;
}
.page-hero-section{
padding:80px 0 48px;
}
.page-hero-subtitle{
font-size:1rem;
max-width:100%;
padding:0 8px;
}
}
@media (max-width:767.98px){
.page-hero-section{
padding:70px 0 40px;
text-align:center;
}
.page-hero-title{
font-size:clamp(1.5rem,6vw,2rem);
margin-bottom:12px;
}
.page-hero-subtitle{
font-size:0.95rem;
line-height:1.65;
padding:0 4px;
margin-bottom:24px;
}
.page-hero-service-icon{
width:60px;
height:60px;
font-size:1.5rem;
margin-bottom:16px;
}
.hero-cta-group{
flex-direction:column;
align-items:stretch;
gap:12px;
margin-bottom:32px;
padding:0 16px;
}
.btn-hero-primary,
.btn-hero-outline{
width:100%;
padding:14px 20px;
font-size:0.95rem;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
}
.page-hero-breadcrumb{
font-size:0.8rem;
flex-wrap:wrap;
justify-content:center !important;
}
.section-title{
font-size:clamp(1.4rem,5vw,1.8rem) !important;
}
.section-subtitle{
font-size:0.9rem;
padding:0 4px;
}
.content-heading{font-size:1.3rem;}
.content-subheading{font-size:1.05rem;}
.service-body-text p{
font-size:0.9rem;
line-height:1.75;
}
.service-highlight-item{
padding:12px 14px;
font-size:0.875rem;
}
.service-process-step{
gap:14px;
padding:16px 0;
}
.sps-number{
width:34px;
height:34px;
font-size:0.8rem;
flex-shrink:0;
}
.sps-title{font-size:0.95rem;}
.sps-desc{font-size:0.84rem;}
.service-faq-accordion .faq-button{
font-size:0.875rem;
padding:14px 16px;
}
.service-faq-accordion .faq-body{
font-size:0.875rem;
padding:0 16px 14px;
}
.service-sidebar-card{
padding:20px 16px;
}
.service-sidebar-title{
font-size:0.78rem;
}
.service-sidebar-list li{
font-size:0.84rem;
}
.service-full-card{
flex-direction:column;
gap:16px;
padding:22px 18px;
}
.service-full-card-icon{
width:60px;
height:60px;
font-size:1.6rem;
}
.service-full-card-title{font-size:1.1rem;}
.service-full-card-desc{font-size:0.875rem;}
.process-step{
padding:24px 20px;
}
.process-step-number{font-size:2.2rem;}
.process-step-icon{width:52px;height:52px;font-size:1.35rem;}
.process-step-title{font-size:0.95rem;}
.process-step-desc{font-size:0.82rem;}
.wj-item{
padding:22px 18px;
}
.cta-buttons{
flex-direction:column;
align-items:stretch;
gap:12px;
padding:0 8px;
}
.btn-cta-white,
.btn-cta-outline,
.btn-cta-primary{
width:100%;
text-align:center;
justify-content:center;
}
.contact-process-card{
padding:22px 18px;
}
}
@media (max-width:480px){
.page-hero-section{
padding:64px 0 36px;
}
.page-hero-title{
font-size:1.45rem;
}
.hero-cta-group{
padding:0 8px;
}
.btn-hero-primary,
.btn-hero-outline{
font-size:0.9rem;
padding:13px 16px;
}
.hero-quick-stats{
padding:12px 10px;
}
.quick-stat{padding:0 6px;}
.quick-stat-number{font-size:1rem;}
.quick-stat-label{font-size:0.56rem;}
.quick-stat-divider{
height:28px;
}
.section-label{font-size:0.72rem;}
.section-title{font-size:1.3rem !important;}
.feature-grid-card{
padding:16px 14px;
gap:12px;
}
.feature-grid-icon{
width:40px;
height:40px;
font-size:1.1rem;
}
.industry-badge-icon{
width:48px;
height:48px;
font-size:1.4rem;
line-height:48px;
}
}
.gd-service-card{
background:#fff;
border:1px solid #e8ecf0;
border-radius:16px;
overflow:hidden;
height:100%;
display:flex;
flex-direction:column;
transition:box-shadow 0.25s,transform 0.25s;
}
.gd-service-card:hover{
box-shadow:0 12px 40px rgba(27,63,122,0.12);
transform:translateY(-4px);
}
.gd-service-card-header{
display:flex;
align-items:center;
gap:16px;
padding:22px 24px 18px;
border-bottom:1px solid #f0f3f7;
}
.gd-header--logo{background:linear-gradient(135deg,#1B3F7A 0%,#2a5db0 100%);}
.gd-header--profile{background:linear-gradient(135deg,#F05A1A 0%,#f07a4a 100%);}
.gd-header--letterhead{background:linear-gradient(135deg,#0f7c5a 0%,#17a674 100%);}
.gd-header--stamp{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%);}
.gd-header--poster{background:linear-gradient(135deg,#b91c1c 0%,#ef4444 100%);}
.gd-header--flyer{background:linear-gradient(135deg,#b45309 0%,#f59e0b 100%);}
.gd-service-icon-wrap{
width:52px;
height:52px;
border-radius:12px;
background:rgba(255,255,255,0.2);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
font-size:1.5rem;
color:#fff;
-webkit-backdrop-filter:blur(4px);
backdrop-filter:blur(4px);
}
.gd-service-title{
font-size:1rem;
font-weight:700;
color:#fff;
margin:0 0 4px;
line-height:1.3;
}
.gd-service-badge{
display:inline-block;
font-size:0.72rem;
font-weight:600;
color:rgba(255,255,255,0.85);
letter-spacing:0.04em;
text-transform:uppercase;
}
.gd-service-desc{
font-size:0.9rem;
color:#4b5563;
line-height:1.75;
padding:18px 24px 14px;
margin:0;
}
.gd-deliverable-list{
list-style:none;
padding:0 24px 24px;
margin:0;
flex:1;
}
.gd-deliverable-list li{
font-size:0.875rem;
color:#374151;
line-height:1.6;
padding:6px 0 6px 26px;
position:relative;
border-bottom:1px solid #f3f4f6;
}
.gd-deliverable-list li:last-child{border-bottom:none;}
.gd-deliverable-list li::before{
content:'\f058';
font-family:'Font Awesome 6 Free';
font-weight:900;
position:absolute;
left:0;
top:7px;
font-size:0.8rem;
color:#1B3F7A;
}
.ds-card{
border-radius:14px;
overflow:hidden;
box-shadow:0 4px 20px rgba(0,0,0,0.09);
background:#fff;
transition:box-shadow 0.25s,transform 0.25s;
height:100%;
display:flex;
flex-direction:column;
}
.ds-card:hover{
box-shadow:0 10px 36px rgba(27,63,122,0.16);
transform:translateY(-4px);
}
.ds-preview{
width:100%;
height:220px;
position:relative;
overflow:hidden;
flex-shrink:0;
}
.ds-card-label{
padding:12px 16px;
font-size:0.82rem;
font-weight:700;
color:#1B3F7A;
background:#f8f9fb;
text-align:center;
letter-spacing:0.02em;
border-top:1px solid #e8ecf0;
margin-top:auto;
}
.ds-preview--logo{
background:linear-gradient(145deg,#f0f4ff 0%,#dde6f5 100%);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:20px;
gap:16px;
}
.ds-logo-stage{
display:flex;
align-items:center;
gap:14px;
}
.ds-logo-mark{
width:56px;
height:56px;
border-radius:14px;
background:linear-gradient(135deg,#1B3F7A 0%,#2a5db0 100%);
display:flex;
align-items:center;
justify-content:center;
font-size:1.3rem;
font-weight:800;
color:#fff;
letter-spacing:-1px;
box-shadow:0 4px 14px rgba(27,63,122,0.35);
flex-shrink:0;
}
.ds-logo-wordmark{
display:flex;
flex-direction:column;
}
.ds-logo-name{
display:block;
font-size:1.1rem;
font-weight:800;
color:#1B3F7A;
line-height:1.1;
letter-spacing:-0.5px;
}
.ds-logo-tagline{
display:block;
font-size:0.62rem;
font-weight:600;
color:#F05A1A;
text-transform:uppercase;
letter-spacing:1.5px;
margin-top:4px;
}
.ds-logo-variants{
display:flex;
gap:10px;
align-items:center;
}
.ds-logo-var{
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
border-radius:8px;
}
.ds-logo-var--sm{
width:38px;
height:38px;
font-size:0.85rem;
background:linear-gradient(135deg,#1B3F7A,#2a5db0);
color:#fff;
}
.ds-logo-var--outline{
background:transparent;
border:2px solid #1B3F7A;
color:#1B3F7A;
}
.ds-logo-var--dark{
background:#111827;
color:#fff;
}
.ds-preview--profile{
background:#fff;
display:flex;
flex-direction:row;
overflow:hidden;
}
.ds-profile-cover{
width:45%;
background:linear-gradient(160deg,#F05A1A 0%,#c8410c 100%);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:16px 12px;
gap:6px;
flex-shrink:0;
}
.ds-profile-cover-logo{
width:40px;
height:40px;
border-radius:10px;
background:rgba(255,255,255,0.25);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:4px;
}
.ds-pc-mark{
font-size:0.9rem;
font-weight:800;
color:#fff;
}
.ds-profile-cover-title{
font-size:0.75rem;
font-weight:700;
color:#fff;
text-align:center;
line-height:1.2;
}
.ds-profile-cover-sub{
font-size:0.6rem;
color:rgba(255,255,255,0.7);
letter-spacing:0.08em;
}
.ds-profile-body{
flex:1;
padding:14px 12px;
display:flex;
flex-direction:column;
gap:6px;
justify-content:center;
}
.ds-profile-section-bar{
height:4px;
width:28px;
background:#F05A1A;
border-radius:2px;
margin-bottom:6px;
}
.ds-text-block{
height:6px;
border-radius:3px;
background:#d1d5db;
}
.ds-text-block--wide{width:100%;}
.ds-text-block--mid{width:72%;}
.ds-text-block--narrow{width:45%;}
.ds-tb-margin{margin-top:5px;}
.ds-preview--letterhead{
background:#fff;
display:flex;
flex-direction:column;
padding:0;
}
.ds-lh-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 14px 8px;
background:#fff;
border-bottom:1px solid #f0f3f7;
}
.ds-lh-logo-area{
display:flex;
align-items:center;
gap:8px;
}
.ds-lh-mark{
width:30px;
height:30px;
border-radius:6px;
background:linear-gradient(135deg,#1B3F7A,#2a5db0);
display:flex;
align-items:center;
justify-content:center;
font-size:0.62rem;
font-weight:800;
color:#fff;
flex-shrink:0;
}
.ds-lh-company-name{
font-size:0.65rem;
font-weight:700;
color:#1B3F7A;
line-height:1.1;
}
.ds-lh-contact{
display:flex;
flex-direction:column;
gap:4px;
align-items:flex-end;
}
.ds-lh-contact-line{
height:5px;
width:60px;
background:#d1d5db;
border-radius:2px;
}
.ds-lh-contact-line--short{width:40px;}
.ds-lh-accent-bar{
height:3px;
background:linear-gradient(90deg,#1B3F7A 60%,#F05A1A 100%);
}
.ds-lh-body{
flex:1;
padding:10px 14px 6px;
display:flex;
flex-direction:column;
gap:0;
justify-content:center;
}
.ds-lh-footer{
padding:0 14px 10px;
margin-top:auto;
}
.ds-lh-footer-line{
height:1px;
background:#e5e7eb;
width:100%;
margin-top:8px;
position:relative;
}
.ds-lh-footer-line::after{
content:'';
display:block;
height:3px;
width:28px;
background:#F05A1A;
border-radius:2px;
position:absolute;
top:-1px;
left:0;
}
.ds-preview--stamp{
background:radial-gradient(circle at 50% 45%,#f5f3ff 0%,#ede9fe 100%);
display:flex;
align-items:center;
justify-content:center;
}
.ds-stamp-outer{
position:relative;
width:140px;
height:140px;
display:flex;
align-items:center;
justify-content:center;
}
.ds-stamp-ring{
width:120px;
height:120px;
border-radius:50%;
border:3px solid #7c3aed;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
.ds-stamp-ring::before{
content:'';
position:absolute;
inset:5px;
border-radius:50%;
border:1.5px dashed rgba(124,58,237,0.45);
}
.ds-stamp-inner{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
padding:0 10px;
text-align:center;
}
.ds-stamp-star{
font-size:0.9rem;
color:#7c3aed;
margin-bottom:2px;
}
.ds-stamp-company{
font-size:0.52rem;
font-weight:800;
color:#5b21b6;
letter-spacing:1px;
text-transform:uppercase;
line-height:1.2;
}
.ds-stamp-reg{
font-size:0.45rem;
color:#7c3aed;
letter-spacing:0.5px;
opacity:0.8;
}
.ds-stamp-arc-top,
.ds-stamp-arc-bottom{
position:absolute;
font-size:0.45rem;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
color:#7c3aed;
width:100%;
text-align:center;
}
.ds-stamp-arc-top{top:6px;}
.ds-stamp-arc-bottom{bottom:6px;}
.ds-preview--poster{
background:#111827;
display:flex;
flex-direction:column;
overflow:hidden;
}
.ds-poster-hero{
flex:0 0 130px;
background:linear-gradient(145deg,#b91c1c 0%,#7f1d1d 100%);
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
padding:16px 20px;
position:relative;
overflow:hidden;
}
.ds-poster-hero::after{
content:'';
position:absolute;
right:-20px;
top:-20px;
width:90px;
height:90px;
border-radius:50%;
background:rgba(255,255,255,0.06);
}
.ds-poster-eyebrow{
font-size:0.52rem;
font-weight:700;
letter-spacing:2px;
color:#fca5a5;
text-transform:uppercase;
margin-bottom:4px;
}
.ds-poster-headline{
font-size:1.4rem;
font-weight:900;
color:#fff;
line-height:1;
letter-spacing:-1px;
}
.ds-poster-date{
font-size:0.6rem;
color:rgba(255,255,255,0.65);
margin-top:6px;
letter-spacing:0.5px;
}
.ds-poster-body{
flex:1;
background:#1f2937;
padding:12px 16px;
display:flex;
flex-direction:column;
gap:8px;
justify-content:center;
}
.ds-poster-detail-row{
display:flex;
align-items:center;
gap:8px;
}
.ds-poster-icon-dot{
width:6px;
height:6px;
border-radius:50%;
background:#ef4444;
flex-shrink:0;
}
.ds-poster-cta{
display:inline-block;
margin-top:4px;
align-self:flex-start;
background:#ef4444;
color:#fff;
font-size:0.6rem;
font-weight:700;
padding:5px 12px;
border-radius:20px;
letter-spacing:0.5px;
}
.ds-preview--flyer{
background:#fff;
display:flex;
flex-direction:row;
overflow:hidden;
}
.ds-flyer-left{
width:38%;
background:linear-gradient(160deg,#b45309 0%,#78350f 100%);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:16px 8px;
gap:4px;
flex-shrink:0;
}
.ds-flyer-icon{
font-size:1.3rem;
color:rgba(255,255,255,0.6);
margin-bottom:4px;
}
.ds-flyer-offer{
font-size:1.3rem;
font-weight:900;
color:#fff;
line-height:1;
letter-spacing:-1px;
}
.ds-flyer-promo{
font-size:0.56rem;
font-weight:700;
color:rgba(255,255,255,0.75);
letter-spacing:1px;
text-transform:uppercase;
text-align:center;
}
.ds-flyer-right{
flex:1;
padding:14px 12px;
display:flex;
flex-direction:column;
justify-content:center;
}
.ds-flyer-brand{
font-size:0.75rem;
font-weight:800;
color:#b45309;
letter-spacing:-0.3px;
margin-bottom:6px;
}
.ds-flyer-cta{
display:inline-block;
margin-top:8px;
background:#b45309;
color:#fff;
font-size:0.56rem;
font-weight:700;
padding:4px 10px;
border-radius:16px;
align-self:flex-start;
letter-spacing:0.4px;
}
@media (max-width:991.98px){
.ds-preview{height:200px;}
}
@media (max-width:767.98px){
.gd-service-card-header{padding:18px 18px 14px;gap:12px;}
.gd-service-icon-wrap{width:44px;height:44px;font-size:1.2rem;}
.gd-service-title{font-size:0.92rem;}
.gd-service-desc{padding:14px 18px 10px;font-size:0.85rem;}
.gd-deliverable-list{padding:0 18px 18px;}
.ds-preview{height:190px;}
.ds-poster-hero{flex:0 0 110px;}
.ds-poster-headline{font-size:1.15rem;}
}
@media (max-width:480px){
.ds-preview{height:180px;}
.ds-stamp-outer{width:120px;height:120px;}
.ds-stamp-ring{width:102px;height:102px;}
}
.ec-feature-card{
background:#fff;
border:1px solid #e8ecf0;
border-radius:16px;
overflow:hidden;
height:100%;
display:flex;
flex-direction:column;
transition:box-shadow 0.25s,transform 0.25s;
}
.ec-feature-card:hover{
box-shadow:0 12px 40px rgba(27,63,122,0.12);
transform:translateY(-4px);
}
.ec-feature-header{
display:flex;
align-items:center;
gap:16px;
padding:22px 24px 18px;
border-bottom:1px solid rgba(255,255,255,0.12);
}
.ec-header--storefront{background:linear-gradient(135deg,#1B3F7A 0%,#2a5db0 100%);}
.ec-header--payments{background:linear-gradient(135deg,#0f7c5a 0%,#17a674 100%);}
.ec-header--inventory{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%);}
.ec-header--orders{background:linear-gradient(135deg,#F05A1A 0%,#f07a4a 100%);}
.ec-header--marketing{background:linear-gradient(135deg,#b91c1c 0%,#ef4444 100%);}
.ec-header--seo{background:linear-gradient(135deg,#b45309 0%,#f59e0b 100%);}
.ec-feature-icon-wrap{
width:52px;
height:52px;
border-radius:12px;
background:rgba(255,255,255,0.2);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
font-size:1.5rem;
color:#fff;
-webkit-backdrop-filter:blur(4px);
backdrop-filter:blur(4px);
}
.ec-feature-title{
font-size:1rem;
font-weight:700;
color:#fff;
margin:0 0 4px;
line-height:1.3;
}
.ec-feature-badge{
display:inline-block;
font-size:0.72rem;
font-weight:600;
color:rgba(255,255,255,0.85);
letter-spacing:0.04em;
text-transform:uppercase;
}
.ec-feature-desc{
font-size:0.9rem;
color:#4b5563;
line-height:1.75;
padding:18px 24px 14px;
margin:0;
}
.ec-detail-list{
list-style:none;
padding:0 24px 24px;
margin:0;
flex:1;
}
.ec-detail-list li{
font-size:0.875rem;
color:#374151;
line-height:1.6;
padding:6px 0 6px 26px;
position:relative;
border-bottom:1px solid #f3f4f6;
}
.ec-detail-list li:last-child{border-bottom:none;}
.ec-detail-list li::before{
content:'\f058';
font-family:'Font Awesome 6 Free';
font-weight:900;
position:absolute;
left:0;
top:7px;
font-size:0.8rem;
color:#1B3F7A;
}
.ec-platform-card{
border-radius:16px;
padding:28px 24px;
height:100%;
display:flex;
flex-direction:column;
gap:12px;
transition:box-shadow 0.25s,transform 0.25s;
border:2px solid transparent;
}
.ec-platform-card:hover{
box-shadow:0 10px 36px rgba(0,0,0,0.1);
transform:translateY(-4px);
}
.ec-platform--woo{background:#f0f4ff;border-color:#c7d7f5;}
.ec-platform--laravel{background:#fff4f0;border-color:#ffd4c2;}
.ec-platform--headless{background:#f0fdf7;border-color:#b3f0d9;}
.ec-platform-icon{
width:56px;
height:56px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.5rem;
flex-shrink:0;
}
.ec-platform--woo .ec-platform-icon{background:#1B3F7A;color:#fff;}
.ec-platform--laravel .ec-platform-icon{background:#F05A1A;color:#fff;}
.ec-platform--headless .ec-platform-icon{background:#0f7c5a;color:#fff;}
.ec-platform-name{
font-size:1.05rem;
font-weight:800;
color:#111827;
margin:0;
}
.ec-platform--woo .ec-platform-name{color:#1B3F7A;}
.ec-platform--laravel .ec-platform-name{color:#c2420a;}
.ec-platform--headless .ec-platform-name{color:#0f7c5a;}
.ec-platform-desc{
font-size:0.875rem;
color:#4b5563;
line-height:1.7;
margin:0;
flex:1;
}
.ec-platform-best-for{
background:rgba(255,255,255,0.65);
border-radius:10px;
padding:12px 14px;
margin-top:4px;
}
.ec-pbf-label{
display:block;
font-size:0.68rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.08em;
color:#9ca3af;
margin-bottom:4px;
}
.ec-pbf-text{
font-size:0.82rem;
color:#374151;
line-height:1.6;
}
.ec-mockup-wrapper{
border-radius:16px;
overflow:hidden;
box-shadow:0 20px 60px rgba(27,63,122,0.18);
}
.ec-mockup-browser{
border-radius:12px;
overflow:hidden;
border:1px solid #e0e7ef;
}
.ec-mockup-browser-bar{
background:#f3f4f6;
padding:10px 14px;
display:flex;
align-items:center;
gap:12px;
border-bottom:1px solid #e5e7eb;
}
.ec-mockup-dots{
display:flex;
gap:5px;
flex-shrink:0;
}
.ec-dot{
width:10px;
height:10px;
border-radius:50%;
}
.ec-dot--red{background:#ef4444;}
.ec-dot--yellow{background:#f59e0b;}
.ec-dot--green{background:#10b981;}
.ec-mockup-url-bar{
flex:1;
background:#fff;
border-radius:20px;
padding:4px 14px;
font-size:0.72rem;
color:#6b7280;
text-align:center;
border:1px solid #e5e7eb;
font-family:monospace;
}
.ec-mockup-screen{
background:#fff;
overflow:hidden;
}
.ec-mock-nav{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 20px;
background:#1B3F7A;
gap:16px;
}
.ec-mock-logo{
font-size:0.9rem;
font-weight:800;
color:#fff;
letter-spacing:-0.3px;
flex-shrink:0;
}
.ec-mock-nav-links{
display:flex;
gap:10px;
align-items:center;
}
.ec-mock-nav-link{
height:6px;
width:30px;
border-radius:3px;
background:rgba(255,255,255,0.3);
}
.ec-mock-nav-link--wide{width:46px;}
.ec-mock-nav-icons{
display:flex;
align-items:center;
gap:12px;
color:rgba(255,255,255,0.8);
font-size:0.85rem;
flex-shrink:0;
}
.ec-mock-cart-icon{
position:relative;
}
.ec-mock-cart-badge{
position:absolute;
top:-5px;
right:-7px;
width:13px;
height:13px;
border-radius:50%;
background:#F05A1A;
font-size:0.48rem;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
}
.ec-mock-hero-banner{
background:linear-gradient(135deg,#1B3F7A 0%,#0d2550 100%);
padding:20px 24px;
display:flex;
align-items:center;
justify-content:space-between;
min-height:110px;
overflow:hidden;
position:relative;
}
.ec-mock-hero-banner::after{
content:'';
position:absolute;
right:100px;
top:-30px;
width:120px;
height:120px;
border-radius:50%;
background:rgba(255,255,255,0.04);
}
.ec-mock-hero-content{
display:flex;
flex-direction:column;
gap:5px;
z-index:1;
}
.ec-mock-hero-eyebrow{
font-size:0.55rem;
font-weight:700;
color:#F05A1A;
text-transform:uppercase;
letter-spacing:1.5px;
}
.ec-mock-hero-headline{
font-size:1.05rem;
font-weight:900;
color:#fff;
line-height:1.1;
letter-spacing:-0.5px;
}
.ec-mock-hero-btn{
margin-top:6px;
display:inline-block;
background:#F05A1A;
color:#fff;
font-size:0.6rem;
font-weight:700;
padding:5px 12px;
border-radius:20px;
align-self:flex-start;
letter-spacing:0.3px;
}
.ec-mock-hero-image{
width:90px;
height:90px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
z-index:1;
}
.ec-mock-product-shape{
width:70px;
height:70px;
border-radius:50%;
background:radial-gradient(circle at 35% 35%,rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.05) 100%);
border:2px solid rgba(255,255,255,0.15);
position:relative;
}
.ec-mock-product-shape::after{
content:'';
position:absolute;
inset:12px;
border-radius:50%;
background:rgba(240,90,26,0.35);
}
.ec-mock-products{
padding:16px 20px;
background:#f9fafb;
}
.ec-mock-section-title{
font-size:0.72rem;
font-weight:700;
color:#1B3F7A;
text-transform:uppercase;
letter-spacing:0.08em;
margin-bottom:10px;
}
.ec-mock-product-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
}
.ec-mock-product-card{
background:#fff;
border-radius:8px;
overflow:hidden;
border:1px solid #e5e7eb;
box-shadow:0 1px 4px rgba(0,0,0,0.05);
}
.ec-mock-product-img{
height:60px;
position:relative;
}
.ec-mock-product-img--1{background:linear-gradient(135deg,#dde6f5,#b0c7e8);}
.ec-mock-product-img--2{background:linear-gradient(135deg,#fde8d8,#f8c4a0);}
.ec-mock-product-img--3{background:linear-gradient(135deg,#d1fae5,#a7f3d0);}
.ec-mock-product-img--4{background:linear-gradient(135deg,#ede9fe,#c4b5fd);}
.ec-mock-badge{
position:absolute;
top:5px;
left:5px;
background:#F05A1A;
color:#fff;
font-size:0.45rem;
font-weight:700;
padding:2px 6px;
border-radius:10px;
letter-spacing:0.3px;
}
.ec-mock-product-info{
padding:6px 7px 8px;
display:flex;
flex-direction:column;
gap:4px;
}
.ec-mock-product-name{
height:5px;
background:#d1d5db;
border-radius:3px;
width:80%;
}
.ec-mock-product-price{
display:flex;
align-items:center;
}
.ec-mock-price-tag{
font-size:0.5rem;
font-weight:700;
color:#1B3F7A;
}
.ec-mock-trust-bar{
display:flex;
align-items:center;
justify-content:space-around;
padding:10px 16px;
background:#1B3F7A;
border-top:2px solid #F05A1A;
}
.ec-mock-trust-item{
display:flex;
align-items:center;
gap:5px;
font-size:0.6rem;
color:rgba(255,255,255,0.85);
font-weight:600;
}
.ec-mock-trust-item i{
font-size:0.75rem;
color:#F05A1A;
}
@media (max-width:991.98px){
.ec-mock-product-grid{grid-template-columns:repeat(4,1fr);}
.ec-mock-nav-links{display:none;}
}
@media (max-width:767.98px){
.ec-feature-header{padding:18px 18px 14px;gap:12px;}
.ec-feature-icon-wrap{width:44px;height:44px;font-size:1.2rem;}
.ec-feature-title{font-size:0.92rem;}
.ec-feature-desc{padding:14px 18px 10px;font-size:0.85rem;}
.ec-detail-list{padding:0 18px 18px;}
.ec-platform-card{padding:22px 18px;}
.ec-mock-hero-banner{min-height:90px;padding:14px 16px;}
.ec-mock-hero-image{width:70px;height:70px;}
.ec-mock-product-shape{width:54px;height:54px;}
.ec-mock-hero-headline{font-size:0.9rem;}
.ec-mock-products{padding:12px 14px;}
.ec-mock-trust-item span{display:none;}
.ec-mock-trust-item{gap:0;}
}
@media (max-width:480px){
.ec-mock-product-grid{grid-template-columns:repeat(2,1fr);}
.ec-mock-hero-image{display:none;}
.ec-mockup-browser-bar{padding:8px 10px;}
}
.cs-system-card{
background:#fff;
border:1px solid #e8ecf0;
border-radius:16px;
overflow:hidden;
height:100%;
display:flex;
flex-direction:column;
transition:box-shadow 0.25s,transform 0.25s;
}
.cs-system-card:hover{
box-shadow:0 12px 40px rgba(27,63,122,0.12);
transform:translateY(-4px);
}
.cs-system-header{
display:flex;
align-items:center;
gap:16px;
padding:22px 24px 18px;
}
.cs-header--health{background:linear-gradient(135deg,#0f7c5a 0%,#17a674 100%);}
.cs-header--school{background:linear-gradient(135deg,#1B3F7A 0%,#2a5db0 100%);}
.cs-header--finance{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%);}
.cs-header--fleet{background:linear-gradient(135deg,#b45309 0%,#f59e0b 100%);}
.cs-header--hr{background:linear-gradient(135deg,#F05A1A 0%,#f07a4a 100%);}
.cs-header--erp{background:linear-gradient(135deg,#b91c1c 0%,#ef4444 100%);}
.cs-system-icon-wrap{
width:52px;
height:52px;
border-radius:12px;
background:rgba(255,255,255,0.22);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
font-size:1.5rem;
color:#fff;
-webkit-backdrop-filter:blur(4px);
backdrop-filter:blur(4px);
}
.cs-system-title{
font-size:1rem;
font-weight:700;
color:#fff;
margin:0 0 4px;
line-height:1.3;
}
.cs-system-badge{
display:inline-block;
font-size:0.72rem;
font-weight:600;
color:rgba(255,255,255,0.85);
letter-spacing:0.04em;
text-transform:uppercase;
}
.cs-system-desc{
font-size:0.9rem;
color:#4b5563;
line-height:1.75;
padding:18px 24px 14px;
margin:0;
}
.cs-detail-list{
list-style:none;
padding:0 24px 24px;
margin:0;
flex:1;
}
.cs-detail-list li{
font-size:0.875rem;
color:#374151;
line-height:1.6;
padding:6px 0 6px 26px;
position:relative;
border-bottom:1px solid #f3f4f6;
}
.cs-detail-list li:last-child{border-bottom:none;}
.cs-detail-list li::before{
content:'\f058';
font-family:'Font Awesome 6 Free';
font-weight:900;
position:absolute;
left:0;
top:7px;
font-size:0.8rem;
color:#1B3F7A;
}
.cs-cap-card{
background:#fff;
border:1px solid #e8ecf0;
border-radius:14px;
padding:22px 18px;
height:100%;
text-align:center;
transition:box-shadow 0.25s,transform 0.25s;
display:flex;
flex-direction:column;
align-items:center;
}
.cs-cap-card:hover{
box-shadow:0 8px 28px rgba(27,63,122,0.1);
transform:translateY(-3px);
}
.cs-cap-icon{
width:52px;
height:52px;
border-radius:50%;
background:linear-gradient(135deg,#e8eef8,#d0dcf0);
display:flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
color:#1B3F7A;
margin-bottom:14px;
flex-shrink:0;
}
.cs-cap-title{
font-size:0.88rem;
font-weight:700;
color:#111827;
margin:0 0 8px;
line-height:1.3;
}
.cs-cap-desc{
font-size:0.8rem;
color:#6b7280;
line-height:1.65;
margin:0;
}
.cs-dashboard-mockup{
display:flex;
border-radius:16px;
overflow:hidden;
box-shadow:0 20px 60px rgba(27,63,122,0.18);
border:1px solid #e0e7ef;
min-height:400px;
}
.cs-dash-sidebar{
width:160px;
background:#0f2044;
flex-shrink:0;
padding:20px 0;
display:flex;
flex-direction:column;
gap:0;
}
.cs-dash-brand{
display:flex;
align-items:center;
gap:10px;
padding:0 16px 20px;
border-bottom:1px solid rgba(255,255,255,0.08);
margin-bottom:12px;
}
.cs-dash-brand-icon{
width:30px;
height:30px;
border-radius:8px;
background:#F05A1A;
display:flex;
align-items:center;
justify-content:center;
font-size:0.85rem;
font-weight:800;
color:#fff;
flex-shrink:0;
}
.cs-dash-brand span{
font-size:0.8rem;
font-weight:700;
color:#fff;
letter-spacing:-0.2px;
}
.cs-dash-nav{
display:flex;
flex-direction:column;
gap:2px;
padding:0 8px;
}
.cs-dash-nav-item{
display:flex;
align-items:center;
gap:10px;
padding:9px 10px;
border-radius:8px;
font-size:0.75rem;
color:rgba(255,255,255,0.5);
cursor:default;
transition:background 0.15s;
}
.cs-dash-nav-item i{
font-size:0.8rem;
width:14px;
text-align:center;
}
.cs-dash-nav-item--active{
background:rgba(240,90,26,0.2);
color:#F05A1A;
font-weight:600;
}
.cs-dash-main{
flex:1;
background:#f4f6fb;
display:flex;
flex-direction:column;
overflow:hidden;
}
.cs-dash-topbar{
background:#fff;
padding:12px 20px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid #e8ecf0;
flex-shrink:0;
}
.cs-dash-page-title{
font-size:0.85rem;
font-weight:700;
color:#111827;
}
.cs-dash-topbar-right{
display:flex;
align-items:center;
gap:12px;
}
.cs-dash-search{
width:28px;
height:28px;
border-radius:8px;
background:#f4f6fb;
display:flex;
align-items:center;
justify-content:center;
font-size:0.72rem;
color:#9ca3af;
}
.cs-dash-avatar{
width:28px;
height:28px;
border-radius:50%;
background:linear-gradient(135deg,#1B3F7A,#2a5db0);
display:flex;
align-items:center;
justify-content:center;
font-size:0.6rem;
font-weight:700;
color:#fff;
}
.cs-dash-kpi-row{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
padding:16px 16px 0;
flex-shrink:0;
}
.cs-dash-kpi{
border-radius:12px;
padding:14px 14px 12px;
display:flex;
align-items:flex-start;
gap:10px;
position:relative;
overflow:hidden;
}
.cs-kpi--blue{background:linear-gradient(135deg,#1B3F7A,#2a5db0);}
.cs-kpi--green{background:linear-gradient(135deg,#0f7c5a,#17a674);}
.cs-kpi--orange{background:linear-gradient(135deg,#F05A1A,#f07a4a);}
.cs-kpi--purple{background:linear-gradient(135deg,#7c3aed,#a855f7);}
.cs-kpi-icon{
width:32px;
height:32px;
border-radius:8px;
background:rgba(255,255,255,0.2);
display:flex;
align-items:center;
justify-content:center;
font-size:0.85rem;
color:#fff;
flex-shrink:0;
}
.cs-kpi-body{
flex:1;
display:flex;
flex-direction:column;
gap:2px;
}
.cs-kpi-value{
font-size:1rem;
font-weight:800;
color:#fff;
line-height:1;
letter-spacing:-0.3px;
}
.cs-kpi-label{
font-size:0.58rem;
color:rgba(255,255,255,0.7);
font-weight:500;
letter-spacing:0.02em;
}
.cs-kpi-trend{
position:absolute;
bottom:10px;
right:12px;
font-size:0.58rem;
font-weight:700;
display:flex;
align-items:center;
gap:2px;
}
.cs-kpi-trend--up{color:rgba(255,255,255,0.9);}
.cs-kpi-trend--down{color:rgba(255,255,255,0.65);}
.cs-dash-lower{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
padding:12px 16px 16px;
flex:1;
min-height:0;
}
.cs-dash-chart-card,
.cs-dash-table-card{
background:#fff;
border-radius:12px;
padding:14px;
border:1px solid #e8ecf0;
display:flex;
flex-direction:column;
overflow:hidden;
}
.cs-dash-card-title{
font-size:0.75rem;
font-weight:700;
color:#111827;
margin-bottom:12px;
flex-shrink:0;
}
.cs-dash-chart{
flex:1;
display:flex;
align-items:flex-end;
gap:4px;
min-height:80px;
}
.cs-chart-bar-wrap{
flex:1;
display:flex;
align-items:flex-end;
height:100%;
}
.cs-chart-bar{
width:100%;
border-radius:4px 4px 0 0;
background:linear-gradient(180deg,#2a5db0 0%,#1B3F7A 100%);
min-height:4px;
transition:opacity 0.2s;
}
.cs-chart-bar-wrap:nth-child(even) .cs-chart-bar{
background:linear-gradient(180deg,rgba(240,90,26,0.8) 0%,#F05A1A 100%);
}
.cs-chart-months{
display:flex;
justify-content:space-around;
margin-top:6px;
flex-shrink:0;
}
.cs-chart-months span{
font-size:0.52rem;
color:#9ca3af;
font-weight:600;
}
.cs-dash-table-row{
display:flex;
align-items:center;
gap:10px;
padding:8px 0;
border-bottom:1px solid #f3f4f6;
}
.cs-dash-table-row:last-child{border-bottom:none;}
.cs-dash-row-avatar{
width:28px;
height:28px;
border-radius:50%;
background:linear-gradient(135deg,#e8eef8,#d0dcf0);
display:flex;
align-items:center;
justify-content:center;
font-size:0.65rem;
font-weight:700;
color:#1B3F7A;
flex-shrink:0;
}
.cs-dash-row-info{
flex:1;
display:flex;
flex-direction:column;
gap:4px;
}
.cs-dash-row-name{
height:6px;
background:#d1d5db;
border-radius:3px;
width:80%;
}
.cs-dash-row-sub{
height:5px;
background:#e5e7eb;
border-radius:3px;
width:55%;
}
.cs-dash-row-status{
font-size:0.6rem;
font-weight:700;
padding:3px 8px;
border-radius:20px;
flex-shrink:0;
}
.cs-status--green{background:#d1fae5;color:#065f46;}
.cs-status--blue{background:#dde6f5;color:#1B3F7A;}
.cs-status--orange{background:#fde8d8;color:#9a3412;}
@media (max-width:1199.98px){
.cs-dash-kpi-row{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:991.98px){
.cs-dashboard-mockup{flex-direction:column;min-height:unset;}
.cs-dash-sidebar{width:100%;flex-direction:row;align-items:center;padding:12px 16px;gap:16px;}
.cs-dash-brand{padding:0;border-bottom:none;margin-bottom:0;}
.cs-dash-nav{flex-direction:row;padding:0;gap:4px;overflow-x:auto;}
.cs-dash-nav-item span{display:none;}
.cs-dash-nav-item{padding:8px;}
.cs-dash-kpi-row{grid-template-columns:repeat(4,1fr);}
.cs-dash-lower{grid-template-columns:1fr;}
}
@media (max-width:767.98px){
.cs-system-header{padding:18px 18px 14px;gap:12px;}
.cs-system-icon-wrap{width:44px;height:44px;font-size:1.2rem;}
.cs-system-title{font-size:0.92rem;}
.cs-system-desc{padding:14px 18px 10px;font-size:0.85rem;}
.cs-detail-list{padding:0 18px 18px;}
.cs-dash-kpi-row{grid-template-columns:repeat(2,1fr);padding:12px 12px 0;}
.cs-dash-lower{padding:10px 12px 12px;}
.cs-cap-card{padding:18px 14px;}
}
@media (max-width:480px){
.cs-dash-kpi-row{grid-template-columns:repeat(1,1fr);}
.cs-kpi-value{font-size:0.9rem;}
}
.wp-plugin-card{
background:#fff;
border:1px solid #e8ecf0;
border-radius:16px;
overflow:hidden;
height:100%;
display:flex;
flex-direction:column;
transition:box-shadow 0.25s,transform 0.25s;
}
.wp-plugin-card:hover{
box-shadow:0 12px 40px rgba(27,63,122,0.12);
transform:translateY(-4px);
}
.wp-plugin-header{
display:flex;
align-items:center;
gap:16px;
padding:22px 24px 18px;
}
.wp-header--mpesa{background:linear-gradient(135deg,#0f7c5a 0%,#17a674 100%);}
.wp-header--cpt{background:linear-gradient(135deg,#1B3F7A 0%,#2a5db0 100%);}
.wp-header--booking{background:linear-gradient(135deg,#F05A1A 0%,#f07a4a 100%);}
.wp-header--membership{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%);}
.wp-header--api{background:linear-gradient(135deg,#b45309 0%,#f59e0b 100%);}
.wp-header--audit{background:linear-gradient(135deg,#b91c1c 0%,#ef4444 100%);}
.wp-plugin-icon-wrap{
width:52px;
height:52px;
border-radius:12px;
background:rgba(255,255,255,0.22);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
font-size:1.5rem;
color:#fff;
-webkit-backdrop-filter:blur(4px);
backdrop-filter:blur(4px);
}
.wp-plugin-title{
font-size:1rem;
font-weight:700;
color:#fff;
margin:0 0 4px;
line-height:1.3;
}
.wp-plugin-badge{
display:inline-block;
font-size:0.72rem;
font-weight:600;
color:rgba(255,255,255,0.85);
letter-spacing:0.04em;
text-transform:uppercase;
}
.wp-plugin-desc{
font-size:0.9rem;
color:#4b5563;
line-height:1.75;
padding:18px 24px 14px;
margin:0;
}
.wp-detail-list{
list-style:none;
padding:0 24px 24px;
margin:0;
flex:1;
}
.wp-detail-list li{
font-size:0.875rem;
color:#374151;
line-height:1.6;
padding:6px 0 6px 26px;
position:relative;
border-bottom:1px solid #f3f4f6;
}
.wp-detail-list li:last-child{border-bottom:none;}
.wp-detail-list li::before{
content:'\f058';
font-family:'Font Awesome 6 Free';
font-weight:900;
position:absolute;
left:0;
top:7px;
font-size:0.8rem;
color:#1B3F7A;
}
.wp-std-card{
background:#fff;
border:1px solid #e8ecf0;
border-radius:14px;
padding:22px 18px;
height:100%;
text-align:center;
transition:box-shadow 0.25s,transform 0.25s;
display:flex;
flex-direction:column;
align-items:center;
}
.wp-std-card:hover{
box-shadow:0 8px 28px rgba(27,63,122,0.1);
transform:translateY(-3px);
}
.wp-std-icon{
width:52px;
height:52px;
border-radius:50%;
background:linear-gradient(135deg,#f0f4ff,#dde6f5);
display:flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
color:#1B3F7A;
margin-bottom:14px;
flex-shrink:0;
}
.wp-std-title{
font-size:0.88rem;
font-weight:700;
color:#111827;
margin:0 0 8px;
line-height:1.3;
}
.wp-std-desc{
font-size:0.8rem;
color:#6b7280;
line-height:1.65;
margin:0;
}
.wp-anatomy-wrapper{
display:flex;
border-radius:16px;
overflow:hidden;
box-shadow:0 20px 60px rgba(27,63,122,0.18);
border:1px solid #e0e7ef;
min-height:380px;
}
.wp-anatomy-sidebar{
width:200px;
background:#1e1e2e;
flex-shrink:0;
display:flex;
flex-direction:column;
overflow:hidden;
}
.wp-anatomy-sidebar-title{
padding:14px 16px 12px;
font-size:0.72rem;
font-weight:700;
color:rgba(255,255,255,0.5);
letter-spacing:0.08em;
text-transform:uppercase;
border-bottom:1px solid rgba(255,255,255,0.06);
flex-shrink:0;
}
.wp-tree-node{
display:flex;
align-items:center;
gap:7px;
padding-top:6px;
padding-right:12px;
padding-bottom:6px;
padding-left:var(--node-indent,12px);
font-size:0.72rem;
color:rgba(255,255,255,0.55);
cursor:default;
transition:background 0.15s;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.wp-tree-node:hover{background:rgba(255,255,255,0.04);}
.wp-tree-node--active{
background:rgba(240,90,26,0.15);
color:#F05A1A;
font-weight:600;
}
.wp-tree-icon{font-size:0.7rem;flex-shrink:0;}
.wp-tree-icon--folder,
.wp-tree-icon--folder-open{color:#f59e0b;}
.wp-tree-icon--php,
.wp-tree-icon--php-main{color:#818cf8;}
.wp-tree-icon--css{color:#38bdf8;}
.wp-tree-icon--js{color:#facc15;}
.wp-tree-icon--txt{color:#6b7280;}
.wp-anatomy-main{
flex:1;
background:#282a36;
display:flex;
flex-direction:column;
overflow:hidden;
}
.wp-code-topbar{
background:#1e1e2e;
border-bottom:1px solid rgba(255,255,255,0.06);
flex-shrink:0;
}
.wp-code-tabs{
display:flex;
overflow-x:auto;
}
.wp-code-tab{
padding:10px 16px;
font-size:0.72rem;
color:rgba(255,255,255,0.4);
white-space:nowrap;
cursor:default;
border-right:1px solid rgba(255,255,255,0.05);
}
.wp-code-tab--active{
color:#F05A1A;
background:#282a36;
border-top:2px solid #F05A1A;
padding-top:8px;
}
.wp-code-area{
flex:1;
overflow:auto;
padding:16px 20px;
}
.wp-code-block{
font-family:'Consolas','Monaco','Courier New',monospace;
font-size:0.75rem;
line-height:1.9;
}
.wp-code-line{display:block;}
.wp-tok-comment{color:#6272a4;font-style:italic;}
.wp-tok-keyword{color:#ff79c6;}
.wp-tok-func{color:#50fa7b;}
.wp-tok-string{color:#f1fa8c;}
.wp-tok-class{color:#8be9fd;}
.wp-tok-default{color:#f8f8f2;}
.wp-anatomy-badges{
display:flex;
flex-wrap:wrap;
gap:6px;
padding:10px 14px;
background:#1e1e2e;
border-top:1px solid rgba(255,255,255,0.06);
flex-shrink:0;
}
.wp-anatomy-badge{
display:flex;
align-items:center;
gap:5px;
font-size:0.65rem;
font-weight:700;
padding:4px 10px;
border-radius:20px;
}
.wp-badge--security{background:rgba(16,185,129,0.15);color:#34d399;}
.wp-badge--caps{background:rgba(99,102,241,0.15);color:#a5b4fc;}
.wp-badge--sanitise{background:rgba(245,158,11,0.15);color:#fcd34d;}
.wp-badge--escape{background:rgba(240,90,26,0.15);color:#fb923c;}
@media (max-width:991.98px){
.wp-anatomy-wrapper{flex-direction:column;min-height:unset;}
.wp-anatomy-sidebar{width:100%;max-height:180px;overflow-y:auto;}
.wp-code-area{max-height:260px;}
}
@media (max-width:767.98px){
.wp-plugin-header{padding:18px 18px 14px;gap:12px;}
.wp-plugin-icon-wrap{width:44px;height:44px;font-size:1.2rem;}
.wp-plugin-title{font-size:0.92rem;}
.wp-plugin-desc{padding:14px 18px 10px;font-size:0.85rem;}
.wp-detail-list{padding:0 18px 18px;}
.wp-std-card{padding:18px 14px;}
.wp-anatomy-badges{padding:8px 10px;}
}
@media (max-width:480px){
.wp-anatomy-sidebar{max-height:140px;}
.wp-code-area{max-height:200px;}
.wp-code-block{font-size:0.68rem;}
}
.bh45{height:45%;}.bh50{height:50%;}.bh55{height:55%;}
.bh60{height:60%;}.bh65{height:65%;}.bh70{height:70%;}
.bh75{height:75%;}.bh80{height:80%;}.bh85{height:85%;}
.bh90{height:90%;}.bh95{height:95%;}
.sbh-40{height:40%;}.sbh-45{height:45%;}.sbh-50{height:50%;}
.sbh-55{height:55%;}.sbh-60{height:60%;}.sbh-65{height:65%;}
.sbh-70{height:70%;}.sbh-75{height:75%;}.sbh-80{height:80%;}
.sbh-85{height:85%;}.sbh-90{height:90%;}.sbh-95{height:95%;}
.qsw-50{width:50%;}.qsw-60{width:60%;}.qsw-70{width:70%;}
.qsw-80{width:80%;}.qsw-90{width:90%;}.qsw-100{width:100%;}
.wp-indent-0{padding-left:12px;}
.wp-indent-1{padding-left:28px;}
.wp-indent-2{padding-left:44px;}
.gh30{height:30%}.gh32{height:32%}.gh35{height:35%}.gh38{height:38%}
.gh40{height:40%}.gh42{height:42%}.gh45{height:45%}.gh48{height:48%}
.gh50{height:50%}.gh52{height:52%}.gh55{height:55%}.gh58{height:58%}
.gh60{height:60%}.gh62{height:62%}.gh65{height:65%}.gh68{height:68%}
.gh70{height:70%}.gh72{height:72%}.gh75{height:75%}.gh78{height:78%}
.gh80{height:80%}.gh82{height:82%}.gh85{height:85%}.gh88{height:88%}
.gh90{height:90%}.gh92{height:92%}.gh95{height:95%}
.pbw-12{width:12%}.pbw-22{width:22%}.pbw-28{width:28%}.pbw-38{width:38%}
.ga-campaign-card{
background:#fff;
border:1px solid #e8ecf0;
border-radius:16px;
overflow:hidden;
height:100%;
display:flex;
flex-direction:column;
transition:box-shadow 0.25s,transform 0.25s;
}
.ga-campaign-card:hover{
box-shadow:0 12px 40px rgba(27,63,122,0.12);
transform:translateY(-4px);
}
.ga-campaign-header{
display:flex;
align-items:center;
gap:16px;
padding:22px 24px 18px;
}
.ga-header--search{background:linear-gradient(135deg,#1B3F7A 0%,#2a5db0 100%);}
.ga-header--display{background:linear-gradient(135deg,#0f7c5a 0%,#17a674 100%);}
.ga-header--shopping{background:linear-gradient(135deg,#F05A1A 0%,#f07a4a 100%);}
.ga-header--youtube{background:linear-gradient(135deg,#b91c1c 0%,#ef4444 100%);}
.ga-header--remarketing{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%);}
.ga-header--tracking{background:linear-gradient(135deg,#b45309 0%,#f59e0b 100%);}
.ga-campaign-icon-wrap{
width:52px;
height:52px;
border-radius:12px;
background:rgba(255,255,255,0.22);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
font-size:1.5rem;
color:#fff;
-webkit-backdrop-filter:blur(4px);
backdrop-filter:blur(4px);
}
.ga-campaign-title{
font-size:1rem;
font-weight:700;
color:#fff;
margin:0 0 4px;
line-height:1.3;
}
.ga-campaign-badge{
display:inline-block;
font-size:0.72rem;
font-weight:600;
color:rgba(255,255,255,0.85);
letter-spacing:0.04em;
text-transform:uppercase;
}
.ga-campaign-desc{
font-size:0.9rem;
color:#4b5563;
line-height:1.75;
padding:18px 24px 14px;
margin:0;
}
.ga-detail-list{
list-style:none;
padding:0 24px 24px;
margin:0;
flex:1;
}
.ga-detail-list li{
font-size:0.875rem;
color:#374151;
line-height:1.6;
padding:6px 0 6px 26px;
position:relative;
border-bottom:1px solid #f3f4f6;
}
.ga-detail-list li:last-child{border-bottom:none;}
.ga-detail-list li::before{
content:'\f058';
font-family:'Font Awesome 6 Free';
font-weight:900;
position:absolute;
left:0;
top:7px;
font-size:0.8rem;
color:#1B3F7A;
}
.ga-opt-card{
background:#fff;
border:1px solid #e8ecf0;
border-radius:14px;
padding:22px 18px;
height:100%;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
transition:box-shadow 0.25s,transform 0.25s;
}
.ga-opt-card:hover{
box-shadow:0 8px 28px rgba(27,63,122,0.1);
transform:translateY(-3px);
}
.ga-opt-icon{
width:52px;
height:52px;
border-radius:50%;
background:linear-gradient(135deg,#f0f4ff,#dde6f5);
display:flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
color:#1B3F7A;
margin-bottom:14px;
flex-shrink:0;
}
.ga-opt-title{
font-size:0.88rem;
font-weight:700;
color:#111827;
margin:0 0 8px;
line-height:1.3;
}
.ga-opt-desc{
font-size:0.8rem;
color:#6b7280;
line-height:1.65;
margin:0;
}
.ga-dashboard-mockup{
border-radius:16px;
overflow:hidden;
box-shadow:0 20px 60px rgba(27,63,122,0.18);
border:1px solid #e0e7ef;
background:#f4f6fb;
}
.ga-dash-topstrip{
display:grid;
grid-template-columns:repeat(6,1fr);
background:#1B3F7A;
border-bottom:3px solid #F05A1A;
}
.ga-metric-card{
padding:16px 14px;
border-right:1px solid rgba(255,255,255,0.08);
display:flex;
flex-direction:column;
gap:4px;
}
.ga-metric-card:last-child{border-right:none;}
.ga-metric-label{
font-size:0.6rem;
font-weight:600;
color:rgba(255,255,255,0.55);
letter-spacing:0.06em;
text-transform:uppercase;
line-height:1.2;
}
.ga-metric-value{
font-size:1.05rem;
font-weight:800;
color:#fff;
line-height:1;
letter-spacing:-0.3px;
}
.ga-metric-trend{
font-size:0.6rem;
font-weight:700;
display:flex;
align-items:center;
gap:2px;
margin-top:2px;
}
.ga-trend--up{color:#34d399;}
.ga-trend--down{color:#34d399;}
.ga-metric--cpc .ga-trend--down,
.ga-metric--cpl .ga-trend--down{color:#34d399;}
.ga-dash-body{
padding:18px 20px;
}
.ga-dash-section-title{
font-size:0.72rem;
font-weight:700;
color:#1B3F7A;
text-transform:uppercase;
letter-spacing:0.08em;
margin-bottom:10px;
}
.ga-campaign-table{
background:#fff;
border-radius:10px;
border:1px solid #e8ecf0;
overflow:hidden;
margin-bottom:16px;
}
.ga-table-header,
.ga-table-row{
display:grid;
grid-template-columns:2fr 0.8fr 0.7fr 0.7fr 1fr 1fr 1.2fr;
align-items:center;
gap:0;
}
.ga-table-header{
background:#f4f6fb;
border-bottom:1px solid #e8ecf0;
padding:8px 0;
}
.ga-table-row{
border-bottom:1px solid #f3f4f6;
padding:10px 0;
transition:background 0.15s;
}
.ga-table-row:last-child{border-bottom:none;}
.ga-table-row:hover{background:#f9fafb;}
.ga-th{
font-size:0.62rem;
font-weight:700;
color:#9ca3af;
text-transform:uppercase;
letter-spacing:0.06em;
padding:0 12px;
}
.ga-th--name{padding-left:14px;}
.ga-td{
font-size:0.78rem;
color:#374151;
padding:0 12px;
white-space:nowrap;
}
.ga-td--name{
display:flex;
align-items:center;
gap:8px;
padding-left:14px;
font-weight:600;
color:#111827;
font-size:0.8rem;
}
.ga-campaign-dot{
width:7px;
height:7px;
border-radius:50%;
background:#1B3F7A;
flex-shrink:0;
}
.ga-td--highlight{font-weight:700;color:#0f7c5a;}
.ga-td--cpa{font-weight:600;color:#1B3F7A;}
.ga-status-pill{
font-size:0.6rem;
font-weight:700;
padding:3px 8px;
border-radius:20px;
}
.ga-status--active{background:#d1fae5;color:#065f46;}
.ga-status--paused{background:#fde8d8;color:#9a3412;}
.ga-td--qs{
display:flex;
align-items:center;
gap:6px;
padding-right:14px;
}
.ga-qs-bar-wrap{
flex:1;
height:5px;
background:#e5e7eb;
border-radius:3px;
overflow:hidden;
}
.ga-qs-bar{
height:100%;
border-radius:3px;
background:linear-gradient(90deg,#F05A1A,#1B3F7A);
}
.ga-qs-num{
font-size:0.65rem;
font-weight:700;
color:#374151;
white-space:nowrap;
}
.ga-th--qs{padding-right:14px;}
.ga-dash-chart-row{
display:grid;
grid-template-columns:1fr 260px;
gap:14px;
}
.ga-dash-chart-card,
.ga-dash-summary-card{
background:#fff;
border-radius:10px;
border:1px solid #e8ecf0;
padding:14px;
}
.ga-dash-chart-title{
font-size:0.72rem;
font-weight:700;
color:#111827;
margin-bottom:12px;
}
.ga-spend-chart{
display:flex;
align-items:flex-end;
gap:3px;
height:80px;
}
.ga-spend-bar-wrap{
flex:1;
display:flex;
align-items:flex-end;
height:100%;
}
.ga-spend-bar{
width:100%;
border-radius:3px 3px 0 0;
background:linear-gradient(180deg,#2a5db0 0%,#1B3F7A 100%);
min-height:3px;
}
.ga-spend-bar--weekend{
background:linear-gradient(180deg,rgba(240,90,26,0.7) 0%,#F05A1A 100%);
}
.ga-summary-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 0;
border-bottom:1px solid #f3f4f6;
}
.ga-summary-row:last-child{border-bottom:none;}
.ga-summary-label{
font-size:0.75rem;
color:#6b7280;
}
.ga-summary-value{
font-size:0.8rem;
font-weight:700;
color:#111827;
}
.ga-val--green{color:#059669;}
.ga-val--blue{color:#1B3F7A;}
.ga-summary-divider{
height:1px;
background:#e5e7eb;
margin:4px 0;
}
@media (max-width:1199.98px){
.ga-dash-topstrip{grid-template-columns:repeat(3,1fr);}
.ga-dash-chart-row{grid-template-columns:1fr;}
}
@media (max-width:991.98px){
.ga-table-header,
.ga-table-row{grid-template-columns:2fr 0.8fr 0.7fr 0.7fr 1fr 1fr;}
.ga-th--qs,
.ga-td--qs{display:none;}
.ga-dash-topstrip{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:767.98px){
.ga-campaign-header{padding:18px 18px 14px;gap:12px;}
.ga-campaign-icon-wrap{width:44px;height:44px;font-size:1.2rem;}
.ga-campaign-title{font-size:0.92rem;}
.ga-campaign-desc{padding:14px 18px 10px;font-size:0.85rem;}
.ga-detail-list{padding:0 18px 18px;}
.ga-dash-topstrip{grid-template-columns:repeat(2,1fr);}
.ga-table-header,
.ga-table-row{grid-template-columns:2fr 0.8fr 0.7fr 1fr;}
.ga-th:nth-child(3),
.ga-td:nth-child(3),
.ga-th:nth-child(5),
.ga-td:nth-child(5){display:none;}
.ga-dash-body{padding:14px;}
.ga-opt-card{padding:18px 14px;}
}
@media (max-width:480px){
.ga-dash-topstrip{grid-template-columns:repeat(2,1fr);}
.ga-metric-value{font-size:0.9rem;}
.ga-table-header,
.ga-table-row{grid-template-columns:2fr 0.7fr 1fr;}
.ga-th:nth-child(2),
.ga-td:nth-child(2),
.ga-th:nth-child(4),
.ga-td:nth-child(4){display:none;}
}
.sm-platform-card{
background:#fff;
border:1px solid #e8ecf0;
border-radius:16px;
overflow:hidden;
height:100%;
display:flex;
flex-direction:column;
transition:box-shadow 0.25s,transform 0.25s;
}
.sm-platform-card:hover{
box-shadow:0 12px 40px rgba(27,63,122,0.12);
transform:translateY(-4px);
}
.sm-platform-header{
display:flex;
align-items:center;
gap:16px;
padding:22px 24px 18px;
}
.sm-header--facebook{background:linear-gradient(135deg,#1877f2 0%,#0c5fcc 100%);}
.sm-header--instagram{background:linear-gradient(135deg,#f77737 0%,#c13584 50%,#833ab4 100%);}
.sm-header--linkedin{background:linear-gradient(135deg,#0a66c2 0%,#004182 100%);}
.sm-header--tiktok{background:linear-gradient(135deg,#010101 0%,#2d2d2d 100%);}
.sm-header--twitter{background:linear-gradient(135deg,#14171a 0%,#333 100%);}
.sm-header--youtube{background:linear-gradient(135deg,#ff0000 0%,#cc0000 100%);}
.sm-platform-icon-wrap{
width:52px;
height:52px;
border-radius:12px;
background:rgba(255,255,255,0.22);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
font-size:1.5rem;
color:#fff;
-webkit-backdrop-filter:blur(4px);
backdrop-filter:blur(4px);
}
.sm-platform-title{
font-size:1rem;
font-weight:700;
color:#fff;
margin:0 0 4px;
line-height:1.3;
}
.sm-platform-badge{
display:inline-block;
font-size:0.72rem;
font-weight:600;
color:rgba(255,255,255,0.85);
letter-spacing:0.04em;
text-transform:uppercase;
}
.sm-platform-desc{
font-size:0.9rem;
color:#4b5563;
line-height:1.75;
padding:18px 24px 14px;
margin:0;
}
.sm-detail-list{
list-style:none;
padding:0 24px 24px;
margin:0;
flex:1;
}
.sm-detail-list li{
font-size:0.875rem;
color:#374151;
line-height:1.6;
padding:6px 0 6px 26px;
position:relative;
border-bottom:1px solid #f3f4f6;
}
.sm-detail-list li:last-child{border-bottom:none;}
.sm-detail-list li::before{
content:'\f058';
font-family:'Font Awesome 6 Free';
font-weight:900;
position:absolute;
left:0;
top:7px;
font-size:0.8rem;
color:#1B3F7A;
}
.sm-process-flow{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
background:#fff;
border:1px solid #e8ecf0;
border-radius:16px;
overflow:hidden;
}
.sm-process-step{
padding:24px 20px;
border-right:1px solid #f0f3f7;
border-bottom:1px solid #f0f3f7;
display:flex;
flex-direction:column;
gap:10px;
transition:background 0.2s;
position:relative;
}
.sm-process-step:hover{background:#fafbfd;}
.sm-process-step:nth-child(4n){border-right:none;}
.sm-process-step:nth-child(n+5){border-bottom:none;}
.sm-ps-num{
font-size:2.2rem;
font-weight:900;
color:rgba(27,63,122,0.07);
line-height:1;
position:absolute;
top:14px;
right:16px;
letter-spacing:-2px;
}
.sm-ps-icon{
width:44px;
height:44px;
border-radius:50%;
background:linear-gradient(135deg,#e8eef8,#d0dcf0);
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
color:#1B3F7A;
flex-shrink:0;
}
.sm-ps-title{
font-size:0.88rem;
font-weight:700;
color:#111827;
margin:0;
line-height:1.3;
}
.sm-ps-desc{
font-size:0.8rem;
color:#6b7280;
line-height:1.65;
margin:0;
}
.sm-dashboard{
border-radius:16px;
overflow:hidden;
box-shadow:0 20px 60px rgba(27,63,122,0.18);
border:1px solid #e0e7ef;
background:#f4f6fb;
}
.sm-report-header{
background:#fff;
padding:16px 22px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid #e8ecf0;
flex-wrap:wrap;
gap:12px;
}
.sm-report-brand{
display:flex;
align-items:center;
gap:12px;
}
.sm-report-brand-logo{
width:38px;
height:38px;
border-radius:10px;
background:linear-gradient(135deg,#1B3F7A,#2a5db0);
display:flex;
align-items:center;
justify-content:center;
font-size:0.8rem;
font-weight:800;
color:#fff;
flex-shrink:0;
}
.sm-report-brand-name{
font-size:0.9rem;
font-weight:700;
color:#111827;
}
.sm-report-period{
font-size:0.72rem;
color:#9ca3af;
margin-top:2px;
}
.sm-report-platform-badges{
display:flex;
gap:6px;
align-items:center;
}
.sm-plat-badge{
width:30px;
height:30px;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
font-size:0.8rem;
color:#fff;
}
.sm-plat--fb{background:#1877f2;}
.sm-plat--ig{background:linear-gradient(135deg,#f77737,#c13584);}
.sm-plat--li{background:#0a66c2;}
.sm-plat--tt{background:#010101;}
.sm-kpi-strip{
display:grid;
grid-template-columns:repeat(4,1fr);
background:#fff;
border-bottom:1px solid #e8ecf0;
}
.sm-kpi-item{
display:flex;
align-items:flex-start;
gap:12px;
padding:16px 18px;
border-right:1px solid #f0f3f7;
}
.sm-kpi-item:last-child{border-right:none;}
.sm-kpi-icon{
width:38px;
height:38px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
font-size:1rem;
flex-shrink:0;
}
.sm-kpi-icon--blue{background:#dde6f5;color:#1B3F7A;}
.sm-kpi-icon--orange{background:#fde8d8;color:#F05A1A;}
.sm-kpi-icon--green{background:#d1fae5;color:#059669;}
.sm-kpi-icon--purple{background:#ede9fe;color:#7c3aed;}
.sm-kpi-val{
font-size:1.1rem;
font-weight:800;
color:#111827;
line-height:1;
letter-spacing:-0.3px;
}
.sm-kpi-lbl{
font-size:0.62rem;
color:#9ca3af;
font-weight:600;
letter-spacing:0.04em;
text-transform:uppercase;
margin-top:3px;
}
.sm-kpi-change{
font-size:0.65rem;
font-weight:600;
margin-top:5px;
display:flex;
align-items:center;
gap:3px;
}
.sm-change--up{color:#059669;}
.sm-change--down{color:#dc2626;}
.sm-dash-lower{
display:grid;
grid-template-columns:1fr 280px;
gap:14px;
padding:16px;
}
.sm-chart-card,
.sm-top-posts-card{
background:#fff;
border-radius:12px;
border:1px solid #e8ecf0;
padding:16px;
}
.sm-chart-title{
font-size:0.72rem;
font-weight:700;
color:#111827;
margin-bottom:12px;
text-transform:uppercase;
letter-spacing:0.06em;
}
.sm-chart-title--mt{margin-top:18px;}
.sm-platform-bars{
display:flex;
flex-direction:column;
gap:10px;
}
.sm-plat-bar-row{
display:flex;
align-items:center;
gap:10px;
}
.sm-plat-bar-label{
display:flex;
align-items:center;
gap:6px;
font-size:0.72rem;
color:#374151;
font-weight:600;
width:80px;
flex-shrink:0;
}
.sm-plat-bar-track{
flex:1;
height:8px;
background:#f3f4f6;
border-radius:4px;
overflow:hidden;
}
.sm-plat-bar-fill{
height:100%;
border-radius:4px;
transition:width 0.4s ease;
}
.sm-pb--ig{background:linear-gradient(90deg,#f77737,#c13584);}
.sm-pb--fb{background:#1877f2;}
.sm-pb--tt{background:#010101;}
.sm-pb--li{background:#0a66c2;}
.sm-plat-bar-pct{
font-size:0.68rem;
font-weight:700;
color:#6b7280;
width:30px;
text-align:right;
flex-shrink:0;
}
.sm-growth-chart{
display:flex;
align-items:flex-end;
gap:2px;
height:60px;
}
.sm-growth-bar-wrap{
flex:1;
display:flex;
align-items:flex-end;
height:100%;
}
.sm-growth-bar{
width:100%;
border-radius:2px 2px 0 0;
background:linear-gradient(180deg,#2a5db0 0%,#1B3F7A 100%);
min-height:2px;
}
.sm-top-post-row{
display:flex;
align-items:center;
gap:10px;
padding:10px 0;
border-bottom:1px solid #f3f4f6;
}
.sm-top-post-row:last-child{border-bottom:none;}
.sm-post-thumb{
width:42px;
height:42px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
color:#fff;
flex-shrink:0;
}
.sm-post--ig{background:linear-gradient(135deg,#f77737,#c13584);}
.sm-post--fb{background:#1877f2;}
.sm-post--tt{background:#010101;}
.sm-post--li{background:#0a66c2;}
.sm-post-info{
flex:1;
display:flex;
flex-direction:column;
gap:4px;
}
.sm-post-type{
font-size:0.78rem;
font-weight:700;
color:#111827;
}
.sm-post-stats{
display:flex;
gap:10px;
font-size:0.68rem;
color:#6b7280;
}
.sm-post-stats i{
font-size:0.65rem;
margin-right:2px;
}
.sm-post-badge{
width:24px;
height:24px;
border-radius:6px;
display:flex;
align-items:center;
justify-content:center;
font-size:0.65rem;
color:#fff;
flex-shrink:0;
}
@media (max-width:991.98px){
.sm-process-flow{grid-template-columns:repeat(2,1fr);}
.sm-process-step:nth-child(4n){border-right:1px solid #f0f3f7;}
.sm-process-step:nth-child(2n){border-right:none;}
.sm-process-step:nth-child(n+5){border-bottom:1px solid #f0f3f7;}
.sm-process-step:nth-child(n+7){border-bottom:none;}
.sm-kpi-strip{grid-template-columns:repeat(2,1fr);}
.sm-kpi-item:nth-child(2){border-right:none;}
.sm-dash-lower{grid-template-columns:1fr;}
}
@media (max-width:767.98px){
.sm-platform-header{padding:18px 18px 14px;gap:12px;}
.sm-platform-icon-wrap{width:44px;height:44px;font-size:1.2rem;}
.sm-platform-title{font-size:0.92rem;}
.sm-platform-desc{padding:14px 18px 10px;font-size:0.85rem;}
.sm-detail-list{padding:0 18px 18px;}
.sm-process-flow{grid-template-columns:1fr 1fr;}
.sm-process-step{padding:18px 14px;}
.sm-kpi-val{font-size:0.95rem;}
}
@media (max-width:480px){
.sm-process-flow{grid-template-columns:1fr;}
.sm-process-step:nth-child(2n){border-right:none;}
.sm-process-step{border-right:none;border-bottom:1px solid #f0f3f7;}
.sm-process-step:last-child{border-bottom:none;}
.sm-kpi-strip{grid-template-columns:repeat(2,1fr);}
.sm-report-header{flex-direction:column;align-items:flex-start;}
}
.ni-service-card{
background:#fff;
border:1px solid #e8ecf0;
border-radius:16px;
overflow:hidden;
height:100%;
display:flex;
flex-direction:column;
transition:box-shadow 0.25s,transform 0.25s;
}
.ni-service-card:hover{
box-shadow:0 12px 40px rgba(27,63,122,0.12);
transform:translateY(-4px);
}
.ni-service-header{
display:flex;
align-items:center;
gap:16px;
padding:22px 24px 18px;
}
.ni-header--cabling{background:linear-gradient(135deg,#1B3F7A 0%,#2a5db0 100%);}
.ni-header--wireless{background:linear-gradient(135deg,#0f7c5a 0%,#17a674 100%);}
.ni-header--switching{background:linear-gradient(135deg,#b45309 0%,#f59e0b 100%);}
.ni-header--security{background:linear-gradient(135deg,#b91c1c 0%,#ef4444 100%);}
.ni-header--vpn{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%);}
.ni-header--monitoring{background:linear-gradient(135deg,#F05A1A 0%,#f07a4a 100%);}
.ni-service-icon-wrap{
width:52px;
height:52px;
border-radius:12px;
background:rgba(255,255,255,0.22);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
font-size:1.5rem;
color:#fff;
-webkit-backdrop-filter:blur(4px);
backdrop-filter:blur(4px);
}
.ni-service-title{
font-size:1rem;
font-weight:700;
color:#fff;
margin:0 0 4px;
line-height:1.3;
}
.ni-service-badge{
display:inline-block;
font-size:0.72rem;
font-weight:600;
color:rgba(255,255,255,0.85);
letter-spacing:0.04em;
text-transform:uppercase;
}
.ni-service-desc{
font-size:0.9rem;
color:#4b5563;
line-height:1.75;
padding:18px 24px 14px;
margin:0;
}
.ni-detail-list{
list-style:none;
padding:0 24px 24px;
margin:0;
flex:1;
}
.ni-detail-list li{
font-size:0.875rem;
color:#374151;
line-height:1.6;
padding:6px 0 6px 26px;
position:relative;
border-bottom:1px solid #f3f4f6;
}
.ni-detail-list li:last-child{border-bottom:none;}
.ni-detail-list li::before{
content:'\f058';
font-family:'Font Awesome 6 Free';
font-weight:900;
position:absolute;
left:0;
top:7px;
font-size:0.8rem;
color:#1B3F7A;
}
.ni-diagram-wrapper{
background:#0f1929;
border-radius:16px;
padding:28px 24px 20px;
box-shadow:0 20px 60px rgba(27,63,122,0.25);
display:flex;
flex-direction:column;
align-items:center;
gap:0;
overflow-x:auto;
}
.ni-diagram-tier{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
width:100%;
position:relative;
}
.ni-tier-label{
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
font-size:0.58rem;
font-weight:700;
color:rgba(255,255,255,0.25);
text-transform:uppercase;
letter-spacing:0.1em;
writing-mode:horizontal-tb;
white-space:nowrap;
}
.ni-diagram-line{
width:2px;
background:linear-gradient(180deg,rgba(240,90,26,0.6) 0%,rgba(27,63,122,0.6) 100%);
flex-shrink:0;
position:relative;
}
.ni-line--down{
height:28px;
align-self:center;
}
.ni-line--fan{
height:20px;
width:80%;
background:none;
border-top:2px solid rgba(27,63,122,0.5);
position:relative;
}
.ni-line--fan::before,
.ni-line--fan::after{
content:'';
position:absolute;
top:-2px;
width:2px;
height:20px;
background:rgba(27,63,122,0.5);
}
.ni-line--fan::before{left:0;}
.ni-line--fan::after{right:0;}
.ni-device{
display:flex;
flex-direction:column;
align-items:center;
gap:5px;
padding:12px 14px;
border-radius:12px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
min-width:100px;
text-align:center;
transition:background 0.2s,border-color 0.2s;
}
.ni-device:hover{
background:rgba(255,255,255,0.09);
border-color:rgba(240,90,26,0.4);
}
.ni-device-icon{
width:40px;
height:40px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
}
.ni-device--isp .ni-device-icon{background:rgba(27,63,122,0.4);color:#60a5fa;}
.ni-device--firewall .ni-device-icon{background:rgba(185,28,28,0.4);color:#f87171;}
.ni-device--core-switch .ni-device-icon{background:rgba(240,90,26,0.35);color:#fb923c;}
.ni-device--switch .ni-device-icon{background:rgba(180,83,9,0.35);color:#fbbf24;}
.ni-device--endpoint .ni-device-icon{background:rgba(15,124,90,0.35);color:#34d399;}
.ni-device-name{
font-size:0.7rem;
font-weight:700;
color:rgba(255,255,255,0.85);
white-space:nowrap;
}
.ni-device-badge{
font-size:0.55rem;
font-weight:600;
color:rgba(255,255,255,0.4);
letter-spacing:0.04em;
white-space:nowrap;
}
.ni-tier--internet{padding:10px 40px;}
.ni-tier--edge{padding:8px 40px;}
.ni-tier--core{padding:8px 40px;}
.ni-tier--distribution{padding:8px 20px;gap:16px;}
.ni-tier--endpoints{padding:8px 12px;gap:12px;flex-wrap:wrap;}
.ni-diagram-legend{
display:flex;
gap:20px;
margin-top:18px;
padding-top:14px;
border-top:1px solid rgba(255,255,255,0.06);
width:100%;
flex-wrap:wrap;
justify-content:center;
}
.ni-legend-item{
display:flex;
align-items:center;
gap:7px;
font-size:0.68rem;
color:rgba(255,255,255,0.5);
font-weight:600;
}
.ni-legend-dot{
width:10px;
height:10px;
border-radius:50%;
flex-shrink:0;
}
.ni-dot--blue{background:#60a5fa;}
.ni-dot--orange{background:#fb923c;}
.ni-dot--green{background:#34d399;}
.ni-dot--grey{background:#9ca3af;}
.ni-cap-card{
background:#fff;
border:1px solid #e8ecf0;
border-radius:14px;
padding:22px 18px;
height:100%;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
transition:box-shadow 0.25s,transform 0.25s;
}
.ni-cap-card:hover{
box-shadow:0 8px 28px rgba(27,63,122,0.1);
transform:translateY(-3px);
}
.ni-cap-icon{
width:52px;
height:52px;
border-radius:50%;
background:linear-gradient(135deg,#f0f4ff,#dde6f5);
display:flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
color:#1B3F7A;
margin-bottom:14px;
flex-shrink:0;
}
.ni-cap-title{
font-size:0.88rem;
font-weight:700;
color:#111827;
margin:0 0 8px;
line-height:1.3;
}
.ni-cap-desc{
font-size:0.8rem;
color:#6b7280;
line-height:1.65;
margin:0;
}
@media (max-width:991.98px){
.ni-tier--distribution{gap:10px;}
.ni-tier--endpoints{gap:8px;}
.ni-device{min-width:80px;padding:10px;}
.ni-tier-label{display:none;}
}
@media (max-width:767.98px){
.ni-service-header{padding:18px 18px 14px;gap:12px;}
.ni-service-icon-wrap{width:44px;height:44px;font-size:1.2rem;}
.ni-service-title{font-size:0.92rem;}
.ni-service-desc{padding:14px 18px 10px;font-size:0.85rem;}
.ni-detail-list{padding:0 18px 18px;}
.ni-diagram-wrapper{padding:20px 14px 16px;}
.ni-device{min-width:70px;padding:8px;}
.ni-device-icon{width:32px;height:32px;font-size:0.9rem;}
.ni-cap-card{padding:18px 14px;}
.ni-tier--distribution{flex-wrap:wrap;gap:8px;justify-content:center;}
}
@media (max-width:480px){
.ni-tier--endpoints{gap:6px;}
.ni-device{min-width:62px;padding:7px 6px;}
.ni-device-name{font-size:0.6rem;}
.ni-device-badge{display:none;}
}
.cr-repair-card{
background:#fff;
border-radius:14px;
border:1px solid #e5e7eb;
overflow:hidden;
display:flex;
flex-direction:column;
height:100%;
box-shadow:0 2px 8px rgba(0,0,0,.05);
transition:box-shadow .2s,transform .2s;
}
.cr-repair-card:hover{
box-shadow:0 8px 28px rgba(0,0,0,.10);
transform:translateY(-3px);
}
.cr-repair-header{
padding:20px 20px 16px;
display:flex;
align-items:flex-start;
gap:14px;
border-bottom:1px solid #f3f4f6;
}
.cr-header--hardware{background:linear-gradient(135deg,#1B3F7A 0%,#2a5298 100%);}
.cr-header--heat{background:linear-gradient(135deg,#059669 0%,#10b981 100%);}
.cr-header--malware{background:linear-gradient(135deg,#7c3aed 0%,#9f67fa 100%);}
.cr-header--software{background:linear-gradient(135deg,#ea580c 0%,#f97316 100%);}
.cr-header--data{background:linear-gradient(135deg,#dc2626 0%,#ef4444 100%);}
.cr-header--upgrade{background:linear-gradient(135deg,#b45309 0%,#d97706 100%);}
.cr-repair-icon-wrap{
width:46px;
height:46px;
border-radius:10px;
background:rgba(255,255,255,.18);
display:flex;
align-items:center;
justify-content:center;
font-size:1.3rem;
color:#fff;
flex-shrink:0;
}
.cr-repair-title{
font-size:0.95rem;
font-weight:700;
color:#fff;
margin:0 0 6px;
line-height:1.3;
}
.cr-repair-badge{
display:inline-block;
font-size:0.68rem;
font-weight:600;
padding:2px 8px;
border-radius:20px;
background:rgba(255,255,255,.22);
color:#fff;
letter-spacing:.3px;
}
.cr-repair-desc{
padding:14px 18px 10px;
font-size:0.85rem;
color:#374151;
line-height:1.65;
margin:0;
}
.cr-detail-list{
list-style:none;
padding:0 18px 18px;
margin:0;
margin-top:auto;
}
.cr-detail-list li{
font-size:0.8rem;
color:#4b5563;
padding:5px 0 5px 18px;
border-top:1px solid #f3f4f6;
position:relative;
line-height:1.55;
}
.cr-detail-list li::before{
content:'\2713';
position:absolute;
left:0;
color:#059669;
font-weight:700;
font-size:0.75rem;
top:6px;
}
.cr-repair-flow{
display:flex;
align-items:flex-start;
gap:0;
overflow-x:auto;
padding-bottom:8px;
}
.cr-flow-step{
flex:1 1 0;
min-width:120px;
display:flex;
flex-direction:column;
align-items:center;
position:relative;
}
.cr-flow-connector{
position:absolute;
top:27px;
left:50%;
width:100%;
height:2px;
background:linear-gradient(90deg,#1B3F7A 0%,#F05A1A 100%);
z-index:0;
}
.cr-flow-step:last-child .cr-flow-connector{
display:none;
}
.cr-flow-icon{
width:56px;
height:56px;
border-radius:50%;
background:linear-gradient(135deg,#1B3F7A,#2a5298);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:1.3rem;
position:relative;
z-index:1;
box-shadow:0 4px 14px rgba(27,63,122,.28);
flex-shrink:0;
margin-bottom:12px;
}
.cr-flow-step:nth-child(2n) .cr-flow-icon{
background:linear-gradient(135deg,#F05A1A,#f97316);
}
.cr-flow-body{
text-align:center;
padding:0 8px;
}
.cr-flow-title{
font-size:0.82rem;
font-weight:700;
color:#111827;
margin:0 0 5px;
line-height:1.3;
}
.cr-flow-desc{
font-size:0.75rem;
color:#6b7280;
line-height:1.55;
margin:0;
}
.cr-diagnostic-mockup{
background:#fff;
border-radius:16px;
border:1px solid #e5e7eb;
overflow:hidden;
box-shadow:0 4px 20px rgba(0,0,0,.08);
font-family:'Segoe UI',system-ui,sans-serif;
}
.cr-diag-header{
background:linear-gradient(135deg,#1B3F7A 0%,#2a5298 100%);
padding:18px 22px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.cr-diag-brand{
display:flex;
align-items:center;
gap:12px;
}
.cr-diag-brand-logo{
width:40px;
height:40px;
border-radius:8px;
background:rgba(255,255,255,.15);
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
color:#fff;
}
.cr-diag-brand-name{
font-size:0.9rem;
font-weight:700;
color:#fff;
margin:0 0 2px;
}
.cr-diag-brand-name small{
display:block;
font-size:0.72rem;
font-weight:400;
color:rgba(255,255,255,.75);
}
.cr-diag-doc-type{
text-align:right;
}
.cr-diag-doc-type h5{
font-size:0.85rem;
font-weight:700;
color:#fff;
margin:0 0 2px;
text-transform:uppercase;
letter-spacing:.5px;
}
.cr-diag-doc-type small{
font-size:0.72rem;
color:rgba(255,255,255,.75);
}
.cr-diag-meta{
display:flex;
gap:0;
border-bottom:1px solid #f3f4f6;
}
.cr-diag-meta-row{
flex:1;
padding:10px 16px;
border-right:1px solid #f3f4f6;
font-size:0.75rem;
line-height:1.45;
}
.cr-diag-meta-row:last-child{
border-right:none;
}
.cr-diag-meta-row strong{
display:block;
font-size:0.68rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.4px;
color:#9ca3af;
margin-bottom:2px;
}
.cr-diag-meta-row span{
color:#111827;
font-weight:600;
}
.cr-diag-device-row{
display:flex;
align-items:center;
gap:14px;
padding:14px 18px;
background:#f9fafb;
border-bottom:1px solid #f3f4f6;
}
.cr-diag-device-icon{
width:44px;
height:44px;
border-radius:10px;
background:#e0e7ff;
color:#3730a3;
display:flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
flex-shrink:0;
}
.cr-diag-device-name{
font-size:0.9rem;
font-weight:700;
color:#111827;
margin:0 0 2px;
}
.cr-diag-device-sub{
font-size:0.75rem;
color:#6b7280;
margin:0;
}
.cr-diag-complaint{
padding:12px 18px;
background:#fffbeb;
border-bottom:1px solid #fde68a;
display:flex;
align-items:baseline;
gap:8px;
}
.cr-diag-complaint-label{
font-size:0.72rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.4px;
color:#92400e;
flex-shrink:0;
}
.cr-diag-complaint-text{
font-size:0.8rem;
color:#78350f;
line-height:1.5;
margin:0;
}
.cr-diag-findings{
padding:14px 18px 10px;
}
.cr-diag-findings-title{
font-size:0.75rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.5px;
color:#6b7280;
margin:0 0 10px;
}
.cr-diag-finding{
display:flex;
align-items:flex-start;
gap:10px;
padding:9px 12px;
border-radius:8px;
margin-bottom:7px;
border-left:3px solid transparent;
}
.cr-finding--critical{background:#fef2f2;border-left-color:#dc2626;}
.cr-finding--high{background:#fff7ed;border-left-color:#ea580c;}
.cr-finding--medium{background:#fefce8;border-left-color:#ca8a04;}
.cr-finding--low{background:#f0fdf4;border-left-color:#16a34a;}
.cr-finding-severity{
font-size:0.65rem;
font-weight:800;
padding:2px 7px;
border-radius:4px;
text-transform:uppercase;
letter-spacing:.4px;
flex-shrink:0;
margin-top:1px;
}
.cr-sev--critical{background:#dc2626;color:#fff;}
.cr-sev--high{background:#ea580c;color:#fff;}
.cr-sev--medium{background:#ca8a04;color:#fff;}
.cr-sev--info{background:#2563eb;color:#fff;}
.cr-finding-body{
flex:1;
min-width:0;
}
.cr-finding-title{
font-size:0.8rem;
font-weight:700;
color:#111827;
margin:0 0 2px;
}
.cr-finding-desc{
font-size:0.74rem;
color:#6b7280;
line-height:1.5;
margin:0;
}
.cr-diag-quote{
border-top:1px solid #e5e7eb;
padding:12px 18px 14px;
}
.cr-diag-quote-title{
font-size:0.75rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.5px;
color:#6b7280;
margin:0 0 8px;
}
.cr-quote-table{
width:100%;
border-collapse:collapse;
font-size:0.8rem;
}
.cr-quote-row td{
padding:5px 8px;
border-bottom:1px solid #f3f4f6;
color:#374151;
}
.cr-quote-row td:last-child{
text-align:right;
font-weight:600;
color:#111827;
}
.cr-quote-row--header td{
font-size:0.68rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.4px;
color:#9ca3af;
border-bottom:1px solid #d1d5db;
background:#f9fafb;
padding:6px 8px;
}
.cr-quote-row--total td{
font-weight:700;
color:#111827;
border-top:2px solid #1B3F7A;
border-bottom:none;
padding-top:8px;
background:#eff6ff;
font-size:0.85rem;
}
.cr-quote-row--total td:last-child{
color:#1B3F7A;
font-size:0.9rem;
}
.cr-diag-warranty{
background:#f0fdf4;
border-top:1px solid #bbf7d0;
padding:10px 18px;
display:flex;
align-items:center;
gap:8px;
font-size:0.78rem;
color:#166534;
font-weight:500;
}
.cr-diag-warranty i{
color:#16a34a;
font-size:0.9rem;
flex-shrink:0;
}
@media (max-width:991.98px){
.cr-repair-flow{gap:0;}
.cr-flow-step{min-width:100px;}
.cr-flow-icon{width:48px;height:48px;font-size:1.1rem;}
.cr-diag-meta{flex-wrap:wrap;}
.cr-diag-meta-row{min-width:50%;border-bottom:1px solid #f3f4f6;}
}
@media (max-width:767.98px){
.cr-repair-header{padding:16px 16px 12px;gap:10px;}
.cr-repair-icon-wrap{width:40px;height:40px;font-size:1.1rem;}
.cr-repair-title{font-size:0.9rem;}
.cr-repair-desc{padding:12px 16px 8px;font-size:0.83rem;}
.cr-detail-list{padding:0 16px 16px;}
.cr-repair-flow{flex-wrap:wrap;justify-content:center;gap:20px;}
.cr-flow-connector{display:none;}
.cr-flow-step{min-width:130px;flex:0 0 calc(33% - 14px);}
.cr-diag-header{padding:14px 16px;flex-direction:column;align-items:flex-start;gap:8px;}
.cr-diag-doc-type{text-align:left;}
.cr-diag-meta-row{min-width:100%;}
.cr-diag-device-row{padding:12px 14px;}
.cr-diag-findings{padding:12px 14px 8px;}
.cr-diag-quote{padding:10px 14px 12px;}
.cr-diag-warranty{padding:10px 14px;}
}
@media (max-width:480px){
.cr-flow-step{flex:0 0 calc(50% - 10px);}
.cr-diag-brand-name{font-size:0.82rem;}
.cr-finding-desc{display:none;}
}
.sc-engagement-card{
background:#fff;
border-radius:14px;
border:1px solid #e5e7eb;
overflow:hidden;
display:grid;
grid-template-columns:240px 1fr;
grid-template-rows:auto 1fr;
box-shadow:0 2px 8px rgba(0,0,0,.05);
transition:box-shadow .2s,transform .2s;
}
.sc-engagement-card:hover{
box-shadow:0 8px 28px rgba(0,0,0,.10);
transform:translateY(-2px);
}
.sc-engagement-header{
grid-column:1;
grid-row:1 / 3;
padding:24px 20px;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:14px;
border-right:1px solid rgba(255,255,255,.12);
}
.sc-header--assessment{background:linear-gradient(160deg,#1B3F7A 0%,#2a5298 100%);}
.sc-header--selection{background:linear-gradient(160deg,#059669 0%,#10b981 100%);}
.sc-header--oversight{background:linear-gradient(160deg,#7c3aed 0%,#9f67fa 100%);}
.sc-header--health{background:linear-gradient(160deg,#dc2626 0%,#ef4444 100%);}
.sc-header--strategy{background:linear-gradient(160deg,#ea580c 0%,#f97316 100%);}
.sc-header--dispute{background:linear-gradient(160deg,#0891b2 0%,#06b6d4 100%);}
.sc-header--supply{background:linear-gradient(160deg,#0f766e 0%,#14b8a6 100%);}
.sc-engagement-icon-wrap{
width:52px;
height:52px;
border-radius:12px;
background:rgba(255,255,255,.18);
display:flex;
align-items:center;
justify-content:center;
font-size:1.4rem;
color:#fff;
flex-shrink:0;
}
.sc-engagement-title{
font-size:1rem;
font-weight:700;
color:#fff;
margin:0 0 6px;
line-height:1.3;
}
.sc-engagement-badge{
display:inline-block;
font-size:0.68rem;
font-weight:600;
padding:2px 9px;
border-radius:20px;
background:rgba(255,255,255,.22);
color:#fff;
letter-spacing:.3px;
}
.sc-engagement-desc{
grid-column:2;
grid-row:1;
padding:18px 22px 10px;
font-size:0.875rem;
color:#374151;
line-height:1.7;
margin:0;
}
.sc-detail-list{
grid-column:2;
grid-row:2;
list-style:none;
padding:0 22px 18px;
margin:0;
display:flex;
flex-wrap:wrap;
gap:0 20px;
}
.sc-detail-list li{
font-size:0.8rem;
color:#4b5563;
padding:5px 0 5px 18px;
border-top:1px solid #f3f4f6;
position:relative;
line-height:1.55;
flex:0 0 calc(50% - 10px);
}
.sc-detail-list li::before{
content:'\2713';
position:absolute;
left:0;
color:#059669;
font-weight:700;
font-size:0.75rem;
top:6px;
}
.sc-process-flow{
display:flex;
align-items:flex-start;
gap:0;
overflow-x:auto;
padding-bottom:8px;
}
.sc-process-step{
flex:1 1 0;
min-width:130px;
display:flex;
flex-direction:column;
align-items:center;
position:relative;
}
.sc-process-connector{
position:absolute;
top:27px;
left:50%;
width:100%;
height:2px;
background:linear-gradient(90deg,#1B3F7A 0%,#059669 100%);
z-index:0;
}
.sc-process-step:last-child .sc-process-connector{
display:none;
}
.sc-process-icon{
width:56px;
height:56px;
border-radius:50%;
background:linear-gradient(135deg,#1B3F7A,#2a5298);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:1.25rem;
position:relative;
z-index:1;
box-shadow:0 4px 14px rgba(27,63,122,.28);
flex-shrink:0;
margin-bottom:12px;
}
.sc-process-step:nth-child(2n) .sc-process-icon{
background:linear-gradient(135deg,#059669,#10b981);
box-shadow:0 4px 14px rgba(5,150,105,.28);
}
.sc-process-body{
text-align:center;
padding:0 8px;
}
.sc-process-num{
font-size:0.65rem;
font-weight:800;
color:#9ca3af;
letter-spacing:.8px;
margin-bottom:3px;
}
.sc-process-title{
font-size:0.82rem;
font-weight:700;
color:#111827;
margin:0 0 5px;
line-height:1.3;
}
.sc-process-desc{
font-size:0.75rem;
color:#6b7280;
line-height:1.55;
margin:0;
}
.sc-deliverable-list{
display:flex;
flex-direction:column;
gap:10px;
}
.sc-deliverable-item{
display:flex;
align-items:flex-start;
gap:12px;
padding:12px 14px;
background:#f9fafb;
border-radius:10px;
border:1px solid #f3f4f6;
}
.sc-deliverable-icon{
width:36px;
height:36px;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
font-size:1rem;
flex-shrink:0;
}
.sc-deliverable-title{
font-size:0.85rem;
font-weight:700;
color:#111827;
margin-bottom:2px;
}
.sc-deliverable-desc{
font-size:0.78rem;
color:#6b7280;
line-height:1.5;
}
.sc-report-mockup{
background:#fff;
border-radius:16px;
border:1px solid #e5e7eb;
overflow:hidden;
box-shadow:0 4px 20px rgba(0,0,0,.08);
font-family:'Segoe UI',system-ui,sans-serif;
}
.sc-report-header{
background:linear-gradient(135deg,#1B3F7A 0%,#2a5298 100%);
padding:18px 22px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.sc-report-brand{
display:flex;
align-items:center;
gap:12px;
}
.sc-report-brand-logo{
width:40px;
height:40px;
border-radius:8px;
background:rgba(255,255,255,.15);
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
color:#fff;
}
.sc-report-brand-name{
font-size:0.9rem;
font-weight:700;
color:#fff;
margin:0 0 2px;
}
.sc-report-brand-name small{
display:block;
font-size:0.72rem;
font-weight:400;
color:rgba(255,255,255,.75);
}
.sc-report-doc-type{
text-align:right;
}
.sc-report-doc-type h5{
font-size:0.85rem;
font-weight:700;
color:#fff;
margin:0 0 2px;
text-transform:uppercase;
letter-spacing:.5px;
}
.sc-report-doc-type small{
font-size:0.72rem;
color:rgba(255,255,255,.75);
}
.sc-report-client-row{
display:flex;
align-items:center;
gap:14px;
padding:14px 18px;
background:#f9fafb;
border-bottom:1px solid #f3f4f6;
}
.sc-report-client-icon{
width:44px;
height:44px;
border-radius:10px;
background:#e0e7ff;
color:#3730a3;
display:flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
flex-shrink:0;
}
.sc-report-client-name{
font-size:0.9rem;
font-weight:700;
color:#111827;
margin-bottom:2px;
}
.sc-report-client-sub{
font-size:0.75rem;
color:#6b7280;
margin:0;
line-height:1.45;
}
.sc-score-strip{
padding:12px 18px 8px;
border-bottom:1px solid #f3f4f6;
display:flex;
flex-direction:column;
gap:7px;
}
.sc-score-item{
display:flex;
align-items:center;
gap:8px;
}
.sc-score-label{
font-size:0.75rem;
font-weight:600;
color:#374151;
width:90px;
flex-shrink:0;
}
.sc-score-bar-track{
flex:1;
height:6px;
background:#f3f4f6;
border-radius:3px;
overflow:hidden;
}
.sc-score-bar-fill{
height:100%;
border-radius:3px;
transition:width .4s ease;
}
.sc-score-val{
font-size:0.72rem;
font-weight:700;
width:30px;
text-align:right;
flex-shrink:0;
}
.sc-findings-section{
padding:12px 18px 10px;
}
.sc-findings-title{
font-size:0.72rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.5px;
color:#9ca3af;
margin:0 0 10px;
}
.sc-finding-row{
display:flex;
align-items:flex-start;
gap:10px;
padding:8px 10px;
border-radius:8px;
margin-bottom:6px;
background:#f9fafb;
border:1px solid #f3f4f6;
}
.sc-priority-badge{
font-size:0.62rem;
font-weight:800;
padding:2px 6px;
border-radius:4px;
text-transform:uppercase;
letter-spacing:.3px;
flex-shrink:0;
margin-top:2px;
}
.sc-pri--critical{background:#dc2626;color:#fff;}
.sc-pri--high{background:#ea580c;color:#fff;}
.sc-pri--medium{background:#ca8a04;color:#fff;}
.sc-pri--low{background:#059669;color:#fff;}
.sc-finding-content{
flex:1;
min-width:0;
}
.sc-finding-area{
font-size:0.7rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.3px;
color:#6b7280;
margin-bottom:2px;
}
.sc-finding-text{
font-size:0.78rem;
color:#111827;
line-height:1.45;
margin-bottom:3px;
}
.sc-finding-action{
font-size:0.74rem;
color:#1B3F7A;
font-weight:600;
line-height:1.4;
}
.sc-finding-action i{
font-size:0.65rem;
margin-right:3px;
}
.sc-report-footer{
background:#f9fafb;
border-top:1px solid #e5e7eb;
padding:9px 18px;
display:flex;
align-items:center;
gap:7px;
font-size:0.72rem;
color:#9ca3af;
}
.sc-report-footer i{
font-size:0.75rem;
flex-shrink:0;
}
@media (max-width:991.98px){
.sc-engagement-card{grid-template-columns:200px 1fr;}
.sc-process-flow{gap:0;}
.sc-process-step{min-width:110px;}
.sc-process-icon{width:48px;height:48px;font-size:1.1rem;}
}
@media (max-width:767.98px){
.sc-engagement-card{grid-template-columns:1fr;grid-template-rows:auto auto auto;}
.sc-engagement-header{grid-column:1;grid-row:1;flex-direction:row;padding:16px 16px 14px;gap:12px;border-right:none;border-bottom:1px solid rgba(255,255,255,.15);}
.sc-engagement-icon-wrap{width:42px;height:42px;font-size:1.1rem;}
.sc-engagement-title{font-size:0.92rem;}
.sc-engagement-desc{grid-column:1;grid-row:2;padding:12px 16px 8px;font-size:0.83rem;}
.sc-detail-list{grid-column:1;grid-row:3;padding:0 16px 16px;}
.sc-detail-list li{flex:0 0 100%;}
.sc-process-flow{flex-wrap:wrap;justify-content:center;gap:20px;}
.sc-process-connector{display:none;}
.sc-process-step{min-width:130px;flex:0 0 calc(33% - 14px);}
.sc-report-header{padding:14px 16px;flex-direction:column;align-items:flex-start;gap:8px;}
.sc-report-doc-type{text-align:left;}
.sc-score-label{width:76px;}
.sc-findings-section{padding:10px 14px 8px;}
}
@media (max-width:480px){
.sc-process-step{flex:0 0 calc(50% - 10px);}
}
@media (max-width:480px){
.sc-process-step{flex:0 0 calc(50% - 10px);}
.sc-finding-action{display:none;}
.sc-report-client-sub{font-size:0.7rem;}
}
.mv-section{
background:#fff;
}
.mv-card{
border-radius:16px;
overflow:hidden;
height:100%;
box-shadow:0 4px 20px rgba(0,0,0,.07);
border:1px solid #e5e7eb;
display:flex;
flex-direction:column;
}
.mv-card--mission{border-top:4px solid #1B3F7A;}
.mv-card--vision{border-top:4px solid #F05A1A;}
.mv-card-icon-wrap{
width:60px;
height:60px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.5rem;
margin:28px 28px 0;
flex-shrink:0;
}
.mv-card--mission .mv-card-icon-wrap{background:#eff6ff;color:#1B3F7A;}
.mv-card--vision .mv-card-icon-wrap{background:#fff7ed;color:#F05A1A;}
.mv-card-label{
font-size:0.7rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.6px;
padding:10px 28px 0;
}
.mv-card--mission .mv-card-label{color:#1B3F7A;}
.mv-card--vision .mv-card-label{color:#F05A1A;}
.mv-card-title{
font-size:1.2rem;
font-weight:700;
color:#111827;
margin:6px 28px 0;
line-height:1.35;
}
.mv-card-body{
font-size:0.9rem;
color:#4b5563;
line-height:1.75;
padding:12px 28px 6px;
margin:0;
}
.mv-card-points{
list-style:none;
padding:4px 28px 28px;
margin:0;
margin-top:auto;
}
.mv-card-points li{
font-size:0.82rem;
color:#374151;
padding:6px 0 6px 20px;
border-top:1px solid #f3f4f6;
position:relative;
line-height:1.55;
}
.mv-card-points li::before{
content:'';
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:8px;
height:8px;
border-radius:50%;
}
.mv-card--mission .mv-card-points li::before{background:#1B3F7A;}
.mv-card--vision .mv-card-points li::before{background:#F05A1A;}
.csr-section{
background:#f8fafc;
}
.csr-card{
background:#fff;
border-radius:16px;
border:1px solid #e5e7eb;
overflow:hidden;
height:100%;
display:flex;
flex-direction:column;
box-shadow:0 2px 12px rgba(0,0,0,.06);
transition:box-shadow .25s,transform .25s;
}
.csr-card:hover{
box-shadow:0 8px 32px rgba(0,0,0,.10);
transform:translateY(-3px);
}
.csr-card-top{
padding:28px 24px 20px;
display:flex;
align-items:flex-end;
justify-content:space-between;
}
.csr-top--children{background:linear-gradient(135deg,#be185d 0%,#ec4899 100%);}
.csr-top--trees{background:linear-gradient(135deg,#15803d 0%,#22c55e 100%);}
.csr-top--education{background:linear-gradient(135deg,#1B3F7A 0%,#2a5298 100%);}
.csr-icon-wrap{
width:54px;
height:54px;
border-radius:14px;
background:rgba(255,255,255,.2);
display:flex;
align-items:center;
justify-content:center;
font-size:1.5rem;
color:#fff;
}
.csr-impact-badge{
font-size:0.68rem;
font-weight:700;
padding:4px 10px;
border-radius:20px;
background:rgba(255,255,255,.22);
color:#fff;
letter-spacing:.3px;
text-transform:uppercase;
}
.csr-card-body{
padding:20px 22px 22px;
flex:1;
display:flex;
flex-direction:column;
}
.csr-title{
font-size:1.05rem;
font-weight:700;
color:#111827;
margin:0 0 10px;
line-height:1.35;
}
.csr-desc{
font-size:0.87rem;
color:#4b5563;
line-height:1.72;
margin-bottom:14px;
}
.csr-points{
list-style:none;
padding:0;
margin:0 0 0 0;
margin-top:auto;
}
.csr-points li{
font-size:0.8rem;
color:#374151;
padding:5px 0 5px 18px;
border-top:1px solid #f3f4f6;
position:relative;
line-height:1.5;
}
.csr-points li::before{
content:'\2713';
position:absolute;
left:0;
top:6px;
font-weight:700;
font-size:0.72rem;
color:#059669;
}
.csr-quote-strip{
background:linear-gradient(135deg,#1B3F7A 0%,#0d2247 100%);
border-radius:16px;
padding:36px 44px;
position:relative;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
.csr-quote-icon{
font-size:2.5rem;
color:rgba(255,255,255,.2);
margin-bottom:16px;
line-height:1;
}
.csr-quote-text{
font-size:1rem;
color:rgba(255,255,255,.9);
line-height:1.8;
font-style:italic;
max-width:780px;
margin:0 0 20px;
}
.csr-quote-author{
display:flex;
align-items:center;
gap:12px;
}
.csr-author-avatar{
width:44px;
height:44px;
border-radius:50%;
background:rgba(255,255,255,.15);
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
color:#fff;
flex-shrink:0;
}
.csr-author-name{
font-size:0.88rem;
font-weight:700;
color:#fff;
}
.csr-author-role{
font-size:0.75rem;
color:rgba(255,255,255,.65);
}
@media (max-width:767.98px){
.mv-card-icon-wrap{margin:22px 20px 0;}
.mv-card-label{padding:8px 20px 0;}
.mv-card-title{margin:6px 20px 0;font-size:1.05rem;}
.mv-card-body{padding:10px 20px 6px;}
.mv-card-points{padding:4px 20px 20px;}
.csr-quote-strip{padding:28px 22px;}
.csr-quote-text{font-size:0.88rem;}
.csr-card-top{padding:22px 18px 16px;}
.csr-card-body{padding:16px 18px 18px;}
}
.team-card--clickable{
cursor:pointer;
position:relative;
transition:box-shadow .22s,transform .22s;
}
.team-card--clickable:hover{
box-shadow:0 10px 32px rgba(27,63,122,.14);
transform:translateY(-4px);
}
.team-card--clickable:focus-visible{
outline:3px solid #1B3F7A;
outline-offset:3px;
}
.team-view-profile{
display:inline-block;
margin-top:12px;
font-size:0.78rem;
font-weight:700;
color:#1B3F7A;
letter-spacing:.2px;
opacity:0;
transform:translateY(4px);
transition:opacity .2s,transform .2s;
}
.team-card--clickable:hover .team-view-profile{
opacity:1;
transform:translateY(0);
}
.team-modal-content{
border:none;
border-radius:20px;
overflow:hidden;
box-shadow:0 24px 60px rgba(0,0,0,.18);
}
.team-modal-close{
position:absolute;
top:16px;
right:16px;
z-index:10;
width:36px;
height:36px;
border-radius:50%;
background:rgba(255,255,255,.18);
border:none;
color:#fff;
font-size:1rem;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:background .2s;
}
.team-modal-close:hover{
background:rgba(255,255,255,.32);
}
.team-modal-hero{
background:linear-gradient(135deg,#1B3F7A 0%,#2a5298 100%);
padding:40px 36px 36px;
display:flex;
align-items:center;
gap:28px;
}
.team-modal-photo-wrap{
flex-shrink:0;
}
.team-modal-img{
width:100px;
height:100px;
border-radius:50%;
object-fit:cover;
border:3px solid rgba(255,255,255,.35);
box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.team-modal-avatar{
width:100px;
height:100px;
border-radius:50%;
background:rgba(255,255,255,.18);
border:3px solid rgba(255,255,255,.35);
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
font-weight:800;
color:#fff;
letter-spacing:-1px;
}
.team-modal-identity{
flex:1;
min-width:0;
}
.team-modal-name{
font-size:1.5rem;
font-weight:800;
color:#fff;
line-height:1.2;
margin-bottom:6px;
}
.team-modal-role{
font-size:0.9rem;
font-weight:600;
color:rgba(255,255,255,.8);
letter-spacing:.2px;
}
.team-modal-socials{
display:flex;
gap:8px;
}
.team-modal-social-link{
width:34px;
height:34px;
border-radius:8px;
background:rgba(255,255,255,.15);
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:0.9rem;
text-decoration:none;
transition:background .2s;
}
.team-modal-social-link:hover{
background:rgba(255,255,255,.28);
color:#fff;
}
.team-modal-body{
padding:28px 36px 36px;
background:#fff;
}
.team-modal-section-label{
font-size:0.7rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.6px;
color:#9ca3af;
margin-bottom:10px;
}
.team-modal-bio{
font-size:0.95rem;
color:#374151;
line-height:1.8;
margin:0;
}
@media (max-width:575.98px){
.team-modal-hero{flex-direction:column;text-align:center;padding:32px 22px 28px;gap:16px;}
.team-modal-socials{justify-content:center;}
.team-modal-name{font-size:1.25rem;}
.team-modal-body{padding:22px 22px 28px;}
.team-modal-img,
.team-modal-avatar{width:80px;height:80px;font-size:1.6rem;}
}
.team-social--linkedin:hover{background:#0077b5 !important;}
.team-social--twitter:hover{background:#000000 !important;}
.team-social--facebook:hover{background:#1877f2 !important;}
.team-social--instagram:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) !important;}
.pf-modal-content{
border:none;
border-radius:20px;
overflow:hidden;
box-shadow:0 24px 60px rgba(0,0,0,.2);
}
.pf-modal-close{
position:absolute;
top:14px;
right:14px;
z-index:20;
width:36px;
height:36px;
border-radius:50%;
background:rgba(255,255,255,.18);
border:none;
color:#fff;
font-size:1rem;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:background .2s;
}
.pf-modal-close:hover{
background:rgba(255,255,255,.32);
}
.pf-modal-hero{
min-height:180px;
padding:32px 32px 28px;
display:flex;
align-items:flex-end;
position:relative;
background:linear-gradient(135deg,#1B3F7A 0%,#2a5298 100%);
}
.pf-modal-hero-inner{
position:relative;
z-index:1;
width:100%;
}
.pf-featured-ribbon{
display:inline-flex;
align-items:center;
font-size:0.68rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.4px;
padding:3px 10px;
border-radius:20px;
background:#F05A1A;
color:#fff;
margin-bottom:10px;
}
.pf-modal-meta{
display:flex;
align-items:center;
gap:8px;
margin-bottom:8px;
flex-wrap:wrap;
}
.pf-modal-industry-badge{
font-size:0.72rem;
font-weight:700;
padding:3px 10px;
border-radius:20px;
background:rgba(255,255,255,.2);
color:#fff;
text-transform:uppercase;
letter-spacing:.3px;
}
.pf-modal-client{
font-size:0.8rem;
color:rgba(255,255,255,.75);
}
.pf-modal-title{
font-size:1.5rem;
font-weight:800;
color:#fff;
line-height:1.25;
margin:0;
}
.pf-modal-body{
padding:26px 32px 10px;
background:#fff;
}
.pf-modal-section-label{
font-size:0.68rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.6px;
color:#9ca3af;
margin-bottom:8px;
}
.pf-modal-description{
font-size:0.93rem;
color:#374151;
line-height:1.8;
margin:0 0 22px;
}
.pf-modal-tech-section{
margin-bottom:8px;
}
.pf-modal-tech-list{
display:flex;
flex-wrap:wrap;
gap:6px;
}
.pf-modal-tech-tag{
font-size:0.76rem;
font-weight:600;
padding:4px 12px;
border-radius:20px;
background:#eff6ff;
color:#1B3F7A;
border:1px solid #bfdbfe;
}
.pf-modal-footer{
padding:18px 32px 24px;
background:#fff;
border-top:1px solid #f3f4f6;
display:flex;
align-items:center;
gap:10px;
}
.pf-visit-btn{
background:linear-gradient(135deg,#1B3F7A,#2a5298);
color:#fff !important;
border:none;
border-radius:10px;
padding:10px 24px;
font-size:0.88rem;
font-weight:700;
text-decoration:none;
display:inline-flex;
align-items:center;
transition:opacity .2s,transform .15s;
}
.pf-visit-btn:hover{
opacity:.88;
transform:translateY(-1px);
color:#fff !important;
}
.pf-close-btn{
background:#f3f4f6;
color:#374151;
border:none;
border-radius:10px;
padding:10px 20px;
font-size:0.88rem;
font-weight:600;
transition:background .2s;
}
.pf-close-btn:hover{
background:#e5e7eb;
}
@media (max-width:575.98px){
.pf-modal-hero{min-height:150px;padding:24px 20px 20px;}
.pf-modal-title{font-size:1.2rem;}
.pf-modal-body{padding:20px 20px 8px;}
.pf-modal-footer{padding:14px 20px 20px;flex-direction:column;align-items:stretch;}
.pf-visit-btn,
.pf-close-btn{justify-content:center;}
}
.partners-section{
padding:60px 0 40px;
background:#f8fafc;
overflow:hidden;
}
.partners-slider-wrap{
overflow:hidden;
width:100%;
margin-top:2rem;
-webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
}
.partners-track{
display:flex;
gap:0;
width:max-content;
animation:partners-scroll 30s linear infinite;
}
.partners-track:hover{
animation-play-state:paused;
}
@keyframes partners-scroll{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}
.partner-slide{
display:flex;
align-items:center;
justify-content:center;
padding:0 48px;
flex-shrink:0;
}
.partner-slide a,
.partner-slide > div{
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
}
.partner-logo{
max-height:70px;
max-width:180px;
width:auto;
object-fit:contain;
filter:none;
opacity:1;
transition:transform 0.3s ease;
}
.partner-slide a:hover .partner-logo{
transform:scale(1.06);
}
.partner-name-pill{
background:#fff;
border:1.5px solid #e2e8f0;
border-radius:8px;
padding:10px 22px;
font-weight:600;
font-size:0.88rem;
color:#1B3F7A;
white-space:nowrap;
transition:border-color 0.3s,color 0.3s;
}
.partner-slide a:hover .partner-name-pill{
border-color:#F05A1A;
color:#F05A1A;
}
.blog-card{
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:0 2px 12px rgba(0,0,0,0.07);
display:flex;
flex-direction:column;
transition:transform 0.3s ease,box-shadow 0.3s ease;
}
.blog-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 32px rgba(27,63,122,0.13);
}
.blog-card-img-link{
position:relative;
display:block;
overflow:hidden;
aspect-ratio:16 / 9;
background:#1B3F7A;
text-decoration:none;
flex-shrink:0;
}
.blog-card-img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.4s ease;
}
.blog-card:hover .blog-card-img{
transform:scale(1.04);
}
.blog-card-img-placeholder{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#1B3F7A 0%,#2d5fa0 100%);
color:rgba(255,255,255,0.3);
}
.blog-card-category{
position:absolute;
top:12px;
left:12px;
background:#F05A1A;
color:#fff;
font-size:0.7rem;
font-weight:700;
letter-spacing:0.04em;
text-transform:uppercase;
padding:3px 10px;
border-radius:20px;
pointer-events:none;
}
.blog-card-body{
padding:1.25rem 1.35rem;
display:flex;
flex-direction:column;
flex:1;
}
.blog-card-title{
font-size:1rem;
font-weight:700;
line-height:1.4;
margin-bottom:0.5rem;
color:#1B3F7A;
}
.blog-card-title a{
color:inherit;
text-decoration:none;
transition:color 0.2s;
}
.blog-card-title a:hover{
color:#F05A1A;
}
.blog-card-excerpt{
font-size:0.85rem;
color:#64748b;
line-height:1.55;
flex:1;
margin-bottom:0.85rem;
}
.blog-card-footer{
display:flex;
align-items:center;
justify-content:space-between;
border-top:1px solid #f1f5f9;
padding-top:0.75rem;
margin-top:auto;
}
.blog-meta{
font-size:0.75rem;
color:#94a3b8;
}
.blog-read-more{
font-size:0.78rem;
font-weight:700;
color:#F05A1A;
text-decoration:none;
white-space:nowrap;
}
.blog-read-more:hover{
color:#c44a14;
}
.blog-hero-section{
padding:80px 0 60px;
background:linear-gradient(135deg,#0d2247 0%,#1B3F7A 60%,#1a3a6e 100%);
}
.blog-hero-title{
font-size:clamp(2rem,5vw,3rem);
font-weight:800;
color:#fff;
margin:0.5rem 0;
line-height:1.2;
}
.blog-hero-subtitle{
font-size:1.05rem;
color:rgba(255,255,255,0.75);
max-width:560px;
margin:0 auto;
}
.blog-featured-card{
border-radius:16px;
overflow:hidden;
box-shadow:0 4px 32px rgba(27,63,122,0.13);
background:#fff;
}
.blog-featured-img-wrap{
position:relative;
height:100%;
min-height:280px;
background:#1B3F7A;
overflow:hidden;
}
.blog-featured-img{
width:100%;
height:100%;
object-fit:cover;
}
.blog-featured-img-placeholder{
width:100%;
height:100%;
min-height:280px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#1B3F7A 0%,#2d5fa0 100%);
}
.blog-featured-ribbon{
position:absolute;
top:16px;
left:16px;
background:#F05A1A;
color:#fff;
font-size:0.72rem;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
padding:4px 12px;
border-radius:20px;
}
.blog-category-badge{
display:inline-block;
background:#fff0e8;
color:#F05A1A;
border:1.5px solid #F05A1A;
font-size:0.72rem;
font-weight:700;
letter-spacing:0.04em;
text-transform:uppercase;
padding:3px 12px;
border-radius:20px;
}
.blog-featured-title{
font-size:1.55rem;
font-weight:800;
color:#1B3F7A;
line-height:1.3;
margin-bottom:0.75rem;
}
.blog-featured-excerpt{
font-size:0.95rem;
color:#64748b;
line-height:1.6;
}
.btn-blog-read{
display:inline-flex;
align-items:center;
gap:6px;
background:#1B3F7A;
color:#fff;
font-weight:700;
font-size:0.9rem;
padding:10px 22px;
border-radius:8px;
text-decoration:none;
transition:background 0.2s,transform 0.2s;
width:fit-content;
}
.btn-blog-read:hover{
background:#F05A1A;
color:#fff;
transform:translateY(-1px);
}
.blog-post-hero{
position:relative;
min-height:380px;
display:flex;
align-items:flex-end;
}
.blog-post-hero-img{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
}
.blog-post-hero-placeholder{
background:linear-gradient(135deg,#0d2247 0%,#1B3F7A 60%,#1a3a6e 100%);
}
.blog-post-hero-overlay{
position:relative;
z-index:2;
width:100%;
padding:60px 0 40px;
background:linear-gradient(to top,rgba(0,0,0,0.78) 0%,rgba(0,0,0,0.25) 60%,transparent 100%);
}
.blog-post-title{
font-size:clamp(1.6rem,4vw,2.4rem);
font-weight:800;
color:#fff;
line-height:1.25;
margin-bottom:0.75rem;
text-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.blog-post-meta{
font-size:0.85rem;
color:rgba(255,255,255,0.8);
}
.blog-post-body{
font-size:1.02rem;
line-height:1.8;
color:#374151;
}
.blog-post-body h1,
.blog-post-body h2,
.blog-post-body h3,
.blog-post-body h4{
color:#1B3F7A;
font-weight:700;
margin-top:2rem;
margin-bottom:0.75rem;
}
.blog-post-body h2{font-size:1.5rem;}
.blog-post-body h3{font-size:1.25rem;}
.blog-post-body h4{font-size:1.05rem;}
.blog-post-body p{margin-bottom:1.25rem;}
.blog-post-body ul,
.blog-post-body ol{margin-bottom:1.25rem;padding-left:1.5rem;}
.blog-post-body li{margin-bottom:0.4rem;}
.blog-post-body a{
color:#F05A1A;
text-decoration:underline;
}
.blog-post-body blockquote{
border-left:4px solid #F05A1A;
background:#fff8f5;
margin:1.5rem 0;
padding:1rem 1.25rem;
border-radius:0 8px 8px 0;
font-style:italic;
color:#555;
}
.blog-post-body img{
max-width:100%;
border-radius:10px;
margin:1rem 0;
}
.blog-post-body pre,
.blog-post-body code{
background:#f1f5f9;
border-radius:6px;
font-size:0.9rem;
font-family:'Courier New',monospace;
}
.blog-post-body pre{
padding:1rem 1.25rem;
overflow-x:auto;
margin-bottom:1.25rem;
}
.blog-post-body code{
padding:2px 6px;
}
@media (max-width:767.98px){
.partners-section{padding:40px 0 30px;}
.partner-slide{padding:0 24px;}
.partner-logo{max-height:52px;max-width:140px;}
.blog-hero-title{font-size:1.7rem;}
.blog-featured-title{font-size:1.2rem;}
.blog-post-hero{min-height:260px;}
.blog-post-title{font-size:1.4rem;}
}
.blog-tag-badge{
display:inline-block;
background:rgba(255,255,255,0.15);
color:rgba(255,255,255,0.9);
border:1px solid rgba(255,255,255,0.35);
font-size:0.68rem;
font-weight:600;
letter-spacing:0.03em;
text-transform:uppercase;
padding:2px 10px;
border-radius:20px;
text-decoration:none;
transition:background 0.2s,border-color 0.2s;
}
.blog-tag-badge:hover{
background:rgba(255,255,255,0.28);
color:#fff;
}
.blog-post-lead{
font-size:1.12rem;
font-weight:500;
color:#374151;
line-height:1.7;
border-left:4px solid #F05A1A;
padding:0.85rem 1.25rem;
background:#fff8f5;
border-radius:0 10px 10px 0;
margin-bottom:2rem;
}
.blog-tag-pill{
display:inline-block;
background:#f1f5f9;
color:#475569;
font-size:0.75rem;
font-weight:600;
padding:4px 12px;
border-radius:20px;
text-decoration:none;
margin:2px 3px 2px 0;
transition:background 0.2s,color 0.2s;
}
.blog-tag-pill:hover{
background:#1B3F7A;
color:#fff;
}
.blog-share-btn{
display:inline-flex;
align-items:center;
font-size:0.8rem;
font-weight:600;
padding:6px 14px;
border-radius:7px;
text-decoration:none;
transition:filter 0.2s,transform 0.15s;
}
.blog-share-btn:hover{
filter:brightness(1.1);
transform:translateY(-1px);
}
.blog-share--twitter{background:#000;color:#fff;}
.blog-share--linkedin{background:#0077b5;color:#fff;}
.blog-share--facebook{background:#1877f2;color:#fff;}
.blog-share--whatsapp{background:#25d366;color:#fff;}
.blog-post-content-section{
padding:48px 0 60px;
background:#fff;
}
.blog-post-body{
font-size:0.96rem;
line-height:1.65;
color:#374151;
}
.blog-post-body h2,
.blog-post-body h3,
.blog-post-body h4{
color:#1B3F7A;
font-weight:700;
margin-top:1.5rem;
margin-bottom:0.5rem;
}
.blog-post-body h2{font-size:1.25rem;}
.blog-post-body h3{font-size:1.08rem;}
.blog-post-body h4{font-size:0.98rem;}
.blog-post-body p{margin-bottom:0.85rem;}
.blog-post-body ul,
.blog-post-body ol{margin-bottom:0.85rem;padding-left:1.35rem;}
.blog-post-body li{margin-bottom:0.3rem;}
.blog-post-body blockquote{
border-left:3px solid #F05A1A;
background:#fff8f5;
margin:1rem 0;
padding:0.75rem 1rem;
border-radius:0 8px 8px 0;
font-style:italic;
color:#555;
font-size:0.93rem;
}
.blog-post-lead{
font-size:0.98rem;
font-weight:500;
color:#374151;
line-height:1.6;
border-left:3px solid #F05A1A;
padding:0.7rem 1rem;
background:#fff8f5;
border-radius:0 8px 8px 0;
margin-bottom:1.5rem;
}
.blog-sidebar{
position:sticky;
top:88px;
}
.blog-sidebar-widget{
background:#fff;
border:1px solid #e9eef4;
border-radius:12px;
padding:1.25rem 1.35rem;
margin-bottom:1.25rem;
}
.blog-sidebar-title{
font-size:0.92rem;
font-weight:700;
color:#1B3F7A;
margin-bottom:1rem;
padding-bottom:0.65rem;
border-bottom:2px solid #f1f5f9;
}
.blog-sidebar-posts{
display:flex;
flex-direction:column;
gap:0.85rem;
}
.blog-sidebar-post-item{
display:flex;
gap:0.75rem;
align-items:flex-start;
text-decoration:none;
transition:opacity 0.2s;
}
.blog-sidebar-post-item:hover{
opacity:0.8;
}
.blog-sidebar-post-img{
width:64px;
height:48px;
flex-shrink:0;
border-radius:7px;
overflow:hidden;
background:#1B3F7A;
}
.blog-sidebar-post-img img{
width:100%;
height:100%;
object-fit:cover;
}
.blog-sidebar-post-placeholder{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
color:rgba(255,255,255,0.5);
font-size:0.9rem;
}
.blog-sidebar-post-info{
flex:1;
min-width:0;
}
.blog-sidebar-post-title{
font-size:0.82rem;
font-weight:600;
color:#1B3F7A;
line-height:1.35;
margin-bottom:0.25rem;
transition:color 0.2s;
}
.blog-sidebar-post-item:hover .blog-sidebar-post-title{
color:#F05A1A;
}
.blog-sidebar-post-date{
font-size:0.72rem;
color:#94a3b8;
}
.blog-sidebar-services{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:0.1rem;
}
.blog-sidebar-services li a{
display:flex;
align-items:center;
font-size:0.84rem;
color:#374151;
text-decoration:none;
padding:0.45rem 0.5rem;
border-radius:7px;
transition:background 0.15s,color 0.15s;
}
.blog-sidebar-services li a:hover{
background:#f0f5ff;
color:#1B3F7A;
}
.blog-sidebar-cta{
background:linear-gradient(135deg,#0d2247 0%,#1B3F7A 100%);
border:none;
text-align:center;
padding:1.75rem 1.35rem;
}
.blog-sidebar-cta-icon{
width:48px;
height:48px;
background:#F05A1A;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 0.85rem;
font-size:1.1rem;
color:#fff;
}
.blog-sidebar-cta-title{
font-size:1rem;
font-weight:700;
color:#fff;
margin-bottom:0.5rem;
}
.blog-sidebar-cta-text{
font-size:0.82rem;
color:rgba(255,255,255,0.75);
line-height:1.5;
margin-bottom:1rem;
}
.blog-sidebar-cta-btn{
display:block;
background:#F05A1A;
color:#fff;
font-size:0.85rem;
font-weight:700;
padding:9px 20px;
border-radius:8px;
text-decoration:none;
margin-bottom:0.6rem;
transition:background 0.2s;
}
.blog-sidebar-cta-btn:hover{
background:#d44e16;
color:#fff;
}
.blog-sidebar-wa-btn{
display:block;
background:rgba(255,255,255,0.12);
color:rgba(255,255,255,0.9);
font-size:0.82rem;
font-weight:600;
padding:8px 20px;
border-radius:8px;
text-decoration:none;
border:1px solid rgba(255,255,255,0.25);
transition:background 0.2s;
}
.blog-sidebar-wa-btn:hover{
background:#25d366;
color:#fff;
border-color:#25d366;
}
@media (max-width:991.98px){
.blog-post-content-section{padding:32px 0 48px;}
.blog-sidebar{position:static;}
.blog-sidebar-widget{margin-bottom:1rem;}
}
#heroCarousel{
position:relative;
}
#heroCarousel .carousel-inner{
overflow:visible;
}
#heroCarousel .carousel-item{
padding-bottom:0;
transition:opacity 0.7s ease-in-out;
}
.hero-carousel-ctrl{
position:absolute;
top:40%;
transform:translateY(-50%);
z-index:10;
width:46px;
height:46px;
border-radius:50%;
background:rgba(255,255,255,0.10);
border:1.5px solid rgba(255,255,255,0.28);
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:background 0.25s,opacity 0.25s,border-color 0.25s;
font-size:0.85rem;
padding:0;
}
.hero-section:hover .hero-carousel-ctrl{
opacity:1;
}
.hero-carousel-ctrl:hover{
background:var(--accent);
border-color:var(--accent);
color:#fff;
}
.hero-carousel-ctrl.carousel-control-prev{left:20px;}
.hero-carousel-ctrl.carousel-control-next{right:20px;}
.hero-carousel-dots{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
margin:4px 0 20px;
}
.hero-dot{
width:10px;
height:10px;
border-radius:50%;
background:rgba(255,255,255,0.32);
border:none;
padding:0;
cursor:pointer;
flex-shrink:0;
transition:background 0.3s,width 0.3s,border-radius 0.3s;
}
.hero-dot.active{
background:var(--accent);
width:28px;
border-radius:5px;
}
.hero-dot:hover:not(.active){
background:rgba(255,255,255,0.65);
}
@media (max-width:767.98px){
.hero-carousel-ctrl{display:none;}
.hero-carousel-dots{margin:4px 0 16px;}
}
.hero-slide-bg-layer{
position:absolute;
inset:0;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
opacity:0;
z-index:1;
pointer-events:none;
transition:opacity 0.8s ease;
}
.hero-slide-bg-layer.active{
opacity:0.25;
}
/* ============================================================
   MOBILE FULL-PANEL NAVIGATION
   ============================================================ */

/* Custom hamburger button */
.mobile-menu-open {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 2px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 8px;
    cursor: pointer;
    z-index: 1031;
}
.hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--primary);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 991.98px) {
    .mobile-menu-open { display: flex; }
}

/* Overlay — dark backdrop behind panel */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1039;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.mobile-menu-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Panel — slides in from right */
.mobile-menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(480px, 100vw);
    height: 100vh;
    background: #0d2247;
    z-index: 1040;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mobile-menu-panel.open {
    transform: translateX(0);
}

/* Panel header */
.mmp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.mmp-logo { display: flex; align-items: center; }
.mmp-close {
    display: flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.85);
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    font-family: inherit;
}
.mmp-close:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}
.mmp-close i { font-size: 0.9rem; }

/* Nav items */
.mmp-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.mmp-nav::-webkit-scrollbar { width: 3px; }
.mmp-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.mmp-item {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.18s;
}
.mmp-item:hover,
.mmp-item.active {
    background: rgba(240,90,26,0.1);
}
.mmp-item.active .mmp-icon,
.mmp-item.active .mmp-label {
    color: #F05A1A;
}
.mmp-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 60px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.06);
    color: #F05A1A;
    font-size: 1.1rem;
    transition: background 0.18s;
}
.mmp-item:hover .mmp-icon {
    background: rgba(240,90,26,0.15);
}
.mmp-label {
    flex: 1;
    text-align: left;
    padding: 0 20px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.88);
    text-transform: uppercase;
}
.mmp-chevron {
    color: rgba(255,255,255,0.4);
    font-size: 0.72rem;
    margin-right: 20px;
    transition: transform 0.25s ease;
}
.mmp-group-toggle[aria-expanded="true"] .mmp-chevron {
    transform: rotate(180deg);
}
.mmp-group-toggle[aria-expanded="true"] {
    background: rgba(240,90,26,0.08);
}

/* Sub-items group */
.mmp-group {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: rgba(0,0,0,0.2);
}
.mmp-group.open {
    max-height: 600px;
}
.mmp-sub-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px 13px 64px;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: color 0.18s, background 0.18s;
}
.mmp-sub-item:last-child { border-bottom: none; }
.mmp-sub-item i { color: #F05A1A; font-size: 0.85rem; width: 16px; }
.mmp-sub-item:hover {
    color: #F05A1A;
    background: rgba(240,90,26,0.06);
}

/* Get a Quote CTA */
.mmp-cta {
    background: rgba(240,90,26,0.12);
    border-top: 1px solid rgba(240,90,26,0.3) !important;
    border-bottom: 1px solid rgba(240,90,26,0.3) !important;
}
.mmp-cta .mmp-icon { color: #F05A1A; background: rgba(240,90,26,0.15); }
.mmp-cta .mmp-label { color: #F05A1A; }
.mmp-cta:hover { background: rgba(240,90,26,0.2); }

/* Social links */
.mmp-social {
    padding: 18px 24px 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.mmp-social-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.4);
    margin-bottom: 12px;
}
.mmp-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mmp-social-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    padding: 5px 0;
    transition: color 0.18s;
}
.mmp-social-links a:hover { color: #F05A1A; }
.mmp-social-links a i { color: #F05A1A; font-size: 0.9rem; }

/* Panel footer */
.mmp-footer {
    padding: 12px 24px 20px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.3);
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

/* Desktop — hide panel completely */
@media (min-width: 992px) {
    .mobile-menu-panel,
    .mobile-menu-overlay { display: none !important; }
}

/* Desktop dropdown: open on hover */
@media (min-width: 992px) {
    #mainNav .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
        pointer-events: none;
    }
    #mainNav .dropdown-menu.show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
    }
}