/* County Landing Page sections */
.traffic-landing .section{
  padding: 60px 0;
}
.traffic-landing .section.section-about{
  padding-top: 60px !important;
}
.traffic-landing .section-top, .home .section-top {
  position: relative;
  padding: 145px 0 145px;
}
.traffic-landing ul.check-list.ckeck-list--blue {
  padding-top: 0;
}
.traffic-landing .bg-blue.bg-blue-50 {
  background: linear-gradient(to right, #48b0f7 0%, #48b0f7 50%, #eaf8ff 50%, #eaf8ff 100%) !important;
}
.traffic-landing .section.testimonials {
  padding-top: 30px;
}
.traffic-landing .best-icons {
  max-width: 70px;
  max-height: 73px;
}

.accordion-wrap {
  margin-top: 20px;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
  background: #fff;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 15px;
  cursor: pointer;
  transition: background 0.3s;
}

.accordion-header:hover {
  background: #f1f1f1;
}

.accordion-question {
  font-weight: normal;
  font-family: "Roboto";
  margin: 0;
}

.accordion-icon {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.accordion-content {
  display: none;
  padding: 15px;
  line-height: 1.6;
}

.accordion-content p {
  font-style: normal;
  font-family: "Roboto";
  font-size: 18px;
  line-height: 21px;
  margin-bottom: 15px;
}

.accordion-content ul, 
.accordion-content ol {
  padding-left: 40px;
}

.accordion-content ul li, 
.accordion-content ol li {
  font-style: normal;
  font-family: "Roboto";
}

.accordion-content a {
  color: #48b0f7;
}

.accordion-item.active .accordion-content {
  display: block;
}

.accordion-item.active .accordion-icon {
  transform: rotate(360deg);
}

/* Course Dropdown Styles */
.course-grouped {
  padding: 20px 20px 0;
  max-width: 1200px;
  margin: 0 auto;

  .hero-header {
      text-align: center;
      margin-bottom: 40px;
  }

  .hero-title {
      font-size: 48px;
      font-weight: 800;
      color: #282828;
      margin-bottom: 16px;
      line-height: 57px;
  }

  .hero-subtitle {
      font-size: 20px;
      color: #585858;
      margin-bottom: 24px;
      font-family: 'Lora', serif;
      line-height: 31px;
  }

  .trust-badges {
      display: flex;
      justify-content: center;
      gap: 40px;
      margin-bottom: 40px;
      flex-wrap: wrap;
  }

  .trust-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #585858;
      font-size: 14px;
  }

  .trust-icon {
      width: 24px;
      height: 24px;
      background: #12C0C5;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 14px;
  }

  .trust-icon i.fa-star,
  .trust-icon i.fa-bolt-lightning {
      color: #FCB60C;
  }

  .trust-icon i.fa-check {
      color: white;
  }

  .course-finder {
      background: white;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.1);
      overflow: hidden;
      margin-bottom: 32px;
  }

  .table-header {
      background: #48B0F7;
      color: white;
      padding: 20px;
      text-align: center;
  }

  .table-header h3 {
      color: #fff;
      font-size: 24px;
      font-weight: bold !important;
      margin: 0 !important;
      text-transform: none !important;
      font-family: 'Work Sans', sans-serif !important;
  }

  .table-header p {
      font-size: 16px;
      opacity: 0.9;
      margin: 0 !important;
      font-family: 'Work Sans', sans-serif !important;
  }

  .course-table-div {
      width: 100%;
  }

  .table-head-row {
      background: #f8fafb;
      border-bottom: 2px solid #E8E8E8;
      font-weight: 600;
      color: #282828;
      font-size: 14px;
      padding: 16px 0;
      margin: 0;
  }

  .category-header {
      background: #f0f8ff;
      border-left: 4px solid #12C0C5;
      border-top: 1px solid #E8E8E8;
      padding: 12px 0;
      font-weight: 700;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #12C0C5;
      margin: 0;
  }

  .category-header.defensive-driving-traffic-school {
      background: #fff8f0;
      border-left-color: #FCB60C;
      color: #FCB60C;
      font-weight: 700;
  }

  .category-header.driver-education-improvement {
      background: #f0fff0;
      border-left-color: #28a745;
      color: #28a745;
      font-weight: 700;
  }

  .course-row {
      border-bottom: 1px solid #E8E8E8;
      transition: all 0.2s ease;
      cursor: pointer;
      margin: 0;
  }

  .course-row:last-child {
      border-bottom: 0;
  }

  .course-row:hover {
      background: #f8fafb;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  }

  .course-row.popular {
      border-left: 4px solid #FCB60C;
      background: #fffbf0;
  }

  .course-cell {
      padding: 20px;
      text-align: left;
      vertical-align: middle;
      position: relative;
      margin: auto;
  }

  .course-type {
      font-weight: 700;
      color: #282828;
      font-size: 16px;
      margin-bottom: 4px;
  }

  .course-features {
      font-size: 14px;
      color: #707070;
      line-height: 1.4;
  }

  .approval-section {
      margin-bottom: 8px;
  }

  .approval-badge {
      background: #12C0C5;
      color: white;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      display: inline-block;
      margin-left: 50px;
      font-family: 'Work Sans', sans-serif !important;
  }

  .licensed-by {
      padding-left: 70px;
  }
  
  .approval-badge-mobile {
      display: none;
  }

  .price-cell {
      text-align: center;
  }

  .price {
      font-size: 24px;
      font-weight: 700;
      color: #282828;
      margin-bottom: 4px;
  }

  .price-note {
      font-size: 12px;
      color: #707070;
  }

  .cta-cell {
      text-align: center;
  }

  .cta-button {
      background: #FE8B7B;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      width: 120px;
      font-family: Arial !important;   
  }

  .cta-button:hover {
      background: #fd6b59;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(254, 139, 123, 0.3);
  }

  .cta-button.primary {
      background: #48B0F7;
      width: auto;
      padding: 12px 24px;
  }

  .cta-button.primary:hover {
      background: #3A8FC8;
  }

  .popular-badge {
      position: absolute;
      top: -8px;
      right: 20px;
      background: #FCB60C;
      color: white;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: bold;
      text-transform: uppercase;
  }

  .finder-section {
      background: #f8fafb;
      border-top: 2px solid #E8E8E8;
      padding: 24px;
      text-align: center;
  }

  .finder-title {
      margin-bottom: 16px;
      color: #585858;
      font-size: 16px;
      font-weight: 600;
      font-family: 'Work Sans', sans-serif !important;
  }

  .finder-controls {
      display: flex;
      gap: 16px;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 16px;
  }

  .finder-select {
      padding: 12px 16px;
      border-radius: 8px;
      border: 1px solid #D0D0D0;
      font-size: 16px;
      min-width: 180px;
  }

  .course-preview {
      margin-top: 16px;
      padding: 12px;
      background: #fff;
      border-radius: 8px;
      border: 2px solid #48B0F7;
      display: none;
  }

  .preview-title {
      font-weight: 600;
      color: #282828;
      margin-bottom: 4px;
      font-family: 'Work Sans', sans-serif !important;
  }

  .preview-details {
      color: #707070;
      font-size: 14px;
  }

  .preview-price {
      font-size: 14px;
      color: #48B7;
      font-weight: 600;
      margin-top: 8px;
  }

  @media (max-width: 1024px) {
    .approval-badge {
      margin-left: 0;
  }

    .licensed-by {
      padding-left: 0;
    }

    .cta-button {
      width: 100%;
    }
  }

  @media (max-width: 768px) {
    .course-finder {
      margin-bottom: 0;
    }

    .hero-title {
      font-size: 32px;
      line-height: 38px;
    }

    .trust-badges {
      gap: 20px;
    }

    .course-cell {
      padding: 16px 12px;
    }

    .cta-button {
      padding: 10px 16px;
      font-size: 12px;
    }

    .table-head-row {
      font-size: 12px;
    }

    .price {
      font-size: 20px;
    }
  }
  
  @media (max-width: 660px) {
    .course-row {
      flex-direction: column;
      align-items: stretch;
    }

    .table-head-row .col-md-2.text-center:last-child {
      display: none;
    }

    .course-name-mobile {
      margin: auto 5px auto 0px;
    }

    .approval-badge-cell {      
      display: none;
    }

    .approval-badge-mobile {
      background: #12C0C5;
      color: white;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      display: inline-block;
    }

    .price-cell {
      padding: 0;
    }

    .price {
      margin-bottom: 0;
    }
  }
}

@media (max-width: 768px) {
  .course-grouped {
    padding: 30px 0 0;
  }
}
/* End of Course Dropdown Styles */

@media (max-width: 992px) {
  .features-wrap .col-3, .features-wrap .col-8 {
    margin-top: 0;
  }
}
@media (max-width: 990px) {
  .traffic-landing .section {
    padding: 50px 0px 0px !important;
  }
  .traffic-landing .section.section-bottom-signin {
    padding: 50px 0px 50px !important;
  }
}
@media (max-width: 768px) {
  .traffic-landing .section.hero-top {
    padding: 20px 0px 0px !important;
  }
  .traffic-landing .section.bg-blue.section-top.hero-top:after,
  .traffic-landing .section.section-about:after {
    background-size: 0% !important;
  }
  .section.section-top .section-top--right {
    padding-bottom: 20px;
  }
  .traffic-landing .section-top .check-list li img {
    height: auto;
    max-width: 75px;
  }
}
/* End of County Landing Page sections */