@media(max-width:1540px){
    .banner-slide {
            height: 800px;
        }
    
    /* .banner-right-img img {
        height: 650px;
        max-height: initial;
    }
   */
    .banner-slide-3 .banner-right-img img {
        /* height: 530px; */
        margin-top: -4rem;
    } 
    .how-to-holder.how-to-fight {
      padding-left: 16px;
    }

    .how-to-fight,
    .how-to-defend {
        background-position: 90%;
    }

    .how-to .car-speed-app {
        left: 15px;
    }

    .how-to-defend {
        padding-left: 12%;
    }

    /* cart page css start */
        .device-quantity-holder h4 {
            font-size: 18px;
        }
        .quantity,
        .select-age select {
            font-size: 16px;
        }

        .price-holder h5 {
            font-size: 20px;
        }

        .card-input input , .city input , .city select {
            padding: 12px;
            font-size: 16px;
        }
    /* cart page css end */
}

@media(max-width:1500px){
    /* .banner-slide {
            height: 800px;
        } */

    /* .banner-right-img img {
        height: 650px;
        max-height: initial;
    }

    .banner-slide-3 .banner-right-img img {
        height: 530px;
    
    } */
    .accident-section .mileage-tracker img {
        transform: translate(-16%, 3rem);
    }
    .car-speed-app img {
        height: 520px;
    }
}

@media (max-width:1366px){
    .banner-slide {
         height: 720px;
     }
    .banner-right-img img {
        max-height: 590px;
    }
    .banner-slide-3 .banner-right-img img {
        height: 510px;
    }
    .banner-speeding-tickets-num {
        font-size: 32px;
    }
    .car-speed-app img {
        height: 500px;
    }
    .how-to-holder {
        padding: 10.5rem 8%;
    }


    .how-to-holder.how-to-defend {
        padding-right: 0;
        padding-left: 12%;
    }
}

@media(max-width:1280px){
    .logo img {
        width: 150px;
    }
    .nav-links li a.active {
        padding: 5px 12px;
    }
    .banner-slide {
        height: 700px;
    }
    .nav-links li a {
        font-size: 14px;
    }
    .buy a {
        padding: 5px 16px;
        font-size: 14px;
    }

    .banner-speeding-tickets-num {
        font-size: 26px;
    }
    .main-heading {
        font-size: 20px;
        /* padding: 6px 64px 6px 2%; */
        min-width: 35%;
    }

    .banner-desc span {
        font-size: 18px;
        padding: 5px 24px 5px 9%;
    }

    .below-banner-inner {
        margin-top: -6rem;
    }
    .device-image-holder img {
        width: 200px;
    }
    .below-banner p {
        font-size: 18px;
    }
    .below-banner-inner {
        padding: 1rem 40px;
    }

    .section-title {
        font-size: 20px;
    }
    .title-helper {
        font-size: 18px;
    }
    .uses-holder .img-holder img {
        width: 40px;
    }
    ul.service-box li {
        padding: 6px;
    }
    ul.service-box li span {
        font-size: 12px;
    }
    .uses-holder {
        padding: 16px 16px;
    }
    .how-to h3 {
        font-size: 14px;
    }
    .step h6 {
        font-size: 10px;
    }
    .step p {
        font-size: 12px;
    }
    .how-to-defend {
        padding-left: 16%;
    }
    .discounted-price {
        font-size: 30px;
    }
    .orignal-price {
        font-size: 14px;
    }
    .offer p {
        margin-top: 12px;
        font-size: 14px;
    }
    .save-up-to {
        font-size: 16px;
    }
    a.cta-btn.cta-btn-arrow {
        padding-left: 24px;
    }
    .cta-btn {
        font-size: 14px;
    }
    .offer-item-offer img {
        width: 180px;
    }
    .offer-item img {
        width: 230px;
    }
    .title-with-image h4 {
        font-size: 22px;
    }
    .title-with-image img {
        width: 42px;
    }
}

/* hamburger menu start */
@media screen and (max-width: 991px){

    .hamburger {
        display: block;
        position: absolute;
        cursor: pointer;
        right: 5%;
        top: 42%;
        transform: translate(-5%, -50%);
        z-index: 2;
        transition: all 0.7s ease;
    }
    
    .nav-links {
        position: fixed;
        background: #000;
        height: 100vh;
        width: 100%;
        flex-direction: column;
        top: 0px;
        clip-path: circle(50px at 90% -20%);
        -webkit-clip-path: circle(50px at 90% -10%);
        transition: all 1s ease-out;
        pointer-events: none;
        left: 0;
        justify-content: flex-start;
        gap: 0px;
        padding: 20px !important;
    }
    .nav-links.open{
        clip-path: circle(1000px at 50% -10%);
        -webkit-clip-path: circle(1000px at 50% -10%);
        pointer-events: all;
        padding: 0px 50px;
    }
    .nav-links li{
        opacity: 0;
    }

    .fade:not(.show) {
        opacity: 1;
    }

    .nav-links li:nth-child(1){
        transition: all 0.5s ease 0.2s;
    }
    .nav-links li:nth-child(2){
        transition: all 0.5s ease 0.4s;
    }
    .nav-links li:nth-child(3){
        transition: all 0.5s ease 0.6s;
    }
    .nav-links li:nth-child(4){
        transition: all 0.5s ease 0.7s;
    }
    .nav-links li:nth-child(5){
        transition: all 0.5s ease 0.8s;
    }
    .nav-links li:nth-child(6){
        transition: all 0.5s ease 0.9s;
        margin: 0;
    }
    .nav-links li:nth-child(7){
        transition: all 0.5s ease 1s;
        margin: 0;
    }
    li.fade{
        opacity: 1;
    }
	.nav-links li a {
		color:#fff;
	}
	.toggle + a,
	.menu {
		display: none;
	}

	.toggle {
		display: block;
		padding: 14px 0px;
		color:#FFF;
		font-size: 15px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: transparent;
	}

	[id^=drop]:checked + ul {
		display: block;
		width: 100%;
		background: transparent;
		transition: all 0.3s ease;
	}

	nav ul li {
		display: block;
		width: 100%;
        line-height: 3;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

  
	nav ul li ul li .toggle,
	nav ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:17px; 
	}
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
	}
	
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	
	nav ul ul li {
		display: block;
		width: 100%;
	}

	.hamburger div {
		background: #fff;
		margin: 5px;
		
	}
}
/* hamburger menu end */

@media(max-width:991px){
   .how-to-holder {
        width: 100%;
        padding: 13rem 8% !important;
    }
    .how-to .car-speed-app {
        position: relative;
        left: auto; 
        top: auto; 
        padding: 30px;
        margin: auto;
    }
    .how-to-defend {
        order: 2;
    }
    .car-speed-app img {
        height: 400px;
    }
    .carspeed-recorder .row {
        flex-direction: column-reverse;
    }
    .save-more-buisness .row {
        flex-direction: column-reverse;
    }
    .age-group p {
        font-size: 20px;
    }
    .pricing-shape{
        display: none;
    }
    .age-group {
        position: relative;
        transform: rotate(0deg);
        right: auto;
        top: auto;
        margin-bottom: 10px;
    }
    .pricing {
        padding: 20px 20px 20px 20px;
        position: relative;
        max-width: 100%;
        margin-top: 2rem;
    }
    .how-does-it-work .row {
        flex-direction: column-reverse;
    }
    .mileage-tracker {
        margin-bottom: 2rem;
    }
    .stats-holder.stats-content h3 {
        font-size: 24px;
    }
    .our-working-process .row{
        row-gap: 20px;
    }
    .banner-right-img {
        padding-right: 1%;
    }
    .banner-right-img img {
        height: 550px;
    }
    .banner-slide-4 .banner-right-img {
        z-index: -2;
    }
    .page-template-cart header , .woocommerce-page header {
        background: #dc354582;
    }
    .how-does-it-work .mileage-tracker img {
        max-width: 101%;
    }
    .accident-section .mileage-tracker img {
        transform: translate(0%, 0rem);
        max-width: 100%;
        padding: 20px;
    }
}


@media(max-width:767px){
    nav {
          margin: 0;
    }
    .accident-section .how-does-it-work-left {
        padding: 5rem 3% 5rem 3%;
    }
    .main-heading {
      display: block;
    }
    .heading-wrapper{
        margin: 0;
    }
    .below-banner-inner {
         margin-top: 3rem;
    }
    .banner-slide {
        min-height: 500px;
        height: auto;
        padding: 24px 0;
    }
    .banner .item-holder {
        display: flex;
        flex-direction: column-reverse;
    }
    .banner-left-content {
        top: auto;
    }
   .banner-right-img {
       position: absolute;
       right: 0;
       top: 17%;
       z-index: -2;
   }
   .banner-slide-4 .banner-right-img {
       top: auto;
   }
    .banner-slide-3 .banner-right-img img {
        height: 400px;
        margin-top: 0;
    }
   .banner-right-img img {
       height: 410px;
       object-fit: cover;
   }
    .banner-slide-2 {
        background-position: center;
    }
    .banner-slide-3 {
        background-position: 65%;
    }
    
    .uses-wrapper {
        padding: 16px 0;
    }
    .how-to-holder {
        width: 100%;
        padding: 6rem 4% !important;
    }
    .mileage-track {
        height: 490px;
    }
    .how-does-it-work .save-more-image-holder {
        flex-direction: column;
    }
    .driving-profile-image-holder  {
        text-align: center;
        margin-bottom: 2rem;
    }
    .driving-profile-image-holder img {
        width: 350px;
    }
    .driving-profile-content .section-title {
        font-size: 20px;
        line-height: 34px;
    }
    .stats-holder {
        flex: 0 0 50%;
        margin-top: 2rem;
    }
    .stats-content::before , .stats-content::after{
        display: none;
    }
    .working-process-holder {
        clip-path: none !important;
    }
    .review-text-small {
        max-width: 100%;
    }
    .reviews{
        padding-bottom: 2rem;
    }
    .nav {
        position: relative;
        height: 60px;
    }
    .faq h2.title {
        font-size: 24px;
    }
    button.accordion-button span {
        position: relative;
        margin-left: 5px;
    }
    .accordion-header button {
        justify-content: space-between;
    }
    .kl-mask {
        display: none;
    }
    footer .newsletter input {
        width: 100%;
        margin-bottom: 2rem;
    }

    /* cart page css start */
     
    .cart-item-holder {
        gap: 10px;
        padding: 22px 12px;
    }

    .device-quantity-holder {
        max-width: 256px;
    }

    .device-quantity-holder h4{
        font-size: 16px;
    }

    .pay-method-holder {
        justify-content: start;
        gap: 21px;
    }
    .order-detail-price {
        width: 100%;
    }
    .order-delivery {
        margin-top: 1rem;
    }
    div#thankYouModal .modal-dialog {
        min-width: 90% !important;
    }
    .order-detail {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
        .order-left,
        .order-right {
            flex: 0 100%;
            margin: 1rem 0;
        }
    /* cart page css end */
    
    /* woocommerce checkout page  */
        .woocommerce form .form-row-first,
        .woocommerce form .form-row-last,
        .woocommerce-page form .form-row-first,
        .woocommerce-page form .form-row-last{
            width: 100% !important;
        }
        .form-row.place-order {
            padding-bottom: 0 !important;
            margin: 0 !important;
        }
        button#place_order {
            margin-bottom: 0 !important;
        }
}

@media(max-width:575px){
    .main-heading {
         font-size: 18px;
        padding: 10px 20px 10px 20px;
     }
     
    .banner-speeding-tickets-num{
        margin-left: 0;
    }
    .accordion-body{
        text-align: left;
    }
       .below-banner-inner {
        flex-direction: column;
        clip-path: none;
        padding: 1rem 10px;
    }
    h4.section-title {
        font-size: 20px;
    }
    .below-banner p {
        font-size: 16px;
    }
    .banner-desc span {
        display: block;
    }
    .how-to-defend {
        background-position: right;
    }
    .how-to-fight{
        background-position: 42%;
    }
    .item-holder.item-holder-style-1.\(default\),
    .item-holder.item-holder-style-3.\(reversed\) {
        margin-top: 0rem;
    }
    .item-holder.item-holder-style-2.\(small.text\),
    .item-holder.item-holder-style-3.\(reversed\)
         {
        max-width: 100%;
        margin: auto;
    }
    /* cart page css start */
    .page-title {
        font-size: 24px;
     }

    .cart-item-holder {
        justify-content: center;
    }
    .device-quantity-holder {
        text-align: center;
    }
    .price-holder {
        margin: auto;
        text-align: center;
    }
    .pay-method {
        padding: 6px 14px;
        min-height: 54px;
    }
    .card-no {
        width: 100%;
    }
    .card-expire,
    .cvv {
        width: 48%;
    }
    .name-group {
        flex-wrap: wrap;
    }
    .city input,
    .city select {
        flex: 0 0 100%;
        margin-bottom: 16px;
    }
    .cart-item-holder img {
        width: 130px;
    }
    /* cart page css end */
}

@media(max-width:425px){
   .banner-desc span {
        text-align: center;
        padding: 0 10px;
        display: block;
    }
    /* .banner-desc span:before {
       display: none;
    } */

 
    .step {
        flex: 0 0 100%;
        margin-bottom: 1rem;
    }
    .title-with-image span {
        display: none;
    }
    .mileage-track {
        height: auto;
    }
    .save-more-image-holder img {
        width: 100%;
    }
    .step h6 {
        font-size: 16px;
    }
    .step p {
        font-size: 14px;
    }
    .speeding-ticket-assurance h4 {
        color: var(--red);
        font-size: 20px;
    }
    .speeding-ticket-assurance {
        background: none;
        padding-top: 40px;
    }
    button.accordion-button span {
        margin-left: 25px;
    }
}