/* =====================================================
   SecureRide 
   ===================================================== */

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

html {
   scroll-behavior: auto;
	overflow-x: hidden;
}
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Roboto Mono", monospace;
   font-optical-sizing: auto;
   font-style: normal;
}

body {
   background: #f5f7fb;
   color: #333;
   overflow-x: hidden;
}
#insurance,
#claim,
#how-it-works,
#advisor,
#contact {
    scroll-margin-top: 0px;
}
/* =====================================================
   HEADER
   ===================================================== */

.header {
   position: sticky;
   top: 0;
   z-index: 9999;
   padding: 14px 0;
   background: rgba(7, 21, 47, 0.94);
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   box-shadow: 0 8px 30px rgba(5, 14, 35, 0.1);
}

.logo-link {
	text-decoration: none;
}
.header-logo {
	height: 70px;
}
.header .container {
   padding-top: 0;
   padding-bottom: 0;
}

.header-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 52px;
}

.logo {
   position: relative;
   color: #fff;
   font-size: 21px;
   font-weight: 800;
   letter-spacing: -0.7px;
   text-decoration: none;
}

.logo::after {
   content: "";
   position: absolute;
   right: -10px;
   top: 4px;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #635bff;
   box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.15);
}

nav {
   display: flex;
   align-items: center;
   gap: 8px;
}

nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 7px;
	border-radius: 10px;
	color: #c9d1e1;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease, background 0.2s ease;
	letter-spacing: -0.5px;
}

nav a:hover {
   color: #fff;
   background: rgba(255, 255, 255, 0.06);
}

nav a::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 4px;
   width: 0;
   height: 2px;
   transform: translateX(-50%);
   border-radius: 10px;
   background: linear-gradient(90deg, #635bff, #8062ff);
   transition: width 0.25s ease;
}

nav a:hover::after {
   width: 22px;
}

.menu-toggle {
   display: none;
   width: 42px;
   height: 42px;
   position: relative;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 11px;
   background: rgba(255, 255, 255, 0.05);
   cursor: pointer;
   transition: background 0.2s ease, border-color 0.2s ease;
}

.menu-toggle:hover {
   background: rgba(255, 255, 255, 0.09);
   border-color: rgba(255, 255, 255, 0.16);
}

.menu-toggle span {
   position: absolute;
   left: 10px;
   width: 20px;
   height: 2px;
   border-radius: 10px;
   background: #fff;
   transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}

.menu-toggle span:nth-child(1) {
   top: 13px;
}
.menu-toggle span:nth-child(2) {
   top: 20px;
}
.menu-toggle span:nth-child(3) {
   top: 27px;
}

.menu-toggle.open span:nth-child(1) {
   top: 20px;
   transform: rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
   opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
   top: 20px;
   transform: rotate(-45deg);
}

/* HERO */
.hero-modern {
   position: relative;
   overflow: hidden;
   min-height: 730px;
   padding: 100px 0 90px;
   background: #fff;
}

.hero-modern-glow {
   position: absolute;
   pointer-events: none;
   border-radius: 50%;
}

.hero-modern-glow-left {
   width: 520px;
   height: 520px;
   top: -265px;
   left: -145px;
   background: rgba(99, 91, 255, 0.1);
}

.hero-modern-glow-right {
   width: 650px;
   height: 650px;
   right: -330px;
   top: -80px;
   border: 1px solid rgba(99, 91, 255, 0.07);
   box-shadow: 0 0 0 80px rgba(99, 91, 255, 0.018),
      0 0 0 160px rgba(99, 91, 255, 0.012);
}

.hero-modern-grid {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 75px;
   align-items: center;
}

.hero-modern-badge {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 28px;
   padding: 9px 14px;
   color: #534cff;
   background: #f1f0ff;
   border-radius: 50px;
   font-size: 13px;
   font-weight: 700;
}

.hero-modern-badge span {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #28c991;
   box-shadow: 0 0 0 5px rgba(40, 201, 145, 0.14);
}

.hero-modern-content h1 {
   margin: 0;
   max-width: 700px;
   color: #08173a;
   font-size: 42px;
   line-height: 1.05;
   font-weight: 700;
}

.hero-modern-content h1 strong {
   display: block;
   margin-top: 4px;
   font-weight: 700;
   color: #6c5cff;
}

.hero-modern-content > p {
   max-width: 650px;
   margin: 30px 0 0;
   color: #69748a;
   font-size: 17px;
   line-height: 1.8;
}

.hero-modern-actions {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 14px;
   margin-top: 34px;
}

.hero-modern-primary,
.hero-modern-secondary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   min-height: 58px;
   padding: 0 25px;
   border-radius: 14px;
   text-decoration: none;
   font-size: 14px;
   font-weight: 700;
   transition: all 0.25s ease;
}

.hero-modern-primary {
   color: #fff;
   background: linear-gradient(135deg, #635bff, #8162ff);
   box-shadow: 0 15px 30px rgba(99, 91, 255, 0.23);
}

.hero-modern-primary:hover {
   color: #fff;
   transform: translateY(-2px);
   box-shadow: 0 20px 36px rgba(99, 91, 255, 0.3);
}

.hero-modern-secondary {
   color: #08173a;
   background: #fff;
   border: 1px solid #e3e6ed;
}

.hero-modern-secondary:hover {
   color: #635bff;
   transform: translateY(-2px);
   border-color: #c9c5ff;
}

.hero-modern-points {
   display: flex;
   flex-wrap: wrap;
   gap: 22px;
   margin-top: 34px;
   color: #626d83;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: -0.2px;
}

.hero-modern-points span {
   display: flex;
   align-items: center;
   gap: 7px;
}

.hero-modern-points i {
   color: #28c991;
}

.hero-modern-visual {
   position: relative;
   min-height: 535px;
}

.hero-modern-card {
   position: absolute;
   left: 30px;
   right: 0;
   top: 40px;
   bottom: 25px;
   overflow: hidden;
   border-radius: 35px;
   color: #fff;
   background: radial-gradient(
         circle at 88% 10%,
         rgba(255, 255, 255, 0.1),
         transparent 25%
      ),
      linear-gradient(145deg, #162750 0%, #243b75 63%, #6156ef 100%);
   box-shadow: 0 35px 65px rgba(18, 33, 73, 0.22);
}

.hero-modern-card::before {
   content: "";
   position: absolute;
   width: 330px;
   height: 330px;
   top: -105px;
   right: -65px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 0 0 55px rgba(255, 255, 255, 0.025),
      0 0 0 110px rgba(255, 255, 255, 0.018);
}

.hero-modern-card-head {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 40px 34px 0;
}

.hero-modern-card-head strong {
   font-size: 18px;
}

.hero-modern-card-head span {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 12px;
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 50px;
   background: rgba(255, 255, 255, 0.08);
   font-size: 11px;
   font-weight: 700;
}

.hero-modern-car-area {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 63px;
   height: 305px;
}

.hero-modern-car-area::before {
   content: "";
   position: absolute;
   left: -10%;
   right: -10%;
   bottom: 0;
   height: 140px;
   background: #09142f;
   transform: skewY(-5deg);
}

.hero-modern-road-line {
   position: absolute;
   z-index: 2;
   left: 4%;
   right: 0;
   bottom: 63px;
   height: 3px;
   background: repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.55) 0 52px,
      transparent 52px 90px
   );
}

.hero-modern-car {
   position: absolute;
   z-index: 4;
   left: 50%;
   bottom: 80px;
   transform: translateX(-50%);
   color: #eef2fa;
   font-size: 190px;
   filter: drop-shadow(0 22px 18px rgba(0, 0, 0, 0.23));
}

.hero-modern-types {
   position: absolute;
   z-index: 4;
   left: 34px;
   right: 34px;
   bottom: 65px;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 8px;
}

.hero-modern-types span {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   min-height: 38px;
   padding: 4px 7px;
   border: 1px solid rgba(255, 255, 255, 0.13);
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.08);
   font-size: 10px;
   font-weight: 700;
}

.hero-modern-support,
.hero-modern-process-card {
   position: absolute;
   z-index: 8;
   display: flex;
   align-items: center;
   gap: 13px;
   padding: 15px 18px;
   border: 1px solid rgba(255, 255, 255, 0.85);
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.96);
   box-shadow: 0 20px 45px rgba(18, 33, 73, 0.16);
}

.hero-modern-support {
   left: 0;
   top: 0;
   min-width: 230px;
}

.hero-modern-process-card {
   right: -14px;
   bottom: -10px;
   min-width: 235px;
}

.hero-modern-support-icon,
.hero-modern-process-icon {
   display: grid;
   place-items: center;
   width: 45px;
   height: 45px;
   flex: 0 0 45px;
   border-radius: 13px;
   font-size: 18px;
}

.hero-modern-support-icon {
   color: #6158fa;
   background: #f0efff;
}

.hero-modern-process-icon {
   color: #118b62;
   background: #e7faf3;
}

.hero-modern-support small,
.hero-modern-support strong,
.hero-modern-process-card small,
.hero-modern-process-card strong {
   display: block;
}

.hero-modern-support small,
.hero-modern-process-card small {
   color: #80899d;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
}

.hero-modern-support strong,
.hero-modern-process-card strong {
   margin-top: 2px;
   color: #111b39;
   font-size: 14px;
}

/* BUTTONS */
.btn-outline {
   border: 2px solid #fff;
   color: #fff;
   padding: 8px 30px;
   border-radius: 30px;
   text-decoration: none;
   display: inline-block;
   margin-top: 30px;
   font-size: 16px;
   transition: background-color 0.8s ease, color 0.8s ease;
}
.btn-outline:hover {
   background: #fff;
   color: #082a47;
}
.btn-primary {
   background: #fff;
   padding: 10px 30px;
   display: inline-block;
   text-decoration: none;
   color: #1b5587;
   border-radius: 30px;
   border: none;
   font-size: 16px;
   cursor: pointer;
   transition: background-color 0.8s ease, color 0.8s ease;
}
.btn-primary:hover {
   background: #082a47;
   color: #fff;
}

/* =====================================================
   LAYOUT / TYPOGRAPHY UTILITIES
   ===================================================== */

.container {
   max-width: 1250px;
   margin: auto;
   /*   padding: 50px 20px; */
}

.section-title {
   text-align: center;
   font-size: 30px;
   margin-bottom: 30px;
}

.section-title.light {
   color: #fff;
}

/* =====================================================
   TRUST STRIP SECTION
   ===================================================== */

/* Trust strip below hero */
.trust-strip {
   background: #f6f5ff;
   border-top: 1px solid #e8e6f8;
   border-bottom: 1px solid #efeff8;
}

.trust-strip .container {
   padding-top: 22px;
   padding-bottom: 22px;
}

.trust-strip-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px;
}

.trust-strip-grid > div {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   min-height: 48px;
   color: #59657a;
   font-size: 13px;
   font-weight: 600;
}

.trust-strip-grid i {
   color: #635bff;
   font-size: 16px;
}

/* =====================================================
   SERVICES / INSURANCE PLANS SECTION
   ===================================================== */

/* SERVICES */
.service-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 30px;
}

.service-card {
   background: rgba(255, 255, 255, 0.9);
   border-radius: 18px;
   padding: 35px 12px;
   text-align: center;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
   transition: 0.3s;
}

.service-card:hover {
   transform: translateY(-8px);
}

.service-card i {
   font-size: 30px;
   color: #fff;
   margin-bottom: 15px;
   background: #0f4c81;
   width: 70px;
   padding: 20px 10px;
   border-radius: 50%;
}

.service-card h3 {
   margin-bottom: 10px;
}

/* Service card CTA */
.service-card {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.service-card p {
   margin-bottom: 18px;
}

.service-cta {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   margin-top: auto;
   color: #635bff;
   text-decoration: none;
   font-size: 13px;
   font-weight: 700;
   transition: gap 0.2s ease, color 0.2s ease;
}

.service-cta:hover {
   color: #5148e5;
   gap: 10px;
}

.service-cta i {
   width: auto;
   padding: 0;
   margin: 0;
   border-radius: 0;
   color: inherit;
   background: transparent;
   font-size: 11px;
}

/* =====================================================
   REDESIGNED INSURANCE PLANS
   ===================================================== */

.services-modern {
   padding: 95px 0 105px;
   background: radial-gradient(
         circle at 8% 8%,
         rgba(99, 91, 255, 0.08),
         transparent 24%
      ),
      linear-gradient(180deg, #f2f0ff 0%, #eeeff9 100%);
}
/* Colored icon backgrounds - matches reference style */
.services-modern .service-grid .service-card:nth-child(1) .service-icon {
   background: linear-gradient(135deg, #4f8ef7, #2f6fe0);
   color: #fff;
}

.services-modern .service-grid .service-card:nth-child(2) .service-icon {
   background: linear-gradient(135deg, #5ecb6b, #2fa84a);
   color: #fff;
}

.services-modern .service-grid .service-card:nth-child(3) .service-icon {
   background: linear-gradient(135deg, #9b6df0, #6f42d8);
   color: #fff;
}

.services-modern .service-grid .service-card:nth-child(4) .service-icon {
   background: linear-gradient(135deg, #ff9d4d, #ef7a1e);
   color: #fff;
}

.services-modern .service-grid .service-card:nth-child(5) .service-icon {
   background: linear-gradient(135deg, #ff5f6d, #e0334a);
   color: #fff;
}
.services-modern > .container {
   max-width: 1250px;
   padding-top: 0;
   padding-bottom: 0;
}

.services-modern-head {
   display: grid;
   grid-template-columns: 1.05fr 0.95fr;
   gap: 70px;
   align-items: end;
   margin-bottom: 48px;
}

.services-kicker,
.why-kicker {
   display: inline-block;
   margin-bottom: 13px;
   color: #635bff;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.14em;
   text-transform: uppercase;
}

.services-modern-head h2 {
   max-width: 620px;
   margin: 0;
   color: #081735;
   font-size: 30px;
   line-height: 1.12;
}

.services-modern-head > p {
   max-width: 520px;
   margin: 0 0 3px auto;
   color: #69748a;
   font-size: 15px;
   line-height: 1.8;
}

.services-modern .service-grid {
   grid-template-columns: repeat(5, 1fr);
   gap: 18px;
}

.services-modern .service-card {
	position: relative;
	align-items: stretch;
	min-height: 300px;
	padding: 20px;
	overflow: hidden;
	border: 1px solid #e7e9f1;
	border-radius: 20px;
	background: #fff;
	box-shadow: none;
	text-align: left;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.services-modern .service-card::after {
   content: "";
   position: absolute;
   width: 120px;
   height: 120px;
   right: -55px;
   top: -55px;
   border-radius: 50%;
   background: rgba(99, 91, 255, 0.045);
}

.services-modern .service-card:hover {
   transform: translateY(-7px);
   border-color: #d6d3ff;
   box-shadow: 0 22px 50px rgba(23, 31, 67, 0.1);
}

.service-card-top {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 25px;
}

.services-modern .service-icon {
   display: grid;
   place-items: center;
   width: 56px;
   height: 56px;
   border-radius: 17px;
   color: #635bff;
   background: #f1f0ff;
}

.services-modern .service-icon i {
   width: auto;
   margin: 0;
   padding: 0;
   border-radius: 0;
   color: inherit;
   background: transparent;
   font-size: 22px;
}

.service-number {
   color: #d9dce7;
   font-size: 30px;
   font-weight: 800;
}

.services-modern .service-card h3 {
	margin-bottom: 10px;
	color: #081735;
	font-size: 18px;
	letter-spacing: -0.8px;
}

.services-modern .service-card p {
	min-height: 88px;
	margin: 0 0 20px;
	color: #69748a;
	font-size: 13px;
	line-height: 1.75;
	letter-spacing: -1.3px;
}

.services-modern .service-cta {
   justify-content: flex-start;
   margin-top: auto;
   color: #635bff;
   font-size: 12px;
}

.services-modern .service-cta i {
   background: transparent;
}

/* =====================================================
   WHY SECURERIDE SECTION
   ===================================================== */

/* WHY */
.why {
   background: linear-gradient(135deg, #0f4c81, #245fa5);
}

.why-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 30px;
}

.why-box {
   color: #fff;
   padding: 30px;
   border-radius: 16px;
   text-align: center;
}

.why-box i {
   font-size: 30px;
   color: #0f4c81;
   margin-bottom: 15px;
   background: #fff;
   width: 70px;
   padding: 20px 10px;
   border-radius: 50%;
}
.why-box h3 {
   margin-bottom: 10px;
}

/* =====================================================
   REDESIGNED WHY CHOOSE SECURERIDE
   ===================================================== */

.why-modern {
   position: relative;
   overflow: hidden;
   padding: 100px 0;
   background: radial-gradient(
         circle at 12% 0%,
         rgba(99, 91, 255, 0.34),
         transparent 32%
      ),
      linear-gradient(145deg, #081735 0%, #13264c 58%, #2b3476 100%);
}

.why-modern::after {
   content: "";
   position: absolute;
   width: 470px;
   height: 470px;
   right: -220px;
   bottom: -250px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 50%;
   box-shadow: 0 0 0 70px rgba(255, 255, 255, 0.018),
      0 0 0 140px rgba(255, 255, 255, 0.012);
}

.why-modern .container {
   padding-top: 0;
   padding-bottom: 0;
}

.why-modern-grid {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 0.9fr 1.1fr;
   gap: 90px;
   align-items: center;
}

.why-modern-intro h2 {
   max-width: 520px;
   margin: 0;
   color: #fff;
   font-size: 30px;
   line-height: 1.12;
}

.why-modern-intro > p {
   max-width: 520px;
   margin: 22px 0 0;
   color: #b8c2d8;
   font-size: 15px;
   line-height: 1.8;
}

.why-modern-link {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   margin-top: 30px;
   color: #fff;
   text-decoration: none;
   font-size: 13px;
   font-weight: 700;
}

.why-modern-link i {
   color: #a9a4ff;
   transition: transform 0.2s ease;
}

.why-modern-link:hover i {
   transform: translateX(4px);
}

.why-modern-list {
   display: grid;
   gap: 14px;
}

.why-modern-item {
   display: grid;
   grid-template-columns: 58px 1fr;
   gap: 18px;
   align-items: start;
   padding: 22px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.065);
   backdrop-filter: blur(8px);
   transition: transform 0.2s ease, background 0.2s ease;
}

.why-modern-item:hover {
   transform: translateX(5px);
   background: rgba(255, 255, 255, 0.09);
}

.why-modern-icon {
   display: grid;
   place-items: center;
   width: 52px;
   height: 52px;
   border-radius: 15px;
   color: #bdb9ff;
   background: rgba(255, 255, 255, 0.09);
   font-size: 18px;
}

.why-modern-item h3 {
   margin: 2px 0 7px;
   color: #fff;
   font-size: 17px;
}

.why-modern-item p {
   margin: 0;
   color: #b8c2d8;
   font-size: 13px;
   line-height: 1.7;
}

/* HOW IT WORKS */
.how-it-works-modern {
   padding: 90px 0 120px;
   background: #ffffff;
}

.how-it-works-modern .container {
   padding-top: 0;
   padding-bottom: 0;
}
.how-it-works-heading {
   margin-bottom: 50px;
   text-align: center;
}

.how-it-works-heading > span {
   display: inline-block;
   margin-bottom: 18px;
   color: #625bff;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: 0.13em;
   text-transform: uppercase;
}

.how-it-works-heading h2 {
   margin: 0;
   color: #07183d;
   font-size: 30px;
   line-height: 1.08;
   font-weight: 700;
}

.how-it-works-heading p {
   margin: 26px 0 0;
   color: #69748a;
   font-size: 17px;
   line-height: 1.7;
}

.how-it-works-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

.how-it-works-card {
   position: relative;
   min-height: 270px;
   padding: 35px 36px;
   overflow: hidden;
   border: 1px solid #e8eaf2;
   border-radius: 26px;
   background: #fbfcff;
}

.how-it-works-number {
   position: absolute;
   top: 24px;
   right: 30px;
   color: #d8dce8;
   font-size: 45px;
   line-height: 1;
   font-weight: 800;
}

.how-it-works-icon {
   display: grid;
   place-items: center;
   width: 66px;
   height: 66px;
   margin-bottom: 36px;
   border-radius: 18px;
   color: #625bff;
   background: #f0efff;
   font-size: 22px;
}

.how-it-works-card h3 {
   margin: 0 0 10px;
   color: #07183d;
   font-size: 20px;
   font-weight: 700;
}

.how-it-works-card p {
   margin: 0;
   color: #69748a;
   font-size: 15px;
   line-height: 1.7;
}

/* =====================================================
   BECOME AN ADVISOR SECTION
===================================================== */

.advisor-section {
    position: relative;
    padding: 90px 0px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(72, 137, 255, 0.22),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(0, 191, 255, 0.12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #071b42 0%,
            #092d68 50%,
            #063f83 100%
        );
}


/* Decorative circles */

.advisor-section::before,
.advisor-section::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.advisor-section::before {
    width: 330px;
    height: 330px;
    top: -170px;
    right: -100px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.advisor-section::after {
    width: 220px;
    height: 220px;
    bottom: -120px;
    left: -60px;
    background: rgba(255, 255, 255, 0.03);
}


/* Container */

.advisor-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}


/* Main Grid */

.advisor-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.advisor-left {
    max-width: 580px;
}


.advisor-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    margin-bottom: 20px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 30px;

    backdrop-filter: blur(8px);
}


.advisor-left h2 {
    margin: 0 0 22px;

    font-size:30px;
    line-height: 1.13;
    font-weight: 700;

    color: #ffffff;
}


.advisor-left h2 span {
    display: block;
    color: #625bff;
}


.advisor-left p {
    margin: 0;

    max-width: 560px;

    font-size: 16px;
    line-height: 1.8;

    color: rgba(255, 255, 255, 0.78);
}


/* Buttons */

.advisor-buttons {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-top: 34px;
}


.advisor-primary-btn,
.advisor-call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 0 24px;

    border-radius: 8px;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;
}


/* Primary */

.advisor-primary-btn {
    gap: 10px;

    color: #062450;
    background: #ffffff;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}


.advisor-primary-btn span {
    font-size: 20px;
    transition: transform 0.3s ease;
}


.advisor-primary-btn:hover {
    color: #062450;

    transform: translateY(-3px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}


.advisor-primary-btn:hover span {
    transform: translateX(5px);
}


/* Secondary */

.advisor-call-btn {
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.3);

    background: rgba(255, 255, 255, 0.05);
}

.advisor-call-btn i {
	margin-right: 5px;
}
.advisor-call-btn:hover {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.12);

    transform: translateY(-3px);
}


/* =====================================================
   RIGHT BENEFIT CARDS
===================================================== */

.advisor-right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}


.advisor-card {
    min-height: 190px;

    padding: 28px;

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(10px);

    transition: all 0.35s ease;
}


.advisor-card:hover {
    transform: translateY(-6px);

    background: rgba(255, 255, 255, 0.12);

    border-color: rgba(255, 255, 255, 0.22);
}


.advisor-card-highlight {
    background: #ffffff;
}


.advisor-card-highlight:hover {
    background: #ffffff;
}


/* Icons */

.advisor-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 20px;

    border-radius: 10px;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.12);
}


.advisor-icon svg {
    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.advisor-card-highlight .advisor-icon {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #1455a3,
        #2088dc
    );
}


/* Card text */

.advisor-card h3 {
    margin: 0 0 9px;

    font-size: 18px;
    font-weight: 650;

    color: #ffffff;
}


.advisor-card p {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: rgba(255, 255, 255, 0.66);
}


.advisor-card-highlight h3 {
    color: #0b2c59;
}


.advisor-card-highlight p {
    color: #6b7890;
}


/* =====================================================
   PRODUCT STRIP
===================================================== */

.advisor-products {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 60px;
    padding: 25px 30px;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.1);
}


.advisor-products > span {
    flex-shrink: 0;

    font-size: 15px;
    font-weight: 600;

    color: #ffffff;
}


.advisor-product-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 20px;
}


.advisor-product-item {
    display: flex;
    align-items: center;
    gap: 7px;

    font-size: 13px;
    font-weight: 500;

    color: rgba(255, 255, 255, 0.78);
}


.advisor-product-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    font-size: 11px;

    color: #ffffff;
    background: #625bff;
}




/* =====================================================
   CONTACT / INQUIRY SECTION
   ===================================================== */

.inquiry {
   position: relative;
   overflow: hidden;
   padding: 90px 0;
   background: radial-gradient(
         circle at 8% 10%,
         rgba(99, 91, 255, 0.13),
         transparent 25%
      ),
      radial-gradient(
         circle at 92% 85%,
         rgba(40, 201, 145, 0.05),
         transparent 24%
      ),
      #f0f1fa;
}

/* Section heading */
.inquiry .section-title {
   margin-bottom: 45px;
   color: #081735;
   font-size: 30px;
   font-weight: 700;
}

.inquiry .section-title::before {
   content: "GET A QUOTE";
   display: block;
   margin-bottom: 12px;
   color: #635bff;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 3px;
}

/* Main contact card */
.inquiry .contact-wrapper {
   position: relative;
   display: grid;
   grid-template-columns: 0.9fr 1.1fr;
   gap: 0;
   overflow: hidden;
   margin: 0 auto;
   border: 1px solid #e5e8f0;
   border-radius: 30px;
   background: #fff;
   box-shadow: 0 30px 80px rgba(20, 30, 70, 0.12);
}

/* ====================================
   LEFT CONTACT INFORMATION
   ==================================== */

.inquiry .contact-info {
   position: relative;
   overflow: hidden;
   padding: 55px 45px;
   border-radius: 0;
   color: #fff;
   background: radial-gradient(
         circle at 0% 0%,
         rgba(108, 92, 255, 0.48),
         transparent 38%
      ),
      linear-gradient(145deg, #081735 0%, #142850 65%, #303b83 100%);
}

/* Decorative circles */
.inquiry .contact-info::before {
   content: "";
   position: absolute;
   width: 280px;
   height: 280px;
   right: -130px;
   bottom: -130px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 50%;
   box-shadow: 0 0 0 50px rgba(255, 255, 255, 0.025),
      0 0 0 100px rgba(255, 255, 255, 0.015);
}

.inquiry .contact-info h2 {
   position: relative;
   z-index: 2;
   margin: 0;
   color: #fff;
   font-size: 30px;
   margin-bottom: 5px;
   font-weight: 700;
   letter-spacing: -1.5px;
}
.inquiry .contact-info p {
   margin-bottom: 40px;
}
/* Contact links wrapper */
.inquiry .info-item {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

/* Make link and address rows look like cards */
.inquiry .info-item a,
.inquiry .info-item p {
   display: flex;
   align-items: center;
   gap: 13px;
   min-height: 55px;
   margin: 0;
   padding: 10px 14px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 14px;
   color: #edf2ff;
   background: rgba(255, 255, 255, 0.055);
   text-decoration: none;
   font-size: 13px;
   line-height: 1.5;
   transition: all 0.25s ease;
}

.inquiry .info-item a:hover {
   color: #fff;
   border-color: rgba(255, 255, 255, 0.18);
   background: rgba(255, 255, 255, 0.1);
   transform: translateX(4px);
}

/* Icons */
.inquiry .info-item i {
   display: grid;
   place-items: center;
   width: 36px;
   height: 36px;
   flex: 0 0 36px;
   margin: 0;
   border-radius: 10px;
   color: #b9b5ff;
   background: rgba(255, 255, 255, 0.08);
   font-size: 14px;
}

/* ====================================
   RIGHT FORM
   ==================================== */

.inquiry .contact-form {
   padding: 55px 50px;
   border-radius: 0;
   background: #fff;
}
/* 2-column inquiry form */
.inquiry-form {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0px 18px;
}

/* Remove old vertical spacing because grid handles it */
.inquiry-form .form-group {
   margin-bottom: 0;
}

/* Message should use full width */
.inquiry-form .form-group:has(textarea) {
   grid-column: 1 / -1;
}

/* Submit button full width */
.inquiry-form > .btn-primary {
   grid-column: 1 / -1;
}

/* Success message full width */
.inquiry-form > #formSuccess {
   grid-column: 1 / -1;
}

/* Input groups */
.inquiry .form-group {
   position: relative;
   margin-bottom: 18px;
}

/* Icons inside inputs */
.inquiry .form-group > i {
   position: absolute;
   z-index: 2;
   top: 18px;
   left: 17px;
   color: #8992a7;
   font-size: 14px;
   transition: color 0.2s ease;
}

/* Inputs */
.inquiry .form-group input,
.inquiry .form-group select,
.inquiry .form-group textarea {
   width: 100%;
   padding: 15px 16px 15px 46px;
   border: 1px solid #e0e4ec;
   border-radius: 13px;
   color: #111a34;
   background: #fafbfe;
   font-family: inherit;
   font-size: 14px;
   outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease,
      background 0.2s ease;
}
.inquiry .form-group select {
    color: #98a0b2;
}

.inquiry .form-group select:valid {
    color: #111a34;
}

.inquiry .form-group select option {
    color: #111a34;
}
.inquiry .form-group input,
.inquiry .form-group select {
   min-height: 53px;
}

/* Textarea */
.inquiry .form-group textarea {
   min-height: 120px;
   padding-top: 15px;
   resize: vertical;
}

/* Focus */
.inquiry .form-group input:focus,
.inquiry .form-group select:focus,
.inquiry .form-group textarea:focus {
   border-color: #817aff;
   background: #fff;
   box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.08);
}

.inquiry .form-group:focus-within > i {
   color: #635bff;
}

/* Placeholder */
.inquiry input::placeholder,
.inquiry textarea::placeholder {
   color: #98a0b2;
}

/* Select */
.inquiry select {
   cursor: pointer;
}

/* Validation errors */
.inquiry .error.text-danger {
   display: block;
   min-height: 15px;
   margin-top: 5px;
   padding-left: 3px;
   color: #d63636;
   font-size: 11px;
}

/* Submit button - only contact button */
.inquiry .btn-primary {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   min-height: 54px;
   margin-top: 8px;
   padding: 0 25px;
   border: none;
   border-radius: 13px;
   color: #fff;
   background: linear-gradient(135deg, #635bff, #8062ff);
   box-shadow: 0 14px 28px rgba(99, 91, 255, 0.22);
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.25s ease;
}

.inquiry .btn-primary:hover {
   color: #fff;
   background: linear-gradient(135deg, #554dee, #7455f7);
   box-shadow: 0 18px 35px rgba(99, 91, 255, 0.3);
   transform: translateY(-2px);
}

/* Success message */
.inquiry #formSuccess {
   margin-top: 17px !important;
   padding: 13px 15px;
   border: 1px solid #bcebd9;
   border-radius: 11px;
   color: #13744f;
   background: #eafbf4;
   font-size: 12px;
}

/* Privacy / reassurance note */
.inquiry-privacy-note {
   grid-column: 1 / -1;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
   margin: 12px 0 0;
   color: #788397;
   font-size: 11px;
   line-height: 1.5;
   text-align: center;
}

.inquiry-privacy-note i {
   position: static !important;
   color: #635bff !important;
   font-size: 11px !important;
}

/* =========================
   MODERN CTA SECTION
   ========================= */

.cta {
   position: relative;
   overflow: hidden;
   padding: 90px 20px;
   text-align: center;
   color: #fff;

   background: radial-gradient(
         circle at 16% 20%,
         rgba(128, 98, 255, 0.26),
         transparent 28%
      ),
      radial-gradient(
         circle at 86% 84%,
         rgba(40, 201, 145, 0.08),
         transparent 24%
      ),
      linear-gradient(135deg, #0b1633 0%, #172858 58%, #4b45c9 100%);
}

/* Decorative circles */
.cta::before {
   content: "";
   position: absolute;
   width: 380px;
   height: 380px;
   top: -220px;
   right: -100px;

   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 50%;

   box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.025),
      0 0 0 120px rgba(255, 255, 255, 0.015);
}

.cta::after {
   content: "";
   position: absolute;
   width: 220px;
   height: 220px;
   left: -100px;
   bottom: -130px;

   border-radius: 50%;
   background: rgba(99, 91, 255, 0.1);
}

/* Heading */
.cta h2 {
   position: relative;
   z-index: 2;

   margin: 0;

   color: #fff;

   font-size: 30px;
   font-weight: 700;
   line-height: 1.15;
}

/* Small label above heading */
.cta h2::before {
   content: "NEED HELP?";

   display: block;

   margin-bottom: 14px;

   color: #bcb8ff;

   font-size: 12px;
   font-weight: 800;

   letter-spacing: 3px;
}

/* Description */
.cta p {
   position: relative;
   z-index: 2;

   max-width: 600px;

   margin: 16px auto 0;

   color: #c0c9dd;

   font-size: 15px;
   line-height: 1.7;
}

/* CTA button */
.cta .btn-outline {
   position: relative;
   z-index: 2;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   gap: 10px;

   min-height: 54px;

   margin-top: 30px;

   padding: 0 28px;

   border: none;
   border-radius: 14px;

   color: #081735;

   background: #fff;

   font-size: 14px;
   font-weight: 700;

   text-decoration: none;

   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.16);

   transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.cta .btn-outline:hover {
   color: #635bff;

   background: #fff;

   transform: translateY(-3px);

   box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
}

/* Icon */
.cta .btn-outline i {
   font-size: 15px;
   color: #635bff;
}

/* =====================================================
   MODERN FOOTER
   SAME HTML - NO BLADE CHANGES NEEDED
   ===================================================== */

.site-footer {
   position: relative;
   overflow: hidden;
   padding: 65px 0 0;
   color: #b9c3d6;
   background: radial-gradient(
         circle at 12% 0%,
         rgba(99, 91, 255, 0.16),
         transparent 28%
      ),
      linear-gradient(180deg, #07152f 0%, #050d1f 100%);
   border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.site-footer::before {
   content: "";
   position: absolute;
   width: 360px;
   height: 360px;
   right: -180px;
   top: -180px;
   border-radius: 50%;
   background: rgba(99, 91, 255, 0.08);
   box-shadow: 0 0 0 70px rgba(99, 91, 255, 0.025),
      0 0 0 140px rgba(99, 91, 255, 0.015);
}

.footer-container {
   position: relative;
   z-index: 2;
   max-width: 1250px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1.2fr 0.8fr 1fr 1fr;
   gap: 42px;
   padding: 0 0px 50px;
}

.footer-box:nth-child(2) {
   margin-left: 0;
}

.footer-box h3,
.footer-box h4 {
   margin: 0 0 18px;
   color: #fff;
   font-size: 16px;
   font-weight: 700;
}

.footer-box h3 {
   font-size: 21px;
   letter-spacing: -0.7px;
}

.footer-box p {
   max-width: 330px;
   margin: 0;
   color: #9faac0;
   font-size: 13px;
   line-height: 1.8;
}

.footer-box ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

.footer-box ul li {
   margin-bottom: 10px;
}

.footer-box ul li a,
.footer-box-list a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #aeb8cc;
   text-decoration: none;
   font-size: 13px;
   line-height: 1.7;
   transition: color 0.2s ease, transform 0.2s ease;
}

.footer-box ul li a:hover,
.footer-box-list a:hover {
   color: #fff;
   transform: translateX(4px);
}

.footer-box-list {
   display: flex;
   flex-direction: column;
   gap: 11px;
}

.footer-box-list i {
   width: 18px;
   margin-right: 0;
   color: #817aff;
   font-size: 13px;
}

.social-links {
   display: flex;
   gap: 9px;
   margin-top: 20px;
}

.social-links a {
   display: grid;
   place-items: center;
   width: 38px;
   height: 38px;
   margin: 0;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 11px;
   color: #d7ddeb;
   background: rgba(255, 255, 255, 0.045);
   font-size: 15px;
   line-height: normal;
   text-decoration: none;
   transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease,
      border-color 0.2s ease;
}

.social-links a:hover {
   color: #fff;
   background: rgba(99, 91, 255, 0.16);
   border-color: rgba(129, 122, 255, 0.3);
   transform: translateY(-3px);
}

.footer-bottom {
   position: relative;
   z-index: 2;
   margin-top: 0;
   padding: 18px 20px;
   color: #768198;
   background: rgba(0, 0, 0, 0.18);
   border-top: 1px solid rgba(255, 255, 255, 0.05);
   text-align: center;
   font-size: 12px;
}

/* =====================================================
   RESPONSIVE CSS
   ===================================================== */

/* Desktop: 1025px+ */
/* Default CSS above applies as-is (no media query needed) */

/* =====================================================
   TABLET
===================================================== */

   /* ---------- Advisor ---------- */
   
@media (max-width: 1024px) {

    .advisor-section {
        padding: 75px 20px;
    }


    .advisor-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }


    .advisor-left {
        max-width: 700px;
    }


    .advisor-products {
        align-items: flex-start;
        flex-direction: column;
    }


    .advisor-product-list {
        justify-content: flex-start;
    }

}


@media (min-width: 768px) and (max-width: 1024px) {
   .container {
      padding-left: 15px;
      padding-right: 15px;
   }
   /* ---------- Hero ---------- */
   .hero-modern-grid {
      grid-template-columns: 1fr;
      gap: 55px;
   }

   .hero-modern-visual {
      width: 100%;
      max-width: 720px;
      margin: auto;
   }
   .hero-modern-card {
      left: 0px;
   }
   .hero-modern-support {
      left: -14px;
   }

   /* ---------- Trust Strip ---------- */
   .trust-strip-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px 14px;
   }

   .trust-strip-grid > div {
      justify-content: flex-start;
      min-height: 44px;
      padding: 8px 10px;
      font-size: 12px;
   }

   /* ---------- Services / Insurance Plans ---------- */
   .services-modern .service-grid {
      grid-template-columns: 1fr 1fr;
   }

   /* ---------- Why SecureRide ---------- */
   .why-modern-grid {
      grid-template-columns: 1fr;
      gap: 45px;
   }

   /* ---------- How It Works ---------- */
   .how-it-works-grid {
      grid-template-columns: 1fr;
   }

   /* ---------- Contact / Inquiry ---------- */
   .inquiry .contact-wrapper {
      grid-template-columns: 1fr;
   }

   .inquiry .contact-info,
   .inquiry .contact-form {
      padding: 42px 35px;
   }

   .inquiry .contact-info {
      min-height: auto;
   }

   /* ---------- Footer ---------- */
   .footer-container {
      grid-template-columns: 1fr 1fr;
      gap: 38px 30px;
   }
}

/* Mobile */
@media (max-width: 767px) {
   /* ---------- Header / Navigation ---------- */
   .menu-toggle {
      display: block;
   }
.header-logo {
	height: 60px;
}
   nav {
      position: absolute;
      top: 100%;
      left: 12px;
      right: 12px;
      width: auto;
      flex-direction: column;
      align-items: stretch;
      gap: 5px;
      max-height: 0;
      padding: 0 10px;
      overflow: hidden;
      border: 1px solid transparent;
      border-radius: 0 0 18px 18px;
      background: rgba(8, 23, 53, 0.98);
      box-shadow: 0 20px 40px rgba(5, 14, 35, 0.22);
      transition: max-height 0.35s ease, padding 0.35s ease,
         border-color 0.35s ease;
      z-index: 99;
   }

   nav.active {
      max-height: 420px;
      padding: 14px 10px 16px;
      border-color: rgba(255, 255, 255, 0.07);
   }

   nav a {
      justify-content: flex-start;
      width: 100%;
      min-height: 44px;
      padding: 0 14px;
   }

   nav a::after {
      display: none;
   }

   .container {
      padding: 40px 10px;
   }

   /* ---------- Hero ---------- */
   .hero-modern-grid {
      grid-template-columns: 1fr;
      gap: 55px;
   }

   .hero-modern-visual {
      width: 100%;
      max-width: 720px;
      margin: auto;
      min-height: 430px;
   }

   .hero-modern {
      min-height: auto;
      padding: 65px 0 75px;
   }

   .hero-modern .container {
      padding-top: 0;
      padding-bottom: 0;
   }

   .hero-modern-content h1 {
      font-size: 36px;
      letter-spacing: -2px;
   }

   .hero-modern-content > p {
      font-size: 15px;
   }

   .hero-modern-actions {
      align-items: stretch;
      flex-direction: column;
   }

   .hero-modern-primary,
   .hero-modern-secondary {
      width: 100%;
   }

   .hero-modern-points {
      display: grid;
      gap: 10px;
   }

   .hero-modern-card {
      left: 0;
      top: 42px;
      border-radius: 26px;
   }

   .hero-modern-card-head {
      padding: 25px 18px 0;
   }

   .hero-modern-car {
      font-size: 125px;
   }

.hero-modern-road-line {
	display: none;
}
.hero-modern-types {
	left: 15px;
	right: 15px;
	grid-template-columns: repeat(3, 1fr);
	bottom: 40px;
}

   .hero-modern-support,
   .hero-modern-process-card {
      min-width: 175px;
      padding: 11px 12px;
   }

   .hero-modern-process-card {
      right: 0;
   }

   .hero-modern-support strong,
   .hero-modern-process-card strong {
      font-size: 11px;
   }

   /* ---------- Trust Strip ---------- */
   .trust-strip .container {
      padding-top: 16px;
      padding-bottom: 16px;
   }

   .trust-strip-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
   }

   .trust-strip-grid > div {
      justify-content: flex-start;
      min-height: 42px;
      padding: 8px;
      gap: 7px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.45);
      font-size: 10px;
      line-height: 1.4;
   }

   .trust-strip-grid i {
      font-size: 14px;
      flex: 0 0 auto;
   }

   /* ---------- Services / Insurance Plans & Why SecureRide ---------- */
   .services-modern,
   .why-modern {
      padding: 70px 0;
   }

   .services-modern-head {
      grid-template-columns: 1fr;
      gap: 18px;
      margin-bottom: 34px;
   }

   .services-modern-head > p {
      margin-left: 0;
   }

   .services-modern .service-grid {
      grid-template-columns: 1fr;
   }

   .services-modern .service-card {
      min-height: auto;
   }

   .services-modern .service-card p {
      min-height: auto;
   }

   /* ---------- Why SecureRide ---------- */
   .why-modern-grid {
      grid-template-columns: 1fr;
      gap: 45px;
   }

   .why-modern-item {
      grid-template-columns: 48px 1fr;
      gap: 14px;
      padding: 18px;
   }

   .why-modern-icon {
      width: 46px;
      height: 46px;
   }

   .why-box {
      padding: 10px;
   }

   /* ---------- How It Works ---------- */
   .how-it-works-grid {
      grid-template-columns: 1fr;
   }

   .how-it-works-modern {
      padding: 70px 0;
   }

   .how-it-works-modern .container {
      padding-top: 0;
      padding-bottom: 0;
   }

   .how-it-works-heading {
      margin-bottom: 38px;
   }

   .how-it-works-heading h2 {
      font-size: 38px !important;
      letter-spacing: -2px;
   }

   .how-it-works-heading h2 br {
      display: none;
   }

   .how-it-works-card {
      min-height: auto;
      padding: 28px 24px;
   }



   /* ---------- Advisor ---------- */
    .advisor-section {
        padding: 60px 16px;
    }


    .advisor-left h2 {
        font-size: 24px;
    }


    .advisor-left p {
        font-size: 15px;
    }


    .advisor-buttons {
        align-items: stretch;
        flex-direction: column;
    }


    .advisor-primary-btn,
    .advisor-call-btn {
        width: 100%;
    }


    .advisor-right {
        grid-template-columns: 1fr;
    }


    .advisor-card {
        min-height: auto;
        padding: 24px;
    }


    .advisor-products {
        margin-top: 45px;
        padding: 22px;
    }


    .advisor-product-list {
        flex-direction: column;
        align-items: flex-start;

        gap: 13px;
    }



   /* ---------- Contact / Inquiry ---------- */
   .inquiry .contact-info {
      min-height: auto;
   }

   .inquiry-form {
      grid-template-columns: 1fr;
   }

   .inquiry-form .form-group:has(textarea),
   .inquiry-form > .btn-primary,
   .inquiry-form > #formSuccess {
      grid-column: auto;
   }

   .inquiry {
      padding: 65px 0;
   }

   .inquiry .section-title {
      margin-bottom: 30px;
      font-size: 30px !important;
      letter-spacing: -1px;
   }

   .inquiry .contact-wrapper {
      grid-template-columns: 1fr;
      display: grid;
      gap: 0;
      border-radius: 22px;
   }

   .inquiry .contact-info,
   .inquiry .contact-form {
      padding: 32px 20px;
   }

   .inquiry .contact-info h2 {
      font-size: 26px !important;
   }

   .inquiry .info-item a,
   .inquiry .info-item p {
      font-size: 12px;
   }

   .inquiry .form-group input,
   .inquiry .form-group select,
   .inquiry .form-group textarea {
      font-size: 13px;
   }

   .info-item p {
      letter-spacing: -0.8px;
   }

   .contact-info h2 {
      font-size: 18px !important;
   }

   /* ---------- CTA ---------- */
   .cta {
      padding: 70px 20px;
   }

   .cta p {
      font-size: 14px;
   }

   .cta .btn-outline {
      width: 100%;
      max-width: 320px;
   }

   /* ---------- Footer ---------- */
   .site-footer {
      padding-top: 50px;
   }

   .footer-container {
      grid-template-columns: 1fr;
      gap: 30px;
      padding: 0 20px 40px;
   }

   .footer-box p {
      max-width: 100%;
   }

   .footer-bottom {
      padding: 16px 20px;
      font-size: 11px;
      line-height: 1.6;
   }

   /* ---------- Global typography ---------- */
   h2 {
      font-size: 24px !important;
   }

   /* ---------- Background continuity (mobile) ---------- */
   .services-modern,
   .how-it-works-modern,
   .inquiry,
   .why-modern,
   .cta {
      background-attachment: scroll;
   }
   

}

/* =====================================================
   SITE-WIDE MOTION / REVEAL ANIMATIONS
   ===================================================== */


/* Elements enhanced by IntersectionObserver */
.js .reveal-on-scroll {
   opacity: 0;
   transform: translateY(34px);
   transition:
      opacity 0.75s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
   will-change: opacity, transform;
}

.js .reveal-on-scroll.reveal-left {
   transform: translateX(-42px);
}

.js .reveal-on-scroll.reveal-right {
   transform: translateX(42px);
}

.js .reveal-on-scroll.reveal-scale {
   transform: scale(0.94);
}

.js .reveal-on-scroll.is-visible {
   opacity: 1;
   transform: none;
}

/* Optional stagger controlled by CSS custom property */
.js .reveal-on-scroll {
   transition-delay: var(--reveal-delay, 0ms);
}

/* Hero entrance */
@keyframes heroFadeUp {
   from {
      opacity: 0;
      transform: translateY(26px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes heroFadeRight {
   from {
      opacity: 0;
      transform: translateX(34px) scale(0.98);
   }
   to {
      opacity: 1;
      transform: translateX(0) scale(1);
   }
}

@keyframes gentleFloat {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-9px); }
}

@keyframes softPulse {
   0%, 100% { box-shadow: 0 0 0 0 rgba(99, 91, 255, 0.16); }
   50% { box-shadow: 0 0 0 9px rgba(99, 91, 255, 0); }
}

@keyframes iconBreathe {
   0%, 100% { transform: scale(1); }
   50% { transform: scale(1.07); }
}

@keyframes glowDrift {
   0%, 100% { transform: translate3d(0, 0, 0); }
   50% { transform: translate3d(12px, -10px, 0); }
}

.hero-modern-content {
   animation: heroFadeUp 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-modern-visual {
   animation: heroFadeRight 0.95s 0.12s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-modern-support,
.hero-modern-process-card {
   animation: gentleFloat 4.5s ease-in-out infinite;
}

.hero-modern-process-card {
   animation-delay: 0.9s;
}

.hero-modern-glow-left,
.hero-modern-glow-right {
   animation: glowDrift 8s ease-in-out infinite;
}

.hero-modern-primary {
   position: relative;
   overflow: hidden;
}

.hero-modern-primary::after {
   content: "";
   position: absolute;
   top: -50%;
   left: -90%;
   width: 45%;
   height: 200%;
   transform: rotate(22deg);
   background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.35),
      transparent
   );
   transition: left 0.7s ease;
}

.hero-modern-primary:hover::after {
   left: 145%;
}

/* Cards */
.service-card,
.how-it-works-card,
.why-modern-item {
   backface-visibility: hidden;
}

.services-modern .service-card:hover .service-icon,
.how-it-works-card:hover .how-it-works-icon,
.why-modern-item:hover .why-modern-icon {
   animation: iconBreathe 0.8s ease-in-out;
}

.services-modern .service-card:hover .service-number,
.how-it-works-card:hover .how-it-works-number {
   transform: translateY(-3px);
}

.service-number,
.how-it-works-number {
   transition: transform 0.25s ease, color 0.25s ease;
}

/* Trust-strip interaction */
.trust-strip-grid > div {
   transition: transform 0.25s ease, color 0.25s ease;
}

.trust-strip-grid > div:hover {
   transform: translateY(-3px);
   color: #081735;
}

.trust-strip-grid > div:hover i {
   animation: softPulse 0.8s ease;
}

/* Form focus motion */
.inquiry .form-group {
   transition: transform 0.22s ease;
}

.inquiry .form-group:focus-within {
   transform: translateY(-2px);
}

/* CTA subtle hover lift */
.cta .btn-outline,
.service-cta,
.why-modern-link {
   transition-property: transform, gap, color, box-shadow, background;
}

.service-cta:hover,
.why-modern-link:hover {
   transform: translateX(3px);
}

/* Footer links */
.footer-box ul li,
.footer-box-list a,
.social-links a {
   transition: transform 0.22s ease, opacity 0.22s ease;
}

.footer-box ul li:hover {
   transform: translateX(4px);
}

/* Keep animation comfortable and accessible */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      transition-delay: 0ms !important;
   }

   .js .reveal-on-scroll {
      opacity: 1 !important;
      transform: none !important;
   }
}