.contactform,.device-image-container h3,.form_head1,.modalboxhead,.modalboxpara,.modalname,.modalpara,.modaltitlecus,.sideMainpara {font-family: Inter, sans-serif}
.content-center-block,.main-section-header,.rating-box {text-align: center}
.cta-buttons .btn,a {text-decoration: none}
.feature-image img {width: 100%;height: 100%;object-fit: cover;object-position: center;transition: .4s;border-radius: 10px;position: relative;z-index: 2}
.features-grid {display: grid;grid-template-columns: repeat(5, 1fr);gap: 1.5rem}
.rating-wrapper {flex-wrap: nowrap !important;gap: 1.5rem}
.rating-box {flex-shrink: 1;min-width: 100px;padding: 10px 20px}
.rating-box img {height: 35px;max-width: 100%;object-fit: contain;flex-shrink: 1}
#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;color: #4a5568;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: #334053;margin-bottom: .75rem;font-size: 1.1rem}
.card-text {color: #4a5568;line-height: 1.6;font-size: .9rem;margin-bottom: 0}
.cta-buttons {margin-top: 3rem}
.cta-buttons .btn {padding: 12px 30px;font-weight: 600;border-radius: 8px;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}
.btn-hero-custom {padding: 15px 30px}
@media (max-width:768px) {
    .section-title {font-size: 1.6rem}
    .cta-buttons {flex-direction: column !important}
    .cta-buttons a {width: 100%;margin-bottom: 10px}
    .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 (max-width:992px) {
    .section-title {font-size: 1.6rem;margin-bottom: 1rem !important}
    .feature-icon {width: 45px;height: 45px}
    .feature-icon i {font-size: 1.3rem}
}
@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)}}
.color-edit-1 {background: linear-gradient(to bottom, #dcf4f7, rgba(220, 244, 247, .4));border-radius: 10px}
.color-edit {background: linear-gradient(to bottom, rgba(226, 246, 205, .6), rgba(226, 246, 205, .3));border-radius: 10px}
.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: #5c6675}
.hero-dashboard-wrapper {padding: 30px 0 40px;display: flex;align-items: center}
.main-container-fluid {width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 20px}
.mobile-break {display: inline}
.title-section-block {margin-bottom: 60px}
.primary-heading-text {font-size: 2.5rem;font-weight: 700;color: #4a5568;margin-bottom: 16px;line-height: 1.2}
.subtitle-description-text {font-size: 1.125rem;color: #64748b;max-width: 600px;margin: 0 auto}
.dashboard-cards-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 30px;margin-bottom: 60px}
.feature-card-item { border-radius: 16px;transition: transform .3s, box-shadow .3s;animation: .6s forwards fadeInUp}
.feature-card-item:hover {transform: translateY(-4px);box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}
.card-visual-area {height: 200px;display: flex;align-items: center;justify-content: center;border-radius: 12px;overflow: hidden;position: relative}
.feature-card-image {width: 100%;height: auto;object-fit: contain;transition: height .3s}
.app-store-button:hover,.feature-card-item:hover .feature-card-image {transform: scale(1.05)}
.download-buttons-section {display: flex;justify-content: center;gap: 9px;flex-wrap: wrap}
.app-store-button {display: inline-block;transition: transform .3s}
.store-badge-image {height: 60px;width: auto}
.custom-btn {width: auto;display: inline-block}
.consulation_card {position:sticky;top:125px;z-index:1}
@media (max-width:768px) {
    .custom-btn,.mobile-break {display: block}
    .main-content {flex-direction: column;text-align: center}
    .text-section {width: 100%;margin-bottom: 2rem}
    .feature-card-image {width: auto;max-width: 100%}
    .custom-btn {width: 100%}
    .hero-dashboard-wrapper {padding: 25px 0}
    .main-container-fluid {padding: 0 16px}
    .primary-heading-text {font-size: 2rem}
    .subtitle-description-text {font-size: 1rem}
    .dashboard-cards-grid {grid-template-columns: 1fr;gap: 20px;margin-bottom: 40px}
    .feature-card-item {padding: 16px}
    .download-buttons-section {gap: 16px}
    .store-badge-image {height: 50px}
}
@media (max-width:480px) {
    .primary-heading-text {font-size: 1.75rem}
    .title-section-block {margin-bottom: 40px}
}
@keyframes fadeInUp {
    from {opacity: 0;transform: translateY(30px)}
    to {opacity: 1;transform: translateY(0)}
}
.feature-card-item:first-child {animation-delay: .1s}
.feature-card-item:nth-child(2) {animation-delay: .2s}
.feature-card-item:nth-child(3) {animation-delay: .3s}
.feature-card-item:nth-child(4) {animation-delay: .4s}
.card-visual-area::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, rgba(59, 130, 246, .1), rgba(34, 197, 94, .1));opacity: 0;transition: opacity .3s;z-index: 1}
.feature-card-item:hover .card-visual-area::before {opacity: 1}
.vehicle-tracking-wrapper {background-color: #fff;padding: 60px 0}
.main-section-header {margin-bottom: 50px}
.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}
#selectService,.content-description-area {text-align: left}
.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;transition: color .3s;font-size: 16px}
.section-toggle-button:hover {color: #2980b9}
.toggle-icon-element {transition: transform .3s}
.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;margin-top: 20px;flex-wrap: nowrap;display: flex;gap: 10px;flex-wrap: nowrap}
.action-buttons-row button {width: auto}
.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}
.tertiary-action-btn:hover {background-color: #7f8c8d}
@media (max-width:768px) {
    .action-buttons-row {flex-direction: column;gap: 12px;justify-content: center}
    .action-buttons-row button {width: 100%;display: block}
    .primary-section-title {font-size: 2rem}
}
@media (max-width:576px) {
    .rating-box img {height: 25px}
    .rating {font-size: 13px}
    .rating-box {min-width: 60px}
    .platform-tag {font-size: .8rem;padding: 5px 12px}
    .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;text-align: left}
    .card-text {font-size: .9rem}
    .vehicle-tracking-wrapper {padding: 0px 0}
    .primary-section-title {font-size: 1.8rem}
    .device-info-section {padding: 20px}
}
.device-showcase-wrapper {padding: 80px 0;min-height: 100vh;display: flex;align-items: center}
.primary-section-title {font-size: 2.5rem;font-weight: 700;color: #4a5568;margin-bottom: 0;letter-spacing: -.5px}
.feature-highlight-card {background: #d0f4f9;border-radius: 20px;padding: 10px;box-shadow: 0 10px 30px rgba(0, 0, 0, .1);transition: transform .3s, box-shadow .3s;border: none}
.feature-highlight-card:hover {transform: translateY(-5px);box-shadow: 0 20px 40px rgba(0, 0, 0, .15)}
.card-visual-container {width: 100%;height: 200px;border-radius: 15px;overflow: hidden;background: #f8f9fa;display: flex;align-items: center;justify-content: center;position: relative}
.feature-showcase-image {width: 100%;height: 100%;object-fit: cover;border-radius: 15px}
.feature-card-heading {font-size: 1.4rem;font-weight: 600;color: #4a5568;line-height: 1.3;margin-bottom: 15px}
.feature-detail-text {font-size: .95rem;line-height: 1.6;color: #6c757d;margin-bottom: 0;text-align: justify}
.my-secondary-btn,.primary-cta-button,.secondary-info-button {font-weight: 600;font-size: 1rem;transition: .3s;cursor: pointer}
.my-action-buttons button {width: auto;display: inline-block;padding: 10px 20px;font-size: 16px;border: none;font-weight:600}
.my-primary-btn {margin-right: 12px;background: linear-gradient(to right, #009644, #18adc0);background-color: #00c96b;border-radius: 10px;border: none;color: #fff}
.my-secondary-btn,.primary-cta-button {border: none}
.my-primary-btn:hover,.primary-cta-button:hover {background: #218838;transform: translateY(-2px);box-shadow: 0 5px 15px rgba(40, 167, 69, .3)}
.my-secondary-btn {background: #e4fbfe;color: #148899;border-radius: 10px}
.my-secondary-btn:hover,.secondary-info-button:hover {background: #0056b3;transform: translateY(-2px);box-shadow: 0 5px 15px rgba(0, 123, 255, .3)}
@media (max-width:768px) {.my-action-buttons button {width: 100% !important;display: block;margin-right: 0 !important;margin-bottom: 12px}}
.primary-cta-button {background: linear-gradient(to right, #009644, #18adc0);color: #fff;padding: 12px 30px;border-radius: 10px}
.secondary-info-button {background: #e4fbfe;color: #148899;border: none;padding: 12px 30px;border-radius: 10px}
.modalname,.modalpara,.modaltitlecus {color: #000 !important}
@media (max-width:991.98px) {
    .primary-section-title {font-size: 2.2rem}
    .device-showcase-wrapper {padding: 60px 0}
    .feature-highlight-card {padding: 25px;margin-bottom: 20px}
}
@media (max-width:767.98px) {
    .primary-section-title {font-size: 1.9rem}
    .device-showcase-wrapper {padding: 40px 0}
    .feature-highlight-card {padding: 20px}
    .card-visual-container {height: 180px}
    .feature-card-heading {font-size: 1.5rem}
    .feature-detail-text {font-size: .9rem}
    .primary-cta-button,.secondary-info-button {padding: 10px 25px;font-size: .95rem;display: block;width: 100%;max-width: 200px;margin: 0 auto 10px}
    .action-buttons-container {display: flex;flex-direction: column;align-items: center}
}
@media (max-width:575.98px) {
    .primary-section-title {font-size: 1.5rem;margin-bottom: 1rem !important}
    .feature-highlight-card {padding: 15px}
    .card-visual-container {height: 160px}
}
.feature-highlight-card .feature-card-heading {transition: color .3s}
.feature-highlight-card:hover .feature-card-heading {color: #007bff}
.primary-cta-button:focus,.secondary-info-button:focus {outline: rgba(0, 123, 255, .3) solid 3px;outline-offset: 2px}
@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}
#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}
.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: 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}
}
.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}
.video-overlay {position: absolute;bottom: -17px;left: 20px;right: 20px;z-index: 10;margin: 0 auto;width: 71%}
.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;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}
#mymodalpopup .modal-content {width: 50%}
@media screen and (max-width:768px) {#mymodalpopup .modal-content {width: 100%}}
.download-buttons-section .app_img {width: 187px;height: 68px}