North Denver metro? We can help today.
============================ */
/* Scope to the page wrapper if present */
.certs-section .cta-line,
.cta-line{
box-sizing: border-box;
max-width: 980px;
margin: 40px auto 60px;
padding: clamp(16px, 2.5vw, 22px) clamp(18px, 3vw, 28px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
background: #fff;
border: 1px solid #E6F3F6;
border-radius: 18px;
box-shadow: 0 10px 26px rgba(2,44,54,.08);
}
/* Message (desktop/tablet) */
.certs-section .cta-line .cta-msg,
.cta-line .cta-msg{
margin: 0;
color: #0F172A;
font-weight: 700;
line-height: 1.35;
flex: 1 1 420px; /* leaves room for the actions on wide screens */
}
/* Actions group */
.certs-section .cta-line .cta-actions,
.cta-line .cta-actions{
display: flex;
align-items: center;
gap: 14px 18px;
flex: 0 0 auto;
}
/* Primary pill */
.certs-section .cta-line .cta-primary,
.cta-line .cta-primary{
display: inline-block;
padding: 12px 22px;
background: #0E7490;
color: #fff;
border-radius: 9999px;
text-decoration: none;
font-weight: 700;
line-height: 1;
box-shadow: 0 6px 14px rgba(14,116,144,.25);
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.certs-section .cta-line .cta-primary:hover,
.cta-line .cta-primary:hover{
background: #0C687F;
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(14,116,144,.28);
}
/* Secondary (phone link) */
.certs-section .cta-line .cta-secondary,
.cta-line .cta-secondary{
color: #B77817;
text-decoration: none;
font-weight: 600;
}
.certs-section .cta-line .cta-secondary:hover,
.cta-line .cta-secondary:hover{
text-decoration: underline;
text-underline-offset: 2px;
}
/* -----------------
Tablet refinements
----------------- */
@media (min-width: 768px) and (max-width: 1024px){
.certs-section .cta-line,
.cta-line{ gap: 16px 20px; }
/* nudge size slightly if your theme makes it too large */
.certs-section .cta-line .cta-msg,
.cta-line .cta-msg{ font-size: clamp(18px, 2.2vw, 20px); }
}
/* ---------------
Mobile layout
--------------- */
@media (max-width: 767px){
.certs-section .cta-line,
.cta-line{
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
padding: 16px 16px 18px;
margin: 28px auto 40px;
}
/* CRITICAL FIX: remove the desktop flex-basis so the message
doesn't create a big empty column height */
.certs-section .cta-line .cta-msg,
.cta-line .cta-msg{
flex: 0 0 auto !important;
font-size: 17px; /* slightly smaller so it often fits on one line */
line-height: 1.4;
}
.certs-section .cta-line .cta-actions,
.cta-line .cta-actions{
width: 100%;
justify-content: center;
gap: 12px;
}
.certs-section .cta-line .cta-primary,
.cta-line .cta-primary{
width: 100%;
text-align: center;
padding: 14px 18px;
}
}
/* Tablet-only: make CTA headline a bit smaller */
@media (min-width: 768px) and (max-width: 1024px){
.certs-section .cta-line .cta-msg,
.cta-line .cta-msg{
font-size: clamp(16px, 2.0vw, 20px); /* tweak as needed */
line-height: 1.35; /* keep the same rhythm */
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e38b11d *//* ===== Certifications CTA card (class .cta-line) – FINAL ===== */
/* Base / desktop */
.certs-section .cta-line,
.cta-line{
max-width: 980px;
margin: 40px auto 60px;
padding: clamp(16px, 2.5vw, 22px) clamp(18px, 3vw, 28px);
display: flex;
align-items: center; /* vertical center */
justify-content: space-between; /* message left, actions right */
gap: 16px 24px;
background: #fff;
border: 1px solid #E6F3F6;
border-radius: 18px;
box-shadow: 0 10px 26px rgba(2,44,54,.08);
min-height: auto !important; /* guard against theme min-heights */
}
.certs-section .cta-line .cta-msg,
.cta-line .cta-msg{
margin: 0;
color: #0F172A;
font-weight: 700;
line-height: 1.35;
/* Keeps tablet in check, stays elegant on desktop */
font-size: clamp(18px, 1.15vw, 20px);
flex: 1 1 420px;
}
.certs-section .cta-line .cta-actions,
.cta-line .cta-actions{
display: flex;
align-items: center;
gap: 14px 18px;
flex: 0 0 auto;
}
.certs-section .cta-line .cta-primary,
.cta-line .cta-primary{
display: inline-block;
padding: 12px 22px;
background: #0E7490;
color: #fff;
border-radius: 9999px;
text-decoration: none;
font-weight: 700;
line-height: 1;
box-shadow: 0 6px 14px rgba(14,116,144,.25);
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.certs-section .cta-line .cta-primary:hover,
.cta-line .cta-primary:hover{
background: #0C687F;
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(14,116,144,.28);
}
.certs-section .cta-line .cta-secondary,
.cta-line .cta-secondary{
color: #B77817;
text-decoration: none;
font-weight: 600;
}
/* ===== Tablet (768–1024): cap text size & tighten button a touch ===== */
@media (min-width:768px) and (max-width:1024px){
.certs-section .cta-line .cta-msg,
.cta-line .cta-msg{ font-size: 18px; }
.certs-section .cta-line .cta-primary,
.cta-line .cta-primary{ padding: 11px 20px; }
}
/* ===== Mobile (≤767): block layout, no stretch whitespace ===== */
@media (max-width:767px){
.certs-section .cta-line,
.cta-line{
display: block; /* prevents flex stretching/tall card */
text-align: left;
padding: 16px 16px 18px;
margin: 28px auto 40px;
}
.certs-section .cta-line .cta-msg,
.cta-line .cta-msg{
font-size: 17px; /* smaller, consistent */
margin: 0 0 10px;
}
.certs-section .cta-line .cta-actions,
.cta-line .cta-actions{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100%;
}
.certs-section .cta-line .cta-primary,
.cta-line .cta-primary{
width: 100%;
text-align: center;
padding: 14px 18px;
}
.certs-section .cta-line .cta-secondary,
.cta-line .cta-secondary{
display: block;
text-align: center;
}
}
/* Shrink the outer card only for the CTA section (has the tel: link) */
.certs-page .certs-section:has(a[href^="tel:"]) {
max-width: 1100px;
margin: 24px auto;
padding: clamp(10px, 2vw, 16px);
border-radius: 14px;
background: #fff;
border: 1px solid #E8F2F5;
box-shadow: 0 8px 22px rgba(2,44,54,.07);
}
/* Keep the inner content centered neatly */
.certs-page .certs-section:has(a[href^="tel:"]) > * {
margin-inline: auto;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a6f358c */.certs-page .hero-grid,
.certs-page.hero-grid{
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 24px 24px, 24px 24px;
}/* End custom CSS */