/* Font Family */
@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:wght@100..900&family=Changa:wght@200..800&display=swap");

body {
  font-family: "Albert Sans", sans-serif;
}
p {
  font-family: "Changa", sans-serif;
}

/* Header css start here */

header.poc-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.poc-menu-wrapper {
  position: fixed;
  inset: 0;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.poc-menu-items {
  padding: 0;
  margin: 0;
  list-style: none;
}
.poc-menu-items li {
  margin-bottom: 20px;
  text-align: center;
}
.poc-menu-items li a {
  font-size: 52px;
  color: #fff;
  text-decoration: none;
}
.poc-close-icon button {
  position: absolute;
  right: 10px;
  top: 10px;
}

.bt-custom-logo {
  text-align: center;
}
.poc-menu ul {
  padding: 0;
  margin: 0;
  text-align: right;
}
.poc-menu ul li {
  display: inline-block;
  padding: 0 5px;
}

/* Header css end here */

/* Hero css start here */

.poc-home-hero {
  background-image: url("../img/hero-banner.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px 0;
  text-align: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.poc-home-hero-content h1 {
  font-size: 48px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 200;
  margin-bottom: 0;
}
.poc-home-hero-content h1 strong {
  font-weight: 500;
}
.poc-home-hero-content p {
  font-size: 22px;
  color: #fff;
  font-weight: 400;
  margin-bottom: 0;
  text-transform: uppercase;
}

/* Hero css end here */

/* Brand Section Css Start Here */

.poc-brand-bg {
  background-color: #000;
  padding: 40px 0;
}
.poc-brand-content h3 {
  color: #fff;
  font-size: 48px;
  font-weight: 200;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.poc-brand-content p {
  font-size: 20px;
  color: #fff;
  font-weight: 400;
  margin-bottom: 0;
  text-transform: uppercase;
}
.poc-btn a {
  font-size: 18px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border: solid 1px #fff;
  font-weight: 200;
  padding: 8px 10px;
  display: inline-block;
  margin-top: 10px;
}
.poc-brand-img img {
  width: 100%;
}
.poc-new-launches-bg {
  background-image: url(../img/new-launches.png);
  background-size: 111%;
  background-position: bottom left;
  background-repeat: no-repeat;
  /* background-color: #000; */
  min-height: 470px;
  display: flex;
  align-items: center;
}
.poc-new-launches-content h3 {
  color: #fff;
  font-size: 48px;
  font-weight: 200;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.poc-new-launches-content p {
  font-size: 20px;
  color: #fff;
  font-weight: 400;
  margin-bottom: 0;
  text-transform: uppercase;
}

/* Brand Section Css End Here */

/* Financing and Showroom Section css start here */
.easy-financing-wrapper {
  margin: 60px 0px;
  background-color: #ffffff;
}

.easy-financing-wrapper .easy-financing-left-section img {
  width: 100%;
}

.easy-financing-wrapper .easy-financing-right-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
  height: 100%;
}

.easy-financing-wrapper .easy-financing-right-section h3 {
  color: #000;
  font-size: 48px;
  font-weight: 200;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.easy-financing-wrapper .easy-financing-right-section p {
  font-size: 20px;
  color: #000;
  font-weight: 400;
  margin-bottom: 0;
  text-transform: uppercase;
}

.poc-btn-white a {
  font-size: 18px;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  border: solid 1px #000;
  font-weight: 200;
  padding: 8px 10px;
  display: inline-block;
  margin-top: 10px;
}
.easy-financing-wrapper .showroom-left-content {
  align-items: flex-start;
  margin-top: 30px;
}

/* Financing and Showroom Section css end here */

/* Footer section css start here */

/* Footer Section */
.poc-footer-wrapper {
  background-color: #111111;
  color: white;
  padding: 90px 0px 30px 0px;
}

.poc-footer-wrapper .footer-left-section h2 {
  color: #ffffff;
  font-size: 36px;
  margin-bottom: 20px;
}

.poc-footer-wrapper .footer-left-section p {
  font-size: 16px;
  font-weight: 300;
  color: #ffffff;
  width: 65%;
  margin-bottom: 30px;
  font-family: "Albert Sans", sans-serif;
}

.poc-footer-wrapper .footer-links h6 {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: 400;
}

.poc-footer-wrapper .footer-links ul {
  list-style: none;
  padding-left: 0;
}

.poc-footer-wrapper .footer-links ul li {
  font-size: 16px;
  font-weight: 400;
  color: #888888;
  padding-bottom: 5px;
}

.poc-footer-wrapper .footer-links ul li:hover {
  color: #ffffff;
}

.poc-footer-wrapper .footer-right-section {
  color: #ffffff;
}

.poc-footer-wrapper .footer-right-section .subscribe-content {
  display: flex;
}

.poc-footer-wrapper .footer-right-section h6 {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}

.poc-footer-wrapper .footer-right-section .subscribe-content input {
  border: none;
  outline: none;
  background-color: #353535;
  padding: 5px 5px 5px 10px;
  width: 60%;
  caret-color: #ffffff;
  color: #ffffff;
}

.poc-footer-wrapper .footer-right-section .subscribe-content a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 300;
  border: 1px solid #888888;
  padding: 4px 7px 1px 7px;
  border-radius: 0px;
  margin-left: 10px;
}

.poc-footer-wrapper .footer-right-section .subscribe-content a:hover {
  color: #888888;
}

.poc-footer-wrapper .footer-social-media-links {
  margin-top: 30px;
}

.poc-footer-wrapper .footer-social-media-links h6 {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}

.poc-footer-wrapper .social-media-icons img {
  margin-right: 10px;
  width: 20px;
  height: 20px;
}

.poc-footer-wrapper .social-media-icons img:hover {
  opacity: 0.7;
}

.poc-footer-wrapper .footer-copy-right-setion {
  border-top: 2px solid #ffffff;
  border-image: linear-gradient(to right, black, red, black);
  border-image-slice: 1;
}
.poc-footer-wrapper .footer-copy-right-setion p {
  text-align: center;
  color: #888888;
  font-size: 16px;
  padding-top: 10px;
  font-weight: 400;
}
.footer-left-section img {
  max-width: 210px;
  width: 100%;
  margin-bottom: 25px;
}
/* Footer Section css end here */

/* List card start here */

.poc-list-section {
  padding-top: 120px;
}
.poc-title-with-border .title {
  font-size: 36px;
  font-weight: 400;
  text-transform: uppercase;
  color: #000;
  font-family: "Changa", sans-serif;
  margin-bottom: 47px;
  padding-bottom: 14px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.15);
}
.poc-card-list {
  border: solid 1px rgba(0, 0, 0, 0.15);
  margin-bottom: 30px;
}
.card-img-label {
  position: relative;
  margin-bottom: 50px;
}
.card-img-label img {
  width: 100%;
  height: 315px;
  object-fit: cover;
}
.card-img-label .brand-new {
  position: absolute;
  right: 0;
  top: 30px;
  background-color: rgba(0, 0, 0, 1);
  font-size: 12px;
  color: #fff;
  font-weight: 500;
  padding: 2px 10px;
}
.card-img-label .pre-owned {
  position: absolute;
  right: 0;
  top: 30px;
  background-color: #c60505;
  font-size: 12px;
  color: #fff;
  font-weight: 500;
  padding: 2px 10px;
}
.list-card-content-body {
  padding: 0 20px 20px;
}
.list-card-content-body .list-card-content .card-title {
  margin-bottom: 10px;
  font-size: 18px;
  color: #000;
  font-weight: 700;
  min-height: 45px;
  text-transform: uppercase;
}
.list-card-content-body .list-card-content .card-price {
  margin-bottom: 20px;
  font-size: 18px;
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
}
.card-content-details {
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  border-image: linear-gradient(to right, white, rgba(210, 210, 210, 1), white);
  border-image-slice: 1;
  padding: 10px 0;
  margin: 10px 0;
}
.card-content-details .car-details .details-title {
  font-size: 14px;
  color: #000;
  font-weight: 500;
  margin-bottom: 3px;
  text-transform: uppercase;
}
.card-content-details .car-details .details-dec {
  font-size: 14px;
  color: #000;
  font-weight: 300;
  margin-bottom: 3px;
}
.card-btn-group {
  display: grid;
  grid-template-columns: 1fr 55px 55px;
  gap: 10px;
  align-items: center;
}
.card-btn-group .view-details-btn {
  font-size: 18px;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  border: solid 1px #000;
  font-weight: 200;
  padding: 8px 10px;
  display: inline-block;
  text-align: center;
}
.card-btn-group .share-btn,
.card-btn-group .star-btn {
  color: #000;
  text-decoration: none;
  border: solid 1px #000;
  font-weight: 200;
  padding: 8px 10px;
  display: inline-block;
  text-align: center;
  height: 42px;
  width: 100%;
}
/* List card end here */

/* Car Detail Slider css start here */

.car-detail-slider-wrapper
  .car-detail-right-section
  .car-header-detail
  .detail-title {
  font-size: 24px;
  font-weight: 700;
  color: #000000;
  min-height: 65px;
}
.car-detail-slider-wrapper
  .car-detail-right-section
  .car-header-detail
  .header-detail {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.car-detail-slider-wrapper
  .car-detail-right-section
  .car-header-detail
  .header-detail
  .header-detail-title
  .detail-price {
  font-size: 24px;
  font-weight: 700;
  color: #000000;
  margin: 0;
}
.car-detail-slider-wrapper
  .car-detail-right-section
  .car-header-detail
  .header-detail
  .header-detail-title
  h3
  span {
  font-weight: 400;
}
.car-detail-slider-wrapper
  .car-detail-right-section
  .car-header-detail
  .header-detail
  .header-detail-title
  p {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  text-transform: uppercase;
  margin-bottom: 0;
}
.car-detail-right-section .car-details {
  margin-bottom: 30px;
}
.car-detail-right-section .card-btn-group a {
  height: 42px;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px #000;
}
.white-black-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.white-black-btn a {
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #000;
  border: solid 1px #000;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48%;
  gap: 10px;
  text-transform: uppercase;
  cursor: pointer;
}
.white-black-btn .bg-black {
  background-color: #000;
  color: #fff;
}
.swiper.product-slider2 .swiper-slide img {
  height: 408px;
}
.car-detail-slider .swiper {
  width: 100%;
  height: 100%;
}

.car-detail-slider .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.swiper.product-slider2 {
  height: 80%;
  width: 100%;
}

.product-slider1 {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.product-slider1 .swiper-slide {
  width: 25%;
  height: 100%;
  /* opacity: 0.4; */
}

.product-slider1 .swiper-slide-thumb-active {
  opacity: 1;
}
/* Car Detail Slider end start here */

/* Breadcrumb css start here */

.breadcrums-bg {
  margin-top: 74px;
  background-color: #f3f3f3;
  padding: 14px 0;
  margin-bottom: 50px;
}
.breadcrums-bg ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.breadcrums-bg ul li {
  padding: 0 5px;
}
.breadcrums-bg ul li a {
  font-size: 12px;
  font-weight: 400;
  color: #000000;
  text-decoration: none;
}

/* Breadcrumb css end here */

/* Enquiry css start here */

.enquiry-modal .modal-dialog {
  max-width: 700px;
}
.enquiry-modal .modal-dialog .modal-content {
  background-color: #000;
  padding: 44px;
}
.enquiry-modal .modal-dialog .modal-content .modal-header {
  padding: 0;
  border-bottom: 1px solid #ffffff;
  border-image: linear-gradient(to right, black, red, black);
  border-image-slice: 1;
  padding-bottom: 10px;
  margin-bottom: 30px;
  justify-content: center;
}
.enquiry-modal .modal-header h5 {
  text-align: center;
  font-size: 22px;
  color: #fff;
  text-transform: uppercase;
  font-family: "Changa", sans-serif;
  font-weight: 500;
}
.enquiry-modal .modal-content .modal-body {
  padding: 0;
}
.enquiry-form .form-label {
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.enquiry-form textarea,
.enquiry-form input {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.3);
}
.enquiry-form textarea:focus,
.enquiry-form input:focus {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 1);
  box-shadow: none;
  border: none;
}
.enquiry-form .enquiry-submit {
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border: solid 1px #fff;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 10px;
  text-transform: uppercase;
  cursor: pointer;
  background-color: #000;
  margin-top: 30px;
}

/* Enquiry css end here */

/* Chat Bot css start here */

.chatbot-wrapper .chatbot-header {
  background-color: #c60505;
  padding: 10px 10px;
}

.poc-chat-bot .chatbot_toggle_btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  border: none;
  height: 48px;
  width: 48px;
  background: #c60505;
  padding: 0;
  color: white;
  border-radius: 50px;
}

.poc-chat-bot .chatbot_toggle_btn:hover {
  background: #c60505;
}

.poc-chat-bot .chatbot-wrapper {
  background: #fff;
  height: calc(100% - 70px);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0px 0px 7px 2px #00000012;
}
/* .poc-chat-bot .collapsed .chatbot-wrapper {
  padding: 0;
  height: 0;
  width: 0;
  overflow: hidden;
} */

.poc-chat-bot .collapsed .chatbot-wrapper{
 z-index: -1;
 box-shadow: none;
 transition: all 0.5s;
}

.poc-chat-bot.chatbot-wrapper h3 {
  font-size: 22px;
  color: #fff;
  margin: 0 0 10px;
}

.poc-chat-bot .chatbot-wrapper p {
  font-size: 16px;
  /* color: #fff; */
  margin: 0;
  margin-top: 10px;
}
.poc-chat-bot .chatbot-wrapper p:first-child {
  margin-top: 0;
}
@media (min-width: 450px) {
  .poc-chat-bot .main-card {
    width: 96%;
    max-width: 400px;
    height: calc(100% - 32px) !important;
    max-height: 600px;
    margin: 16px !important;
  }
}

.poc-chat-bot .main-card {
  background: transparent;
  color: transparent;
  width: 100%;
  height: 100%;
  margin: 0px;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
  /* overflow: hidden; */
  right: 0;
  bottom: 0;
  position: fixed;
  transition: all 0.5s;
  /* box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  z-index: 999;
}

.poc-chat-bot .collapsed {
  width: 48px !important;
  height: 48px !important;
  border-radius: 24px !important;
  margin: 16px !important;
}
.chatbot-header .user-details {
  display: flex;
  gap: 12px;
  align-items: center;
}
.text-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.chatbot-header .user-details img {
  height: 52px;
  width: 52px;
  object-fit: cover;
  border-radius: 50px;
}
.chatbot-header .user-details .user-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  font-family: "Albert Sans", sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 95%;
}
.chatbot-header .user-details .assistant-name {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  font-family: "Albert Sans", sans-serif;
  margin-bottom: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 95%;
  margin-top: 5px;
}
.chatbot-wrapper .chatbot-header .mice-volume {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  bottom: -9px;
  position: relative;
  right: -18px;
}
.chatbot-wrapper .chatbot-header .mice-volume ul {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* .chatbot-wrapper .chatbot-header .mice-volume ul li button {
  border: none;
  background: transparent;
  padding: 0;
} */
.voice-controls {
  display: flex;
  gap: 15px;
  margin-left: auto;
}

.chatbot-footer .send-massage {
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 10px;
}
.chatbot-wrapper .chatbot-footer {
  padding: 10px 15px;
  background-color: #fff;
}
.chatbot-footer .send-massage button {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
}
.chatbot-footer .send-massage input {
  border: none;
  background: transparent;
  border-radius: 10px;
  padding: 10px;
  font-size: 14px;
  color: #000;
}
.chatbot-footer .send-massage input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.chatbot-wrapper .chatbot-body {
  background-color: #f6f6f3;
  height: calc(100% - 133px);
  overflow-y: auto;
}
.chatbot-wrapper .chatbot-body .chatbot-body-content {
  padding: 10px 18px;
  height: 100%;
}
.chatbot-body .chatbot-body-content .user-chat {
  /* background-color: #e9eceb; */
  font-size: 14px;
  font-weight: 400;
  color: #111111;
  /* padding: 10px 15px; */
  line-height: 1.2;
  margin-left: 30px;
  border-radius: 10px 10px 0px 15px;
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  width: fit-content;
  /* float: right; */
  clear: both;
  box-sizing: border-box;
  margin-left: auto;
}
.chatbot-body .chatbot-body-content .user-chat * {
  color: #fff;
}
.chatbot-body .chatbot-body-content .assistant-chat p:empty {
  display: none;
}
.chatbot-body .chatbot-body-content .assistant-chat p:empty + p {
  margin-top: 0;
}
.chatbot-body .chatbot-body-content .assistant-chat {
  background-color: #dcdcdc;
  font-size: 14px;
  font-weight: 400;
  color: #111111;
  padding: 10px 15px;
  line-height: 1.2;
  margin-right: 30px;
  border-radius: 10px 10px 15px 0px;
  margin-top: 10px;
  float: left;
  box-sizing: border-box;
}
.assistant-chat ul {
  padding-left: 12px;
  margin-bottom: 0;
}

.bot-message.loading {
  background: transparent;
  padding: 0;
  margin: 8px 0;
}

.close-chat-bot {
  position: absolute;
  right: 8px;
  top: 8px;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  z-index: 99;
}

.mic {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background-color: transparent;
  color: #fff;
  font-size: 33px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.25s;
}

.mic::before {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background-color: inherit;
  z-index: 101010;
}

.listening::before {
  animation: listening 1.3s infinite;
}

@keyframes listening {
  from {
    opacity: 0.25;
    background-color: #000;
  }
  to {
    transform: scale(1.2);
    opacity: 0;
    background-color: #000;
  }
}

/* Typing indicator animation */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: #dcdcdc;
  border-radius: 12px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: #90949c;
  border-radius: 50%;
  animation: bounce 1.3s linear infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes bounce {
  0%, 60%, 100% {
      transform: translateY(0);
  }
  30% {
      transform: translateY(-4px);
  }
}

.assistant-chat.loading{
  background-color: #dcdcdc !important;
}

/* chat Bot css end here  */