.btn-custom-order,.btn-gradient,.cta-buttons .btn,.more-articles-btn {text-decoration: none;transition: .3s}
.hero {background-color: #f9f9f9;padding: 0 2rem 4rem}
.hero h1 {font-weight: 700;font-size: 2.5rem;color: #4a5568}
.hero p {color: #6c757d}
.feature-list li {margin-bottom: .5rem;display: flex;align-items: center;color: #6c757d}
.hero-buttons .btn {padding: .6rem 1.5rem;font-weight: 500}
.hero-buttons .btn-gradient {background: linear-gradient(to right, #00c853, #b2ff59);color: #fff;border: none}
.hero img {max-width: 100%;height: auto;margin-top: -60px}
.rating-section {background-color: #fff;padding: 3rem 1rem}
.rating-box,.service-box {padding: 10px 20px}
.rating-box img {max-height: 35px;object-fit: contain}
.rating-box {min-width: 100px}
.rating {font-size: 1.1rem;color: #4a5568 !important}
.service-symbol {padding: 5px 8px;background-color: #fff;border-radius: 10px}
.action-btn-blue,.action-btn-green {padding: 12px 30px;border-radius: 8px;font-weight: 600}
.status-indicator {background-color: #e8f5e8;display: inline-flex;align-items: center}
.success-mark {display: flex;align-items: center;justify-content: center;margin-right: 10px}
.action-btn-green {background-color: #28a745;border-color: #28a745}
.action-btn-green:hover {background-color: #218838;border-color: #218838}
.action-btn-blue {background-color: #b8e6f0;border-color: #b8e6f0;color: #17a2b8}
.action-btn-blue:hover {background-color: #a0d9e8;border-color: #a0d9e8;color: #138496}
.main-content {display: flex;justify-content: space-between;align-items: center}
.main-content img {width: 100%;height: auto}
.text-section {width: 42%}
.card-text:last-child {margin-bottom: 0;color: #6c757d;text-align: left}
.camera-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));gap: 10px;margin-bottom: 20px}
.feature-image img {width: 100%;height: 100%;object-fit: cover;object-position: center;transition: .4s;border-radius: 10px;position: relative;z-index: 2}
.camera-view {aspect-ratio: 1;border-radius: 12px;overflow: hidden;position: relative;background: linear-gradient(135deg, #667eea 0, #764ba2 100%);display: flex;align-items: center;justify-content: center}
.camera-view.large {grid-column: span 2;grid-row: span 2;aspect-ratio: 16/9}
.camera-view i {font-size: 2rem;color: #fff;opacity: .8}
.camera-view.large i {font-size: 3rem}
.section-bg {background: linear-gradient(to bottom, rgba(226, 246, 205, .6) 0, rgba(226, 246, 205, .3) 100%);border-radius: 20px;padding: 2rem;margin-bottom: 2rem}
.btn-custom-order,.btn-gradient {font-weight: 600;border-radius: 10px;display: inline-block}
.main-title {color: #4a5568;font-weight: 700;text-align: center;margin-bottom: 3rem;font-size: 2.5rem}
.feature-title {color: #4a5568;font-weight: 600;margin-bottom: 1rem}
.feature-description {color: #6c757d;line-height: 1.6}
.distracted-driving-section .feature-description {padding-right: 32%}
.row {display: flex;flex-wrap: wrap}
.col-lg-6.image-col {order: 1;flex: 1 1 50%}
.col-lg-6.content-col {order: 2;flex: 1 1 50%}
@media (max-width:768px) {
    .distracted-driving-section .feature-description {padding-right: 0}
    .hero {text-align: center;padding: 2rem 1rem}
    .hero h1 {font-size: 1.5rem}
    .hero p {text-align: center !important}
    .hero-buttons {flex-direction: column;gap: .75rem;justify-content: center}
    .hero-buttons .btn {width: 100%}
    .row {flex-direction: column}
    .col-lg-6.image-col {order: 1;width: 100%}
    .col-lg-6.content-col {order: 2;width: 100%}
}
.offer-container {max-width: 1240px;margin: 0 auto;padding: 30px;border-radius: 10px;background: linear-gradient(90deg, #009644 25%, #18adc0 100%) !important;box-shadow: 0 4px 8px rgba(0, 0, 0, .1)}
.offer-title {font-size: 13px;border: 1px solid #fff;background-color: transparent;color: #fff;margin-bottom: 15px;border-radius: 40px;padding: 10px 15px}
.card-edit {background-color: #e4f1d8;border-radius: 16px}
.offer-subtitle {font-size: 38px;font-weight: 700;margin-bottom: 12px;color: #fff}
.offer-text {font-size: 20px;margin-bottom: 25px;line-height: 1.5;color: #fff}
.offer-text strong {font-size: 24px}
.timer {font-size: 16px;color: rgba(255, 255, 255, .733)}
.timer-segment {display: inline-block;background: #1a253344;color: #fff;padding: 3px 4px;border-radius: 5px;font-size: 18px;margin: 0 2px}
.btn-claim {background: #fff;color: #148899;padding: 10px 14px;border-radius: 5px;border: none;font-size: 15px;margin-right: 20px !important}
.btn-claim:hover {background-color: #e2e2e2}
.dashboard-wrapper {min-height: 100vh;padding: 60px 0}
.status-indicator {display: inline-flex;align-items: center;gap: 12px;background: rgba(25, 135, 84, .1);padding: 12px 24px;border-radius: 50px;border: 1px solid rgba(25, 135, 84, .2);margin-bottom: 2rem}
.success-mark {width: 32px;height: 32px;background: #198754;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 16px}
.feature-card,.service-box {height: 100%;transition: .3s}
.color-edit {background: linear-gradient(to bottom, rgba(226, 246, 205, .6), rgba(226, 246, 205, .3));border-radius: 10px}
.color-edit-1 {background: linear-gradient(to bottom, #dcf4f7, rgba(220, 244, 247, .4));border-radius: 10px}
.primary-heading {font-size: 3.5rem;font-weight: 700;color: #212529;margin-bottom: 2rem;line-height: 1.2}
.info-paragraph {font-size: 1.125rem;line-height: 1.7;color: #6c757d;max-width: 800px;margin: 0 auto 1.5rem}
.cta-buttons,.hero-buttons {margin-top: 3rem}
.service-box {border: none;box-shadow: 0 4px 20px rgba(0, 0, 0, .08);border-radius: 16px;background: #fff}
.service-box:hover {transform: translateY(-5px);box-shadow: 0 8px 30px rgba(0, 0, 0, .12)}
.service-box .card-body {padding: 2rem 1.5rem;text-align: center}
.service-symbol {font-size: 2.5rem;color: #0d6efd;margin-bottom: 1rem}
.service-box .card-title {font-size: 1.25rem;color: #212529;margin-bottom: 1rem}
.service-box .card-text {font-size: .95rem}
.hero-buttons {gap: 1rem;text-align: center}
.btn-custom-order:hover {background-color: #dae8e9;color: #148899;transform: translateY(-2px);box-shadow: 0 8px 25px rgba(102, 126, 234, .3)}
.span-edit {font-weight: bolder;margin-right: 5px}
.responsive-btn {width: auto;display: inline-block;padding: .5rem 1rem}
@media (max-width:767.98px) {
    .responsive-btn {width: 100%;display: block}
}
.section-edit {background: linear-gradient(to bottom, #dcf4f7, rgba(220, 244, 247, .4));border-radius: 20px;padding: 2rem}
.features-grid {display: grid;grid-template-columns: repeat(5, 1fr);gap: 1.5rem}
.platform-tag {display: inline-flex;align-items: center;padding: 6px 16px;border-radius: 30px;font-size: .9rem;font-weight: 500;color: #334053;background: padding-box #fff;position: relative;z-index: 1}
.platform-tag::before {content: "";position: absolute;top: 0;left: 15px;right: 15px;height: 0;background: linear-gradient(to right, #00c96b, #00b5e2);border-top-left-radius: inherit;border-top-right-radius: inherit;z-index: 1}
.platform-tag i {color: #00c96b;font-size: 1.2rem;margin-right: 6px}
.section-title {font-weight: 700;font-size: 2.2rem;margin-bottom: 30px}
.feature-card {background: linear-gradient(180deg, rgba(220, 244, 247, .8) 0, rgba(220, 244, 247, .3) 100%);border: 1px solid rgba(57, 183, 215, .1);border-radius: 16px;box-shadow: 0 4px 12px rgba(0, 0, 0, .05)}
.feature-card:hover {transform: translateY(-8px);box-shadow: 0 12px 30px rgba(57, 183, 215, .15);border-color: rgba(57, 183, 215, .3)}
.feature-icon {width: 50px;height: 50px;background: rgba(255, 255, 255, .562);border-radius: 12px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;box-shadow: 0 4px 15px rgba(57, 183, 215, .3)}
.feature-icon i {font-size: 1.5rem;color: #39b7d7}
.card-title {font-weight: 600;color: #4a5568;margin-bottom: .75rem;font-size: 1.1rem}
.card-text {color: #6c757d;line-height: 1.6;font-size: .9rem;margin-bottom: 0}
.cta-buttons .btn {padding: 12px 30px;font-weight: 600;border-radius: 8px}
.btn-gradient {background: linear-gradient(to right, #00c96b, #00b5e2);color: #fff;border: none}
.btn-custom-order {background-color: #dae8e9 !important;color: #004b5a;border: none}
@media (max-width:768px) {
    .hero-buttons .btn,
    .main-content {text-align: center}
    .card-title,.info-paragraph {font-size: 1rem}
    .hero-buttons {flex-direction: column;align-items: stretch}
    .service-box .card-body {padding: 1.5rem 1rem}
    .primary-heading {font-size: 2rem}
    .service-box {margin-bottom: 20px;max-width: 100%}
    .action-btn-blue,.action-btn-green,.cta-buttons a {width: 100%;margin-bottom: 10px}
    .camera-view.large {grid-column: span 3;grid-row: span 1}
    .main-content {flex-direction: column}
    .text-section {width: 100%;margin-bottom: 2rem}
    .offer-container {padding: 20px;margin: 0 15px}
    .offer-text {font-size: 18px}
    .btn-claim {width: 100%;margin-right: 0 !important;margin-bottom: 10px}
    .timer-segment {font-size: 16px;padding: 2px 3px}
    .section-title {font-size: 1.6rem}
    .cta-buttons {flex-direction: column !important}
    .cta-buttons .btn {display: block;width: 100%}
    .cta-buttons .ms-3 {margin-left: 0 !important}
    .feature-icon {width: 40px;height: 40px}
    .feature-icon i {font-size: 1.2rem}
    .card-text {font-size: .85rem}
}
@media (max-width:767.98px) {
    .custom-reorder {display: flex;flex-direction: column}
    .custom-reorder .text-section {order: 1;margin-bottom: 1.5rem}
}
.section-styling {background: #d0f4f9;border-radius: 20px;padding: 2rem;margin-bottom: 2rem}
@media (max-width:992px) {
    .section-title {font-size: 1.5rem;margin-bottom: 1rem !important}
    .fleet_safety_secn .mt-4 {margin-top: 0 !important}
    .feature-icon {width: 45px;height: 45px}
    .feature-icon i {font-size: 1.3rem}
}
@media (max-width:576px) {
    .rating-section .row>div {margin-bottom: 2rem}
    .rating {font-size: .6rem}
    .rating-box {padding: 5px 10px}
    .rating-box img {margin-bottom: .3rem;max-width: 80px}
    .dashboard-wrapper {padding: 30px 0}
    .primary-heading {font-size: 1.8rem}
    .info-paragraph,.platform-tag i {font-size: 1rem}
    .camera-view i,.service-symbol {font-size: 1.5rem}
    .camera-view.large i {font-size: 2rem}
    .offer-text {font-size: 16px}
    .section-bg {padding: 1.5rem}
    .platform-tag {font-size: .6rem;padding: 5px 12px}
    .mx-4 {margin-left: 1rem !important;margin-right: 1rem !important}
    .d-flex {text-align: center}
    .feature-icon {width: 50px;height: 50px}
    .feature-icon i {font-size: 1.4rem}
    .card-title {font-size: 1.1rem;text-align: left}
    .card-text {font-size: .9rem}
}
@media (min-width:768px) {
    .features-grid {grid-template-columns: repeat(2, 1fr)}
}
@media (min-width:992px) {
    .features-grid {grid-template-columns: repeat(3, 1fr)}
}
@media (min-width:1200px) {
    .features-grid {grid-template-columns: repeat(5, 1fr)}
}
.contact-custom-close {position: absolute;top: 0;right: 0;z-index: 999;background: 0 0;border: none;font-size: 24px;cursor: pointer;font-weight: 900;color: #fff;opacity: 1;text-shadow: 0 0 transparent}
.sideMainpara {font-family: Inter, sans-serif;font-size: 16px !important;font-weight: 400 !important;color: #000 !important}
.box {background-color: #1fa0d6;padding: 20px}
.box.arrow-left:after {content: " ";position: absolute;left: 48%;top: 25px;border-top: 20px solid transparent;border-right: 20px solid #1fa0d6;border-left: none;border-bottom: 20px solid transparent}
.feedback-input {font-weight: 500;font-size: 18px;border-radius: 5px;line-height: 22px;background-color: transparent !important;border: 1px solid #fff;transition: .3s;padding: 13px;margin-bottom: 15px;box-sizing: border-box;width: 100%;outline: 0}
.sendEmail {width: 100%;background: #fff;border-radius: 50px !important;border: 0;color: #000;font-size: 20px;transition: .3s;margin-top: -4px}
@media (max-width:767px) {
    .box.arrow-left:after {content: " ";position: absolute;left: -18px !important;top: 52% !important;border-top: 20px solid transparent;border-right: 20px solid #1fa0d6;border-left: none;border-bottom: 20px solid transparent}
    .sideMainHead,.sideMainpara {text-align: left}
    .contact-custom-close {color: #000 !important}
}
.form-overlay {width: 90%;padding: 20px;background: #334053;border-radius: 16px;z-index: 2;color: #000;margin: 20px auto;display: block}
#transparent-form {display: flex;flex-direction: column;gap: 10px}
#transparent-form input {background: rgba(255, 255, 255, .1);border: 1px solid rgba(255, 255, 255, .2);border-radius: 8px;color: #fff;padding: .75rem 1rem;font-size: .95rem}
#transparent-form button {cursor: pointer;padding: 10px 6px;border-radius: 4px;border: none}
#transparent-form label {color: #fff}
#transparent-form h3 {font-size: 22px;color: #fff}
#transparent-form input[type=email],#transparent-form input[type=tel],#transparent-form input[type=text],.iti--allow-dropdown {margin-bottom: 9px}
#phonenumber_cc2 {padding: 0 0 0 50px !important;height: 47px}
#phonenumber_cc2::placeholder,.transparent-form input::placeholder {color: #fff}
#selectService {color: #fff;text-transform: none;text-align: left;white-space: nowrap;text-overflow: ellipsis;width: 100%;height: 45px;overflow: hidden;font-weight: 500;border: none;outline: 0;display: block;background: 0 0}
#selectService option {padding: 5px}
#selectService,select {font-size: 14px}
.select-container {position: relative;width: 100%;border-radius: 8px;margin-bottom: 11px;background: rgba(255, 255, 255, .1);border: 1px solid rgba(255, 255, 255, .2)}
.select-device-container {display: flex;align-items: center;flex-wrap: wrap;padding: 0 12px;border: 1px solid rgba(255, 255, 255, .2);border-radius: 4px;background: rgba(255, 255, 255, .1);color: #fff}
.selected-options {display: flex;flex-wrap: wrap;gap: 10px;margin-right: 10px}
.selected-option {background-color: #28a745;color: #fff;border-radius: 4px;padding: 5px 10px;margin: 0;display: inline-flex;align-items: center;height: 25px}
.selected-option span {margin-right: 10px;font-size: 12px}
.selected-option .close-btn {padding: 0 !important;cursor: pointer;line-height: 1;margin-top: -3px;font-size: 18px}
.coupon_btn {box-shadow: none;outline: 0;background-color: #0963c0;width: 100%;white-space: normal;font-size: 16px !important;background: linear-gradient(90deg, #009644 0, #18adc0 100%);color: #fff}
.coupon_btn:hover {background: linear-gradient(90deg, #007a3a 0, #148899 100%);transform: translateY(-2px);box-shadow: 0 8px 25px rgba(0, 150, 68, .4);color: #fff}
#mymodalpopup .modal-content {width: 50%}
@media screen and (max-width:768px) {
    #mymodalpopup .modal-content {width: 100%}
}
.hero_list {display: flex;gap: 1.9rem}
.competitor_sec .feature-title {text-align: center;vertical-align: sub;align-items: center;justify-content: center;padding-top: 19px;font-size: 1.1rem}
.comparison-table {box-shadow: 0 4px 6px rgba(0, 0, 0, .1);background: #f8f9fa;border-radius: 15px;overflow: hidden;border: 1px solid #e9ecef}
.feature-row {border-bottom: 1px solid #e9ecef}
.feature-row:last-child {border-bottom: none}
.matrack-column {background: #fff;padding: .8rem}
.competitor-column .feature-text,.matrack-column .feature-text {text-align: left}
.competitor-column {padding: .8rem}
.matrack-logo {width: 120px;height: auto;margin-bottom: .5rem}
.check-icon {color: #28a745}
.x-icon {color: #dc3545}
.check-icon,.x-icon {font-size: 1.2rem;margin-right: .5rem}
.feature-text {color: #6c757d;font-size: .95rem;line-height: 1.5;margin: 0}
.header-text {color: #495057;font-weight: 600;font-size: 1.1rem}
@media (max-width:768px) {
    .hero_list,.related-resources-grid,.related-resources-header {display: block !important}
    .comparison-table .row {flex-direction: row}
    .comparison-table-wrapper {overflow-x: auto;-webkit-overflow-scrolling: touch;padding-bottom: 10px}
    .comparison-table {min-width: 900px}
    .comparison-table-wrapper::-webkit-scrollbar {height: 8px}
    .comparison-table-wrapper::-webkit-scrollbar-thumb {background: #ccc;border-radius: 4px}
    .comparison-table-wrapper::-webkit-scrollbar-track {background: #f4f4f4}
    .competitor_sec .feature-title {font-size: 1.1rem !important}
    .section-desc {width: auto}
    .rating-section {padding: 32px 0 0 !important}
    .text-3 {margin-top: 0px;font-size: 1.5rem;margin-bottom: 1rem}
    .main-title {font-size: 1.5rem;margin-bottom: 1rem}
    .feature-title {font-size: 1.5rem !important}
    .main-content h2 {margin-top: 20px;font-size: 1.5rem;margin-bottom: 1rem}
    .visibility_secn {padding-bottom: 0 !important;padding-top: 2rem !important}
    .real_time_insight_secn {padding-top: 0 !important;padding-bottom: 0 !important}
    .real_time_insight_secn .feature-title {margin-top: 20px}
    .incident_prevention_secn {margin-top: 0 !important}
    .distracted-driving-section .feature-image {margin-bottom: 0 !important}
    .distracted-driving-section .feature-title {margin-top: 0 !important}
    .distracted-driving-section .color-edit-1, .distracted-driving-section .color-edit {margin-bottom: 24px !important}
    .section-edit .feature-title {font-size: 1.2rem !important;margin-top: 20px}
    .offer_secn .py-5 {padding: 1rem 0 !important}
    .fleet_safety_secn {margin-bottom: 0 !important}
    .resource-card {margin-bottom: 20px}
    .related-resources-title {font-size: 24px !important;text-align: center;margin-bottom: 1.5rem !important}
    .offer-subtitle {font-size: 1.6rem}
}
.consulation_card {position: sticky;top: 125px;z-index: 1}
.related-resources-title {font-size: 32px; font-weight: 700; color: #4a5568; margin: 0;}
.resources_section {margin-bottom: 60px;margin-top: 60px}
.related-resources-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 40px}
.related-resources-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 30px}
.more-articles-btn {display: inline-block;background: linear-gradient(to right, #00b67a, #00a6c0);color: #fff;padding: 10px 15px;border-radius: 10px;font-weight: 500;font-size: 16px;text-align: center;box-shadow: 0 2px 4px rgba(0, 0, 0, .1)}
.more-articles-btn:hover {color: #fff !important}
.custom-img {width: 100%;height: auto;border-radius: 6px}
.camera-grid.feature-image {margin-bottom: 10px}
@media (max-width:768px) {
    .more-articles-btn {margin: 0 auto;display: block !important;text-align: center !important}
}