.contactform, .device-image-container h3, .form_head1, .modalboxhead, .modalboxpara, .modalname, .modalpara, .modaltitlecus, .sideMainpara {font-family: Inter, sans-serif}
html {font-display: swap}
.hero-wrapper {display: flex;flex-direction: column;padding: 1rem}
.hero-content, .hero-image {width: 100%;padding: 1rem 0}
.hero-buttons {display: flex;flex-direction: column;gap: 1rem;margin-top: 1rem}
.hero-buttons a {width: 100%;text-align: center}
@media (max-width:767.98px) {
    .btn {font-size: 1rem;padding: 12px 16px}
}
.rating-wrapper {flex-wrap: nowrap !important;gap: 1.5rem}
.rating-box {flex-shrink: 1;text-align: center;min-width: 100px;padding: 10px 20px}
.rating-box img {height: 35px;/*max-width: 100%;*/object-fit: contain;flex-shrink: 1}
.section-header {text-align: center;margin-bottom: 4rem}
.section-title {color: #4a5568;line-height: 1.2}
.section-subtitle {color: #6c757d;font-size: 1.125rem;max-width: 650px;margin: 0 auto;line-height: 1.6}
.feature-card {padding: 2rem}
.feature-image {width: 100%;height: 200px;margin-bottom: 1.5rem;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;border-radius: 10px}
.content-image:hover img,.feature-card:hover .feature-image img {transform: scale(1.05)}
.feature-title {font-size: 1.25rem;line-height: 1.3}
.feature-description {margin-bottom: 1.5rem;font-size: .95rem}
.learn-more-btn {background: #fff;color: #148899;border: 1px solid #148899;padding: .35rem .7rem;border-radius: 8px;text-decoration: none;display: inline-flex;align-items: center;gap: .5rem;font-weight: 500;transition: .3s}
.learn-more-btn:hover {background: #148899;color: #fff;text-decoration: none;transform: translateY(-2px);box-shadow: 0 4px 15px rgba(20, 136, 153, .3)}
.learn-more-btn i,.toggle-icon-element {transition: transform .3s}
.learn-more-btn:hover i {transform: translateX(3px)}
.btn-gradient {padding: 12px 30px;font-size: 16px;font-weight: 600;transition: .3s;box-shadow: 0 4px 15px rgba(0, 150, 68, .3);text-decoration: none;display: inline-block}
#submit_btn1 {padding: 12px 30px !important;}
@media (max-width:992px) {
    .section-title {font-size: 2rem;margin-bottom: 1rem}
    .section-subtitle {font-size: 1rem}
    .feature-image {height: 180px}
}

@media (max-width:768px) {
    .rating-wrapper {gap:0;}
    .section-header {margin-bottom: 3rem}
    .section-title {font-size: 1.75rem}
    .section-subtitle {font-size: .95rem}
    .feature-card {margin-bottom: 2rem;padding: 1.5rem}
    .feature-image {height: 160px}
    .feature-title {font-size: 1.1rem}
    .feature-description {font-size: .9rem}
}
.main-title {color: #4a5568;font-weight: 700;text-align: center;margin-bottom: 3rem;font-size: 2.5rem}
.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}
.camera-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));gap: 10px;margin-bottom: 20px}
.feature-image img {object-fit: cover;object-position: center;width: 100%;height: 100%;object-fit: cover;object-position: center;transition: .4s;border-radius: 10px;position: relative;z-index: 2}
.feature-title {color: #4a5568;font-weight: 600;margin-bottom: 1rem}
.feature-description {color: #6c757d;line-height: 1.6}
.features-grid {display: grid;gap: 2rem;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));padding: 1rem 0}
.feature-card {background-color: #f8f9fa}
@media (max-width:576px) {
    .rating-box img {height: 25px}
    .rating {font-size: 13px;display: flex}
    .rating-box {min-width: 60px}
    .camera-view i,.feature-icon i,.section-title {font-size: 1.5rem}
    .feature-image {height: 140px}
    .learn-more-btn {padding: .5rem 1rem;font-size: .9rem}
    .camera-view.large i {font-size: 2rem}
    .section-bg {padding: 1.5rem;margin: 15px}
    .feature-card {padding: 1rem}
    .card-title {font-size: 1.1rem}
    .card-text {font-size: .95rem}
}
#selectService,.platform-tag,select {font-size: 14px}
.platform-tag {display: inline-flex;align-items: center;gap: 8px;padding: 6px 16px;border-radius: 999px;font-weight: 500;position: relative;color: #334053;background: #fff;z-index: 0}
.platform-tag::before {content: "";position: absolute;top: 0;left: 15px;right: 15px;height: 1px;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;transition: .3s;height: 100%;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,.card-text:last-child {margin-bottom: 0;color: #6c757d}
.card-text {line-height: 1.6;font-size: .9rem}
.cta-buttons {margin-top: 3rem}
.cta-buttons .btn {padding: 12px 30px;font-weight: 600;border-radius: 8px;text-decoration: none;transition: .3s}
.btn-gradient {background: linear-gradient(to right, #00c96b, #00b5e2);color: #fff;border: none}
.btn-custom-order {background-color: #e5f6fb;color: #004b5a;border: none}
.unordered-list-content {color: #5c6675}
@media (max-width:768px) {
    .section-title {font-size: 1.6rem}
    .cta-buttons {flex-direction: column !important}
    .case-study-section .cta-buttons {padding: 0 20px;}
    .cta-buttons a {width: 100%;margin-bottom: 10px}
    .feature-card {margin-bottom: 1rem;height: auto;}
    .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-title {font-size: 1rem}
    .card-text {font-size: .85rem}
}
@media (min-width:768px) {
    .hero-wrapper {flex-direction: row;justify-content: space-between;align-items: center;padding: 2rem 4rem}
    .hero-content,.hero-image {width: 48%}
    .hero-buttons {flex-direction: row;justify-content: flex-start}
    .hero-buttons a {width: auto;min-width: 150px}
    .hero-buttons a+a {margin-left: 1rem}
    .col-md-6 {flex: 0 0 auto;width: 50%}
    .features-grid {grid-template-columns: repeat(2, 1fr)}
}
@media (min-width:992px) {
    .col-lg-4 {flex: 0 0 auto;width: 33.33333333%}
    .features-grid {grid-template-columns: repeat(3, 1fr)}
}
@media (min-width:1200px) {
    .features-grid {grid-template-columns: repeat(5, 1fr)}
}
.main-content {display: flex;justify-content: space-between;align-items: center;margin-top: 50px}
.main-content img {width: 100%;height: auto}
.text-section {width: 42%}
.vehicle-tracking-wrapper {background-color: #fff;padding: 60px 0}
.main-section-header {text-align: center;margin-bottom: 50px}
.primary-section-title {font-size: 2.5rem;font-weight: 700;color: #4a5568;margin-bottom: 20px}
.section-description-text {font-size: 1.1rem;color: #6c757d;max-width: 800px;margin: 0 auto;line-height: 1.6}
.individual-device-card {border-radius: 12px;overflow: hidden;transition: transform .3s, box-shadow .3s}
.device-image-container {text-align: center;height: 400px;width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column}
.device-image-container h3 {font-size: 1.2rem;font-weight: 600;color: #4a5568;margin-bottom: 22px;text-align: center;margin-top: 16px}
.device-product-image {width: 100%;height: 100%;object-fit: contain}
.device-info-section {padding: 10px 25px}
.device-model-name {font-size: 1.3rem;font-weight: 600;color: #2980b9;margin-bottom: 5px}
.device-category-label {font-size: .95rem;color: #7f8c8d;margin-bottom: 20px}
.expandable-content-section {border-top: 1px solid #ecf0f1;margin-top: 15px}
.collapsible-item-wrapper {border-bottom: 1px solid #ecf0f1}
.section-toggle-button {width: 100%;padding: 15px 0;background: 0 0;border: none;text-align: left;font-weight: 500;color: #4a5568;display: flex;justify-content: space-between;align-items: center;cursor: pointer;font-size: 16px;transition: color .3s}
.section-toggle-button:hover {color: #2980b9}
.section-toggle-button[aria-expanded=true] .toggle-icon-element {transform: rotate(180deg)}
.collapsible-content-area {padding: 0 0 15px;color: #6c757d}
.primary-action-btn,.secondary-action-btn,.tertiary-action-btn {padding: 8px 16px;font-size: .9rem;font-weight: 500;cursor: pointer;transition: background-color .3s}
.feature-list-container ul {list-style: none;padding: 0;margin: 0}
.feature-list-container li {padding: 5px 0 5px 20px;color: #5d6d7e;position: relative}
.feature-list-container li:before {content: "•";color: #27ae60;font-weight: 700;position: absolute;left: 0}
.action-buttons-row {display: flex;gap: 10px;margin-top: 20px;flex-wrap: nowrap                             }
.primary-action-btn {background: linear-gradient(to right, #009644, #18adc0);color: #fff;border: none;border-radius: 6px  }
.primary-action-btn:hover {background-color: #219a52}
.secondary-action-btn, .tertiary-action-btn {background-color: #e4fbfe;color: #148899;border: none;border-radius: 6px}
.modalname,.modalpara,.modaltitlecus {color: #000 !important}
.tertiary-action-btn:hover {background-color: #7f8c8d}
@media (max-width:768px) {
    .main-content {flex-direction: column;text-align: center;margin-top: 0;}
    .text-section {width: 100%;margin-bottom: 2rem}
    .primary-section-title {font-size: 2rem}
    .action-buttons-row {justify-content: center}
}
@media (min-width:850px) {
    #mymodalpopup .modal-dialog { width: 800px; max-width: 800px; margin: 30px auto}
}
.modaltitlecus {font-size: 30px !important;font-weight: 800 !important}
.modalname {font-size: 17px !important}
.modalboxhead,.modalpara {font-size: 15px !important}
.modalpara {font-weight: 500 !important}
.boxsection {background-color: #efefef;border: 15px solid #fff;border-radius: 20px;padding: 15px}
.modalboxhead {font-weight: 800 !important;color: #333 !important}
.modalboxpara {color: #6b6b6b !important;font-size: 12px !important;font-weight: 500 !important}
.video-wrapper {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;width: 100%}
.video-wrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0}
#mymodalpopup .modal-content {width: 50%}
@media screen and (max-width:768px) {
    #mymodalpopup .modal-content {width: 100%}
}
#myModalBtn .modal-content {width: 100%;margin-left: auto;margin-right: auto;margin-top: 92px}
#myModalBtn .close,#myModalDashcam .close {margin-top: 0 !important;margin-right: 0}
#myModalBtn .modal-body {margin-left: 0 !important}
#myModalBtn .img_popup {width: 100%;margin-top: 31%}
#myModalBtn .popup-box {background-color: #f4ef94}
.formwidth {margin-left: auto;margin-right: auto;width: 88%}
.form_head1 {border-top-left-radius: 10px;border-top-right-radius: 10px;margin: 3px 0 21px;text-align: center;line-height: 27px;font-weight: 600}
.contactform {margin-bottom: 1rem;border: none;border-radius: 5px;font-size: 15px !important;color: #000 !important;height: 50px;font-weight: 500;padding: 0 10px}
.contact-custom-close,.custom-close {top: 0;right: 0;z-index: 999;border: none;font-size: 24px;font-weight: 900;opacity: 1;position: absolute;background: 0 0;cursor: pointer}
.modal-body p {font-weight: 500;color: #666;margin: 0}
.custom-close:hover {color: red !important;opacity: 1}
.image-overlay,.modern-tab-btn::before {top: 0;left: 0;right: 0;bottom: 0;opacity: 0}
.custom-close {color: red}
@media (max-widtH:767px) {
    .custom-close {position: absolute;top: 0;right: 0}
    .hero-right-container::before {width: 100%}
    .box.arrow-left:after {content: " ";position: absolute;left: -18px !important;top: 48% !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}
}
.contact-custom-close {color: #fff;text-shadow: 0 0 transparent}
.sideMainpara {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}
.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}
.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}
.hero_list {display: flex;gap: 1.9rem}
.accordion-view {display: none}
.modern-features-section {position: relative;overflow: hidden}
.modern-features-section::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23e2e8f0" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');pointer-events: none}
.section-header-modern {position: relative;z-index: 2}
.modern-section-title {font-size: 2.5rem;font-weight: 700;color: #4a5568;margin-bottom: 1.5rem}
.modern-section-subtitle {font-size: 1.125rem;color: #64748b;line-height: 1.7;max-width: 800px;margin: 0 auto}
.stat-item,.tab-icon {color: #fff}
.modern-tab-container {position: relative;z-index: 2;margin-top: 3rem}
.modern-tab-nav {margin-bottom: 0;height: 100%}
.tab-nav-wrapper {display: flex;flex-direction: column;gap: 2.2rem;background: linear-gradient(180deg, rgba(220, 244, 247, .8) 0, rgba(220, 244, 247, .3) 100%);backdrop-filter: blur(10px);border-radius: 20px;padding: 1.5rem;border: 1px solid rgba(255, 255, 255, .2);height: 100%}
.modern-tab-btn,.tab-icon {align-items: center;display: flex;position: relative}
.modern-tab-btn {background: 0 0;border: none;padding: 1.25rem 1.5rem;border-radius: 16px;cursor: pointer;transition: .3s cubic-bezier(.4, 0, .2, 1);gap: 1rem;width: 100%;overflow: hidden;min-height: 70px}
.modern-tab-btn::before {content: '';position: absolute;background: linear-gradient(135deg, #3b82f6 0, #1d4ed8 100%);transition: opacity .3s;border-radius: 16px}
.modern-tab-btn.active,.modern-tab-btn.active .tab-icon,.tab-icon {background: rgba(255, 255, 255, .562)}
.modern-tab-btn:hover::before {opacity: .1}
.modern-tab-btn.active::before {opacity: .15}
.modern-tab-btn.active {border: 1px solid rgba(59, 130, 246, .3);transform: translateY(-2px);box-shadow: 0 8px 25px rgba(59, 130, 246, .2)}
.tab-icon {width: 50px;height: 50px;border-radius: 12px;justify-content: center;font-size: 1.25rem;z-index: 2;transition: .3s;flex-shrink: 0}
.tab-icon i {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;line-height: 1;color: #39b7d7}
.modern-tab-btn.active .tab-icon {transform: scale(1.1)}
.tab-content {position: relative;z-index: 2;text-align: left;display: flex;flex-direction: column;justify-content: center;flex: 1}
.tab-content h3 {font-size: 1.125rem !important;font-weight: 600;color: #1e293b;margin: 0;transition: color .3s;line-height: 1.3}
.modern-tab-btn.active .tab-content h3 {color: #4a5568}
.tab-content p {font-size: .875rem;color: #64748b;margin: 0;transition: color .3s}
.content-text h3,.stat-number {font-size: 2rem;font-weight: 700}
.modern-tab-btn.active .tab-content p {color: #475569}
.modern-tab-content {background: linear-gradient(180deg, rgba(220, 244, 247, .8) 0, rgba(220, 244, 247, .3) 100%);backdrop-filter: blur(20px);border-radius: 24px;padding: 3rem;border: 1px solid rgba(255, 255, 255, .3);min-height: 500px}
.tab-panel {display: none;animation: .6s ease-out fadeInUp}
.tab-panel.active {display: block}
@keyframes fadeInUp {
    from {opacity: 0;transform: translateY(30px)}
    to {opacity: 1;transform: translateY(0)}
}
.panel-content {display: flex;flex-direction: column;gap: 2rem}
.content-image {position: relative;border-radius: 20px;overflow: hidden;box-shadow: 0 15px 35px rgba(0, 0, 0, .1)}
.content-image img {width: 100%;height: auto;object-fit: cover;transition: transform .3s}
.image-overlay {position: absolute;background: linear-gradient(135deg, rgba(59, 130, 246, .8) 0, rgba(29, 78, 216, .8) 100%);transition: opacity .3s;display: flex;align-items: center;justify-content: center}
.content-image:hover .image-overlay {opacity: 1}
.overlay-stats {display: flex;gap: 2rem;text-align: center}
.stat-number {display: block;margin-bottom: .5rem}
.stat-label {font-size: .875rem;opacity: .9}
.content-text h3 {color: #1e293b;margin-bottom: 1.5rem;background: linear-gradient(135deg, #1e293b 0, #475569 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text}
.content-text p {font-size: 1.125rem;color: #64748b;line-height: 1.7;margin-bottom: 2rem}
.feature-highlights {display: flex;flex-direction: column;gap: 1rem}
.highlight-item {display: flex;align-items: center;gap: .75rem;padding: .75rem 1rem;background: rgba(59, 130, 246, .05);border-radius: 12px;border-left: 4px solid #3b82f6;transition: .3s}
.highlight-item:hover {background: rgba(59, 130, 246, .1);transform: translateX(5px)}
.highlight-item i {color: #3b82f6;font-size: 1.125rem}
.highlight-item span {color: #475569;font-weight: 500}
@media (max-width:1200px) {
    .modern-tab-btn {padding: 1rem 1.25rem }
    .panel-content {gap: 1.5rem}
}
@media (max-width:992px) {
    .section-title { font-size: 1.5rem;margin-bottom: 1rem !important;}
    .feature-icon {width: 45px;height: 45px}
    .feature-icon i { font-size: 1.3rem}
    .modern-section-title {font-size: 2rem}
    .tab-nav-wrapper {flex-direction: row;flex-wrap: wrap;justify-content: center;padding: 1rem}
    .modern-tab-btn {min-width: 200px;max-width: 300px;padding: 1rem 1.25rem}
    .modern-tab-content {padding: 2rem}
}
@media (max-width:768px) {
    .hero_list,.more-articles-btn,.related-resources-grid,.related-resources-header {display: block !important}
    .modern-tab-container .row>div[class*=col-lg] {display: none}
    .accordion-view {display: block;margin-top: 0}
    .accordion-item {margin-bottom: 1rem;border-radius: 12px;overflow: hidden;border: 1px solid rgba(57, 183, 215, .2);box-shadow: 0 2px 8px rgba(0, 0, 0, .1);transition: .3s}
    .accordion-item:hover {box-shadow: 0 4px 12px rgba(0, 0, 0, .15);border-color: rgba(57, 183, 215, .4)}
    .accordion-button {width: 100%;background: 0 0;border: none;outline: 0;padding: 1.25rem 1.5rem;cursor: pointer;display: flex;align-items: center;justify-content: space-between;transition: .3s}
    .accordion-button:hover {background: rgba(57, 183, 215, .05)}
    .accordion-button.active,.accordion-icon {background: rgba(57, 183, 215, .1)}
    .accordion-icon {width: 45px;height: 45px;border: 2px solid rgba(57, 183, 215, .3);border-radius: 8px;display: flex;align-items: center;justify-content: center;font-size: 1.1rem;color: #39b7d7;flex-shrink: 0;transition: .3s}
    .accordion-button.active .accordion-icon {background: rgba(57, 183, 215, .2);border-color: rgba(57, 183, 215, .5);transform: scale(1.05)}
    .accordion-title {flex: 1;margin-left: 1rem;margin-right: 1rem;font-size: 1.1rem;font-weight: 600;color: #4a5568;line-height: 1.4;transition: color .3s}
    .accordion-button.active .accordion-title {color: #39b7d7}
    .accordion-toggle {font-size: 1.5rem;font-weight: 700;color: #39b7d7;transition: .3s;flex-shrink: 0}
    .accordion-content {display: none;background: #fff;border-top: 1px solid rgba(57, 183, 215, .2)}
    .accordion-image {padding: 0}
    .accordion-image img {width: 100%;object-fit: cover;border-radius: 0}
    .accordion-text {padding: 1.5rem}
    .accordion-text p {font-size: .95rem;line-height: 1.6;margin-bottom: 0;color: #64748b}
    .accordion-text a {color: #39b7d7;text-decoration: none;font-weight: 500}
    .accordion-text a:hover {color: #2c9bb8;text-decoration: underline}
    .modern-section-title {font-size: 1.75rem}
    .content-text p,.modern-section-subtitle,.tab-content h4,.tab-icon {font-size: 1rem}
    .modern-tab-btn {padding: 1rem 1.5rem;gap: .75rem}
    .tab-icon {width: 40px;height: 40px}
    .tab-content p {font-size: .8rem}
    .modern-tab-content {padding: 1.5rem;min-height: auto}
    .content-text h3,.stat-number {font-size: 1.5rem}
    .content-image img {height: 250px}
    .overlay-stats {gap: 1rem}
    .more-articles-btn {margin: 0 auto;text-align: center !important}
    .resource-card {margin-bottom: 35px}
    .text-3 {font-size: 1.5rem;margin-top: 15px;margin-bottom: 1rem;text-align: center !important;}
    .modern-section-title {margin-bottom: 1rem;}
    .choose_secn .container-fluid.py-5 {padding: 0 !important;}
    .app_img {/*width: 153px !important;*/height: 36px !important}
    .modern-testimonial-control {top: 65%}
    .app-buttons { flex-direction: row !important}
    .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}
    .related-resources-title {font-size: 24px !important;text-align: center;margin-bottom: 1.5rem !important;}
}
@media (max-width:576px) {
    .platform-tag {font-size: .8rem;padding: 5px 12px}
    .highlight-item i,.platform-tag i,.section-description-text {font-size: 1rem}
    .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}
    .choose_secn .card-title { font-size: 1.1rem; text-align: left; margin-bottom: 0;}
    .choose_secn .cta-buttons {margin-top: 0 !important;}
    .card-text {font-size: .9rem}
    .vehicle-tracking-wrapper {padding: 0px 0}
    .device-image-container h3 {font-size: 1.4rem;}
    .modern-section-title,.primary-section-title,.trusted-title {font-size: 1.5rem}
    .trusted-section {padding: 0 0;}
    .device-info-section {padding: 20px}
    .modern-features-section {padding: 2rem 0}
    .modern-tab-btn {padding: .75rem 1rem;border-radius: 12px}
    .tab-icon {width: 35px;height: 35px;font-size: .9rem}
    .modern-tab-content {padding: 1rem;border-radius: 16px;margin-top: 26px}
    .content-text h3 {font-size: 1.25rem}
    .highlight-item {padding: .5rem .75rem}
}
.resources_section {margin-bottom: 60px;margin-top: 60px}
.related-resources-title {font-size: 32px; font-weight: 700; color: #4a5568; margin: 0;}
.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;text-decoration: none;font-weight: 500;font-size: 16px;text-align: center;box-shadow: 0 2px 4px rgba(0, 0, 0, .1);transition: .3s}
.more-articles-btn:hover {color: #fff !important}
.custom-img {width: 100%;height: auto;border-radius: 6px}
.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}
.app_img {height: 68px}