* {
  margin: 0;
  padding: 0;
  font-family: "Magra";
  font-style: "normal";
}

li {
  list-style: none;
}
a {
  text-decoration: none;
  cursor: pointer;
}

.active {
  background-color: var(--white);
}
.active a {
  color: #cc0001;
}

.woocommerce-Tabs-panel {
  text-align: justify;
  text-justify: inter-word;
}
.defaultbtn {
  max-width: 124px;
  height: 46px;
  background-color: var(--primary-color);
  color: white;
  font-weight: 600;
  font-size: 16px;
  line-height: 46px;
  padding: 15px 30px;
  transition: 0.3s ease-in;
}
.defaultbtn:hover {
  background-color: white;
  color: var(--primary-color);
}

.cart form span {
  color: #474e57;
  font-size: 18px;
  font-weight: 400;
}
.defaultbtnshop {
  border: 1px solid var(--primary-color);
  color: white;
  background-color: var(--primary-color);
  display: block;
  width: 140px;
  height: 46px;
  font-size: 16px;
  line-height: 46px;
  text-align: center;
  font-weight: 600;
  transition: 0.3s ease;
}
.pdf {
  border: 1px solid var(--primary-color);
  color: white;
  background-color: var(--primary-color);

  font-size: 16px;
  line-height: 46px;
  text-align: center;
  font-weight: 600;
  transition: 0.3s ease;
  display: inline-block;
  padding: 0 20px;
}
.es_subscription_message.success {
  color: var(--white);
}
.es_subscription_message.error {
  color: var(--white);
  padding-top: 10px;
}
.wpcf7-response-output {
  color: var(--primary-color);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #000000;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #000000;
}
.online {
  color: blue;
}
.online::hover {
  color: blue;
}
.pdf:hover {
  color: white;
}
.defaultbtnshop:hover {
  background: transparent;
  color: var(--primary-color);
}

.yessurrycontent a {
  margin-bottom: 20px;
}
.container-menu {
  max-width: 1765px;
  margin: auto;
  padding: 0px 10px 0px 10px;
  width: 100%;
}

.secondry {
  border: none;
  outline: none;
  padding: 15px 24px;
  text-transform: capitalize;
  font-weight: bold;

  color: var(--primary-color);
  background-color: var(--white);
}

html {
  scroll-behavior: smooth;
}
#back-to-top {
  background-color: #cc0001;
  width: 46px;
  opacity: 0.7;
  z-index: 999;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  position: fixed;
  bottom: 20px;
  right: 30px;
}
table {
  width: 100%;
}
#back-to-top i {
  font-size: 18px;
  color: white;
  line-height: 0;
}
#menu-item-867 > a {
  color: #999;
}
#menu-item-867 > a:hover {
  color: #cc0001;
}

/* good css  by sahil */

.protected {
  background-repeat: no-repeat;
  background-size: cover;

  padding-top: 100px;
  padding-bottom: 100px;
}
.protectme h1 {
  font-size: 40px;
  font-weight: 600;
}
.protectme p {
  font-size: 18px;
  font-weight: 400;
}
.submitdata {
  background-color: #cc0001;
  padding: 8px 17px;
  color: white;
  font-size: 18px;
  border: none;
  outline: none;
  text-transform: capitalize;
  transition: 0.3s ease-in;
}
.submitdata:hover {
  background-color: white;
  color: black;
}
.inputdata {
  border: none;
  outline: none;
  padding: 8px 11px;
  text-transform: capitalize;
  color: #0a1528;
  width: 400px;
}

/* ul.products.columns-3 li:first-child,
ul.products.columns-3 :nth-child(2) {
  display: none;
} */
.woocommerce div.product form.cart .variations label {
  font-weight: 400;
  font-size: 23px;
  color: #474e57;
}
.woocommerce div.product form.cart .variations select {
  width: 100%;
  font-size: 23px;
  font-weight: 400;
  line-height: 35px;
  color: #474e57;
  border: 1px solid #d9d9d9;
  padding: 10px;
  appearance: none;
  height: 56px;
  outline: none;
  appearance: none;
  background-image: url(../img/stroke.png);
  background-repeat: no-repeat;
  background-position: 97%;
  appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
}
.woocommerce div.product form.cart .variations select:focus {
  outline: none;
}
.woocommerce div.product form.cart .variations select:focus-visible {
  outline: none;
}
table.variations tbody tr {
  display: flex;
  flex-direction: column;
}
.woocommerce div.product form.cart .variations {
  margin-bottom: 0px;
}
.woocommerce div.product form.cart .variations td {
  line-height: 1rem;
}
.replacmentimg img {
  width: 100%;
}
/* good css end */

.newslatterarea .emaillist form {
  display: flex !important;
  align-items: center;
}
.newslatterarea .emaillist form .es-field-wrap {
  margin-bottom: 0;
}
.newslatterarea .emaillist form input[type="submit"] {
  background: white;
  color: #cc0001;
  max-width: 150px;
  font-size: 25px;
  font-weight: 600;
}

.newslatterarea .emaillist form .es-field-wrap input[type="email"] {
  height: 55px;
}

.eltric .cardbody p,
.fwhellperacard .category-pageid p {
  display: -webkit-box;
  display: -moz-box;
  display: -o-box;
  display: -ms-box;
  -webkit-line-clamp: 2;
  -o-line-clamp: 2;
  -ms-line-clamp: 2;
  -moz-line-clamp: 2;
  max-width: 395px;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  --box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.625;
  margin-bottom: 10px;
}

.fwhellperacard .defaultbtnshop {
  margin-top: 20px !important;
}
.wc-pao-addon-container.wc-pao-addon.wc-pao-addon-ready-to-build-your-deluxe-surrey
  > p
  > label {
  display: none;
}
.wc-pao-addon-container.wc-pao-addon.wc-pao-addon-ready-to-build-your-deluxe-surrey
  > h2 {
  color: blue;
  font-weight: 600;
}
.logo .logo2 {
  max-width: 130px;
  padding-left: 20px;
}
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
  min-height: 54px;
}

section.cardsection.access .wheelcard img {
  max-width: 416px !important;
}
.aboutdesc {
  padding-top: 14px;
}
.video1 video {
  width: 100%;
}

.poopup .btn-primary {
  background-color: transparent;
  border-color: white;
}
.campareimg img {
  border-radius: 10px;
}
.modal-dialog.modal-dialog-centered
  .modal-content
  .modal-header
  button.btn-close {
  background: white !important;
  font-size: 20px;
  border-radius: 50%;
  padding: 10px;
  font-weight: bold;
  line-height: 20px;
}
.campareimg img {
  max-height: 622px;
}
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  /* background-color: #cc0001; */
  background-clip: padding-box;
  background: rgba(0, 0, 0, 0.15) !important;
  border: 1pxsolidrgba (0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
}

.modal-dialog.modal-dialog-centered {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
.modal-dialog.modal-dialog-centered {
  display: contents;
}
.campareimg .btn-primary {
  color: #fff;
  background-color: #ffffff;
  border-color: #ffffff;
}
.campareimg .btn-primary:focus-visible {
  outline: none;
}
.campareimg .btn-check:focus + .btn,
.btn:focus {
  outline: 0;
  box-shadow: none !important;
}

/* .campareimg section.cardsection .containerfourweel .wheelcard img {
  height: 220px !important;
  object-fit: fill;
}
section.related.products .products .entry.product a img {
  height: 150px !important;
  object-fit: fill;
} */

.videoproduct p {
  text-align: left;
}
.woocommerce .products ul,
.woocommerce ul.products {
  /* margin: 0 0 1em; */
  padding: 0;
  list-style: none outside;
  clear: both;
  margin: 0;
  background: #f5f5f5;
  padding: 20px;
}

.woocommerce ul.products li.product .button {
  padding: 15px 20px;
  color: #fff;
  margin-top: 0 !important;
  background: #cc0001 !important;
}

@media only screen and (max-width: 495px) {
}
h2.woocommerce-loop-product__title {
  color: black;
}

form.checkout_coupon.woocommerce-form-coupon {
/*  display: none !important;*/
}

#add_payment_method .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button {
  /* display: block; */
  /* text-align: center; */
  /* margin-bottom: 1em; */
  /* font-size: 1.25em; */
  height: 46px;
  display: block;
  /* width: 228px; */
  max-width: 219px;
  width: 100%;
  line-height: 11px;
}
.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
  opacity: 1 !important;
}
.entry-title {
  text-align: center;
}
.wc_payment_method.payment_method_bacs input[type="radio"],
.wc_payment_method.payment_method_cheque input[type="radio"],
.wc_payment_method.payment_method_cod input[type="radio"] {
  accent-color: #cc0001 !important;
  height: 12px;
}
.entry-title::after {
  /* position: absolute;
  content: "";
  width: 40px;
  height: 4px;
  background-color: var(--primary-color);
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%); */
}
#menu-item-493 > .sub-menu {
  width: 102%;
}
/* over write css end */

/*----------------------------------------------------------
css variable for style */
:root {
  --white: #fff;
  --primary-color: #cc0001;
  --bg-black: #000000;
}
/*default style */

/*header area*/
/*.container-top{
  max-width: 1765px;
  width: 100%;
  margin: auto;
 height: 41px;
 
 
}*/

/* addd to card css button  */

section.cardsection.access .wheelcard p {
  min-height: 60px;
}
div.woocommerce-Tabs-panel.woocommerce-Tabs-panel--dimension.panel.entry-content.wc-tab {
  grid-column: 2/2 !important;
}
div.woocommerce-Tabs-panel.woocommerce-Tabs-panel--industry-leading-standard-equipment-on-the-deluxe-model-surrey-bike-includes.panel.entry-content.wc-tab {
  grid-row: 1/5 !important;
  grid-column: 1/2 !important;
}
div.woocommerce-Tabs-panel.woocommerce-Tabs-panel--description.panel.entry-content.wc-tab {
  grid-row: 1/5 !important;
  grid-column: 2/2 !important;
}
div.woocommerce-Tabs-panel.woocommerce-Tabs-panel--call-me.panel.entry-content.wc-tab {
  grid-column: 2/2 !important;
}
div.woocommerce-Tabs-panel.woocommerce-Tabs-panel--surrey-bicycle-fringe-to-tires-warranty.panel.entry-content.wc-tab {
  grid-column: 2/2 !important;
}
div.woocommerce-Tabs-panel.woocommerce-Tabs-panel--industry-leading-standard-equipment-on-the-deluxe-model-surrey-bike-includes.panel.entry-content.wc-tab
  ul
  li,
div.woocommerce-Tabs-panel.entry-content.wc-tab ul li {
  list-style: disc;
}
#menu-item-517 > .sub-menu {
  width: 112%;
}

/* problem 1*/

.yourintro h1 {
  position: relative;
  padding-bottom: 5px;
}
.yourintro h1::after {
  content: "";
  background: red;
  height: 4px;
  width: 69px;
  position: absolute;
  bottom: 0;
  right: 0px !important;
  left: auto;
}

/* addd to card css button  end  */
.container-bottom {
  max-width: 1765px;
  width: 100%;
  margin: auto;
  height: auto;
  vertical-align: center;
  padding: 0px 15px 0px 15px;
}
.supper-header {
  background-color: var(--primary-color);
}
.supper-header .row {
  align-items: center;
}
.social-links ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.social-links ul li {
  display: inline-block;
  vertical-align: middle;
}

.social-links ul li a {
  display: block;
  height: 40px;
  width: 40px;
  font-size: 0;
  background-image: url(../img/spirites.png);
}

.facebook a {
  background-position: -3px -2px;
}

.twitter a {
  background-position: -40px -2px;
}

.contact-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info ul li {
  display: inline-block;
  padding: 0 10px;
  position: relative;
  vertical-align: middle;
}

.contact-info {
  text-align: right;
}

/* .cart a:before {
  content: "";
  display: inline-block;
  height: 30px;
  width: 30px;
  background: red;
  vertical-align: middle;
} */
.contact-info ul li a {
  color: var(--white);
}

.contact-info ul li:after {
  content: "";
  height: 15px;
  width: 1px;
  position: absolute;
  background: var(--white);
  right: -4px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.contact-info ul li:last-child::after {
  content: none;
}
.user a {
  display: block;
  font-size: 0;
  width: 35px;
  background: url(../img/spirites.png);
  height: 35px;
  background-position: -122px -2px;
}

.user .login {
  font-size: 0;
}

.email a {
  display: block;
  font-size: 0;
  width: 35px;
  background-image: url(../img/spirites.png);
  height: 35px;
  background-position: -83px -2px;
}

.bottom-header {
  background-color: var(--bg-black);
}
.bottom-header .row {
  align-items: center;
  padding-bottom: 10px;
  padding-top: 10px;
}

/*custom css nav*/
.custom-header {
  position: sticky !important;
}
.menu > ul {
  margin: 0;
  padding: 0;
}
.menu > ul > li > a {
  color: #fff;
  font-size: 18px;
  line-height: normal;
  padding: 11px 15px;
  text-transform: uppercase;
  transition: 0.3s ease;
  border-radius: 2px;
}
.menu > ul > li {
  position: relative;
}
.menu > ul > li:after {
  content: "";
  height: 12px;
  width: 1px;
  position: absolute;
  background: #fff;
  top: 0;
  bottom: 0;
  margin: auto;
}

.menu > ul > li:last-child:after {
  display: none;
}

.menu > ul > li:first-child:after {
  display: none;
}

.menu > ul > li:hover:after {
  display: none;
}

.menu > ul > li:hover > a,
.current-menu-item > a,
.current-menu-parent > a {
  background: #fff;
  color: #cc0001 !important;
}

.sub-menu {
  display: none;
}
#menu-item-468 > .sub-menu {
  width: 111%;
}
#menu-item-172 > .sub-menu {
  width: 107%;
}
.woocommerce span.onsale {
  min-height: 4.236em;
  min-width: 4.236em;
  font-size: 0.957em;
  line-height: 4.236em;
}
/* .logo img {
  padding-top: 6px;
  padding-bottom: 6px;
} */
/*
.sub-menu > ul > li > a{ padding-left: 10px;}*/

.menu-item-has-children:hover > .sub-menu {
  display: block;
}

.menu-item-has-children .sub-menu:hover > .ul {
  display: block;
}

.menu-item-has-children {
  position: relative;
}

.sub-menu .sub-menu {
  padding: 0;
}

.sub-menu {
  padding: 0;
  margin: 0;
  position: absolute;
  /*min-width: 156px;*/
  width: 100%;
  padding-top: 32px;
  /*max-width: 230px;*
  width: 100%;
 /*width: 230px;*/
}
#menu-item-176 > .sub-menu {
  left: 0;
  top: 30px;
}
#menu-item-252 > .sub-menu {
  width: 162%;
}
#menu-item-138 > .sub-menu {
  width: 113%;
}
li#menu-item-129 > .sub-menu {
  color: #999;
}
li#menu-item-129 > .sub-menu li a:hover {
  color: var(--primary-color);
}
.sub-menu li a {
  background: #fff;
  display: block;
  color: #999;
  font-size: 14px;
  padding: 11px 10px;
  line-height: 21px;
  border-bottom: 1px solid #c4c4c4;
  transition: 0.3s ease;
}

.sub-menu li:hover > a {
  color: #cc0001;
}

.sub-menu li:last-child a {
  border: 0;
}
.sub-menu > .menu-item-has-children > .sub-menu {
  left: 100%;
  top: 0;
}
.sub-menu .sub-menu a {
  border: 0;
}

/* resposive navbar*/
.resposive button {
  border: none;
  color: white;
  outline: none;
  background-color: #000000;
  font-size: 28px;
  color: white;
  display: none;
}

/* ___________________ mn css  ________________ */
.mainimg {
  display: block;
  margin: 0 auto;
}
.lastcard {
  margin-top: 18px;
}
.lastcardheading .containerfourweel h2 {
  font-weight: 600;
  position: relative;
  left: -40px;
}
.single-product .woocommerce-product-gallery__image img {
  max-width: 100% !important;
  width: 100% !important;
}
#shoppart .shopline {
  width: 25px;
  height: 4px;
  background-color: #ffffffff;
}
/* ___________________ mn css ________________ */ /* super header resposnsive */ /* @media only screen and (max-width: 1199px) { .menu { display: none; } .resposive button { display: block; } .logo { position: relative; } .resposive { position: absolute; top: 20%; right: 0; } .menu > ul { display: block; flex-direction: column; } .menu > ul > li::after { display: none; } .sub-menu { position: static; } .menu > ul > li > a { display: block; } .sub-menu { padding: 0px; } .sub-menu { padding-top: 5px !important; } .sub-menu > ul { padding-left: 10px !important; } } @media only screen and (max-width: 632px) { .social-links { display: none; } .contact-info li a { font-size: 12px; } .login { font-size: 0 !important; } .contact-info ul li { padding: 3px; } .contact-info ul li:after { height: 10px; } } @media only screen and (max-width: 334px) { .contact-info li a { font-size: 10px; } .contact-info ul li:after { height: 10px; } } @media only screen and (max-width: 416px) { #resposivebtn { font-size: 18px; } } */
 * 
@media (max-width: 1399px){
	.bannertechnical{
		max-width:1100px;
	}
}

@media only screen and (max-width: 1199px) {
  .menu {
    display: none;
  }
  .sub-menu {
    width: 100%;
  }
  .resposive button {
    display: block;
  }
  .logo {
    position: relative;
  }

  .resposive {
    position: absolute;
    top: 20%;
    right: 0;
  }
  .menu > ul {
    display: block;
    flex-direction: column;
  }

  .menu > ul > li::after {
    display: none;
  }

  .sub-menu {
    position: static;
  }
  .menu > ul > li > a {
    display: block;
  }
  .sub-menu {
    padding: 0px;
  }

  .sub-menu {
    padding-top: 5px !important;
  }
  .sub-menu > ul {
    padding-left: 10px !important;
  }
}

@media only screen and (max-width: 632px) {
  .social-links {
    display: none;
  }
  .contact-info li a {
    font-size: 12px;
  }

  .contact-info ul li {
    padding: 3px;
  }

  .contact-info ul li:after {
    height: 10px;
  }
}

@media only screen and (max-width: 458px) {
  .contact-info ul li:nth-child(2) a {
    width: 60px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

@media only screen and (max-width: 334px) {
  .contact-info li a {
    font-size: 10px;
  }
  .contact-info ul li:after {
    height: 10px;
  }
}

@media only screen and (max-width: 458px) {
}
@media only screen and (max-width: 416px) {
  #resposivebtn {
    font-size: 18px;
  }
}

/* super header resposive end */

@media only screen and (max-width: 1240px) {
  .menu > ul > li > a {
    font-size: 14px;
  }

  .sub-menu {
    padding-top: 18px;
  }
  .bottomlogo img {
    max-width: 100%;
    height: auto;
  }
}

@media only screen and (max-width: 575px) {
  .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product {
    width: 100%;
    float: left;
    clear: both;
    margin: 0 0 2.992em;
  }
  .logo a {
    display: block;
    max-width: calc(100% - 70px);
    /* max-width: 300px; */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .defaultbtnshop {
    max-width: 110px;

    font-size: 15px;
    height: 40px;
    line-height: 40px;
  }
}
/*
header resposive end */

/* form area conatct */

.main {
  max-width: 438px;
  width: 100%;
  max-height: 100vh;
  overflow-y: auto;
  padding: 35px;
}
.xtopcontent h1 {
  font-size: 44px;
  font-weight: 400;
}
.xtopcontent button {
  font-size: 24px;
  font-weight: 400;
  cursor: pointer;
  color: #000000;
  border: none;
  outline: none;
}
.contactform label {
  font-size: 14px;
  line-height: 21px;
  width: 100%;
  text-transform: capitalize;
}
#close {
  background-color: white;
  position: absolute;
  left: 0;
  padding-left: 30px;
  font-size: 30px;
  font-weight: bold;
}
div#contacttome.show {
  right: 0;
}
.contactform input {
  width: 100%;
  margin: auto;
  height: 42px;
  padding-left: 10px;
  border: none;
  outline: none;
  margin-bottom: 10px;
  border: 1px solid #c4c4c4;
}
.contactform textarea {
  width: 100%;
  height: 107px !important;

  margin: auto;
  outline: none;
  border: 1px solid #c4c4c4 !important;
  padding: 10px;
  margin-bottom: 10px;
}
.contactform input.wpcf7-form-control.has-spinner.wpcf7-submit {
  margin: 0;
  max-width: 140px !important;
}

.contactform a {
  border: none;
  background-color: #cc0001;
  color: white;
  margin-bottom: 2px;
  cursor: pointer;
  padding: 10px 15px;
  max-width: 140px;
  width: 100%;
  margin-bottom: 40px;
  height: 46px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  display: inline-block;
}

.cpera {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  margin-top: 10px;
  padding-top: 10px;
}
.cpera span {
  font-size: 24px;
  font-weight: bold;
  color: black;
}

.cpera a:nth-child(2) {
  color: #cc0001;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  display: block;
  margin-top: 15px;
}
.cpera p {
  font-size: 16px;
  margin-top: 10px;
  color: black;
}
.links span {
  display: block;
  font-size: 20px;
  margin-top: 10px;
  color: black;
  margin-bottom: 15px;
}

.links a {
  color: black;
  font-size: 15px;
  margin-top: 0;
  border: 1px solid var(--bg-black);
  border-radius: 100%;
  height: 30px;
  width: 30px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  vertical-align: middle;
  transition: 0.3s ease;
}
.links a:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
#contacttome {
  max-width: 400px;
  background-color: red;
  width: 100%;
  margin: auto;
  position: fixed;
  top: 0px;
  right: -100%;
  transition: 0.6s all ease-in;
  z-index: 1500;
  background-color: var(--white);
}

/* form area end */

/* resposive navbar */

/* drop down css end */

/* home section area */

#homevideo {
  width: 100%;
  display: block;

  object-fit: cover;
  /* height: calc(var(--vh, 1vh) * 100 - 163px); */
  
}

.video {
  position: relative;
  height: auto;
  z-index: 1;
  width: 100%;
  max-height: calc(100vh - 127px);

  overflow: hidden;
}
.video p {
  margin-bottom: 0 !important;
}

.homecontent {
  max-width: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background-color: black;

  padding-left: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.75);
  /* after clients requiest remove the text and video text with display none */
  display: none;
}

.homecontent .textarea {
  max-width: 615px;
  width: 100%;
  color: white;
}

.homecontent .textarea .defaultbtnshop:hover {
  background: #fff;
  border-color: #fff;
  font-weight: normal;
}
/* 
.homecontent .textarea {
  color: white;
} */
.textarea h1 {
  font-weight: 600;
  font-size: 50px;
  padding-left: 28px;
}

.textarea p {
  font-weight: 400;
  font-size: 30px;
  padding: 30px;
  margin-bottom: 0 !important;
  padding-bottom: 7px;
}
@media only screen and (max-width: 1600px) {
  .homecontent {
    max-width: 50%;
  }
}

@media only screen and (max-width: 1440px) {
  .homecontent {
    max-width: 50%;
  }
}

/* honme section resposive */

@media only screen and (max-width: 573px) {
  .textarea h1 {
    font-size: 18px;
  }

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

@media only screen and (max-width: 440px) {
  .homecontent {
    position: static;
    max-width: 100%;
    background-color: #000000;
    padding: 10px;
  }
  .textarea {
    padding: 0;
  }
}

/* home section resposive end */

/* shop section area --------------*/

#shope {
  margin-top: 82px;
}
#shope .heading h1 {
  font-size: 35px;
  font-weight: bold;
  color: #0a1528;
}

.container-shop {
  width: 1280px;
  margin: auto;
  width: 100%;
}
#shope .line {
  height: 4px;
  width: 69px;
  background-color: var(--primary-color);
  margin-bottom: 4px;
}
.headingtitle h4 a {
  font-size: 20px;
  font-weight: bold;
  color: #0a1528;
}
#shope .row {
  padding-top: 20px;
}

.shopmain {
  max-width: 275px;
  margin: 0 auto;
}
.shopmain .imgshop {
  max-width: 225px;
  min-height: 235px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shopmain .imgshop img {
  width: 100%;
}

.shopmain .pera {
  text-align: justify;
  text-justify: inter-word;
  font-size: 14px;
  font-weight: 400;
  margin-top: 19px;
  margin-bottom: 40px;
  min-height: 130px;
}
.shopmain .pera p {
  font-size: 14px;
  font-weight: 400;
  color: #0a1528;
}

.shopbtn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#shope .shopmain .shopbtn .defaultbtnshop:hover {
  background: black;
  color: white;
  border-color: black;
}
/* 
.
#shope  */
/*--------------------------

resposive for 330px to 1950px start 

----------------------------*/

@media only screen and (max-width: 1076px) {
  #shope .heading h1 {
    font-size: 30px;
  }
  #shope {
    margin-top: 60px;
  }
}

@media only screen and (max-width: 936px) {
  .pera {
    margin-top: 30px;
  }
  .shopbtn {
    margin-bottom: 20px;
  }
  .heading h1 {
    font-size: 1000px;
  }
}

@media only screen and (max-width: 610px) {
  #shope .heading h1 {
    font-size: 25px;
  }
}

@media only screen and (max-width: 545px) {
  .imgshop {
    margin: 20px;
  }
}

/*--------------------------

resposive for 330px to 1950px end

----------------------------*/

/*------------------------------------

learn about perchase section start 

--------------------------------------*/

#aboutperchase {
  margin-top: 4rem;
  width: 100%;
  height: 453px;
}

.bgimage {
  width: 100%;
  height: 100%;
  background-image: url(http://74.208.211.64/surrey-wp/wp-content/uploads/2022/06/ezpukU-2-1.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 85px 0;
}

.bgimage .content {
  max-width: 1022px;
  margin: 0 auto;
}

.content h1 {
  font-weight: 400;
  color: var(--white);
  font-size: 38px;
  text-align: justify;
  text-justify: inter-word;
}
.content p {
  text-align: justify;
  text-justify: inter-word;
  font-size: 20px;
  color: var(--white);
  font-weight: 400;
  padding-top: 20px;
  padding-bottom: 26px;
}
.content a {
  margin: 0 auto;
}

#aboutperchase .content .defaultbtnshop:hover {
  background: #fff;
  border-color: #fff;
}
/*-----------------------------------
learn about perchase end 

------------------------------------*/

/*-----------------------------------
learn about perchase resposnsive start 

------------------------------------*/

@media only screen and (max-width: 1003px) {
  #aboutperchase .content h1 {
    margin-bottom: 20px;
    font-size: 30px;
  }
  #aboutperchase .content p {
    margin-bottom: 30px;
    font-size: 16px;
  }
}

@media only screen and (max-width: 604px) {
  #aboutperchase .content h1 {
    margin-bottom: 20px;
    font-size: 25px;
  }
  #aboutperchase .content p {
    margin-bottom: 30px;
    font-size: 16px;
  }
}

@media only screen and (max-width: 400px) {
  #aboutperchase .content h1 {
    margin-bottom: -4px;
    font-size: 20px;
  }
  #aboutperchase .content p {
    margin-bottom: 30px;
    font-size: 16px;
  }
}

/*-----------------------------------
learn about perchase resposnsive end 

------------------------------------*/

/*--------------------------------------------
 yes surrey section start 
 ----------------------------------------------*/

.container-yessurry {
  max-width: 1500px;
  width: 100%;
  margin: auto;
}
#yessurrey {
  padding-top: 70px;
  padding-bottom: 95px;
}

.yessurrycontent h1 {
  font-weight: bold;
  font-size: 40px;
  color: #0a1528;
}
.yessurrycontent span {
  font-size: 20px;
  font-weight: 600;
  color: #000000;
}
.yessurrycontent p {
  font-size: 18px;
  font-weight: 400;
  color: #0a1528;
  text-align: justify;
  text-justify: inter-word;
}
.yessurreypera a {
  margin-top: 51px;
}

#yessurrey .yessurreypera .defaultbtnshop:hover {
  background-color: #000000;
  color: white;
  border: 1px solid black;
}
#yessurrey .yessurryimg {
  padding: 10px 40px;
}
#yessurrey .yessurryimg .mainimg {
  position: relative;
}
#yessurrey .yessurryimg .mainimg::before {
  position: absolute;
  content: "";
  /* border-left: 10px solid #0a1528;
  border-bottom: 10px solid #0a1528; */

  border-left: 10px solid var(--primary-color);
  border-bottom: 10px solid var(--primary-color);
  top: 0;
  left: -30px;
  max-width: 528px;
  width: 100%;
  height: 375px;
  bottom: -40px;
  right: 0;
}

#yessurrey .yessurryimg .mainimg::after {
  position: absolute;
  content: "";
  /* border-right: 10px solid #f0d4a1;
  border-top: 10px solid #f0d4a1;
  border-left: 10px solid #f0d4a1;
  border-bottom: 10px solid #f0d4a1; */

  border-right: 10px solid blue;
  border-top: 10px solid blue;
  border-left: 10px solid blue;
  border-bottom: 10px solid blue;

  max-width: 343px;
  width: 100%;
  height: 300px;
  top: -25px;
  left: 190px;
  bottom: 0px;
  right: 0;
  z-index: -1;
}

.mainimg img {
  max-width: 500px;
  width: 100%;
  height: 350px;
}

/*--------------------------------------------
 yes surrey section end
 ----------------------------------------------*/

@media only screen and (max-width: 1549px) {
  .container-yessurry {
    max-width: 1300px;
    width: 100%;
    margin: auto;
  }
}

@media only screen and (max-width: 1443px) {
  #yessurrey .yessurryimg .mainimg::before {
    max-width: 537px;
    width: 100%;
  }
  #yessurrey .yessurryimg .mainimg::after {
    left: 167px;
  }
}

@media only screen and (max-width: 1451px) {
  .container-yessurry {
    max-width: 1200px;
    width: 100%;
    margin: auto;
  }
}
@media only screen and (max-width: 1430px) {
  .container-yessurry {
    max-width: 1200px;
    width: 100%;
    margin: auto;
  }

  #yessurrey .yessurryimg .mainimg::before {
    max-width: px;
    width: 100%;
  }
  #yessurrey .yessurryimg .mainimg::after {
    left: 192px;
  }
}

@media only screen and (max-width: 1336px) {
  .container-yessurry {
    max-width: 1000px;
    width: 100%;
  }

  #yessurrey .yessurryimg .mainimg::before {
    max-width: 416px;
    width: 100%;
  }
  #yessurrey .yessurryimg .mainimg::after {
    left: 94px;
  }
}

@media only screen and (max-width: 1182px) {
  .container-yessurry {
    max-width: 900px;
    width: 100%;
    margin: auto;
  }

  #yessurrey .yessurryimg .mainimg::before {
    max-width: 366px;
    width: 100%;
  }
  #yessurrey .yessurryimg .mainimg::after {
    left: 130px;
    max-width: 255px;
    width: 100%;
  }

  .mainimg img {
    object-fit: cover;
  }
  .mainimg {
    max-width: 350px;
  }
}
@media only screen and (max-width: 1066px) {
  #yessurrey .yessurryimg .mainimg::after {
    left: 106px;
  }
}
@media only screen and (max-width: 1033px) {
  #yessurrey .yessurryimg .mainimg::after {
    left: 91px;
  }
}
@media only screen and (max-width: 1024) {
  .container-yessurry {
    max-width: 768px;
    width: 100%;
    margin: auto;
  }
}

@media only screen and (max-width: 989px) {
  .headingtitle span {
    font-size: 10px;
  }
  .container-yessurry {
    padding: 0 15px;
  }

  #yessurrey .yessurryimg {
    margin-top: 10px;

    margin-bottom: 50px;
    display: block;
  }
  #yessurrey .yessurryimg .mainimg::before {
    max-width: 529px;
    width: 100%;
  }

  #yessurrey .yessurryimg .mainimg::after {
    left: 24%;
    max-width: 300px;
    width: 100%;
  }
}
@media only screen and (max-width: 453px) {
  /* .yessurrycontent h1 {
    font-size: 20px;
  } */
  .yessurrycontent span {
    font-size: 16px;
  }

  #yessurrey .yessurryimg .mainimg::after {
    left: 15%;
    max-width: 300px;
    width: 100%;
  }
}

/*---------------------------------------------
 yes surrey responsive end
 ----------------------------------------------*/

/* -----------------------------------
shop part section start 
--------------------------------------------------------*/

#shoppart {
  width: 100%;
  height: 491px;
  display: flex;
  justify-content: center;
  background-image: url(../img/Rectangle\ 25-1.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  align-items: center;
}
.shoppartconteant {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 60vw;
}

.shoppartconteant .headingshoppar h1 {
  font-size: 30px;
  color: var(--white);
}
.shopline {
  width: 60px;
  height: 4px;
  background-color: var(--primary-color);
}

.shoppartconteant .pera p {
  font-size: 20px;
  text-align: justify;
  text-justify: inter-word;
  font-weight: 400;
  color: var(--white);
  padding-top: 52px;
  padding-bottom: 52px;
}

.pera a {
  margin: 0 auto;
}

#shoppart .shoppartconteant .defaultbtnshop:hover {
  border: 1px solid white;
  background-color: white;
}

/* -----------------------------------
shop part section end 
--------------------------------------------------------*/
/*------------------------------------------

shop part section responsive start

------------------------------*/

@media only screen and (max-width: 892px) {
  .shoppartconteant {
    width: 80vw;
  }

  .shoppartconteant .pera p {
    font-size: 16px;
  }

  .shoppartconteant .headingshoppar h1 {
    font-size: 28px;
    margin-top: 20px;
  }
}

@media only screen and (max-width: 535px) {
  .shoppartconteant .headingshoppar h1 {
    /* font-size: 18px; */
  }

  .shoppartconteant {
    width: 90vw;
  }
  .shoppartconteant .pera p {
    font-size: 14px;
  }
}

/*------------------------------------------

shop part section responsive end

------------------------------*/

/*--------------------------------------
TESTIMONIAL section start 
----------------------------------------*/
.test-bgimage {
  width: 100%;
  height: 659px;
  background-image: url(http://74.208.211.64/surrey-wp/wp-content/uploads/2022/06/Rectangle25.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.toptestimonail {
  max-width: 969px;
  width: 100%;
  margin: auto;
  height: 500px;
}
.topcontent span {
  color: var(--primary-color);
  font-size: 25px;
  font-weight: 400;
  text-align: center;
}

.topcontent {
  width: 100%;
  text-align: center;
}
.topcontent h1 {
  font-size: 37px;
  font-weight: 400;
  color: var(--white);
}

.topcontent .line {
  background-color: #cc0001;
  width: 21px;
  height: 4px;
}

.topimg img {
  height: 175px !important;
  width: 130px !important;
  border-radius: 50%;
  object-fit: cover;
  margin: auto;
  padding-top: 45px;
  padding-bottom: 45px;
}

.bottomcontent p {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  font-weight: 400;
  text-align: justify;
  text-justify: inter-word;
}

.bottomcontent h2 {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
}
.bottomcontent h2 span {
  color: #ffffff;
}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  margin-top: 20px;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.acualtestimonial .swiper-wrapper {
  padding-bottom: 30px;
}

.acualtestimonial .swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: -2px;
  left: 0;
  z-index: 19;
  width: 100%;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-slide {
  width: 100%;
}

.swiper-slide:nth-child(2n) {
  width: 100%;
}

.swiper-slide:nth-child(3n) {
  width: 100%;
}

.swiper-pagination-bullets span {
  background-color: #cc0001;
}

@media only screen and (max-width: 1071px) {
  .bottomcontent {
    max-width: 500px;
  }
}

@media only screen and (max-width: 592px) {
  .bottomcontent p {
    font-size: 14px;
  }
  .topcontent h1 {
    font-size: 20px;
  }
  .topcontent span {
    font-size: 16px;
  }

  .topimg img {
    max-width: 100px;
    margin: auto;
  }
}
/* testimonial end  *

/*--------------------------------------
TESTIMONIAL section end 
----------------------------------------*/

/*-----------------------------------------
brand value css start 
-------------------------------------------*/

#brandvalue {
  padding-top: 98px;
  padding-bottom: 133px;
}
.brandvalueimg {
  width: 300px;
  height: 300px;
}
.setimg {
  margin: 0 !important;
  --bs-gutter-x: 0px !important;
}
.bgsurreyimg,
.bg-surreyimg {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  /* background-size: contain; */
  background-size: cover;
}
.bg-surreyimg {
  display: flex;
  justify-content: flex-end;
}
.brandvalueimg img {
  width: 100%;
  height: 100%;
}

#brandvalue .brandcontent {
  max-width: 922px;
  width: 100%;
}
#brandvalue .brandcontent p {
  text-align: justify !important;
  text-justify: inter-word !important;
  padding-top: 35px;
  padding-left: 15px;
  padding-right: 15px;
}

/*-----------------------------------------
brand value css end
-------------------------------------------*/

/*----------------------------------------------
news latter section starrt 
-----------------------------------------------*/
#newslatter {
  min-height: 500px;
}
.newslatter {
  width: 100%;
  min-height: 460px;
  height: 400px;
  background-blend-mode: multiply, normal;
  background-size: 100% 100%;
}

.newslatterarea {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 400px; */
  min-height: 460px;
}

.actualnews {
  width: 785px;
  height: 226px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.inputemial {
  width: 785px;
  height: 70px;
}
.inputemial input {
  padding-left: 20px;
  width: 100%;
  height: 100%;
  color: var(--white);
  background-color: transparent;
  color: var(--white);
  outline: none;
  border: 2px solid var(--white);
}

.newscontext h3 {
  font-size: 40px;
}
.newscontext p {
  font-size: 25px;
}
::placeholder {
  color: var(--white);
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--white);
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--white);
}

#es_form_f1-n1 {
  width: 100%;
}

.newslatterarea .emaillist form .es-field-wrap,
.newslatterarea .emaillist form .es-field-wrap label,
.newslatterarea .emaillist form .es-field-wrap label input {
  width: 100%;
}

.newslatterarea .emaillist form .es-field-wrap label input {
  padding-left: 20px !important;
}

.newslatterarea .emaillist form .es-field-wrap {
  max-width: calc(100% - 150px);
}

/*-----------------------------------------------
news latter section end 
-------------------------------------------------*/

/*-------------------------------------------------- 
responsive for news latter section  is start
---------------------------------------------------*/

@media only screen and (max-width: 862px) {
  .inputemial {
    max-width: 600px;
    width: 100%;
    height: 70px;
  }
  .homecontent {
    padding-left: 0px;
  }

  .textarea p:nth-child(2) {
    padding-top: 10px;
  }
  .textarea p:nth-child(3) {
    padding-top: 10px;
  }
}

@media only screen and (max-width: 628px) {
  .inputemial {
    width: 500px;
    height: 70px;
  }
}

@media only screen and (max-width: 538px) {
  .inputemial {
    width: 400px;
    height: 60px;
  }
}

@media only screen and (max-width: 426px) {
  .inputemial {
    width: 300px;
    height: 50px;
  }
  .secondry {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    font-size: 15px;
    padding: 10px 17px;
  }

  .inputemial input {
    height: 40px;
  }
}

/* 

/*-------------------------------------------------- 
responsive for news latter section is end  
---------------------------------------------------*/

/* -------------------------------------------------
footer section start 
----------------------------------------------------*/
#footer {
  background-color: #000000;
}

.getintotouch {
  position: relative;
}
.linediv::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background: #ffffffbf;
  max-width: 1px;
  width: 100%;
  height: 85%;
  right: 60px;

  /* content: "";
  position: absolute;
  top: 0;
  left: 551px;
  bottom: 0;
  right: 0;
  background: #ffffffbf;
  max-width: 1px;
  width: 100%;
  height: 384px;*/
}

#gottop {
  position: relative;
}

.getintotouch h1 {
  font-size: 32px;
  color: var(--white);
  font-weight: 400;
  text-transform: capitalize;
}

.getintotouch form {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  margin-top: 2rem;
  width: 100%;
}

.getintotouch form input {
  max-width: 467px;
  width: 100%;
  height: 20px;
  border: none;
  border-bottom: 1px solid #ffffffbf;
  background-color: transparent;
  outline: none;
  padding-left: 8px;
  padding-bottom: 4px;
  color: var(--white);
  margin-bottom: 30px;
}

.sendbtn .defaultbtn {
  padding: 15px 24px;
  width: 140px;
}
.contactme {
  line-height: 40px;
}
.contactme .imgcontact {
  display: flex;
  align-items: center;
}
.contactme .imgcontact a {
  padding-bottom: 0px !important;
  padding-left: 8px;
}
.buildingadress {
  max-width: 313px;
}

.maiinfo .contactme a {
  color: var(--white);
  /* display: block; */
  font-size: 20px;
  padding-bottom: 10px;
}

.home .buildingadress {
  display: none;
}
.maiinfo {
  margin-top: 52px;
}
.maiinfo .contactme a {
  /* margin-bottom: 18px; */
}
.socials {
  display: inline-flex;
}

.fb a {
  display: block;
  font-size: 0;
  width: 35px;
  background: url(../img/spirites.png);
  height: 35px;
  background-position: -2px -2px;
}

.mytwit a {
  display: block;
  font-size: 0;
  width: 35px;
  background: url(../img/spirites.png);
  height: 35px;
  background-position: 159px -2px;
}

.socials li {
  border: 1px solid #ffffff;
  margin: 0px 8px;
  border-radius: 100%;
}
.buildingadress span {
  font: 400;
  font-size: 20px;
  color: white;
  margin: 0 !important;
}
.buildingadress p {
  color: var(--white);
  font-size: 17px;
  font-weight: 400;
}

.endpart {
  color: var(--white);

  border-top: 1px solid #ffffff;
}
.endpart p {
  font-size: 14px;
  margin-bottom: 0;
  color: var(--white);

  padding: 10px 0;
}

.endsection {
  width: 100%;
  background-color: black;
}

/* footer resposive */

@media only screen and (max-width: 1396px) {
  .linediv::after {
    left: 516px;
  }
}

@media only screen and (max-width: 1200px) {
  .linediv::after {
    left: 422px;
  }

  .getintotouch form input {
    height: 20px;
    max-width: 350px;
    width: 100%;
    /* padding-top: 20px; */
    margin-top: 13px;
  }
  textarea.wpcf7-form-control.wpcf7-textarea {
    max-width: 350px !important;
  }
}

@media only screen and (max-width: 1200px) {
  .linediv::after {
    left: 422px;
  }

  .getintotouch form input {
    height: 20px;
    max-width: 350px;
    width: 100%;
    /* padding-top: 20px; */
    margin-top: 13px;
  }
}

@media only screen and (max-width: 987px) {
  .linediv::after {
    max-width: 100%;
    height: 1px;
    top: 412px;
    width: 100%;
    left: 0;
  }
  .getintotouch form input,
  textarea.wpcf7-form-control.wpcf7-textarea {
    max-width: 100% !important;
    width: 100%;
  }
}

@media only screen and (max-width: 871px) {
  .linediv::after {
    max-width: 100%;
    height: 1px;
    top: 433px;
    width: 100%;
    left: 0;
  }

  .getintotouch form input {
    max-width: 400px;
    width: 100%;
  }

  .contactinfo {
    margin-top: 40px;
  }

  .maiinfo {
    margin-top: 30px;
  }
  .endsection .endpart p {
    font-size: 14px;
  }
  .bottomlogo a img {
    max-width: calc(100%-30px);
    width: 100%;
    margin: auto;
  }
}

/*---------------------------------------------------
 footer section end 
 ----------------------------------------------------*/

/* 4 weel cycle start */
/* top heading*/

.topheadingfourweel {
  /* margin-top: 128px; */
  margin-top: 0;
  height: 100px;
  background: #f8f8f8;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.topheadingfourweel h1 {
  font-size: 40px;
  font-weight: bold;
  color: #000000;
}
.topheadingfourweel h1::after {
  position: absolute;
  content: "";
  height: 4px;
  width: 69px;
  background-color: var(--primary-color);
  top: 70px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* @media only screen and (max-width: 1548px) {
  .topheadingfourweel {
    margin-top: 125px;
  }
} */

/* @media only screen and (max-width: 1542px) {
  .topheadingfourweel {
    margin-top: 124px;
  }
} */

/* @media only screen and (max-width: 1525px) {
  .topheadingfourweel {
    margin-top: 123px;
  }
} */
/* @media only screen and (max-width: 1508px) {
  .topheadingfourweel {
    margin-top: 122px;
  }
} */

/* @media only screen and (max-width: 1490px) {
  .topheadingfourweel {
    margin-top: 121px;
  }
} */
/* @media only screen and (max-width: 1473px) {
  .topheadingfourweel {
    margin-top: 120px;
  }
} */

/* @media only screen and (max-width: 1456px) {
  .topheadingfourweel {
    margin-top: 119px;
  }
} */
/* @media only screen and (max-width: 1438px) {
  .topheadingfourweel {
    margin-top: 118px;
  }
} */
/* @media only screen and (max-width: 1421px) {
  .topheadingfourweel {
    margin-top: 117px;
  }
} */
/* @media only screen and (max-width: 1404px) {
  .topheadingfourweel {
    margin-top: 116px;
  }
}

@media only screen and (max-width: 1386px) {
  .topheadingfourweel {
    margin-top: 115px;
  }
}
@media only screen and (max-width: 1369px) {
  .topheadingfourweel {
    margin-top: 114px;
  }
}

@media only screen and (max-width: 1352px) {
  .topheadingfourweel {
    margin-top: 113px;
  }
}
@media only screen and (max-width: 1352px) {
  .topheadingfourweel {
    margin-top: 112px;
  }
}
@media only screen and (max-width: 1317px) {
  .topheadingfourweel {
    margin-top: 111px;
  }
}
@media only screen and (max-width: 1300px) {
  .topheadingfourweel {
    margin-top: 110px;
  }
}
@media only screen and (max-width: 1283px) {
  .topheadingfourweel {
    margin-top: 109px;
  }
}
@media only screen and (max-width: 1265px) {
  .topheadingfourweel {
    margin-top: 108px;
  }
}
@media only screen and (max-width: 1248px) {
  .topheadingfourweel {
    margin-top: 107px;
  }
}

@media only screen and (max-width: 1231px) {
  .topheadingfourweel {
    margin-top: 106px;
  }
}

@media only screen and (max-width: 1213px) {
  .topheadingfourweel {
    margin-top: 105px;
  }
}

@media only screen and (max-width: 1199px) {
  .topheadingfourweel {
    margin-top: 127px;
  }
}
@media only screen and (max-width: 1145px) {
  .topheadingfourweel {
    margin-top: 127px;
  }
}

@media only screen and (max-width: 1099px) {
  .topheadingfourweel {
    margin-top: 127px;
  }
}
@media only screen and (max-width: 1099px) {
  .topheadingfourweel {
    margin-top: 127px;
  }
} */
@media only screen and (max-width: 1033px) {
  #yessurrey .yessurryimg .mainimg::after {
    left: auto;
    right: -25px;
  }
}
@media only screen and (max-width: 991px) {
  /* section.cardsection.wheel .wheelcard img {
    height: 180px !important;
}
  section.cardsection.access .wheelcard img {
    height: 180px !important;
  }
  section.cardsection .containerfourweel .wheelcard img {
    height: 180px !important;
  }
  section.related.products .products .entry.product a img {
    height: 130px !important;
  } */
  .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product {
    width: 70%;
    float: inherit !important;
    clear: both;
    margin: 20px auto;
  }
  /* .topheadingfourweel {
    margin-top: 127px;
  } */
  .shopmain .defaultbtnshop {
    margin-top: -62px;
  }
  #yessurrey {
    padding-top: 90px;
    padding-bottom: 50px;
  }
  .topimg img {
    max-width: 130px;
    margin: auto;
    padding-top: 18px;
    padding-bottom: 18GGpx;
  }
  .test-bgimage {
    height: 800px;
  }
}

@media only screen and (max-width: 729px) {
  /* .topheadingfourweel {
    margin-top: 129px;
  } */
  .topheadingfourweel h1 {
    font-size: 30px;
    font-weight: bold;
    color: #000000;
  }
}

@media only screen and (max-width: 632px) {
  /* .topheadingfourweel {
    margin-top: 128px;
  } */
}
@media only screen and (max-width: 575px) {
  .yessurrycontent h1 {
    font-size: 25px;
  }
  .xtopcontent h1 {
    font-size: 25px;
  }
  #back-to-top {
    width: 40px !important;

    height: 40px !important;
  }
  #back-to-top i {
    font-size: 16px;
  }

  .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product {
    width: 100%;
    float: left;
    clear: both;
    margin: 0 0 2.992em;
  }
  /* .test-bgimage {
    height: 800px;
  } */
  /* .topheadingfourweel {
    margin-top: 93px;
  } */
  /* .shopmain .defaultbtnshop {
    margin-top: -118px;
  }
  .shopmain .defaultbtnshop:nth-child(3) {
    margin-top: -60px;
  }

  .shopmain .defaultbtnshop:nth-child(4) {
    margin-top: -50px;
  } */
}
@media only screen and (max-width: 339px) {
  /* .topheadingfourweel {
    margin-top: 129px;
  } */
}

@media only screen and (max-width: 334px) {
  /* .topheadingfourweel {
    margin-top: 93px;
  } */
}

/* top heading edn */

/* container style */
.containerfourweel {
  max-width: 1576px;
  width: 100%;
  margin: 0 auto;
}

.mdlevideo {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top;
}
.mdlevideo .midvideo .defaultbtnshop {
  max-width: 190px;
  width: 100%;
}
.mdlevideo .midvideo .defaultbtnshop:hover {
  background-color: #000000;
  color: #fff;
  border: 1px solid #000000;
}

@media only screen and (max-width: 1720px) {
  .containerfourweel {
    max-width: 1376px;
    width: 100%;
    margin: 0 auto;
  }
  .mdlevideo .midvideo video {
    max-width: 1019px;
    width: 100%;
    margin: auto;
    /* border-radius: 20px; */
  }
}
@media only screen and (max-width: 1620px) {
  .containerfourweel {
    max-width: 1276px;
    width: 100%;
    margin: 0 auto;
  }
  .mdlevideo .midvideo video {
    max-width: px;
    width: 100%;
    margin: auto;
  }
}
.getintotouch form textarea {
  color: white;
}

.getintotouch form textarea:focus {
  outline: none;
}
@media only screen and (max-width: 1440px) {
  .containerfourweel {
    max-width: 1076px;
    width: 100%;
    margin: 0 auto;
  }
  .mdlevideo .midvideo video {
    max-width: 706px;
    width: 100%;
    margin: auto;
  }
}
.topimg img {
  max-width: 130px;
  margin: auto;
  padding-top: 18px;
  padding-bottom: 25px;
}

@media only screen and (max-width: 1220px) {
  .containerfourweel {
    max-width: 950px;
    width: 100%;
    margin: 0 auto;
  }
  .topimg img {
    max-width: 130px;
    margin: auto;
    padding-top: 18px;
    padding-bottom: 25px;
  }
  .homecontent .textarea h1 {
    font-size: 35px;
  }
  .homecontent .textarea p {
    font-size: 20px;
  }
  .content h1 {
    font-size: 25px;
  }
  .content p {
    font-size: 16px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .yessurrycontent p {
    font-size: 16px;
  }
  .textarea p {
    font-size: 20px;
  }
  .shoppartconteant .pera p {
    font-size: 16px;
    padding-top: 25px;
    padding-bottom: 25px;
  }
  .topcontent span {
    font-size: 20px;
  }

  .topcontent h1 {
    font-size: 25px;
  }

  .bottomcontent p {
    font-size: 16px;
  }
  .bottomcontent h2 {
    font-size: 18px;
  }
}

@media only screen and (max-width: 1028px) {
  .containerfourweel {
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 795px) {
  .containerfourweel {
    max-width: 575px;
    width: 100%;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 575px) {
  .containerfourweel {
    max-width: calc(100% - 25px);
    width: 100%;
    margin: 0 auto;
  }
  .protectme h1 {
    font-size: 25px;
  }
  .inputdata {
    width: 300px;
  }
  .protectme p {
    font-size: 16px;
  }
  .inputdata {
    width: 200px;
  }
}

#tittlevideosction {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* background style end */

.cardafter {
  position: relative;
}
.cardafter .row::after {
  content: "";
  position: absolute;
  display: none;
  top: 12%;
  left: 2%;
  right: 0;
  bottom: 0;
  width: 95%;
  height: 1px;
  background: black;
}

.wheelcontent {
  width: 100%;
  height: 10vh;
  background: #f8f8f8;
}

.fourweelcontainer {
  max-width: 1576px;
  margin: auto;
  width: 100%;
  background-color: white;
}
.fourweelshort {
  width: 100%;
  height: 55px;
}
.weel {
  padding: 13px;
}

#tittlevideosction {
  width: 100%;
}
.videocart iframe {
  max-width: 1025px;
  width: 100%;
  height: 588px;
}

.productintosection {
  height: 588px;
  width: 100%;
}

.secondvideo {
  max-width: 1023px;
  width: 100%;
  height: 582px;
}

.weeldropdown select {
  border: none;
  outline: none;
  /* background-color: white; */
  background-color: black;
  color: white;
  font-size: 20px;
  max-width: 276px;
  width: 100%;
}
#short {
  background-color: black;
  color: white;
}

.shortby select {
  border: none;
  outline: none;
  font-size: 20px;
  max-width: 177px;
  width: 100%;
}

.shortby span {
  font-size: 20px;
  color: #999999;
  font-weight: 400;
}
.dropdownline {
  position: relative;
}

.dropdownline::after {
  position: absolute;
  content: "";
  height: 1px;
  /* background-color: var(--bg-black); */
  background-color: var(--white);
  top: 48px;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 1500px;
  /* width: 100%; */
  margin: 0 auto;
  width: calc(100% - 3%);
}
/*.yourintro h1{
  font-weight: bold;
  font-size: 40px;
}*/

.mainvideointro {
  position: relative;
  z-index: 0;
}

/* .yourintro h1::after {
  position: absolute;
  height: 4px;
  content: "";
  max-width: 69px;
  width: 100%;
  background-color: var(--primary-color);
  top: 0;
  bottom: 0;
  left: 77%;
  top: 74px;
} */

.mainintrovideo::before {
  display: none;
  position: absolute;
  content: "";
  border: none;
  background: #f3f2f2;
  max-width: 1300px;
  width: 100%;
  height: 86%;
  top: 104px;
  bottom: 0;
  left: 0;
  z-index: -1;
  right: 0;
}
.shortby {
  text-align: right;
}
.mainintrovideo {
  position: relative;
}
.mainintrovideo::after {
  position: absolute;
  content: "";
  border: none;
  background: var(--primary-color);
  max-width: 24%;
  width: 100%;
  height: 4px;
  /* top: 100px; */
  top: 20px;
  left: 0;
  /* left: 34%; */
  z-index: -1;
  right: 0;
}
.mainintrovideo #myvideo {
  width: 1019px;
}

#myvideo {
  position: relative;
  z-index: 0;
  /* cursor:  pointer; */
  /* width: 1019px; */
}
#myvideo::before {
  position: absolute;
  content: "";
  max-width: 30%;
  width: 100%;
  background-color: var(--primary-color);
  height: 4px;
  top: 0;
  left: 0;
  z-index: -1;
}
.wheelcard {
  padding: 26px;
  margin-top: 68px;
  margin-left: 10px;
  background-color: white;
  /* height: 90%; */
}
.wheelcard .category-pageid {
  min-height: 122px;
}
.mainvideointro .mainintrovideo video {
  max-width: 1019px;
  width: 100%;
}
.wheelcard .cardbody {
  padding-top: 33px;
}
.wheelcard .cardbody h1 {
  font-size: 30px;
  font-weight: 600;
  height: 60px;
}

.wheelcard .cardbody .defaultbtnshop:hover {
  background-color: #000000;
  color: white;
  border: 1px solid #000000;
}
@media only screen and (max-width: 1440px) {
  .wheelcard .cardbody h1 {
    font-size: 25px;
  }
}

@media only screen and (max-width: 1220px) {
  .wheelcard .cardbody h1 {
    font-size: 20px;
  }
}

.wheelcard .cardbody p {
  font-size: 16px;
  color: rgba(10, 21, 40, 0.75);
  text-align: justify;
}

.wheelcard .cardbody button {
  margin-top: 20px;
}

.cardsection .fourweelcontainer {
  position: relative;
  z-index: 0;
}
.cardsection .fourweelcontainer .row::before {
  position: absolute;
  content: "";
  background-color: #f3f2f2;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 82.5%;
  height: 106%;
}
.cardsection .cardbefore {
  position: relative;
  z-index: 0;
  padding-bottom: 42px;
}
.cardbefore .row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 82.5%;
  background-color: #f8f8f8;
  /* height: 700px; */
  height: auto;
}

.mydintroafter h1::after {
  /* position: absolute; */
  left: 50% !important;
  transform: translateX(-50%);
  /* color: red !important; */
}
@media only screen and (max-width: 1720px) {
  .mainintrovideo::before,
  .cardbefore .row::before {
    max-width: 1200px;
    width: 100%;
  }
  /* .yourintro h1::after {
    left: 82%;
  } */
}
@media only screen and (max-width: 1620px) {
  .mainintrovideo::before,
  .cardbefore .row::before {
    max-width: 1150px;
    width: 100%;
  }
  /* .yourintro h1::after {
    left: 84%;
  } */
}

@media only screen and (max-width: 1440px) {
  .mainvideointro .mainintrovideo video {
    max-width: 700px;
    width: 100%;
  }
  .mainintrovideo::before,
  .cardbefore .row::before {
    max-width: 888px;
    width: 100%;
  }
  /* .yourintro h1::after {
    left: 75%;
  } */
}

@media only screen and (max-width: 1220px) {
  .mainintrovideo::before,
  .cardbefore .row::before {
    max-width: 825px;
    width: 100%;
    /* top: 102px; */
    top: 0px;
    height: 510px;
  }
  /* .yourintro h1::after {
    left: 79%;
  } */

  .wheelcard {
    /* height: 493px; */
    height: auto;
  }
}

@media only screen and (max-width: 1182px) {
  .wheelcard .cardbody button {
    margin-top: 10px;
  }
}

@media only screen and (max-width: 1150px) {
  /* .mainintrovideo::after {
     top: 97px; 
  } */
}

@media only screen and (max-width: 1028px) {
  .mainvideointro .mainintrovideo video {
    max-width: 500px;
  }

  .mainintrovideo::before,
  .cardbefore .row::before {
    max-width: 625px;
    width: 100%;
  }
  /* .yourintro h1::after {
    left: 73%;
  } */

  .wheelcard .cardbody h1 {
    font-size: 17px;
  }
  .wheelcard .cardbody p {
    font-size: 14px;
  }
}

@media only screen and (max-width: 991px) {
  .mainvideointro .mainintrovideo video {
    max-width: 400px;
  }

  #aboutperchase .content p br {
    display: none;
  }
  #brandvalue .brandcontent p br {
    display: none;
  }

  #brandvalue {
    padding-top: 41px;
    padding-bottom: 66px;
  }
  .mainintrovideo::before {
    max-width: 576px;
    width: 100%;
    top: 33%;
    height: 150%;
  }
  .cardbefore .row::before {
    top: 0;
    height: 100%;
    max-width: 575px;
    width: 100%;
  }
  /* .mainintrovideo::after {
    top: 107px;
  } */
  .wheelcard {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  /* .yourintro h1::after {
    left: 68%;
  } */
  .yourintro h1 {
    padding-top: 25px;
    font-size: 25px;
  }
  .mainintrovideo::before,
  .cardbefore .row::before {
    height: auto;
    position: absolute;
    top: 0;
  }
  .faq p {
    padding-left: 10px;
    padding-right: 10px;
  }
  faqheading h1::after {
    display: none;
  }
}

@media only screen and (max-width: 795px) {
  .mainvideointro .mainintrovideo video {
    max-width: 400px;
  }

  .mainintrovideo::before {
    max-width: 576px;
    top: 108px;
    width: 100%;
    height: 93%;
  }
  .cardbefore .row::before {
    max-width: 576px;
    /* top: 84px; */
    width: 100%;
    height: 100%;
  }

  /* .yourintro h1::after {
    left: 72%;
  } */

  /* .mainintrovideo::after {
    top: 107px;
  } */
  .wheelcard {
    margin-top: 20px;
    margin-bottom: 10px;
  }
}

.mdlevideo {
  margin-top: 50px;
  padding-bottom: 35px;
  background-repeat: no-repeat;
}
.mdlevideo video {
  max-width: 1025px;
  width: 100%;
}

.midvideo h1 {
  font-size: 40px;
  font-weight: bold;
  color: #000000;
}

.lastcard {
  position: relative;
  /* z-index: 0;*/
}
.lastcard h2 {
  font-size: 40px;
  font-weight: bold;
}

.lastcardheading .containerfourweel {
  position: relative;
}
.lastcardheading .containerfourweel h2 {
  max-width: 1030px;
  margin: 0 auto;
  width: 100%;
  text-align: left;
}
.lastcardheading h2::before {
  position: absolute;
  content: "";
  width: 69px;
  height: 4px;
  background-color: var(--primary-color);
  top: 37px;
  /* left: 14px; */
}

@media only screen and (max-width: 1720px) {
  .lastcardheading h2::before {
    left: 0%;
  }
}

@media only screen and (max-width: 1620px) {
  .lastcardheading h2::before {
    left: 0%;
  }
}

@media only screen and (max-width: 1440px) {
  .lastcardheading h2::before {
    left: 0;
  }
}

.lastcard {
  position: relative;
  z-index: 0;
  /* data */
  padding-bottom: 40px;
}
.lastcardcontainer {
  padding-bottom: 80px;
}
/*.cardsection .fourweelcontainer{
  position: relative;
  z-index: 0;
}*/
.lastcard::after {
  position: absolute;
  content: "";
  background-color: #f3f2f2;
  top: 0;
  left: 21%;
  right: 0;
  bottom: 0;
  width: 79%;
  height: auto;
  z-index: -1;
}

@media only screen and (max-width: 1220px) {
  .lastcard::after {
    height: 687px;
  }
}

@media only screen and (max-width: 991px) {
  #myvideo {
    width: 100%;
  }
  .lastcard::after {
    height: 648px;
    left: 10%;
    width: 90%;
  }
}

@media only screen and (max-width: 767px) {
  #homevideo {
    height: 100% !important;
  }
  .lastcard::after {
    height: 112%;
    left: 0;
    width: 100%;
  }
  #brandvalue .brandcontent p {
    padding-top: 20px;
  }
  .xtopcontent button {
    font-size: 30px;
  }
  .xtopcontent h1 {
    font-size: 30px;
  }
  #yessurrey {
    padding-top: 60px;
    padding-bottom: 50px;
  }
  .wheelcard .category-pageid {
    min-height: 109px;
  }
  .weeldropdown select {
    max-width: 181px;
    width: 100%;
    font-size: 16px;
  }
  .shortby select {
    font-size: 16px;
    max-width: 177px;
    width: 100%;
  }
  .shortby span {
    font-size: 16px;
  }
  .homecontent .textarea h1 {
    font-size: 25px;
  }
  .homecontent .textarea p {
    font-size: 16px;
  }

  .homecontent .textarea h1 {
    font-size: 18px;
  }

  #testimonials .bottomcontent p {
    padding-bottom: 18px;
  }
  .newslatterarea .emaillist form input[type="submit"] {
    font-size: 20px;
  }
}

@media only screen and (max-width: 606px) {
  .midvideo h1 {
    font-size: 30px;
  }
  .wheelcard {
    max-width: initial;
    width: initial;
    padding: 12px 12px;
    margin: 15px auto;
    height: auto;
  }
  .lastcardheading .containerfourweel h2 {
    margin: 0 auto;
    width: 100%;
    text-align: center;
  }

  .lastcardheading h2 {
    text-align: center;
  }
  .lastcardheading h2::before {
    left: 45%;
  }

  .weeldropdown select {
    max-width: 120px;
    width: 100%;
    font-size: 14px;
  }

  .weel .shortby select {
    font-size: 14px;
    max-width: 133px;
    width: 100%;
  }

  .weel .shortby span {
    font-size: 14px;
  }
  .weel {
    padding: 10px;
  }
  .mainvideointro .mainintrovideo video {
    max-width: 400px;
  }

  .shortby select {
    font-size: 16px;
    max-width: 177px;
    width: 100%;
  }

  /* .yourintro h1::after {
    left: 72%;
  } */
}

@media only screen and (max-width: 443px) {
  .midvideo h1 {
    font-size: 25px;
  }

  .weel {
    padding: 5px 0;
  }
  .yourintro h1 {
    padding-top: 13px;
    font-size: 18px;
    margin: 15px !important;
  }

  .mainvideointro .mainintrovideo video {
    max-width: 350px;
  }
  /* .yourintro h1::after {
    left: 72%;
    top: 54px;
  } */

  .weel .shortby select {
    font-size: 14px;
    max-width: 111px;
    width: 100%;
  }

  .mainintrovideo::before {
    max-width: 576px;
    top: 88px;
    width: 100%;
    height: 100%;
  }

  /* .mainintrovideo::after {
    top: 85px;
  } */

  .topheadingfourweel {
    height: 68px;
  }
  .topheadingfourweel h1 {
    font-size: 20px;
    font-weight: bold;
    color: #000000;
  }
  .topheadingfourweel h1::after {
    top: 46px;
  }
}

.lastcard::before {
  position: absolute;
  content: "";
  background-color: var(--primary-color);
  /* top: -32px; */
  top: -3px;
  left: 50%;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 3px;
  z-index: -1;
}

/* midel vuideo secion end*/

/* lastc card css */

/*delux page starat css */
#deluxsurrey {
  background-repeat: no-repeat;
  background-size: 100%;
}
.warntycontent {
  max-width: 383px;
  width: 100%;
}
.topdteailsproduct h2 {
  font-size: 45px;
  font-weight: bold;
  color: #000000;
}
.topdteailsproduct span {
  font-size: 30px;
  font-weight: 400;
}
.topdteailsproduct span del {
  color: #999999;
  padding: 10px;
}

.select .inputformdata {
  display: flex;

  align-items: flex-start;
  flex-direction: column;
}
.select h2 {
  color: #000000;
  font-size: 23px;
  font-weight: 600;
}
.select .inputformdata select {
  max-width: 732px;
  width: 100%;
  height: 56px;
  border: 1px solid #d9d9d9;
  color: #474e57;
  font-weight: 400;
  outline: none;
  font-size: 23px;
  padding: 10px;
  appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;

  background-image: url(../img/stroke.png);
  background-repeat: no-repeat;
  background-position: 97%;
}

.itemnumber button {
  border: none;
  outline: none;
  background-color: white;
  font-size: 20px;
  color: #777777;
  font-weight: 400;
  cursor: pointer;
  padding: 5px;
}
.itemnumber {
  max-width: 120px;
  width: 100%;
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.itemnumber input {
  border: none;
  outline: none;
  text-align: center;
  font-size: 20px;
  color: #777777;
  width: 40px;
}

.select .inputformdata label {
  font-size: 23px;
  color: #474e57;
  margin: 10px 0px;
}

.productdetail b {
  font-size: 25px;
  font-weight: 600;

  color: #000000;
  margin-bottom: 400px;
}
.productdetail ul {
  margin-top: 20px;
}
.productdetail ul li {
  font-size: 16px;
  font-weight: 400;
  color: #0a1528bf;
  padding: 5px;
}

.productdetail ul li i {
  transform: scale(0.4);
}
.productoverview b {
  font-weight: 600;
  font-size: 25px;
  color: #000000;
}

.productoverview .details p {
  font-size: 16px;
  font-weight: 400;
  color: #0a1528bf;
}

.bottomdetailsproduct p {
  font-size: 16px;
  font-weight: 400;
  color: #0a1528bf;
}
.bottomdetailsproduct p:first-child {
  font-size: 22px;
  font-weight: 400;
  color: #000000;
  text-transform: capitalize;
}
/* last card css end */

.productlinksmid p b {
  font-size: 18px;
  color: #000000;
  font-weight: 400;
}

.productlinksmid p {
  font-size: 18px;
  color: #777777;
  font-weight: 400;
}

.productlinksmid li {
  display: inline-block;
  margin: 0px 5px;
  margin-bottom: 20px;
}
/*.calls { display: inline-block;}*/
.calls p {
  font-size: 16px;
  color: #0a1528bf;
}
.calls button {
  text-decoration: none;
  color: #000000;
  border: 1px solid #000000;
  background-color: white;
  padding: 5px 20px;
  height: 40px;
  outline: none;
}

.warntycontent b {
  font-size: 25px;
  font-weight: 600;
}
.warntycontent span {
  font-size: 22px;
  color: #000000;
  font-weight: 400;
  color: #000000;
}

#bottomcard {
  position: relative;
  z-index: 0;
}
.bottomheading {
  font-size: 50px;
  text-align: left;
  font-weight: 600;
  max-width: 391px;
  width: 100%;
}
#bottomcard::before {
  content: "";
  position: absolute;
  background-color: #f3f2f2;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 80%;
  height: auto;
}

.single-product .product #bottomcard::before {
  left: -28%;
  width: 110%;
  height: 100%;
}

#bottomcard::after {
  content: "";
  width: 47%;
  position: absolute;
  height: 4px;
  background-color: var(--primary-color);
  left: -28%;
  right: 0;
  bottom: 0;
  top: 0;
}

/*deluxsuurrey page done css*/

/*deluxsurrey resposive start */

@media only screen and (max-width: 1220px) {
  .bottomheading {
    max-width: 300px;
    width: 100%;
    font-size: 30px;
  }
  #bottomcard::before {
    height: 656px;
  }
  .warntycontent b {
    font-size: 20px;
  }
  .warntycontent span {
    font-size: 16px;
  }
}

@media only screen and (max-width: 1028px) {
  #bottomcard .wheelcard {
    /* height: 412px; */
    height: auto;
    margin-left: 0px;
    padding: 12px;
  }
  #bottomcard::before {
    height: 575px;
  }
}

@media only screen and (max-width: 1024px) {
  #bottomcard::after {
    left: 0;
  }
  #bottomcard .containerfourweel {
    padding: 0 20px;
  }

  .single-product .product #bottomcard::before {
    left: 0;
    /* width: 110%; */
    width: 100%;
    height: 100%;
  }
}
@media only screen and (max-width: 991px) {
  .perafaq {
    padding-top: 10px;
  }
  .bottomheading {
    max-width: 300px;
    width: 100%;
    font-size: 25px;
  }
  .topdteailsproduct h2 {
    margin-top: 30px;
  }
  #bottomcard::before {
    width: 100%;
    height: 106%;
  }

  #bottomcard .wheelcard {
    margin-top: 80px;
  }
  #bottomcard .wheelcard {
    margin-top: 100px;
    padding: 23px;
    margin-left: auto;
    margin-right: auto;
    /* height: 494px; */
    height: auto;
    margin-top: 20px;
  }
  .linediv::after {
    display: none;
  }
  .getintotouch {
    border-bottom: 1px solid #ffffff;
  }
  .contactinfo > .bottomlogo.mt-2 {
    padding-top: 45px;
  }

  #yessurrey .yessurryimg .mainimg::after {
    left: auto;
    right: -30px;
  }
  .bgimage .content {
    padding-left: 15px;
    padding-right: 15px;
  }
  .lastcardheading .containerfourweel h2 {
    left: 0 !important;
  }
  .lastcardcontainer {
    padding-bottom: 10px;
  }
  .wheelcard {
    margin-left: 15px;
    margin-right: 15px;
  }
}

@media only screen and (max-width: 606px) {
  #bottomcard .wheelcard {
    margin-top: 15px;
    padding: 23px;
    height: auto;
  }
  #bottomcard::before {
    height: 107%;
  }

  .topdteailsproduct h2 {
    margin-top: 11px;
    font-size: 30px;
    margin-bottom: 8px !important;
  }
  .topdteailsproduct span {
    font-size: 25px;

    font-weight: 400;
  }
  .select h2 {
    font-size: 18px;
  }

  .select .inputformdata label {
    font-size: 17px;
  }
  .select .inputformdata select {
    font-size: 17px;
    height: 50px;
  }
}

@media only screen and (max-width: 499px) {
  .bottomheading {
    margin-top: 30px;
    font-size: 22px;
  }

  .select {
    width: 100%;
  }
  .select .inputformdata label {
    font-size: 16px;
  }

  .select .inputformdata select {
    font-size: 14px;
    height: 50px;
    padding-right: 30px;
  }
  .waranty {
    flex-wrap: wrap;
  }
}

/* faq page start */

.faqheading {
  position: relative;
}

.faqheading h1::after {
  position: absolute;
  content: "";
  height: 4px;
  width: 69px;
  background-color: var(--primary-color);
  top: 50px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.chrges {
  max-width: 900px;
  width: 100%;
}

.perafaq {
  text-align: justify;
  text-justify: inter-word !important;
}
.faqheading h1 {
  font-size: 35px;
  font-weight: 600;
  color: #000000;
}
.faq .row {
  margin: 30px 0px 0px 0px;
}
.faq p {
  font-size: 18px;
}

.faq {
  margin-top: 76px;
}
.faq .chrges h2 {
  font-size: 25px;
  color: #000000;
  margin: 20px 0px 15px 0px;
}
.faq h3 {
  font-size: 25px;
  font-weight: 400;
  margin-top: 30px;
}
.faq ul li {
  font-size: 18px;
  line-height: 29px;
}
.faq ul li i {
  transform: scale(0.3);
}
.faq h4 {
  font-size: 25px;
  font-weight: 400;
  margin-bottom: 20px;
  display: inline-block;
}
.faq h2 {
  margin: 20px 0px 20px 0px;
}

.faq .pedal h1 {
  margin-bottom: 50px;
}
.faq .pedal h4 {
  font-size: 25px;
  font-weight: 400;
  margin-top: 30px;
}
.faq .Purchase p {
  margin-top: 10px;
  margin-bottom: 10px;
}
.limits ul li {
  list-style: disc;
}
.limitsend {
  max-width: 1024px;
  width: 100%;
  margin: auto;
  text-align: left;
}

.toplimits {
  max-width: 839px;
  width: 100%;
  margin: auto;
}
.faq:nth-child(2) {
  background-image: url(../img/crp.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
}
.faq:nth-child(2) .container {
  background-color: white;
}

.faq:nth-child(2) .faqheading h1::after {
  max-width: 240px;
  width: 100%;
}
<!---------------------------------------------------------------
  input.es_required_field.es_txt_email.ig_es_form_field_email {
  width: 100%;
  padding: 10px;
  margin-left: 0px;
}
input#es_subscription_form_submit_62a6fbae38c61 {
  width: 133px;
}

/*single product*/
.wc-pao-addon-select {
  max-width: 732px;
  width: 100%;
  height: 56px;
  border: 1px solid #d9d9d9;
  color: #474e57;
  font-weight: 400;
  outline: none;
  font-size: 23px;
  padding: 10px;
  appearance: none;
  background-image: url(../img/stroke.png);
  background-repeat: no-repeat;
  background-position: 97%;
  appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
}
label.wc-pao-addon-name {
  font-size: 23px;
  color: #474e57;
  margin: 10px 0px;
  font-weight: normal !important;
}
.tabs.wc-tabs {
  display: none;
}
.woocommerce-Tabs-panel {
  display: block !important;
  border-top: 1px solid #000;
  padding-top: 30px !important;
}
.woocommerce-tabs.wc-tabs-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  padding: 20px;
}

#tab-standard-equipment-of-the-deluxe-model-surrey-bike-includes {
  grid-column: 1/2;
  grid-row: 1/5;
  /* grid-row: 1/2; */
}

/* #tab-call-me {
  grid-row: 2/3;
} */

#tab-standard-equipment-of-the-deluxe-model-surrey-bike-includes ul li {
  list-style: disc;
  padding: 5px 0;
}
.single_add_to_cart_button {
  background: #cc0001 !important;
  height: 54px;
  border-radius: 0 !important;
  display: block !important;
  float: none !important;
  margin: 10px 0 !important;
  text-transform: capitalize;
  font-weight: normal !important;
}

.quantity {
  width: 100%;
  display: block;
  float: none !important;
}
p.price {
  color: #000 !important;
  font-size: 30px !important;
}

.single-product {
  background: url(http://74.208.211.64/surrey-wp/wp-content/uploads/2022/06/Rectangle25.jpg);
  background-repeat: no-repeat;
  background-position: 0 220px;
}

.single-product .product {
  max-width: 1576px;
  margin: 0 auto;
  padding: 30px 30px 0;
  background: #fff;
}

#bottomcard .col-lg-4:last-child {
  display: none;
}

.single-product .product #bottomcard {
  padding-bottom: 70px;
}

.customquantity {
  display: flex;
  max-width: 100px;
  border: 1px solid #e5e5e5;
  padding: 5px;
  position: relative;
  margin-left: 40px;
}

.customquantity:before {
  content: "Qty";
  position: absolute;
  left: -37px;
  top: 9px;
}

.customquantity .quantity {
  margin: 0 !important;
}

.customquantity .quantity input {
  padding: 0;
  border: none;
  outline: none;
  font-size: 20px;
  color: #777777;
  pointer-events: none;
}

.customquantity button {
  border: 0;
  background: transparent;
  font-size: 20px;
}

textarea.wpcf7-form-control.wpcf7-textarea {
  background: transparent;
  border: 0;
  height: 40px;
  padding: 0 10px;
  border-bottom: 1px solid #bfbfbf;
  max-width: 467px;
}

input.wpcf7-form-control.has-spinner.wpcf7-submit {
  background: #cc0001;
  max-width: 100px !important;
  padding: 0;
  display: block;
  margin-top: 10px;
}

.wheelcard img {
  height: auto !important;
  /* width: 100% !important;
  max-width: 100% !important; */
}
a.button.wc-forward {
  background: #000;
  color: #fff;
  font-weight: normal;
}
.woocommerce-message {
  border-top-color: #cc0001;
}

.cart-icon a:before {
  content: "";
  display: inline-block;
  height: 30px;
  width: 30px;
  background: url(https://www.buysurreys.com/wp-content/themes/surrey/assets/img/spirites.png);
  vertical-align: middle;
  margin-right: 5px;
  background-position: 35px center;
}

.coupon .button {
  background: #cc0001 !important;
  color: #fff !important;
  font-weight: normal !important;
  border-radius: 0 !important;
}
.checkout-button {
  background: #cc0001 !important;
}
#coupon_code {
  width: 100%;
  max-width: 150px;
}

.button[name="update_cart"] {
  background: #cc0001 !important;
  color: #fff !important;
  font-weight: normal !important;
}
.product-name a {
  color: #000;
}
.woocommerce .woocommerce-breadcrumb {
  font-size: 18px;
}
span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--primary-color);
  transform: scale(1.3);
  outline: none;
}
.swiper-pagination-bullets span {
  background-color: #ffffff;
  opacity: 1;
}
.product_meta .sku,
.product_meta span.posted_in a {
  color: #777777;
  font-weight: 400;
}

.psfw-social-icons li a {
  color: #000000;
  font-size: 18px;
}
.psfw-social-icons li:last-child {
  display: none;
}

#tab-call-me a {
  border: 1px solid #000000;
  font-size: 16px;
  width: 155px;
  height: 46px;
  line-height: 46px;
  display: block;
  color: #000000;
  text-align: center;
  font-weight: 400;
}
@media (max-width: 767px) {
  .woocommerce .woocommerce-breadcrumb {
    font-size: 16px;
  }
  .coupon .button,
  .coupon #coupon_code {
    float: none !important;
    width: 100% !important;
    text-align: center;
    max-width: calc(100% / 2 - 10px);
    margin: 5px !important;
  }
  .newscontext h3 {
    font-size: 30px;
  }
  .coupon {
    display: flex;
    flex-wrap: wrap;
  }

  .woocommerce-tabs.wc-tabs-wrapper {
    display: block;
  }

  @media only screen and (max-width: 425px) {
    .wc-pao-addon-select {
      /* max-width: 732px;
      width: 100%;
      height: 40px;
      border: 1px solid #d9d9d9;
      color: #474e57;
      font-weight: 400;
      outline: none;
      font-size: 15px;
      padding: 0 0 0 11px;
      appearance: none;
      background-image: url(../img/stroke.png);
      background-repeat: no-repeat;
      background-position: 97%; */
      height: 43px;
      font-size: 16px;
      background-size: 16px;
    }
    label.wc-pao-addon-name {
      font-size: 17px;
    }
    .summary .entry-title {
      font-size: 22px;
    }
    p.price {
      font-size: 25px !important;
    }
  }
  .woocommerce-tabs.wc-tabs-wrapper {
    padding: 0px;
  }
}
/*end*/

@media only screen and (max-width: 767px) {
  /* .single-product .product #bottomcard::before {
    display: none;
  } */
  section.cardsection.access .wheelcard p {
    min-height: auto;
  }
  .wheelcard .cardbody h1 {
    height: auto;
  }
  #bottomcard::after {
    content: "";
    width: 47%;

    left: 50%;
    transform: translateX(-50%);
    /* transform: translate(10px, 10px); */
    top: 0;
  }
  .bottomheading {
    max-width: 100%;
    width: 100%;
    font-size: 25px;
    text-align: center;
  }
  .faqheading h1 {
    font-size: 25px;
  }
  .faqheading h1::after {
    top: 36px;
    /*bottom: 0px !important; */
  }
  .faq ul li {
    font-size: 14px;
  }
  .faq {
    margin-top: 20px;
  }
  .faq h2 {
    margin: 26px 0px 15px 0px;
    font-size: 20px;
  }
  .faq .row {
    margin: 19px 0px 0px 0px;
  }
  .faq .chrges h2 {
    font-size: 20px;
  }
  .faq h3 {
    font-size: 18px;
    margin-top: 20px;
  }

  .faq p {
    font-size: 16px;
  }
  .perafaq {
    font-size: 16px;
  }
  .faq h4 {
    font-size: 20px;
  }
  .faq .pedal h4 {
    font-size: 18px;
    margin-bottom: 15px;
    margin-top: 15px;
  }
  .eltric .cardbody p,
  .fwhellperacard .category-pageid p {
    max-width: 320px;
  }
}

@media only screen and (max-width: 548px) {
  .faqheading h1 {
    font-size: 24px;
  }
  .faq .chrges h2 {
    font-size: 16px;
    margin-top: 30px;
  }
  .faq h3 {
    font-size: 16px;
    margin-top: 25px;
  }
  .faq:nth-child(2) .faqheading h1::after {
    color: red;
  }
}
@media only screen and (max-width: 394px) {
  .faq:nth-child(9) .faqheading h1::after {
    top: 46px;
    max-width: 69px;
    width: 100%;
  }
}

@media only screen and (max-width: 425px) {
  .bottomheading {
    font-size: 20px;
  }
}

/* history page css start


/*history CONTAINER */

.hcontainer {
  max-width: 1600px;
  width: 100%;
  margin: auto;
}

.historyheding {
  max-width: 364px;
  width: 100%;
  margin: auto;
}

.historyheding h1 {
  font-size: 40px;
  font-weight: 600;
}
.headingpera p {
  color: #0a1528;
  font-size: 18px;
  font-weight: 400;
  text-align: justify !important;
  text-justify: inter-word;
}

.Rental-Operator h1 {
  font-size: 40px;
}
.brandtitle .redlogos {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: space-around;
}
.brandtitle .redlogos img {
  margin-bottom: 10px;
}

.brandimgsendmsg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 30px;
}
.brandimgsendmsg a {
  color: var(--primary-color);
  font-weight: 600;
  margin-top: 20px;
}

.aftergray {
  position: relative;
  z-index: 0;
}
.aftergray::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #f3f2f2;
  z-index: -1;
}

.aftergray::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  width: 50%;
  background-color: var(--primary-color);
}

.historyvideo .container {
  background-color: white;
}

.historyvideo {
  background-repeat: no-repeat;
  background-size: 100%;
}

.midelheding {
  max-width: 1229px;
  width: 100%;
}
.midelheding p {
  margin: 30px 0px 30px 0px;
  text-align: justify;
  text-justify: inter-word;
  font-size: 18px;
}

.Leader {
  margin-top: 100px;
}
.Leader p {
  font-size: 18px;
  color: var(--white);
  font-weight: 400;
}

.leadercontent {
  max-width: 1440px;
  margin: auto;
  background-color: #000000;
  padding: 40px;
}
.brandhistory p {
  font-size: 14px;
  margin-top: 16px;
}
.leaderpera {
  max-width: 1149px;
  width: 100%;
  margin: auto;
  padding: 40px;
}

.leaderpera p {
  color: #ffffff;
  font-weight: 400;
  text-align: justify !important;
  text-justify: inter-word !important;
}

.brandhistory {
  max-width: 942px;
  width: 100%;
  margin: auto;
}

.redlinehistory {
  position: relative;
}

.redlinehistory h1::after {
  position: absolute;
  content: "";
  background-color: var(--primary-color);
  top: 69px;
  bottom: 0;
  width: 69px;
  left: 50%;

  transform: translateX(-50%);
  height: 4px;
}

.Rental-Operator h2 {
  position: relative;
}

.Rental-Operator h2::after {
  position: absolute;
  content: "";
  top: 39px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primary-color);
  height: 4px;
  width: 69px;
}
/* history page resposivew start */

@media only screen and (max-width: 1620px) {
  .redlinehistory h1::after .headingpera p {
    font-size: 16px;
  }
  section.cardsection.access .wheelcard img {
    max-width: 370px !important;
  }
}

@media only screen and (max-width: 1440px) {
  .midelheding p {
    font-size: 18px;
  }
  .historyheding h1 {
    font-size: 25px;
  }
  .headingpera p {
    font-size: 16px;
  }
  section.cardsection.access .wheelcard img {
    max-width: 306px !important;
  }
}

@media only screen and (max-width: 1440px) {
  .historyheding h1 {
    font-size: 25px;
  }
  .headingpera p {
    line-height: 20px;
  }

  .leadercontent {
    max-width: 1200px;
    margin: auto;
    background-color: #000000;
    padding: 40px;
  }
  .leaderpera p {
    color: #ffffff;
    font-weight: 400;
    font-size: 18px;
  }

  .Rental-Operator h1 {
    font-size: 30px;
  }
  .leadercontent h1 {
    font-size: 30px;
  }
  .midelheding {
    max-width: 1000px;
    margin: auto;
    width: 100%;
  }

  /* .lastcardheading .containerfourweel h2 {
    left: 100px;
  } */
}

@media only screen and (max-width: 1220px) {
  .leadercontent {
    max-width: 1100px;
    width: 100%;
    margin: auto;
  }
  .lastcard::after {
    height: auto;
  }
  .mainintrovideo::before,
  .cardbefore .row::before {
    height: auto;
  }
}

@media only screen and (max-width: 1126px) {
  .leadercontent {
    max-width: 1000px;
    width: 100%;
    margin: auto;
  }
}

@media only screen and (max-width: 1012px) {
  .leadercontent {
    max-width: 100%;
    width: 100%;
    margin: auto;
    padding: 0px !important;
  }
}
@media (max-width: 990px) {
  .historyheding {
    max-width: 100%;
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
  }
  .midelheding {
    max-width: 800px;
    margin: auto;
    padding: 30px;
    width: 100%;
  }
  .midelheding p {
    margin: 10px 0px 30px 0px;
    text-align: center;
  }

  @media only screen and (max-width: 950px) {
    .brandhistory p {
      font-size: 16px;
    }
    .redlinehistory h1::after {
      top: 57px;
    }
    .leaderpera {
      padding: 16px;
    }
    .leaderpera p {
      font-size: 16px;
    }
  }
  .Rental-Operator h2::after {
    top: 39px;
  }
  .Rental-Operator {
    margin-top: 20px !important;
  }
  .mdvideo {
    margin-top: 46px;
  }
  .headingpera p {
    line-height: 25px;
  }
  .headingpera:last-child {
    margin-bottom: 40px;
  }
  .midelheding p {
    font-size: 16px;
    margin-top: -10px;
  }
  .Leader {
    margin-top: 50px;
  }
  .brandhistory {
    margin-top: -10px !important;
  }
}

@media only screen and (max-width: 606px) {
  .midelheding p {
    font-size: 14px;
  }
  .leaderpera p {
    font-size: 14px;
  }
}
/* hnistoery page end */

/* blog pageb start */

.blogheading {
  position: relative;
  margin-top: 50px;
}
.blogheading h1 {
  font-size: 40px;
  font-weight: 600;
}
.blogheading h1::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);

  max-width: 69px;
  width: 100%;
  height: 4px;
  background-color: var(--primary-color);
}

.blacktyerimg {
  max-width: 1299px;
  width: 100%;
  margin: auto;
  background-color: red;
}

.topimgblacktyer {
  margin-top: 50px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
}

.topimgblacktyer .containerfourweel {
  background-color: white;
}

.blacktyer {
  padding-bottom: 50px;
}

.suirrey-magpera {
  max-width: 1121px;
  margin: auto;
  width: 100%;
  text-align: center;
}

.suirrey-magpera p {
  font-size: 18px;
  font-weight: 400;
  color: #0a1528;
  margin: 20px 0px 20px 0px;
  text-align: justify;
  text-justify: inter-word;
}
.Surrey-Mag .row {
  margin-top: 60px;
  text-align: center;
}

.Surrey-Mag .row p {
  padding-top: 20px;
  font-size: 18px;
  font-weight: 400;
  color: #0a1528;
}

.kool {
  max-width: 1456px;
  margin: 0 auto;
  width: 100%;
}
.kool p {
  font-size: 18px;
  font-weight: 400;
  color: #0a1528;
}

/* blog page end */

.kool {
  max-width: 1456px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.kool .blogheadingheding {
  max-width: 1252px;
  width: 100%;
}
.blogheadingheding h1 {
  font-size: 40px;
  font-weight: 600;
  color: #000000;
  padding-left: 38px;
}
.blogheadingheding p {
  font-size: 18px;
  font-weight: 400;
  padding-top: 20px;
}
.blogheadingheding p:nth-child(3) {
  padding-bottom: 30px;
}
.kool .koolimg {
  max-width: 1252px;
  width: 100%;
}

@media only screen and (max-width: 1199px) {
  .koolimg img {
    max-width: 812px;
    width: 100%;
  }

  .brandimgsendmsg {
    width: 100%;
  }
  .brandtitle {
    width: 100%;
  }
  .aftergray {
    margin-top: 5px;
  }
}

@media only screen and (max-width: 875px) {
  .koolimg img {
    max-width: 500px;
    width: 100%;
  }
}

@media only screen and (max-width: 550px) {
  .koolimg img {
    max-width: 350px;
    width: 100%;
  }
}

@media only screen and (max-width: 400px) {
  .koolimg img {
    max-width: 300px;
    width: 100%;
  }
}

.koolimg img {
  margin-left: 50px;
}
.kool p {
  font-size: 18px;
  font-weight: 400;
  padding-left: 30px;
  color: #0a1528;
}

.KoolKart {
  position: relative;
  z-index: 0;
}
.KoolKart::after {
  position: absolute;
  content: "";
  bottom: 0;
  top: 30%;
  background: #f3f2f2;
  z-index: -1;
  width: 25%;
  right: 0;
  height: 73%;
}

.KoolKart::before {
  position: absolute;
  content: "";
  background-color: var(--primary-color);
  /* top: 0; */
  top: 30%;
  bottom: 0;
  right: 0;
  height: 4px;
  background-color: var(--primary-color);
  width: 47%;
  right: 0;
}

@media only screen and (max-width: 1199px) {
  .KoolKart::after {
    top: 35%;
    height: 10px;
    display: none;
  }
  .KoolKart::before {
    top: 31.8%;
    display: none;
  }
}

.koolimg {
  position: relative;
  z-index: 0;
}
.koolimg::after {
  position: absolute;
  content: "";
  z-index: -1;
  top: -38px;
  left: 17px;
  bottom: 0;
  right: 0;
  background-color: #f3f2f2;
  height: 111.5%;
}

@media only screen and (max-width: 1199px) {
  .koolimg::before {
    content: "";
    position: absolute;
    background-color: var(--primary-color);
    width: 50%;
    height: 3px;
    top: -40px;
    bottom: 0;
    left: 50%;
    right: 0;
  }
}
.blogheadingheding {
  position: relative;
}
.koolimg h1 {
  font-size: 50px;
  font-weight: 600;
  color: #0a1528;
}
.koolimg a {
  font-size: 30px;
  font-weight: 600;
  color: var(--primary-color);
}

.koolprice {
  padding: 10px;
}

@media only screen and (max-width: 1199px) {
  .koolprice {
    padding-left: 54px;
  }
}

@media only screen and (max-width: 812px) {
  .koolimg h1 {
    font-size: 30px;
  }
  .koolimg a {
    font-size: 20px;
  }
}
.blogheadingheding h1::after {
  position: absolute;
  content: "";
  height: 4px;
  width: 6%;
  top: 17%;
  left: 3%;
  right: 0;
  bottom: 0;
  background-color: var(--primary-color);
}

@media only screen and (max-width: 1024px) {
  .blogheadingheding h1::after {
    left: 7%;
    top: 45px;
  }
}

@media only screen and (max-width: 83s6px) {
  .blogheadingheding h1::after {
    left: 7%;
    top: 46px;
  }
}

@media only screen and (max-width: 571px) {
  .blogheadingheding h1::after {
    left: 50%;
    top: 48px;
    right: 0;
    transform: translateX(-50%);
  }
  .blogheadingheding h1 {
    text-align: left;
  }

  .kool p {
    /* padding-left: 30px; */
    /* text-align: center; */
    padding-top: 15px;
  }
  .blogheadingheding p:nth-child(3) {
    padding-right: 30px;
    margin-top: -20px;
  }
}

/* kool kart responsive end*/
/*The 1913 Runabout  css start */

.ruboot {
  margin-top: 102px;
  position: relative;
  z-index: 0;
  padding-bottom: -1px;
}
.ruboot::after {
  position: absolute;
  content: "";
  background-color: #f3f2f2;
  max-width: 20%;
  width: 100%;

  top: 368px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.ruboot::before {
  position: absolute;
  content: "";
  max-width: 40%;
  background-color: var(--primary-color);
  width: 100%;
  height: 4px;
  top: 363px;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.graylayer {
  position: relative;
  z-index: 0;
  padding-bottom: 30px;
}
.graylayer::after {
  position: absolute;
  content: "";
  z-index: -1;
  max-width: 82%;
  width: 100%;
  top: -48px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f3f2f2;
}
.rubootcontent {
  max-width: 1150px;
  width: 100%;
  margin: auto;
  text-align: right;
  padding-right: 69px;
}
.ruboot .rubootcontent h1 {
  font-size: 40px;
  font-weight: 600;
  position: relative;
}
.ruboot .rubootcontent h1::after {
  position: absolute;
  content: "";
  background-color: var(--primary-color);
  width: 69px;
  height: 4px;
  top: 48px;
  right: 0;
}
.ruboot .rubootcontent p {
  font-size: 18px;
  font-weight: 400;
  color: #0a1528;
}
.ruboot .rubootcontent p:nth-child(2) {
  padding: 15px;
}

.ruboot .rubootcontent p:nth-child(3) {
  padding: 10px;
}

.rubootcontentblack {
  max-width: 1571px;
  width: 100%;
  margin: auto;
}
.rubootcontentblack img {
  padding-right: 46px;
  max-width: 85%;
  width: 100%;
}
.smallblackcard {
  max-width: 352px;
  padding: 20px;
  background-color: white;
}
.smallblackcard p {
  font-size: 18px;
  color: #0a1528;
  font-weight: 400;
  /* padding-top: 30px; */
}

.batterpower h1 {
  font-size: 40px;
  font-weight: 600;
  color: #0a1528;
}
.batterpower p {
  font-size: 18px;
  font-weight: 400;
  color: #0a1528;
}
.batterpower ul li {
  list-style: disc;
  font-size: 16px;
  color: #0a1528;
  font-weight: 400;
  padding-top: 5px;
}
.batterpower h3 {
  color: var(--primary-color);
  font-size: 40px;
  font-weight: 600;
}

.batterpower p {
  max-width: 1190px;
}

/* blog page end */

/* blog page resposive start */

.lastblogcards {
  margin-top: 92px;
}

.barcycles {
  position: relative;
}
.barcycles {
  margin-bottom: 90px;
  margin-left: 30px;
}

.barcycles h1 {
  margin-bottom: 40px;
  font-size: 40px;
  color: #0a1528;
  font-weight: 600;
}

.barcycles h3 {
  margin-bottom: 20px;
  font-size: 30px;
  color: #0a1528;
  font-weight: 400;
}
.barcycles h1::after {
  position: absolute;
  background-color: var(--primary-color);
  content: "";
  height: 4px;
  width: 70px;
  top: 47px;
  left: 0;
  right: 0;
}
.barcycles p {
  color: #0a1528;
  font-size: 18px;
  font-weight: 400;
}

.linksgreen h1 {
  font-size: 40px;
  font-weight: 600;
  color: #0a1528;
}

.linksgreen a {
  font-size: 40px;
  color: var(--primary-color);
  font-weight: 600;
}

.blogcradbody {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: white;
}

/* .afteryes{
  position: relative;
  z-index: 0;
}
.afteryes::after{
  position: absolute;
  content: '';
  max-width: 184%;
  background-color: #F3F2F2; 

  width: 82%;
  height: 139.5%;
  top: -51px;
  left: 467px;
  right: 0;
  bottom: 0;
  z-index: -1;
}


.ourgreen{
  position: relative;
  z-index: 0
}
.ourgreen::after{
  position: absolute;
  content: '';
  z-index: -1;
  background-color:#F3F2F2 ;
  top: -46px;
  right: 0;
  left: 251px;
  bottom: 0;
}

.ourgreen::before{
  height: 4px;
  position: absolute;
  content: '';
  background-color:var(--primary-color);
  right: 0;
  max-width:50%;
  width: 100%;
  top: -51px;
  left: 55%;
  bottom: 0;
}

.blogcard{
  position: relative;
  z-index: 0;
}
.blogcard::after{
  position: absolute;
  position: absolute;
  content: '';
  z-index: -1;
  background-color:#F3F2F2 ;
  top: -46px;
  right: 0;
  left: 251px;
  bottom: 0;
  height: 135%;
} */

.bar-cycles {
  margin-top: -40px;
  padding-top: 40px;
  padding-bottom: 50px;
  position: relative;
}

.bar-cycles::before {
  position: absolute;
  content: "";
  height: 4px;
  max-width: 48%;
  width: 100%;
  background-color: var(--primary-color);
  top: 0;
  right: 0;
}
.bar-cycles::after {
  position: absolute;
  content: "";
  background-color: #f3f2f2;
  top: 0;
  bottom: 0;
  max-width: 79%;
  width: 100%;
  right: 0;
  z-index: -1;
  width: 87%;
}

.bar-cycles p {
  font-size: 18px;
  color: #0a1528;
  font-weight: 400;
  padding-top: 20px;
  padding-bottom: 20px;
}
.bar-cycles .smallblackcard {
  padding: 25px;
}

.ruboot .smallblackcard {
  margin-bottom: 20px;
}
.botteerpowerheading {
  text-align: left;
  max-width: 70%;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 30px;
  text-align: center;
}
@media only screen and (max-width: 1720px) {
  .rubootcontentblack img {
    max-width: 89.7%;
    width: 100%;
  }
  .botteerpowerheading {
    max-width: 100%;
    width: 100%;
  }
  .graylayer::after {
    max-width: 86.3%;
    width: 100%;
  }
  .batterpower {
    max-width: 1110px;
  }
}

@media only screen and (max-width: 1620px) {
  .rubootcontentblack img {
    max-width: 92.7%;
    width: 100%;
  }
  .graylayer::after {
    max-width: 89.2%;
    width: 100%;
  }
}
@media only screen and (max-width: 1440px) {
  .rubootcontentblack img {
    max-width: 98.5%;
    width: 100%;
  }
  .graylayer::after {
    max-width: 94.2%;
    width: 100%;
  }
  .batterpower {
    max-width: 1000px;
    width: 100%;
  }
}

@media only screen and (max-width: 1220px) {
  .blogheadingheding h1 {
    font-size: 30px;
  }
  .blogheading h1 {
    font-size: 30px;
  }
  .blogheading h1::after {
    top: 46px;
  }
  .blogheadingheding h1::after {
    top: 37px;
    left: 37px;
  }
  .ruboot .rubootcontent h1 {
    font-size: 30px;
  }
  .ruboot .rubootcontent h1::after {
    top: 37px;
  }
  .ruboot::before {
    top: 351px;
  }

  .ruboot::after {
    max-width: 100%;
    width: 100%;
    top: 355px;
  }
  .batterpower h1 {
    font-size: 30px;
  }
  .batterpower h3 {
    font-size: 30px;
  }
  .barcycles h1 {
    font-size: 30px;
  }
  .barcycles h1::after {
    top: 37px;
  }
  .koolimg h1 {
    font-size: 40px;
  }
}

@media only screen and (max-width: 1219px) {
  .rubootcontentblack img {
    width: 100%;
  }
  .graylayer::after {
    display: none;
  }

  .kool p {
    padding-right: 30px;
  }
  .barcycles {
    margin-left: 15px !important;
  }
}
@media only screen and (max-width: 1600px) {
  .bar-cycles::after {
    max-width: 89%;
    width: 100%;
  }
  .barcycles {
    margin-left: -147px;
  }

  .linksgreen h1 {
    font-size: 30px;
  }
  .linksgreen h1 {
    font-size: 30px;
  }
  .linksgreen a {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1440px) {
  .bar-cycles::after {
    max-width: 91%;
    width: 100%;
  }
  .barcycles {
    margin-left: -183px;
  }
}
@media only screen and (max-width: 1366px) {
  .bar-cycles::after {
    max-width: 93.5%;
    width: 100%;
  }
}

@media only screen and (max-width: 1280px) {
  .bar-cycles::after {
    max-width: 95%;
    width: 100%;
  }
  .shopmain .imgshop {
    min-height: 238px;
  }
}

@media only screen and (max-width: 1028px) {
  .ruboot::before {
    top: 378px;
  }
  .ruboot::after {
    top: 383px;
  }
}
@media only screen and (max-width: 1270px) {
  .bar-cycles::after {
    max-width: 100%;
    width: 100%;
  }
}

@media only screen and (max-width: 1251px) {
}

@media only screen and (max-width: 991px) {
  .rubootcontentblack img {
    padding: 0;
  }

  section.cardsection.access .wheelcard .cardbody h1 {
    height: 35px;
  }
  .bloglastcard .smallblackcard {
    margin-bottom: 20px;
  }
  .linksgreen {
    margin-top: -10px;
    margin-bottom: 20px;
  }
  .linksgreen h1 {
    font-size: 25px;
    text-align: center;
  }

  .linksgreen a {
    font-size: 25px;
  }

  .KoolKart {
    margin-top: 40px;
  }
  .blogheadingheding p:nth-child(3) {
    margin-top: -16px;
  }
  .ruboot .rubootcontent p:nth-child(3) {
    margin-top: -15px;
  }
  .ruboot::after {
    top: 369px;
  }
  .ruboot::before {
    top: 364px;
  }
  .lastblogcards {
    margin-top: 50px;
  }
  .ruboot {
    margin-top: 70px;
  }
}

@media only screen and (max-width: 796px) {
  .rubootcontent {
    padding-right: 0px;
  }
  .barcycles {
    /* max-width: 100%;
    width: 100%;
    text-align: center;
    margin-left: 0px !important;*/
  }
  .barcycles h1 {
    margin-bottom: 25px;
  }
  /* .barcycles h1::after {
    left: 50%;
    transform: translateX(-50%);
    top: 50px;
  } */
  .barcycles h3 {
    margin-bottom: 11px;
  }
  .bar-cycles {
    margin-top: -59px;
  }
  .bloglastcard .smallblackcard {
    width: 100%;
    margin: auto;
    margin-bottom: 20px;
  }
  .ruboot .smallblackcard {
    margin-bottom: 20px;
    margin: auto;
    width: 100%;
    margin-bottom: 20px;
  }
  .ruboot::after {
    top: 355px;
  }
  .ruboot::before {
    top: 351px;
  }
  .blogheading h1 {
    font-size: 20px;
  }
  .blogheading h1::after {
    top: 29px;
  }
  .batterpower h1 {
    font-size: 20px;
  }
  .batterpower ul li {
    font-size: 16px;
  }
  .batterpower p {
    font-size: 16px;
  }
  .batterpower h3 {
    font-size: 20px;
  }
  .botteerpowerheading {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .barcycles h1 {
    font-size: 20px;
  }
  .barcycles h3 {
    font-size: 19px;
  }
  .barcycles h1::after {
    top: 29px;
  }
  .barcycles p {
    font-size: 16px;
  }
  .bar-cycles p {
    font-size: 16px;
  }
  .linksgreen h1 {
    font-size: 20px;
  }

  .linksgreen a {
    font-size: 20px;
  }
  .blogheadingheding h1 {
    font-size: 20px;
  }
  .blogheadingheding h1::after {
    top: 29px;
  }
  .suirrey-magpera p {
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .kool p {
    font-size: 16px;
  }
  .Surrey-Mag .row p {
    font-size: 16px;
  }
  .ruboot .rubootcontent h1 {
    font-size: 20px;
  }

  .ruboot .rubootcontent h1::after {
    top: 29px;
  }

  .ruboot .rubootcontent p {
    font-size: 16px;
  }
}

@media only screen and (max-width: 575px) {
  .kool {
    text-align: center;
  }
  .blogheadingheding h1::after {
    left: 53%;
    transform: translateX(-50%);
  }
  .rubootcontent {
    text-align: center;
    padding: 0 !important;
  }
  .ruboot .rubootcontent h1::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .barcycles {
    text-align: center;
  }
  .barcycles h1::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .ruboot::after {
    display: none;
  }
  .ruboot::before {
    display: none;
  }

  .had .faqheading h1::after {
    display: none;
  }
  .had .faqheading h1 {
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
  }
  .had .faqheading h1::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 69px;
    height: 4px;
    background: #cc0001;
    transform: translateX(-50%);
  }
  .faq h3 {
    padding-left: 5px;
    padding-right: 5px;
  }
  .blogheadingheding h1 {
    text-align: center;
  }
  .bgcolor-gray {
    background-color: #f3f2f2;
    position: relative;
  }
  .bgcolor-gray::before {
    position: absolute;
    content: "";
    top: -4px;
    left: 0;
    right: 0;
    max-width: 50%;
    height: 4px;
    background-color: var(--primary-color);
  }
  .ruboot .rubootcontent p {
    padding-right: 5px;
    padding-left: 5px;
  }
}
@media only screen and (max-width: 480px) {
  .newscontext p {
    font-size: 20px;
  }
  #brandvalue .brandcontent p {
    font-size: 16px;
  }
  .newslatterarea .emaillist form input[type="submit"] {
    max-width: 130px;
  }
  .faq h3 {
    padding-left: 10px;
    padding-right: 10px;
  }
  .perafaq {
    text-align: center;
  }
  .shoppartconteant .pera p {
    padding-top: 7px;
    padding-bottom: 10px;
  }
  #testimonials .bottomcontent p {
    padding-left: 15px;
    padding-right: 15px;
  }
  #aboutperchase .content p {
    margin-bottom: 0px;
  }
  .bar-cycles p {
    padding-bottom: 0px;
  }
  .faq p {
    padding-left: 10px;
    padding-right: 10px;
  }
  .perafaq {
    text-align: center;
    width: 100%;
  }
}
/* .bgcolor-gray {
  background-color: red;
  /* #f3f2f2;*/
/*} */

/* @media only screen and (max-width: 566px) {
  .ruboot::after {
    top: 433px;
  }
  .ruboot::before {
    top: 429px;
  }
} */
/* 
@media only screen and (max-width: 516px) {
  .ruboot::after {
    top: 487px;
  }
  .ruboot::before {
    top: 483px;
  }
} */

@media only screen and (max-width: 420px) {
  .Surrey-Mag .blogheading h1::after {
    top: 55px;
  }
}

.menu > ul > li:hover > a,
.current-menu-item > a,
.current-menu-ancestor > a {
  background: #fff;
  color: #cc0001 !important;
}

.current-menu-item::after,
.current-menu-ancestor::after {
  display: none;
}

.single-product .customquantity {
  float: left;
}
.single-product .customquantity + button {
  height: 42px;
  line-height: 26px;
  margin-left: 10px !important;
  margin-top: 0 !important;
  float: left !important;
}
@media (max-width: 371px) {
  .single-product .customquantity + button {
    font-size: 14px;
  }
}