:root {
--primary-red: #c12626;
--primary-red-hover: #a51f1f;
--primary-red-light: rgba(193, 38, 38, 0.08);
--secondary-blue: #1b5fa7;
--secondary-blue-hover: #144982;
--secondary-blue-light: #eef5fc;
--dark-navy: #112a4a;
--dark-navy-deep: #0b1c33;
--text-dark: #1e293b;
--text-muted: #5f6670;
--text-light: #94a3b8;
--bg-light: #f8f9fb;
--bg-white: #ffffff;
--border-color: #e2e8f0;
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 20px 45px rgba(17, 42, 74, 0.12);
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--transition-fast: all 0.2s ease;
--transition-normal: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 120px;
font-size: 16px;
}
body {
font-family: 'Poppins', sans-serif;
background: var(--bg-light);
color: var(--text-dark);
line-height: 1.6;
overflow-x: hidden !important;
max-width: 100% !important;
width: 100% !important;
padding-bottom: 38px;
-webkit-font-smoothing: antialiased;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition-fast);
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
}
.bottom-bar,
.top-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 1002;
background: var(--primary-red);
color: #ffffff;
font-size: 13.5px;
font-weight: 500;
box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15);
}
.bottom-bar-content,
.top-bar-content {
display: flex;
justify-content: space-between;
align-items: center;
height: 38px;
}
.bottom-bar-content div,
.top-bar-content div {
display: flex;
align-items: center;
gap: 8px;
}
.bottom-bar a:hover,
.top-bar a:hover {
text-decoration: underline;
opacity: 0.9;
}
header {
position: sticky;
top: 0;
z-index: 1001;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(12px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
transition: var(--transition-fast);
}
.nav {
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}
.logo {
flex-shrink: 0;
}
.logo-image {
height: 60px;
width: auto;
object-fit: contain;
transition: transform 0.3s ease;
}
.logo-image:hover {
transform: scale(1.02);
}
nav {
flex-shrink: 0;
}
nav ul {
display: flex;
list-style: none;
align-items: center;
flex-wrap: nowrap;
gap: clamp(10px, 1.3vw, 24px);
}
nav ul li {
position: relative;
white-space: nowrap;
flex-shrink: 0;
}
nav a {
color: var(--text-dark);
font-weight: 500;
font-size: 14.5px;
padding: 8px 0;
position: relative;
white-space: nowrap;
}
nav a:hover,
nav a.active-link {
color: var(--secondary-blue);
}
.dropdown>a {
display: flex;
align-items: center;
gap: 6px;
}
.dropdown-arrow {
font-size: 12px;
transition: transform 0.25s ease;
}
.dropdown:hover>a .dropdown-arrow,
.dropdown:focus-within>a .dropdown-arrow {
transform: rotate(180deg);
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: #ffffff;
list-style: none;
border-radius: var(--radius-sm);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
padding: 8px 0;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
z-index: 1000;
border: 1px solid var(--border-color);
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu li a {
display: block;
padding: 10px 20px;
color: var(--text-dark);
font-size: 14px;
white-space: nowrap;
}
.dropdown-menu li a:hover {
background: var(--secondary-blue-light);
color: var(--secondary-blue);
}
.quote-btn {
background: var(--primary-red);
color: #ffffff !important;
padding: 9px 18px !important;
border-radius: var(--radius-sm);
font-weight: 600 !important;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(193, 38, 38, 0.25);
transition: var(--transition-normal);
}
.quote-btn:hover {
background: var(--primary-red-hover);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(193, 38, 38, 0.35);
}
.mobile-header-quote-btn {
display: none;
align-items: center;
gap: 6px;
background: var(--primary-red);
color: #ffffff !important;
padding: 8px 15px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
margin-left: auto;
margin-right: 12px;
box-shadow: 0 4px 10px rgba(193, 38, 38, 0.25);
transition: var(--transition-fast);
}
.mobile-header-quote-btn:hover {
background: var(--primary-red-hover);
}
.nav-toggle {
display: none;
background: transparent;
border: none;
font-size: 24px;
color: var(--dark-navy);
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: var(--transition-fast);
}
.nav-toggle:hover {
background: var(--secondary-blue-light);
color: var(--secondary-blue);
}
.callback-nav-btn {
background: rgba(27, 95, 167, 0.1) !important;
color: var(--secondary-blue) !important;
border: 1.5px solid var(--secondary-blue) !important;
padding: 7px 16px !important;
border-radius: var(--radius-sm);
font-weight: 600 !important;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
flex-shrink: 0;
transition: var(--transition-fast);
}
.callback-nav-btn:hover {
background: var(--secondary-blue) !important;
color: #ffffff !important;
}
.hero-slider {
position: relative;
min-height: 85vh;
overflow: hidden;
background: var(--dark-navy-deep);
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 1;
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
background-size: cover;
background-position: center right;
display: flex;
align-items: center;
}
.hero-slide.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 2;
}
.hero-slide-1 {
background-image: linear-gradient(90deg, rgba(17, 42, 74, 0.96) 0%, rgba(17, 42, 74, 0.80) 45%, rgba(17, 42, 74, 0.22) 80%, rgba(17, 42, 74, 0.05) 100%), url("family.webp");
}
.hero-slide-2 {
background-image: linear-gradient(90deg, rgba(17, 42, 74, 0.96) 0%, rgba(17, 42, 74, 0.80) 45%, rgba(17, 42, 74, 0.22) 80%, rgba(17, 42, 74, 0.05) 100%), url("businessman.webp");
}
.hero-slide-3 {
background-image: linear-gradient(90deg, rgba(17, 42, 74, 0.96) 0%, rgba(17, 42, 74, 0.80) 45%, rgba(17, 42, 74, 0.22) 80%, rgba(17, 42, 74, 0.05) 100%), url("happylife.webp");
}
.hero-slide::after {
content: '';
position: absolute;
bottom: -80px;
right: -80px;
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(193, 38, 38, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
border-radius: 50%;
pointer-events: none;
animation: floatGlow 7s ease-in-out infinite alternate;
}
.hero-text {
max-width: 650px;
color: #ffffff;
animation: fadeInUp 0.8s ease-out;
position: relative;
z-index: 5;
}
.hero-text h1 {
font-size: clamp(34px, 4.8vw, 56px);
font-weight: 700;
line-height: 1.12;
margin-bottom: 20px;
letter-spacing: -0.5px;
}
.hero-text p {
font-size: clamp(17px, 2.2vw, 21px);
color: #e2e8f0;
margin-bottom: 35px;
line-height: 1.6;
}
.hero-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.35);
color: #ffffff;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-fast);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.hero-arrow:hover {
background: var(--primary-red);
border-color: var(--primary-red);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(193, 38, 38, 0.4);
}
.hero-arrow.prev {
left: 24px;
}
.hero-arrow.next {
right: 24px;
}
.hero-dots {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
gap: 10px;
align-items: center;
}
.hero-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.45);
cursor: pointer;
transition: var(--transition-fast);
border: none;
}
.hero-dot.active {
width: 32px;
border-radius: 10px;
background: var(--primary-red);
box-shadow: 0 2px 10px rgba(193, 38, 38, 0.5);
}
.primary-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--primary-red);
color: #ffffff;
padding: 15px 32px;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 16px;
box-shadow: 0 6px 20px rgba(193, 38, 38, 0.3);
transition: var(--transition-normal);
border: none;
cursor: pointer;
}
.primary-btn:hover {
background: var(--primary-red-hover);
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(193, 38, 38, 0.4);
}
.primary-btn i {
transition: transform 0.3s ease;
}
.primary-btn:hover i {
transform: translateX(5px);
}
.hero-cta-buttons {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 15px;
}
.secondary-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--secondary-blue);
color: #ffffff !important;
padding: 15px 32px;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 16px;
border: 2px solid var(--secondary-blue);
box-shadow: 0 6px 20px rgba(27, 95, 167, 0.35);
transition: var(--transition-normal);
cursor: pointer;
text-decoration: none;
}
.secondary-btn:hover {
background: var(--secondary-blue-hover);
border-color: var(--secondary-blue-hover);
color: #ffffff !important;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(27, 95, 167, 0.45);
}
.secondary-btn i {
transition: transform 0.3s ease;
}
.secondary-btn:hover i {
transform: translateX(5px);
}
.page-hero {
background: linear-gradient(135deg, rgba(17, 42, 74, 0.95) 0%, rgba(27, 95, 167, 0.88) 100%), url('family.webp');
background-size: cover;
background-position: center;
color: #ffffff;
padding: 85px 0 65px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero-breadcrumb {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 6px 18px;
border-radius: 30px;
font-size: 14px;
margin-bottom: 20px;
color: #e2e8f0;
}
.hero-breadcrumb a:hover {
color: #ff9b9b;
}
.page-hero h1 {
font-size: clamp(32px, 4.5vw, 52px);
font-weight: 700;
margin-bottom: 16px;
animation: fadeInUp 0.6s ease-out;
}
.page-hero p {
font-size: 18px;
max-width: 720px;
margin: 0 auto;
color: #e2e8f0;
animation: fadeInUp 0.8s ease-out;
}
.content-section,
.services {
padding: 85px 0;
}
.section-heading {
text-align: center;
max-width: 760px;
margin: 0 auto 50px;
}
.section-heading h2 {
font-size: clamp(30px, 4vw, 42px);
color: var(--dark-navy);
font-weight: 700;
margin-bottom: 12px;
}
.section-heading p {
color: var(--text-muted);
font-size: 16px;
line-height: 1.7;
}
.section-tag {
display: inline-block;
padding: 6px 16px;
background: var(--primary-red);
color: #ffffff;
border-radius: 30px;
font-size: 13px;
font-weight: 600;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.card {
background: #ffffff;
border-radius: var(--radius-md);
padding: 38px 28px;
text-align: center;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
transition: var(--transition-normal);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: rgba(27, 95, 167, 0.3);
}
.icon {
font-size: 42px;
color: var(--primary-red);
margin-bottom: 20px;
transition: transform 0.3s ease;
}
.card:hover .icon {
transform: scale(1.1) rotate(4deg);
}
.card h3 {
font-size: 22px;
color: var(--dark-navy);
margin-bottom: 12px;
font-weight: 600;
}
.card p {
color: var(--text-muted);
font-size: 14.5px;
margin-bottom: 24px;
line-height: 1.7;
}
.card a {
display: inline-block;
padding: 11px 22px;
background: var(--secondary-blue);
color: #ffffff;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 600;
transition: var(--transition-fast);
}
.card a:hover {
background: var(--secondary-blue-hover);
transform: translateY(-2px);
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
text-align: left;
}
.form-group label {
font-size: 13.5px;
font-weight: 600;
color: var(--dark-navy);
}
.form-input,
select,
textarea {
width: 100%;
padding: 13px 15px;
border: 1.5px solid var(--border-color);
border-radius: var(--radius-sm);
background: #ffffff;
color: var(--text-dark);
font-size: 14.5px;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--primary-red);
box-shadow: 0 0 0 3px var(--primary-red-light);
}
textarea {
resize: vertical;
min-height: 110px;
}
.appointment-section {
padding: 85px 0;
background: linear-gradient(rgba(17, 42, 74, 0.94), rgba(17, 42, 74, 0.94)), url("family.webp");
background-size: cover;
background-position: center;
background-attachment: fixed;
color: #ffffff;
}
.appointment-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 55px;
align-items: center;
}
.appointment-content h2 {
font-size: clamp(32px, 4vw, 44px);
line-height: 1.2;
margin-bottom: 20px;
}
.appointment-content p {
color: #d8dbe2;
line-height: 1.8;
margin-bottom: 30px;
font-size: 16px;
}
.appointment-call {
display: flex;
align-items: center;
gap: 18px;
background: rgba(255, 255, 255, 0.12);
padding: 18px 24px;
border-radius: var(--radius-md);
backdrop-filter: blur(8px);
max-width: 380px;
}
.call-icon {
width: 58px;
height: 58px;
background: var(--primary-red);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 22px;
}
.callback-card-form {
background: #ffffff;
padding: 40px;
border-radius: var(--radius-lg);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
color: var(--text-dark);
}
.callback-card-form h3 {
font-size: 24px;
color: var(--dark-navy);
margin-bottom: 6px;
}
.callback-card-form p.subtitle {
color: var(--text-muted);
font-size: 14px;
margin-bottom: 22px;
}
.form-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.contact-wrapper {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 45px;
align-items: start;
}
.contact-copy h2 {
font-size: 36px;
color: var(--dark-navy);
margin-bottom: 16px;
}
.contact-copy p {
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 18px;
}
.contact-info-list {
display: grid;
gap: 14px;
margin-bottom: 24px;
}
.contact-info-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
color: var(--text-dark);
}
.contact-info-item i {
width: 38px;
height: 38px;
background: var(--secondary-blue-light);
color: var(--secondary-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.map-wrapper {
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-md);
margin-top: 20px;
}
.map-wrapper iframe {
width: 100%;
height: 260px;
border: 0;
}
.contact-card-form {
background: #ffffff;
padding: 38px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
}
.quote-banner-section {
background: #ffffff;
border-radius: var(--radius-lg);
padding: 45px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
margin: 50px 0;
}
.quote-banner-wrapper {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 40px;
align-items: center;
}
.quote-banner-info h2 {
font-size: 32px;
color: var(--dark-navy);
margin-bottom: 14px;
}
.quote-features-list {
list-style: none;
margin: 20px 0;
}
.quote-features-list li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size: 14.5px;
color: var(--text-dark);
}
.quote-features-list li i {
color: var(--primary-red);
}
.info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.info-box {
background: #ffffff;
padding: 38px 28px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
transition: var(--transition-normal);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.info-box:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: rgba(27, 95, 167, 0.3);
}
.info-box i {
font-size: 42px;
color: var(--primary-red);
margin-bottom: 20px;
transition: transform 0.3s ease;
}
.info-box:hover i {
transform: scale(1.1) rotate(4deg);
}
.info-box h3 {
font-size: 22px;
color: var(--dark-navy);
margin-bottom: 12px;
font-weight: 600;
}
.info-box p {
color: var(--text-muted);
font-size: 14.5px;
line-height: 1.7;
margin-bottom: 0;
}
.advisor-section {
padding: 80px 0;
background: var(--bg-light);
}
.advisor-card {
display: flex;
align-items: center;
gap: 40px;
background: #ffffff;
padding: 40px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
}
.advisor-image {
flex-shrink: 0;
width: 220px;
height: 220px;
border-radius: 50%;
overflow: hidden;
}
.advisor-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
border-radius: 50%;
border: 5px solid var(--secondary-blue-light);
}
.advisor-content h2 {
font-size: 32px;
color: var(--dark-navy);
margin-bottom: 4px;
}
.advisor-content h4 {
color: var(--primary-red);
font-size: 16px;
font-weight: 600;
margin-bottom: 14px;
}
.advisor-content p {
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 12px;
}
.advisor-btn {
display: inline-block;
margin-top: 10px;
padding: 12px 26px;
background: var(--primary-red);
color: #ffffff;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 14.5px;
}
.advisor-btn:hover {
background: var(--primary-red-hover);
}
.testimonial-section {
padding: 85px 0;
background: var(--bg-light);
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 45px;
}
.testimonial-card {
position: relative;
background: #ffffff;
padding: 35px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
transition: var(--transition-normal);
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
text-align: left !important;
}
.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.testimonial-card.featured {
border-top: 5px solid var(--primary-red);
}
.stars {
color: #f59e0b;
font-size: 18px;
margin-bottom: 16px;
letter-spacing: 2px;
}
.testimonial-card p {
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 24px;
font-style: italic;
font-size: 14.5px;
}
.testimonial-user {
display: flex;
align-items: center;
gap: 14px;
}
.testimonial-user img {
width: 54px;
height: 54px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--primary-red);
}
.testimonial-user h4 {
font-size: 16px;
color: var(--dark-navy);
margin-bottom: 2px;
}
.testimonial-user span {
color: var(--text-light);
font-size: 13px;
}
.footer {
background: var(--dark-navy);
color: #d8dee8;
}
.footer-grid {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
gap: 45px;
padding: 65px 0;
}
.footer-logo {
width: 210px;
height: auto;
background: #ffffff;
padding: 10px 18px;
border-radius: var(--radius-sm);
margin-bottom: 20px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
display: inline-block;
}
.footer-column h3 {
color: #ffffff;
font-size: 18px;
margin-bottom: 20px;
position: relative;
}
.footer-column h3::after {
content: "";
width: 40px;
height: 3px;
background: var(--primary-red);
display: block;
margin-top: 8px;
border-radius: 4px;
}
.footer-column p {
color: #cbd5e1;
font-size: 14px;
line-height: 1.7;
margin-bottom: 12px;
}
.footer-column a {
display: block;
color: #d8dee8;
font-size: 14px;
margin-bottom: 10px;
}
.footer-column a:hover {
color: #ffffff;
transform: translateX(5px);
}
.social-links {
display: flex;
gap: 10px;
margin-top: 20px;
}
.social-links a {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
}
.social-links a:hover {
background: var(--primary-red);
transform: translateY(-3px);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px 0;
font-size: 13.5px;
color: #94a3b8;
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
@media (max-width: 992px) {
.cards,
.info-grid,
.testimonial-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 35px;
}
.appointment-wrapper,
.contact-wrapper,
.quote-banner-wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
}
@media (max-width: 850px) {
html {
scroll-padding-top: 90px;
}
.top-bar-content {
font-size: 12px;
}
.nav {
height: 70px;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 5;
}
.logo-image {
height: 48px;
}
.mobile-header-quote-btn {
z-index: 10;
}
.nav-toggle {
display: block;
margin-left: auto;
z-index: 10;
}
nav ul {
position: fixed;
top: 108px;
left: 0;
width: 100%;
background: #ffffff;
flex-direction: column;
align-items: flex-end;
text-align: right;
gap: 0;
padding: 20px 0;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
border-bottom: 2px solid var(--border-color);
opacity: 0;
visibility: hidden;
transform: translateY(-20px);
transition: all 0.35s ease;
max-height: 80vh;
overflow-y: auto;
}
nav ul.mobile-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
nav ul li {
width: 100%;
text-align: right;
}
nav a {
display: block;
padding: 12px 28px;
font-size: 16px;
text-align: right;
border-bottom: 1px solid #f1f5f9;
width: 100%;
}
.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
background: #f8fafc;
padding: 0;
display: none;
}
.dropdown.mobile-open .dropdown-menu {
display: block;
}
.dropdown-menu li a {
padding: 10px 36px;
font-size: 14.5px;
text-align: right;
}
.quote-btn,
.callback-nav-btn {
width: calc(100% - 56px);
margin: 8px 28px 8px auto !important;
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
font-size: 15px !important;
padding: 12px 20px !important;
box-sizing: border-box;
}
.insurance-grid {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.insurance-card {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
padding: 22px 18px !important;
box-sizing: border-box !important;
}
.card-footer-action {
flex-direction: column !important;
width: 100% !important;
gap: 10px !important;
}
.card-footer-action a,
.card-footer-action button {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
box-sizing: border-box !important;
}
.coverage-pills {
flex-wrap: wrap !important;
gap: 6px !important;
}
.coverage-pill {
font-size: 11.5px !important;
padding: 5px 10px !important;
max-width: 100% !important;
white-space: normal !important;
text-align: center !important;
}
.services {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.services .cards {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
gap: 16px !important;
padding: 0 !important;
margin: 0 !important;
}
.services-page,
.services-page.active {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
gap: 16px !important;
margin: 0 !important;
padding: 0 !important;
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
.services-mobile-nav {
display: none !important;
}
.services .card {
padding: 20px 22px !important;
min-height: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
gap: 0 !important;
box-sizing: border-box !important;
border-radius: 12px !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
border: 1px solid var(--border-color) !important;
background: #ffffff !important;
width: 100% !important;
}
.services .card>div:first-child {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
width: 100% !important;
}
.services .card .icon {
font-size: 26px !important;
margin-bottom: 10px !important;
flex-shrink: 0 !important;
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #f8fafc !important;
border-radius: 10px !important;
color: var(--primary-red) !important;
}
.services .card h3 {
font-size: 18px !important;
margin-bottom: 6px !important;
white-space: normal !important;
color: var(--dark-navy) !important;
font-weight: 600 !important;
}
.services .card p {
font-size: 14px !important;
line-height: 1.5 !important;
color: var(--text-muted) !important;
margin: 0 0 14px 0 !important;
display: block !important;
overflow: visible !important;
line-clamp: none !important;
-webkit-line-clamp: none !important;
}
.services .card a {
font-size: 14px !important;
font-weight: 600 !important;
white-space: nowrap !important;
color: var(--primary-red) !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
text-decoration: none !important;
transition: var(--transition-fast) !important;
}
.services .card a:hover {
color: var(--dark-navy) !important;
transform: translateX(4px) !important;
}
#why-us {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.info-grid {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
gap: 16px !important;
padding: 0 !important;
margin: 0 !important;
}
.info-box-page,
.info-box-page.active {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
gap: 16px !important;
margin: 0 !important;
padding: 0 !important;
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
.why-us-mobile-nav {
display: none !important;
}
.info-box {
background: #ffffff !important;
padding: 20px 22px !important;
border-radius: 12px !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
border: 1px solid var(--border-color) !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
min-height: auto !important;
width: 100% !important;
box-sizing: border-box !important;
}
.info-box i {
font-size: 26px !important;
margin-bottom: 10px !important;
color: var(--primary-red) !important;
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #f8fafc !important;
border-radius: 10px !important;
}
.info-box h3 {
font-size: 18px !important;
color: var(--dark-navy) !important;
margin-bottom: 6px !important;
font-weight: 600 !important;
}
.info-box p {
font-size: 14px !important;
color: var(--text-muted) !important;
line-height: 1.5 !important;
margin: 0 !important;
}
.services-nav-btn,
.testimonial-nav-btn {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--dark-navy);
color: #ffffff;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: var(--transition-fast);
}
.services-nav-btn:hover,
.testimonial-nav-btn:hover {
background: var(--primary-red);
}
.services-page-indicator,
.testimonial-page-indicator {
font-weight: 600;
font-size: 14px;
color: var(--dark-navy);
}
.desktop-text {
display: inline !important;
}
.mobile-text {
display: none !important;
}
@media (max-width: 850px) {
.desktop-text {
display: none !important;
}
.mobile-text {
display: inline !important;
}
#schedule-meeting {
padding: 30px 0 0 0 !important;
}
.calendly-inline-widget {
height: 600px !important;
}
}
@media (min-width: 851px) {
.info-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 28px !important;
}
.services-page,
.info-box-page {
display: contents !important;
}
.services-mobile-nav,
.why-us-mobile-nav {
display: none !important;
}
}
.testimonial-grid {
display: block;
position: relative;
}
.hero-slider,
.hero {
min-height: 75vh;
text-align: center;
}
.hero-slide {
background-position: 75% center !important;
}
.hero-slide-1 {
background-image: linear-gradient(180deg, rgba(17, 42, 74, 0.65) 0%, rgba(17, 42, 74, 0.45) 50%, rgba(17, 42, 74, 0.30) 100%), url("family.webp") !important;
}
.hero-slide-2 {
background-image: linear-gradient(180deg, rgba(17, 42, 74, 0.65) 0%, rgba(17, 42, 74, 0.45) 50%, rgba(17, 42, 74, 0.30) 100%), url("businessman.webp") !important;
}
.hero-slide-3 {
background-image: linear-gradient(180deg, rgba(17, 42, 74, 0.65) 0%, rgba(17, 42, 74, 0.45) 50%, rgba(17, 42, 74, 0.30) 100%), url("happylife.webp") !important;
}
.hero-arrow {
width: 40px;
height: 40px;
font-size: 14px;
}
.hero-arrow.prev {
left: 10px;
}
.hero-arrow.next {
right: 10px;
}
.hero-text {
text-align: center;
margin: 0 auto;
}
.hero-cta-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin: 0 auto;
width: 100%;
}
.cards,
.info-grid,
.form-grid-2,
.insurance-grid {
grid-template-columns: 1fr;
}
.services-page,
.services-page.active,
.info-box-page,
.info-box-page.active {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.services-mobile-nav,
.testimonial-mobile-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 25px;
}
.services-nav-btn {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--dark-navy);
color: #ffffff;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: var(--transition-fast);
}
.testimonial-nav-btn {
display: none !important;
}
.services-nav-btn:hover {
background: var(--primary-red);
}
.services-page-indicator,
.testimonial-page-indicator {
font-weight: 600;
font-size: 14px;
color: var(--dark-navy);
}
.testimonial-grid {
display: block;
position: relative;
}
.testimonial-card {
display: none;
margin-bottom: 0;
}
.testimonial-card.active {
display: flex;
flex-direction: column;
justify-content: space-between;
animation: fadeInUp 0.4s ease;
}
.advisor-card {
flex-direction: column;
text-align: center;
padding: 30px 20px;
}
.advisor-image {
margin: 0 auto 15px;
}
.footer-grid {
grid-template-columns: 1fr;
text-align: center;
}
.footer-column h3::after {
margin: 8px auto 0;
}
.social-links {
justify-content: center;
}
.footer-bottom-content {
flex-direction: column;
gap: 10px;
text-align: center;
}
.quote-banner-section,
.callback-card-form,
.contact-card-form {
padding: 28px 20px;
}
}
.testimonial-user img {
display: none !important;
}
@media (min-width: 851px) {
.cards,
.info-grid,
.testimonial-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 28px !important;
}
.services-page,
.info-box-page {
display: contents !important;
}
.services-mobile-nav,
.why-us-mobile-nav,
.testimonial-mobile-nav {
display: none !important;
}
}
.filter-container {
display: flex;
justify-content: center;
gap: 14px;
margin-bottom: 45px;
flex-wrap: wrap;
}
.tab-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
border-radius: 30px;
background: #ffffff;
border: 1.5px solid var(--border-color);
color: var(--text-dark);
font-weight: 600;
font-size: 14.5px;
cursor: pointer;
transition: var(--transition-normal);
box-shadow: var(--shadow-sm);
}
.tab-btn:hover {
border-color: var(--secondary-blue);
color: var(--secondary-blue);
transform: translateY(-2px);
}
.tab-btn.active {
background: var(--dark-navy);
color: #ffffff;
border-color: var(--dark-navy);
box-shadow: 0 6px 18px rgba(17, 42, 74, 0.25);
}
.tab-count {
background: rgba(255, 255, 255, 0.25);
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
}
.tab-btn:not(.active) .tab-count {
background: var(--bg-light);
color: var(--text-muted);
}
.insurance-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.insurance-card {
background: #ffffff;
border-radius: var(--radius-md);
padding: 36px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
transition: var(--transition-normal);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.insurance-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: rgba(27, 95, 167, 0.3);
}
.insurance-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.insurance-icon-wrapper {
width: 58px;
height: 58px;
border-radius: var(--radius-sm);
background: var(--secondary-blue-light);
color: var(--secondary-blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
}
.category-tag {
padding: 5px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.category-tag.personal {
background: #e0f2fe;
color: #0369a1;
}
.category-tag.business {
background: #fef3c7;
color: #b45309;
}
.insurance-card h3 {
font-size: 24px;
color: var(--dark-navy);
margin-bottom: 6px;
font-weight: 700;
}
.insurance-tagline {
font-size: 14.5px;
font-weight: 600;
color: var(--primary-red);
margin-bottom: 14px;
}
.insurance-description {
font-size: 14.5px;
color: var(--text-muted);
line-height: 1.65;
margin-bottom: 20px;
}
.insurance-features {
margin-bottom: 22px;
}
.insurance-features h4 {
font-size: 13.5px;
text-transform: uppercase;
color: var(--dark-navy);
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.feature-list {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.feature-item {
font-size: 13.5px;
color: var(--text-dark);
display: flex;
align-items: center;
gap: 8px;
}
.feature-item i {
color: #16a34a;
font-size: 14px;
}
.coverage-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 25px;
}
.coverage-pill {
background: var(--bg-light);
border: 1px solid var(--border-color);
padding: 4px 12px;
border-radius: 15px;
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}
.card-footer-action {
display: flex;
gap: 12px;
align-items: center;
padding-top: 18px;
border-top: 1px solid var(--border-color);
}
.btn-get-quote {
background: var(--primary-red);
color: #ffffff;
padding: 10px 20px;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 14px;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: var(--transition-fast);
}
.btn-get-quote:hover {
background: var(--primary-red-hover);
transform: translateY(-2px);
}
.btn-outline-details {
background: transparent;
color: var(--secondary-blue);
border: 1.5px solid var(--secondary-blue);
padding: 9px 18px;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 14px;
transition: var(--transition-fast);
display: inline-flex;
align-items: center;
}
.btn-outline-details:hover {
background: var(--secondary-blue-light);
}
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(17, 42, 74, 0.7);
backdrop-filter: blur(6px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
padding: 20px;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-container {
background: #ffffff;
border-radius: var(--radius-lg);
width: 100%;
max-width: 550px;
padding: 35px;
position: relative;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
transform: scale(0.9);
transition: transform 0.3s ease;
}
.modal-overlay.active .modal-container {
transform: scale(1);
}
.modal-close {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
font-size: 20px;
color: var(--text-muted);
cursor: pointer;
}
.reveal-up,
.reveal-element {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal-left {
opacity: 0;
transform: translateX(-40px);
transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal-right {
opacity: 0;
transform: translateX(40px);
transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal-scale {
opacity: 0;
transform: scale(0.94);
transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal-up.in-view,
.reveal-element.in-view,
.reveal-left.in-view,
.reveal-right.in-view,
.reveal-scale.in-view {
opacity: 1 !important;
transform: translate(0, 0) scale(1) !important;
}
.stagger-1 {
transition-delay: 0.06s;
}
.stagger-2 {
transition-delay: 0.14s;
}
.stagger-3 {
transition-delay: 0.22s;
}
.stagger-4 {
transition-delay: 0.30s;
}
.stagger-5 {
transition-delay: 0.38s;
}
@media (max-width: 850px) {
.testimonial-card {
transition: opacity 0.4s ease, transform 0.4s ease;
}
.testimonial-card.active {
animation: mobileSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.services-page,
.info-box-page,
.services-page.active,
.info-box-page.active {
animation: none !important;
transform: none !important;
opacity: 1 !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.horizontal-scroll-container,
.filter-container,
.cards,
.insurance-grid {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
}
@keyframes mobileSlideIn {
0% {
opacity: 0;
transform: translateX(35px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.reveal-up,
.reveal-element,
.reveal-left,
.reveal-right,
.reveal-scale {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.testimonial-card.active,
.services-page.active,
.info-box-page.active {
animation: none !important;
}
}
.response-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.response-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.response-modal-card {
position: relative;
background: #ffffff;
border-radius: 20px;
padding: 36px 30px 28px;
max-width: 440px;
width: 90%;
text-align: center;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
transform: scale(0.85) translateY(20px);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
border: 1px solid rgba(226, 232, 240, 0.8);
}
.response-modal-overlay.active .response-modal-card {
transform: scale(1) translateY(0);
}
.response-modal-close {
position: absolute;
top: 14px;
right: 18px;
background: transparent;
border: none;
font-size: 24px;
color: #64748b;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, color 0.2s;
}
.response-modal-close:hover {
background: #f1f5f9;
color: #0f172a;
}
.response-modal-icon {
width: 72px;
height: 72px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
font-size: 36px;
}
.response-modal-icon.success {
background: #dcfce7;
color: #16a34a;
}
.response-modal-icon.error {
background: #fee2e2;
color: #dc2626;
}
.response-modal-title {
font-size: 22px;
font-weight: 700;
color: var(--dark-navy, #112a4a);
margin-bottom: 10px;
}
.response-modal-message {
font-size: 15px;
color: var(--text-muted, #475569);
line-height: 1.6;
margin-bottom: 24px;
}
.response-modal-btn {
display: inline-block;
width: 100%;
padding: 13px;
background: var(--dark-navy, #112a4a);
color: #ffffff;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.15s;
}
.response-modal-btn:hover {
background: var(--primary-red, #c12626);
}