:root{ --text: #11103E; --text2: #48515a; --primary: #012cb9; --cta: #3262ff; --secondary: #6366f1; --tertiary: #4f46e5; --accent:#ec4899; --chatbg:#f3f5ff; --bubble-border: #ddd6fe; --shadow: 0 4px 12px rgba(0, 92, 237, 0.12); --bubble-bg: #f5f3ff; } html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}img{margin:0;padding:0;border:0;outline:0;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}a:focus{outline:0;text-decoration:none}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease}a:hover{text-decoration:none}::-webkit-input-placeholder{opacity:1}:-moz-placeholder{opacity:1}::-moz-placeholder{opacity:1}:-ms-input-placeholder{opacity:1}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} body {font-family: 'Poppins', sans-serif;font-weight: 300;font-size: 16px;line-height: 1.428571429;color: #14274d;background-color: #fff;min-width: 320px; overflow-x: hidden;-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} p{margin-bottom: 1rem;} header { background-color: #ffffff; padding-top: 20px; } header p {font-weight: 600} nav {max-width: 1140px; padding-top: 0!important; padding-bottom: 0!important} a{ transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);} main{ background-color: #f3f5f7; background-repeat: no-repeat; overflow: hidden; position: relative; padding-right: 15px; padding-left: 15px; padding-bottom: 2rem; padding-top: 2rem; min-height: 50vh} #formSec:after, main:after{content: ""; width: 100%; height: 100%; background: rgb(255,255,255); z-index: 2;background: linear-gradient(0deg, rgba(255,255,255,0.5) 10%, rgba(255,255,255,1) 100%); display: block; position: absolute; left: 0; right: 0; bottom: 0;} main:before{content: ""; width: 100%; height: 100%; display: block;position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-size: cover; opacity: 0.9; z-index: 1; background-position: center 2vh; background-repeat: no-repeat} main:before{background-image: url("../img/auto.jpg"); background-size: 100%; background-position: center bottom} .headline {text-align: center; max-width: 1400px;} .headline h2 {font-size: 5vh; margin-bottom: 1rem; font-weight: 700} .headline h3 {font-size:30px; margin-bottom: 2rem} .headline ul {display: flex; margin-left: auto; margin-right: auto; flex-direction: column; width: max-content; max-width: 100%; margin-bottom: 2rem} .headline ul li {font-weight: 500; font-size:1.275rem; text-align: left; display: flex; gap:10px; align-items: center; background: white;border-radius: 12px;box-shadow: var(--card-shadow); padding: 10px 30px 10px 10px; margin-bottom: 10px; } .headline ul li:before{content:""; width: 20px; height: 20px; min-width: 20px; min-height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 24px; background-position: center; border-radius: 50%} .btn{ width:max-content; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: center;align-items: center;column-gap: 12px; padding: 0 25px; min-height:70px; font-size: 1.25rem;font-weight: 600;letter-spacing: -0.015em; background-color: var(--cta); text-align: center; text-decoration: none; color:white; border-radius: 8px;position: relative; overflow: hidden; border: none; line-height: 1!important} .btn i {font-style: normal} .btn-grad{background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%);} .btn-grad:before{content: ""; position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, var(--cta) 0%, var(--accent) 100%);opacity: 0;transition: opacity 0.4s ease;z-index: -1;} .btn-grad:hover:before{opacity: 1} .hero-buttons {display: flex; column-gap: 30px; justify-content: center; border-radius:60px;padding: 8px;box-shadow: 0 12px 32px rgba(1, 44, 185, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.2); width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; overflow: hidden; position: relative; align-items: center} .hero-buttons::before {content: '';position: absolute;inset: 0;background: linear-gradient(180deg, rgba(1, 44, 185, 0.03) 0%, rgba(255, 255, 255, 0) 100%);z-index: 0; } .hero-buttons a:hover{transform: translateY(-2px);box-shadow: 0 8px 20px rgba(1, 44, 185, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.2);} .hero-buttons .btn{border-radius:3rem} .btn:hover{color:#fff} .cta-divider {text-align: center;color: var(--primary); font-weight: 500;position: relative;} .cta-divider::before, .cta-divider::after {content: "";position: absolute;top: 45%;width: 40%;height: 2px;background: var(--primary)} .cta-divider::before { left: -50%; } .cta-divider::after { right: -50%; } .hl-bl{background-image: -webkit-gradient(linear,right top,left top,from(#4e73d1),to(#269bd6));background-image: linear-gradient(270deg,#4e73d1,#269bd6);color: transparent; -webkit-background-clip: text;background-clip: text; } .formSec > .container, .headline {position: relative; z-index: 99;} .icon-arrow , .icon-calc svg{ transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);} .btn-calc:hover .icon-calc svg{transform: rotate(30deg) scale(1.2);} .btn-calc:hover .icon-arrow {transform: translateX(4px);} .icon-arrow svg{width: 18px; height: 18px; stroke:#fff; stroke-width:3px; } @keyframes iconscale { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } } .btn-calc:active svg{animation: iconscale 0.3s ease;} .btn-sec {position: relative;color: var(--secondary);background: linear-gradient(135deg, #2563eb, #7c3aed);z-index: 1; transform-style: preserve-3d; } .btn-sec h5 {font-weight: 700!important} .btn-sec::after {content:""; position: absolute; width: calc(100% - 6px); height: calc(100% - 6px);background: white;border-radius: 57px; z-index: -1 !important;transform: translateZ(-1px);top: 3px;left: 3px;right: 3px;bottom: 3px;} .btn-sec:hover {color: var(--secondary);} .btn-sec:hover svg { animation: ring 1.5s ease-in-out infinite;transform-origin: center;} @keyframes ring{0%{transform:rotate(0deg) scale(1)}10%{transform:rotate(-5deg) scale(1.1)}20%{transform:rotate(5deg) scale(1.1)}30%{transform:rotate(-5deg) scale(1.1)}40%{transform:rotate(5deg) scale(1.1)}50%{transform:rotate(0deg) scale(1.1)}100%{transform:rotate(0deg) scale(1)}} .call-icon svg path:nth-child(1) , .btn-sec:hover svg path:nth-child(1) { animation: ringpulse 1.5s ease-out infinite;} .call-icon svg path:nth-child(2), .btn-sec:hover svg path:nth-child(2) { animation: ringpulse 1.5s ease-out 0.2s infinite;} @keyframes ringpulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}} .page-content{padding: 90px 0; } .page-title{ font-size: 2.5rem;font-weight: 600; color: var(--text); margin-bottom: 3rem; line-height: 1.3; max-width: 600px; margin-left: auto; margin-right: auto} .page-desc{font-size: 1.2rem; padding: 10px 26px; background: conic-gradient(from 180deg at 50% 50%, rgba(99, 102, 241, 0.085) 0%, rgba(236, 72, 153, 0.08) 100%); display: flex; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; float: none; color: #012cb9; font-weight: 600; padding: 10px 20px; border-radius:50px; margin-bottom: .5rem; color: var(--primary)} .desc-plain{background: none; margin-bottom: 3rem; color: var(--text2); font-weight: 400} .page-box{padding: 40px 45px; height: 100%; text-align: center; transition: all 0.4s linear; background: #fff; -webkit-box-shadow: 0px 30px 60px 0px rgba(38,59,94,0.1); box-shadow: 0px 30px 60px 0px rgba(38,59,94,0.1); border-radius: 10px; cursor: pointer} .page-box h3{font-size: 1.4rem;font-weight: 600; margin-bottom: 1rem;} .page-box svg {max-width: 80px;} .page-box svg .st0 {color:var(--text);stroke-width:4px;} .page-box svg .st1 { color:var(--cta);stroke-width:4px;} .page-box:hover{box-shadow: none; transform: scale(105%)} .page-box p {margin-bottom: 0;} .page-content.bl{ background-color: #F2F8FF;} .page-box:hover svg .st1 { color:var(--cta); } .page-box:hover svg .st0 { color:var(--text);} .carriers {padding-top: 3rem; padding-bottom: 3rem} .carriers .page-title {font-size: 1.125rem; color: var(--text)!important; letter-spacing:4px; text-transform: uppercase} .carriers-grid {column-gap: 50px} .carrier-logo { max-height: 40px; max-width: 150px;object-fit: contain;} #formSec{position: relative;} form{background: #fff;position: relative;border-radius: 1rem;backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);overflow: hidden;border: 2px solid rgba(255, 255, 255, 1);box-shadow: -20px -3px 40px -10px rgba(0, 0, 0, 0.1); position: relative; padding: 40px; transform-style: preserve-3d; } /*form:before{content:""; width: 100%; height: 100%; display: block;position: absolute;inset: 0;border-radius: 1rem;padding: 2px;background: linear-gradient(35deg, rgba(99, 102, 241, 0.3), rgba(236, 72, 153, 0));-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask-composite: exclude;pointer-events: none;}*/ form fieldset:not(:first-of-type){ display: none;} form:after{content:""; display: block;position: absolute;top: -300px;right: -300px;width: 600px;height: 600px;background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 80%);z-index: -1; transform: translateZ(-1px);} form:before{content:""; display: block;position: absolute;bottom: -300px;left: -300px;width: 600px;height: 600px;background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 80%);z-index: -1; transform: translateZ(-1px);} form .form-control { font-size: 1.25rem ;line-height: 58px;padding: 0 25px; margin-bottom: 1rem;border-radius: 10px;background-color: white; color: black; border: 1px solid #e5e7eb;} form .btn{ box-shadow: 0 12px 24px -5px rgba(99, 102, 241, 0.3); transition: all 0.1s ease; overflow: hidden } form .btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(99,102,241,0.3); } form .btn.btn-block{width: 100%;} .form-cont{max-width:500px; margin-left:auto; margin-right: auto} .form-title {font-size: 2.5rem;font-weight: 700;color: var(--text); /* Dark blue-gray */margin: 0 0 3rem 0;line-height: 1.2;} .form-desc {font-size: 1.1rem;color: #64748b; margin: 0;max-width: 80%;margin-left: auto;margin-right: auto; margin-bottom: 3rem} form fieldset:last-of-type p {font-size:1.125rem; color: var(--text); font-weight: 300} form fieldset:last-of-type .form-title.title {display: flex;align-items: center;justify-content: center;} form fieldset:last-of-type .form-title:before{content: ""; width: 50px; height: 30px; max-width: 50px; display: block; background-repeat: no-repeat;background-size:100%;display: inline-block;float: none; background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='_x32_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='-51.2 -51.2 614.40 614.40' xml:space='preserve' fill='%235bbb47' transform='rotate(2)'%3E%3Cpath d='M469.402,35.492C334.09,110.664,197.114,324.5,197.114,324.5L73.509,184.176L0,254.336l178.732,222.172 l65.15-2.504C327.414,223.414,512,55.539,512,55.539L469.402,35.492z'%3E%3C/path%3E%3C/svg%3E");background-position: center left; } .btn-call{text-align: left; padding-top: 15px; padding-bottom: 15px} .btn-call .call-icon{width: 50px; height:50px;border-radius: 50%; min-width: 50px; min-height: 50px; position: relative; transition: all .5 ease; background: white; text-align: center; flex-grow: 0;flex-basis: 0; } .call-icon svg{width: 30px; height:30px; color: var(--primary) ; margin-top: 10px ;transform: translate3d(0, 0, 0) scale(1); animation: ring 1.5s ease-in-out infinite;transform-origin: center; } .btn-call .call-icon::before {position: absolute; content: ""; top: 50%;left: 50%; height:5rem; width: 5rem; margin-left: -2.5rem; margin-top: -2.5rem; background-color: rgba(255,255,255, .5); border-radius: 100%;opacity: 1;transform: translate3d(0, 0, 0) scale(0);animation: phone-inner 3000ms infinite;} .btn-call h5 {font-weight:700} .btn-call .call-cont{flex-grow: 1; white-space: normal; flex-basis: 0;} .consultation-title{font-size: 1.25rem;font-weight: 700;color:var(--accent);letter-spacing: 0.1em;margin: 0 auto; display: flex; align-items: center;justify-content: center; gap:10px ; width: max-content; max-width: 100%} .consultation-title span {background: linear-gradient(to right, #2563eb, #7c3aed);-webkit-background-clip: text;background-clip: text;color: transparent;flex-grow: 1;flex-basis: 0;} .savings-badge {display: flex; align-items: center;justify-content: center;margin: 28px 0;gap: 12px; color: var(--text)} .badge-icon{animation: pulse 2s infinite; stroke:none; fill: var(--secondary)} .sparkle {animation: sparkle 1.5s infinite; stroke: var(--tertiary);} .badge {background: conic-gradient(from 180deg at 50% 50%, rgba(99, 102, 241, 0.085) 0%, rgba(236, 72, 153, 0.08) 100%);color: #0F172A;padding: 18px 26px;border-radius: 30px;font-weight: 600;font-size: 18px;display: flex;align-items: center; justify-content: center; gap:10px; width: max-content; max-width: 100% } .badge span{flex-basis: 0;flex-grow: 1} .badge span:nth-child(1){max-width: 20px} .badge span:nth-child(2){white-space: normal} .badge svg path {stroke: #0F172A;stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;} .badge .saving-val {font-size: 26px;font-weight: 800;margin: 0;line-height: 1;background: linear-gradient(90deg, #6366f1, #ec4899);-webkit-background-clip: text;background-clip: text;color: transparent; flex-grow: 0} .separator {display: flex;align-items: center;justify-content: center;margin: 40px 0;position: relative; max-width: auto} .separator-text {padding: 0 12px;font-size: 14px;color: #012cb954;font-weight: 600;background-color: #fff;position: relative;z-index: 1;} .separator::before, .separator::after {content: ""; display: block;flex: 2px;height: 1px;background: linear-gradient(90deg, transparent, #012cb954);top: 50%;transform: translateY(-50%);} .separator::after { background: linear-gradient(90deg, #012cb954, transparent); } .call-box {display: inline-flex;align-items: center;gap: 12px;padding: 14px 24px;background: rgba(241, 245, 249, 0.8);border-radius: 50px;backdrop-filter: blur(4px);color: var(--primary);} .phone-icon {width: 22px;height: 22px;} .phone-number {font-weight: 700;font-size: 1rem;} .pulse-dots {display: flex;gap: 4px;margin-left: 8px; } .dot {width: 6px;height: 6px;border-radius: 50%;animation: call 1.5s infinite;} @keyframes call {0%, 100% { opacity: 0.5; transform: scale(0.9); }50% { opacity: 1; transform: scale(1.1); }} .call-info {color: #94A3B8;font-size: 13px;margin: 12px 0 0 0;} .zip_btn{width: 100%} .zip_btn:before{content:"";display: block; position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: conic-gradient(transparent, rgba(255, 255, 255, 0.3), transparent);animation: rotate 4s linear infinite;z-index: 2;opacity: 0.5;} @keyframes rotate { to { transform: rotate(360deg); } } .zip_input{width: 100%;border: none;border-radius: 14px;font-size: 16px;background: rgba(249, 250, 251, 0.7);backdrop-filter: blur(8px);box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 24px rgba(99, 102, 241, 0.1);transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position: relative} .zip_input .form-control {padding-top: 1rem; position: relative; background-repeat: no-repeat; background-position: 15px 60%; padding-left: 45px} .zip_input label{position: absolute; top: 0; left: 45px; transform: translateY(24px) scale(1); font-size: 1rem; margin-top: 5px; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; transform-origin: left top; line-height: 1;} .zip_input .form-control {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235d5d5d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } .zip_input input:focus + label, .zip_input input:not(:placeholder-shown) + label { transform: translate(-20px,2px) scale(0.75); } .form-control.error{border-color:red; -webkit-box-shadow: 0 0 0 3px #ffdbdb; box-shadow:0 0 0 3px #ffdbdb;} .form-error-message { display: none;border-radius: .625rem;margin: 0;opacity: 0;padding: .5rem 1rem;position: absolute;text-align: left;transition: opacity .25s ease, top .25s ease;width: auto;z-index: 300;background-color: #de0303;color: #fff;opacity: 1;} .form-error-message:before{border-bottom: 10px solid #de0303;border-left: 10px solid #0000;border-right: 10px solid #0000;content: "";display: block;height: 0;left: 1rem;position: absolute;top: -8px;width: 0} .form-control::-webkit-input-placeholder { color: #14274dc2; font-weight: 400;} .form-control::-moz-placeholder { color: #14274dc2; font-weight: 400;} .form-control:-ms-input-placeholder { color: #14274dc2; font-weight: 400;} .form-control::-ms-input-placeholder { color: #14274dc2; font-weight: 400;} .form-control::placeholder { color: #14274dc2; font-weight: 400;} .form-control:-ms-input-placeholder {color: #14274dc2; font-weight: 400;} .form-control:-ms-input-placeholder { color: #14274dc2; font-weight: 400;} .form-control::-ms-input-placeholder { color: #14274dc2; font-weight: 400;} .form-error-message{display: none} .progress-box{z-index: 99; position: relative;max-width: 530px; margin-left: auto; margin-right: auto; margin-bottom: 2rem} .progress{ background: #e6e6e6;z-index: 1; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px inset; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px inset; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px inset; margin-bottom: 10px; height: 10px; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border-radius: 10px;} .progress-bar {background: linear-gradient(90deg,#307df6 0%,#14BBBF 100%),linear-gradient(90deg,#0cd5d1 0%,#0ba9a6 100%); transition: width 1s ease;} .progress_box h2{text-align: center; font-weight: 700; font-size: 2.4rem;margin-bottom: 0.5rem;} .progress_box h2 + p {margin-bottom: 1.5rem;text-align: center} .progress-val{letter-spacing: 2px; font-size: 0.8rem; text-transform: uppercase} .tcpa, #tcpa_label {font-size: 12px; color: #000; font-weight: 300; margin-top: 20px; margin-left: auto; margin-right: auto; display: block;text-align: center!important;} footer { font-size: 14px; line-height: 20px; background: #14284d !important; padding-top: 2rem; padding-bottom: 2rem ; text-align: center; color: rgb(255, 255, 255); font-weight: 100;} footer li a {color: #02baeb; } .disclosure {font-size: 12px;} .sitemenu{min-width: 100% !important; max-width: 100% !important; text-align: center !important; border-bottom: solid 1px #ffffff1c; padding-bottom: 2rem; margin-bottom: 2rem} .sitecopy{margin-bottom: 20px;} footer .container {max-width: 1600px;} .footer-terms {font-size: 12px; margin-bottom: 15px; line-height: 1.3; text-align: center;} .no-gutter {margin-left: -5px; margin-right: -5px;} .no-gutter > .col, .no-gutter > [class*="col-"] { padding-right:5px!important; padding-left:5px!important; } @keyframes star { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes sparkle { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } } .faq-section {background:#e5ebff;} .card{border: none; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);overflow: hidden;transition: all 0.3s ease;margin-bottom: 12px;} .card:hover{transform: translateY(-3px);box-shadow: 0 8px 24px rgba(0,0,0,0.1);} .card-header h5 {padding: 1.5rem !important;} #faqAccordion {counter-reset: card-counter;} .card h5 {display: flex; flex-direction: row; align-items: center; gap:10px; cursor: pointer; flex-basis: auto} .card h5:before {content: counter(card-counter, decimal-leading-zero);counter-increment: card-counter; color: var(--primary); font-weight: 600} .card h5:hover, .card h5[aria-expanded="true"] {color: var(--primary)} .card h5:after {content: ""; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23002CB9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");margin-left: auto; background-repeat: no-repeat; background-size: contain; background-position: center} .card h5[aria-expanded="true"]:before{color: var(--text2); opacity: 0.3} .card h5[aria-expanded="true"]:after{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23002CB9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");} .card-body{border-top: 1px solid rgba(0, 0, 0, 0.05);} .imgbg{background: url("../img/auto-abt.jpg"); background-size: 50%; background-position: left top; position: relative; background-repeat: no-repeat} .imgbg:before{content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; background: red; background: linear-gradient(90deg, rgba(255,255,255,0.5) 20%, rgba(255,255,255,1) 50%);} .chat-container {width: 100%; margin-left: auto; margin-right: auto;height: auto;display: flex;flex-direction: column;background: white;border-radius: 20px;box-shadow: var(--shadow); max-width: 440px;overflow: hidden;border: 1px solid rgba(255, 255, 255, 0.2);} .chat-header {background: linear-gradient(135deg, var(--primary), var(--tertiary));color: white;padding: 18px 24px;display: flex;align-items: center;gap: 14px;position: relative;} .chat-header::after {content: '';position: absolute;bottom: -10px;left: 50px;width: 20px;height: 20px;background: var(--chatbg);transform: rotate(45deg);z-index: 1;} .ai-avatar {width: 40px;height: 40px;background: white;border-radius: 12px;display: flex;align-items: center;justify-content: center;box-shadow: var(--shadow); } .ai-avatar svg {width: 24px;height: 24px;color: var(--primary);} .chat-header h3 {margin: 0;font-weight: 600;font-size: 18px;} .chat-header p {margin: 4px 0 0;font-size: 13px;opacity: 0.9;} .chat-messages {flex: 1;padding: 24px;overflow-y: auto;display: flex;flex-direction: column;gap: 16px;background: var(--chatbg);} .ai-message{display: none;align-self: flex-start;max-width: 85%;background: white;border: 1px solid var(--bubble-border);border-radius: 0 18px 18px 18px;padding: 16px;color: var(--text);box-shadow: var(--shadow);position: relative;transform: translateY(10px);transition: all 0.3s ease;} .ai-message.visible {display: block;transform: translateY(0);} .ai-message::before {content: '';position: absolute;left: -8px;top: 0;width: 16px;height: 16px;background: white;clip-path: polygon(100% 0, 0 0, 100% 100%);} .ai-message h4 {margin: 0 0 8px 0;font-size: 1rem;color: var(--primary);display: flex;align-items: center;gap: 8px;} .ai-message h4 svg {width: 16px;height: 16px;} .ai-message p {margin: 0;font-size: 14px;line-height: 1.5;color: var(--text);} .processing-step {background: white;border-radius: 12px;display: flex;gap: 12px;align-items: center;} .step-icon {flex-shrink: 0;width: 36px;height: 36px;border-radius: 10px;background: var(--chatbg);display: flex;align-items: center;justify-content: center;color: var(--primary);} .step-icon svg {width: 18px;height: 18px;} .step-text {flex: 1;} .step-text h5 {margin: 0 0 4px 0;font-size: 14px;color: var(--primary);} .step-text p {margin: 0;font-size: 13px;color: var(--text);opacity: 0.8;} .progress-track {height: 4px;background: rgba(199, 210, 254, 0.3);border-radius: 2px;margin-top: 12px; overflow: hidden;} .progress-fill {height: 100%;width: 0;background: linear-gradient(90deg, var(--cta), var(--accent));border-radius: 2px;transition: width 0.6s ease;} .active-step .step-icon{animation: pulseGlow 2s infinite;} .active-step .step-icon svg {animation: pulse 1s infinite;} .completed-step .progress-track{display: none} .completed-step .progress-fill {width: 100% !important;} .typing-indicator {align-self: flex-start;display: flex;gap: 6px;padding: 14px 18px;background: white;border-radius: 0 18px 18px 18px;width: fit-content;border: 1px solid var(--bubble-border);box-shadow: var(--shadow);opacity: 0;transition: opacity 0.3s ease;} .typing-indicator.visible {opacity: 1;} .typing-dot {width: 8px;height: 8px;background: var(--tertiary);border-radius: 50%;opacity: 0.4;animation: typingPulse 1.4s infinite ease-in-out;} .typing-dot:nth-child(1) { animation-delay: 0s; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; } .about-wallet{padding: 3rem 2rem 0; text-align: center} .about-wallet h3 {font-weight: 600; margin-bottom: 1rem} .about-wallet ul li {font-weight: 500; text-align: left; display: flex; gap:10px; align-items: center; margin-bottom: 10px; } .about-wallet ul li:before{content:""; width: 20px; height: 20px; min-width: 20px; min-height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 24px; background-position: center; border-radius: 50%} @media (max-width: 768px) { header img {max-height: 30px!important; width: auto!important} main:before{background-size: 400%} .headline ul li{margin-bottom: 0; background: none; font-size: 1rem} .hero-buttons {flex-direction: column; border-radius: 0; box-shadow: none; width: 100%} .hero-buttons span {white-space: normal} .hero-buttons::before{display: none} .hero-buttons > a{width: 100%; font-size: 1rem} .hero-buttons .btn-grad span { flex-basis: 0;flex-grow: 1;max-width: 100%; text-align: left; line-height: 1} .hero-buttons .btn-grad span:nth-child(1) {max-width: 25px;} .hero-buttons .btn-grad span:nth-child(3) {max-width: 20px;} .cta-divider {width: 100%} .cta-divider::before{left: 0; height: 1px; width: 45%} .cta-divider::after{right: 0; height: 1px; width: 45%} .carriers .page-title {margin-bottom:.5rem!important; letter-spacing: 1px; font-size: 1rem} .carrier-logo {max-width: 100px;} .form-title {font-size: 2rem} .page-desc{max-width: 250px; font-size: 1rem} .desc-plain{max-width: 100%} .page-title {font-size: 1.5rem} form fieldset:last-of-type p {font-size:1rem;} .headline h2 {font-size: 4.5vh;} .ai-message{max-width: 100%!important} } @media (min-width: 577px) { .about-wallet ul {display: flex; width: max-content; max-width: 100%; justify-content: center; flex-direction: column; margin: 0 auto} } @media (max-width: 576px) { .carriers{padding: 2rem} .formSec{padding-bottom: 0; padding-top: 2rem} .form-desc{margin-bottom: 2rem} .consultation-title {font-size: 1rem} .consultation-title span{flex-grow: 0} form{padding-left: 20px; padding-right: 20px; } .imgbg{background-position: center top; background-size: cover} .imgbg:before { background: linear-gradient(180deg, rgba(255,255,255,0.5) 20%, rgba(255,255,255,1) 50%);} .imgbg .page-desc{background-color: #fff} .p-box{margin-bottom: 1rem} .page-box svg{max-height: 50px} .card h5{font-size: 1rem} .badge{font-size: 15px} .btn-call .call-cont {font-size: 14px;} } .calltoaction{display: none; overflow: hidden} .calltoaction.actv{display: block!important} @keyframes phone-inner{0%{opacity:1;-webkit-transform:translate3d(0,0,0) scale(0);transform:translate3d(0,0,0) scale(0)}33.3333%{opacity:1;-webkit-transform:translate3d(0,0,0) scale(.9);transform:translate3d(0,0,0) scale(.9)}66.6666%{opacity:0;-webkit-transform:translate3d(0,0,0) scale(0);transform:translate3d(0,0,0) scale(0)}100%{opacity:0;-webkit-transform:translate3d(0,0,0) scale(0);transform:translate3d(0,0,0) scale(0)}} @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(139, 167, 250, 0.3); } 50% { box-shadow: 0 0 0 6px rgba(139, 167, 250, 0); } } @keyframes typingPulse { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-4px); opacity: 1; } } .pulse{animation-name:pulse;-webkit-animation-name:pulse;animation-duration:1.5;-webkit-animation-duration:1.5s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;} @keyframes pulse{0%{transform:scale(0.95);} 50%{transform:scale(1);} 100%{transform:scale(0.95);} } @-webkit-keyframes pulse{0%{-webkit-transform:scale(0.95);} 50%{-webkit-transform:scale(1);} 100%{-webkit-transform:scale(0.95);} } .shake{animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;} @keyframes shake-horizontal{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%{-webkit-transform:translateX(10px);transform:translateX(10px)}80%{-webkit-transform:translateX(8px);transform:translateX(8px)}90%{-webkit-transform:translateX(-8px);transform:translateX(-8px)}}