.call-number{ color: #de302f; text-decoration: none; list-style: none; } .call-number:hover{ color: #de302f; text-decoration: none; list-style: none; } a.learn-more, a.purchase { pointer-events: auto; cursor: pointer; } .booking-form{ width: 58%!important; left: 8%; } .dd_heading{ text-align: center; font-family: roboto thin; } .page-content { display: grid; grid-gap: 1rem; padding: 1rem; max-width: 1024px; margin: 0 auto; font-family: var(--font-sans); } @media (min-width: 600px) { .page-content { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 800px) { .page-content { grid-template-columns: repeat(4, 1fr); } } .d_card { position: relative; display: -webkit-box; display: flex; -webkit-box-align: end; align-items: flex-end; overflow: hidden; padding: 1rem; width: 100%; text-align: center; color: whitesmoke; background-color: whitesmoke; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1); border-radius: 15px; } @media (min-width: 600px) { .d_card { height: 350px; } } .d_card:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 110%; background-size: cover; background-position: 0 0; -webkit-transition: -webkit-transform calc(var(--d) * 1.5) var(--e); transition: -webkit-transform calc(var(--d) * 1.5) var(--e); transition: transform calc(var(--d) * 1.5) var(--e); transition: transform calc(var(--d) * 1.5) var(--e), -webkit-transform calc(var(--d) * 1.5) var(--e); pointer-events: none; } .d_card:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 200%; pointer-events: none; background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(11.7%, rgba(0, 0, 0, 0.009)), color-stop(22.1%, rgba(0, 0, 0, 0.034)), color-stop(31.2%, rgba(0, 0, 0, 0.072)), color-stop(39.4%, rgba(0, 0, 0, 0.123)), color-stop(46.6%, rgba(0, 0, 0, 0.182)), color-stop(53.1%, rgba(0, 0, 0, 0.249)), color-stop(58.9%, rgba(0, 0, 0, 0.32)), color-stop(64.3%, rgba(0, 0, 0, 0.394)), color-stop(69.3%, rgba(0, 0, 0, 0.468)), color-stop(74.1%, rgba(0, 0, 0, 0.54)), color-stop(78.8%, rgba(0, 0, 0, 0.607)), color-stop(83.6%, rgba(0, 0, 0, 0.668)), color-stop(88.7%, rgba(0, 0, 0, 0.721)), color-stop(94.1%, rgba(0, 0, 0, 0.762)), to(rgba(0, 0, 0, 0.79)) ); background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100% ); -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform calc(var(--d) * 2) var(--e); transition: -webkit-transform calc(var(--d) * 2) var(--e); transition: transform calc(var(--d) * 2) var(--e); transition: transform calc(var(--d) * 2) var(--e), -webkit-transform calc(var(--d) * 2) var(--e); } .d_card:nth-child(1):before { background-image: url(images/services/self-drive-car2.webp); } .d_card:nth-child(2):before { background-image: url(images/services/images.jpg); } .d_card:nth-child(3):before { background-image: url(images/services/1580801740.jpg); } .d_card:nth-child(4):before { background-image: url(images/services/1.jpg); } .content { position: relative; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; width: 100%; padding: 1rem; -webkit-transition: -webkit-transform var(--d) var(--e); transition: -webkit-transform var(--d) var(--e); transition: transform var(--d) var(--e); transition: transform var(--d) var(--e), -webkit-transform var(--d) var(--e); z-index: 1; } .content > * + * { margin-top: 1rem; } .heading { font-size: 2rem; font-weight: bold; line-height: 1.2; top: -30px; position: relative; } .data-content { font-family: var(--font-serif); font-size: 1.125rem; font-style: italic; line-height: 1.35; } @media (hover: hover) and (min-width: 600px) { .d_card:after { -webkit-transform: translateY(0); transform: translateY(0); } .content { -webkit-transform: translateY(calc(100% - 4.5rem)); transform: translateY(calc(100% - 4.5rem)); } .content > *:not(.heading) { opacity: 0; -webkit-transform: translateY(1rem); transform: translateY(1rem); -webkit-transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e); transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e); transition: transform var(--d) var(--e), opacity var(--d) var(--e); transition: transform var(--d) var(--e), opacity var(--d) var(--e), -webkit-transform var(--d) var(--e); } .d_card:hover, .d_card:focus-within { -webkit-box-align: center; align-items: center; } .d_card:hover:before, .d_card:focus-within:before { -webkit-transform: translateY(-4%); transform: translateY(-4%); } .d_card:hover:after, .d_card:focus-within:after { -webkit-transform: translateY(-50%); transform: translateY(-50%); } .d_card:hover .content, .d_card:focus-within .content { -webkit-transform: translateY(0); transform: translateY(0); } .d_card:hover .content > *:not(.heading), .d_card:focus-within .content > *:not(.heading) { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: calc(var(--d) / 8); transition-delay: calc(var(--d) / 8); } .d_card:focus-within:before, .d_card:focus-within:after, .d_card:focus-within .content, .d_card:focus-within .content > *:not(.heading) { -webkit-transition-duration: 0s; transition-duration: 0s; } } .book_now{ margin-top: 20px; justify-content: center; display: flex; align-items: center; } .wrapper { width: 100%; height: 100%; } .banner-image { background-position: center; background-size: cover; height: 250px; width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255, 0.255) } .car-heading { /* font-family: 'Righteous', sans-serif; */ color: rgba(0, 0, 0, 0.98); text-transform: uppercase; font-size: 2rem; } .car-para { color: #000000; /* font-family: 'Lato', sans-serif; */ text-align: center; font-size: 1.5rem; line-height: 150%; letter-spacing: 2px; text-transform: uppercase; } .button-wrapper{ margin-top: 18px; } .outline { /* border: none; */ padding: 12px 24px; border-radius: 24px; font-size: 12px!important; font-size: 0.8rem; /* letter-spacing: 2px; */ cursor: pointer; } .outline + .fill { margin-left: 10px; } .outline { background: transparent; color: #de302f; border: 1px solid #de302f; transition: all .3s ease; } .outline:hover{ transform: scale(1.125); color: rgba(255, 255, 255, 0.9); border-color: #de302f; transition: all .3s ease; } .fill { background: #de302f; color: rgba(255,255,255,0.95); filter: drop-shadow(0); font-weight: bold; transition: all .3s ease; } .fill:hover{ transform: scale(1.125); border-color: #de302f; filter: drop-shadow(0 10px 5px rgba(0,0,0,0.125)); transition: all .3s ease; } .car-card-box{ box-shadow: 0px 0px 12px 1px #dddddd; padding: 10px; } .testimonial-container{ background-color: #393E46; color: #fff; border-radius: 5px; margin: 20px auto; padding: 50px 80px; max-width: 768px; position:relative; } .fa-quote{ color:#FFD369; font-size: 28px; position: absolute; top: 70px; } .fa-quote-right{ left: 40px; } .fa-quote-left{ right: 40px; } .testimonial{ line-height: 1.7; text-align: justify; margin-bottom: 30px; } .user{ display:flex; align-items:center; justify-content: center; } .user .user-image{ border-radius: 50%; border: 3px solid #FFD369; height: 75px; width: 75px; object-fit: cover; } .user .user-details{ margin-left: 10px; } .user .username{ margin: 0; } .user .role{ font-weight: normal; margin: 10px 0; } .progress-bar{ background-color: #FFD369; height: 4px; width: 100%; margin-bottom: 40px; animation: grow 10s linear infinite; transform-origin: left; } @keyframes grow{ 0%{ transform: scaleX(0); } } @media(max-width: 768px){ .testimonial-container{ padding: 20px 30px; } .fa-quote{ display: none; } } .faq-heading{ margin: 0; font-weight: 600; color: #222; font-size: 34px; margin-bottom: 20px; letter-spacing: 1px; } @media (max-width:567px){ .booking-form{ width: 100% !important; left: 0px!important; } .logo-block{ display: none!important; } .iframe-map{ width: 300px; } .slider-image1{ height:190px!important; } }