/* Variables and Font Import */
/* Font Import */
@font-face {
  font-family: "Nissan Brand";
  src: url("https://firebasestorage.googleapis.com/v0/b/hseo-cdn.appspot.com/o/OEM-Fonts%2FNissan%2FNissanBrand-Regular.ttf?alt=media&token=c0e0c5a5-e1d7-4486-9744-3ef36718d353");
}

/* Variables */
:root {
  /* Variables */
  /* GP = GEO Page */

  /* Page */
  --hsd-gp-bkg-color: #fff;

  /* Hero Section Background Graphics */
  --hsd-banner-bkg-desktop: url("https://di-uploads-pod26.dealerinspire.com/tennesonnissan/uploads/2025/08/Nissan_GeoPage_Hero.jpg");

  /* |==------==| */
  /* Hero Section Title */
  --hsd-gp-hs-title-color: #fff;
  --hsd-gp-hs-title-font-family: "Nissan Brand";
  --hsd-gp-hs-title-font-size: 40px;

  /* Hero Section Btns */
  --hsd-gp-hs-btn-width: 162px;
  --hsd-gp-hs-btn-height: 48px;
  --hsd-gp-hs-btn-border-radius: 50px;
  --hsd-gp-hs-btn-font-family: "Nissan Brand";
  --hsd-gp-hs-btn-font-size: 14px;

  --hsd-gp-hs-btn-font-color: #fff;
  --hsd-gp-hs-btn-background: #c3002f;
  --hsd-gp-hs-btn-border: 1px solid #c3002f;
  /* Hero Section Btn Hover */
  --hsd-gp-hs-btn-font-color-hover: #fff;
  --hsd-gp-hs-btn-background-hover: #000;
  --hsd-gp-hs-btn-border-hover: 1px solid #000;

  /* |==----==| */
  /* Value Prop Section */
  --hsd-gp-vps-bkg-color: #fff;

  /* Value Prop Content */
  --hsd-gp-vps-content-font-family: "Nissan Brand";
  --hsd-gp-vps-content-font-size: 20px;
  --hsd-gp-vps-conetnt-font-color: #000;

  /* Value Prop Btn */
  --hsd-gp-vps-btn-width: 307px;
  --hsd-gp-vps-btn-height: 50px;
  --hsd-gp-vps-btn-border-radius: 50px;
  --hsd-gp-vps-btn-font-family: "Helvetica Neue";
  --hsd-gp-vps-btn-font-size: 16px;

  --hsd-gp-vps-btn-font-color: #fff;
  --hsd-gp-vps-btn-background: #c3002f;
  --hsd-gp-vps-btn-border: 1px solid #c3002f;
  /* Value Prop Btn Hover */
  --hsd-gp-vps-btn-font-color-hover: #fff;
  --hsd-gp-vps-btn-background-hover: #000;
  --hsd-gp-vps-btn-border-hover: 1px solid #000;

  /* |==----==| */
  /* Content Section */
  /* h2 */
  --hsd-gp-cs-h2-font-family: "Nissan Brand";
  --hsd-gp-cs-h2-font-size: 24px;
  --hsd-gp-cs-h2-font-color: #000;
  /* p */
  --hsd-gp-cs-p-font-family: "Nissan Brand";
  --hsd-gp-cs-p-font-size: 16px;
  --hsd-gp-cs-p-font-color: #000;

  /* |==----==| */
  /* Cusotm Inventory Section */
  --hsd-gp-cis-bkg-color: #f5f5f5;

  /* Cusotm Inventory Card */
  --hsd-gp-cis-card-bkg-color: #f5f5f5;
  --hsd-gp-cis-card-border-radius: 0;
  --hsd-gp-cis-card-border: ;

  /* Cusotm Inventory Card Title */
  --hsd-gp-cis-title-color: #000;
  --hsd-gp-cis-title-font-family: "Nissan Brand";
  --hsd-gp-cis-title-font-size: 18px;

  /* Cusotm Inventory Card Title Hover */
  --hsd-gp-cis-title-color-hover: #c3002f;
}

/* Styling */
/* ==--------== */
/* Hero Section */
#hsd-hero-section {
  background-image: var(--hsd-banner-bkg-desktop);
  background-size: cover;
  background-position: center;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.hsd-hs-title-btn-cont {
  max-width: 100%;
  min-height: 360px;
  margin: 0 auto;
  padding: 2rem;
  padding-bottom: 4rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

.hsd-hs-custom-title {
  color: var(--hsd-gp-hs-title-color);
  font-family: var(--hsd-gp-hs-title-font-family) !important;
  font-size: var(--hsd-gp-hs-title-font-size) !important;
  text-align: center;
  font-style: normal;
  font-weight: 700;
  line-height: 40px; /* 100% */
  letter-spacing: 0.8px;
}

/* Buttons */
.hsd-hs-btn-cont {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.hsd-hs-hero-btn:visited,
.hsd-hs-hero-btn:link {
  color: currentColor;
}

.hsd-hs-hero-btn {
  display: flex;
  padding: 16px 0;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: var(--hsd-gp-hs-btn-width);
  height: var(--hsd-gp-hs-btn-height);
  background: var(--hsd-gp-hs-btn-background);
  border: var(--hsd-gp-hs-btn-border);
  border-radius: var(--hsd-gp-hs-btn-border-radius);

  font-family: var(--hsd-gp-hs-btn-font-family);
  font-size: var(--hsd-gp-hs-btn-font-size) !important;
  color: var(--hsd-gp-hs-btn-font-color) !important;
  text-align: center;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 14px */
  transition: all 0.25s ease-out;
  text-decoration: none !important;
}
.hsd-hs-hero-btn:hover {
  background: var(--hsd-gp-hs-btn-background-hover);
  border: var(--hsd-gp-hs-btn-border-hover);
  color: var(--hsd-gp-hs-btn-font-color-hover) !important;
}

@media (max-width: 767px) {
  .hsd-hs-custom-title {
    font-size: 32px !important;
    line-height: 1;
  }
  .hsd-hs-btn-cont {
    width: 90%;
  }
  .hsd-hs-hero-btn {
    width: 100%;
  }
}

/* ==--------------== */
/* Value Prop Section */
#hsd-value-prop-section {
  display: flex;
  justify-content: center;
  background: var(--hsd-gp-vps-bkg-color) !important;
  max-width: 1920px;
  width: 100%;
  padding: 40px 2rem;
  margin: 0 auto;
}
.hsd-vps-btn-content-cont {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 1010px;
}
.hsd-vps-content {
  font-family: var(--hsd-gp-vps-content-font-family) !important;
  font-size: var(--hsd-gp-vps-content-font-size) !important;
  color: var(--hsd-gp-vps-conetnt-font-color) !important;
  text-align: center;
  font-style: normal;
  font-weight: 300;
  line-height: 120%; /* 24px */
  letter-spacing: 0.4px;
}

.hsd-vps-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: var(--hsd-gp-vps-btn-width);
  height: var(--hsd-gp-vps-btn-height);
  padding: 16px 0;
  background: var(--hsd-gp-vps-btn-background);
  border: var(--hsd-gp-vps-btn-border);
  border-radius: var(--hsd-gp-vps-btn-border-radius);
  color: var(--hsd-gp-vps-btn-font-color) !important;
  font-family: var(--hsd-gp-vps-btn-font-family);
  font-size: var(--hsd-gp-vps-btn-font-size) !important;
  text-align: center;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
  text-decoration: none !important;
  transition: all 0.25s ease-out;
}
.hsd-vps-btn:hover {
  background: var(--hsd-gp-vps-btn-background-hover);
  border: var(--hsd-gp-vps-btn-border-hover);
  color: var(--hsd-gp-vps-btn-font-color-hover) !important;
}

@media screen and (max-width: 767px) {
  .hsd-vps-btn-content-cont {
    width: 90%;
  }
  .hsd-vps-content {
    font-size: 20px !important;
  }
  .hsd-vps-btn {
    width: 100%;
  }
}

/* ==-----------== */
/* Content Section */
.hsd-content-section {
}

.hsd-content {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 2rem;
}

.hsd-content > h2 {
  /* text-align: center; */
  margin: 16px 0 !important;
  font-family: var(--hsd-gp-cs-h2-font-family);
  font-size: var(--hsd-gp-cs-h2-font-size) !important;
  color: var(--hsd-gp-cs-h2-font-color);
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 24px */
}
.hsd-content > p {
  font-family: var(--hsd-gp-cs-p-font-family);
  font-size: var(--hsd-gp-cs-p-font-size) !important;
  color: var(--hsd-gp-cs-p-font-color);
  font-style: normal;
  font-weight: 300;
  line-height: 120%; /* 19.2px */
  letter-spacing: 0.32px;
}

/* ==--------------------== */
/* Custom Inventory Section */
#hsd-custom-inventory-section {
  background-color: var(--hsd-gp-cis-bkg-color);
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
}
.hsd-cis-inventory-grid {
  display: grid;
  align-content: center;
  justify-items: center;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 32px;
  max-width: 1440px;
  padding: 2rem;
  margin: 0 auto;
}

.hsd-cis-cards {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 24px 0;
  width: 100%;
  max-width: 250px;
  border-radius: var(--hsd-gp-cis-card-border-radius);
  border: var(--hsd-gp-cis-card-border);
  background: var(--hsd-gp-cis-card-bkg-color);
  text-decoration: none !important;
  transition: all 0.25s ease-out;
}

.hsd-cis-title {
  color: var(--hsd-gp-cis-title-color) !important;
  font-family: var(--hsd-gp-cis-title-font-family) !important;
  font-size: var(--hsd-gp-cis-title-font-size) !important;
  text-align: center;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 21.6px */
  letter-spacing: 0.36px;
  margin: 0 !important;
  transition: all 0.25s ease-out;
}
.hsd-cis-cards:hover .hsd-cis-title {
  color: var(--hsd-gp-cis-title-color-hover) !important;
}

.hsd-cis-car-graphic {
  transition: all 0.25s ease-out;
  width: 100%;
}
.hsd-cis-cards:hover .hsd-cis-car-graphic {
  scale: 1.15;
}

@media screen and (min-width: 1350px) {
  .hsd-cis-inventory-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media screen and (max-width: 1090px) {
  .hsd-cis-inventory-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 850px) {
  .hsd-cis-inventory-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 620px) {
  .hsd-cis-inventory-grid {
    grid-template-columns: 1fr;
  }
}

/* ==-------== */
/* Map Section */
#hsd-map-section {
  max-width: 1920px;
  width: 100%;
  padding: 40px 0;
  margin: 0 auto;
}

#hsd-map-section iframe {
  max-height: 450px !important;
}

/* FAQ Styling */
/* FAQ Accordion styles*/
:root {
  /* |==----==| */
  /* FAQ Section */
  --hsd-mod-faq-bkg-color: #f5f5f5;
  --hsd-mod-faq-max-width: 1440px;

  /* FAQ Container Styles */
  --hsd-mod-faq-padding: 24px 0;
  --hsd-mod-faq-margin-bottom: 2px;
  --has-mod-faq-border-bottom: 1px solid #5c6163;

  /* FAQ Title */
  --hsd-mod-faq-title-color: #000;
  --hsd-mod-faq-title-font-family: "Nissan Brand";
  --hsd-mod-faq-title-font-size: 24px;
  --hsd-mod-faq-title-alignment: left;

  /* FAQ Question */
  --hsd-mod-faq-question-color: #000;
  --hsd-mod-faq-question-font-family: "Nissan Brand";
  --hsd-mod-faq-question-font-size: 20px;
  /* FAQ Question Active */
  --hsd-mod-faq-question-active-color: #f5f5f5;

  /* FAQ Answer */
  --hsd-mod-answer-bg: #f5f5f5;
  --hsd-mod-faq-answer-color: #5c6163;
  --hsd-mod-faq-answer-font-family: "Nissan Brand";
  --hsd-mod-faq-answer-font-size: 16px;
  --hsd-mod-faq-text-alignment: left;

  /* Question Background */
  --hsd-mod-faq-question-active-bkg-color: #c3002f;
  --hsd-mod-faq-question-inactive-bkg-color: #f5f5f5;
  --hsd-mod-faq-transition: 0.4s;

  /* Arrow Styles */
  --hsd-mod-faq-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.2071 2.53877C13.5976 2.14825 13.5976 1.51508 13.2071 1.12456C12.8166 0.734043 12.1834 0.734043 11.7929 1.12456L6.84314 6.07431L1.89345 1.12456C1.50284 0.734043 0.869745 0.734043 0.479145 1.12456C0.088645 1.51509 0.088645 2.14825 0.479145 2.53878L6.13603 8.19563C6.52657 8.58616 7.15972 8.58616 7.55025 8.19563L13.2071 2.53877Z' fill='black'/%3E%3C/svg%3E");
  --hsd-mod-faq-arrow-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.2071 2.53877C13.5976 2.14825 13.5976 1.51508 13.2071 1.12456C12.8166 0.734043 12.1834 0.734043 11.7929 1.12456L6.84314 6.07431L1.89345 1.12456C1.50284 0.734043 0.869745 0.734043 0.479145 1.12456C0.088645 1.51509 0.088645 2.14825 0.479145 2.53878L6.13603 8.19563C6.52657 8.58616 7.15972 8.58616 7.55025 8.19563L13.2071 2.53877Z' fill='white'/%3E%3C/svg%3E");
  --hsd-mod-faq-arrow-img-icon: /* url(#) */ ;
  --hsd-mod-faq-arrow-position: right;
  --hsd-mod-faq-arrow-margin: 0;
}

#hsd-mod-faq-section {
  width: 100%;
  background-color: var(--hsd-mod-faq-bkg-color);
}

.hsd-faq-cont {
  max-width: var(--hsd-mod-faq-max-width);
  padding: 2rem;
  margin: 0 auto;
}

.hsd-faq-cont > h2 {
  color: var(--hsd-mod-faq-title-color);
  font-family: var(--hsd-mod-faq-title-font-family);
  font-size: var(--hsd-mod-faq-title-font-size) !important;
  text-align: var(--hsd-mod-faq-title-alignment);
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 24px */
  margin: 0 !important;
}

/* Accordion styles */
.hsd-question {
  width: 100%;
  padding: var(--hsd-mod-faq-padding) !important;
  margin-bottom: var(--hsd-mod-faq-margin-bottom) !important;
  background-color: var(--hsd-mod-faq-question-inactive-bkg-color);
  border: none;
  border-bottom: var(--has-mod-faq-border-bottom);
  text-align: var(--hsd-mod-faq-text-alignment) !important;
  transition: var(--hsd-mod-faq-transition);
  color: var(--hsd-mod-faq-question-color);
  font-family: var(--hsd-mod-faq-question-font-family);
  font-size: var(--hsd-mod-faq-question-font-size) !important;
  cursor: pointer;
  outline: none;
  font-style: normal;
  font-weight: 300;
  line-height: 120%; /* 24px */
  letter-spacing: 0.4px;
  max-width: none !important;
}
.hsd-question-active,
.hsd-question:hover {
  background-color: var(--hsd-mod-faq-question-active-bkg-color);
  color: var(--hsd-mod-faq-question-active-color);
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.hsd-custom-panel {
  max-height: 0;
  padding: 0 var(--hsd-mod-faq-padding);
  margin-bottom: 0;
  background-color: var(--hsd-mod-answer-bg);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 36px */
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* Answer */
.hsd-custom-panel p {
  padding: 1rem;
  color: var(--hsd-mod-faq-answer-color);
  font-family: var(--hsd-mod-faq-answer-font-family);
  font-size: var(--hsd-mod-faq-answer-font-size) !important;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}
.hsd-question:after {
  content: var(--hsd-mod-faq-arrow);
  text-align: center;
  float: var(--hsd-mod-faq-arrow-position);

  /* Alt CSS for image icon */
  background-image: var(--hsd-mod-faq-arrow-img-icon);
  background-size: 100%;
  width: var(--hsd-mod-faq-img-icon-size);
  height: var(--hsd-mod-faq-img-icon-size);
  display: block;
  margin: var(--hsd-mod-faq-arrow-margin);
}
.hsd-question.hsd-question:hover::after {
  content: var(--hsd-mod-faq-arrow-active);
}
.hsd-question.hsd-question-active::after {
  content: var(--hsd-mod-faq-arrow-active);
  text-align: center;
  transform: rotate(180deg);
  display: block;
  margin: var(--hsd-mod-faq-arrow-margin);
}
