@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300;1,400;1,600;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");


body, button, a, p, label, span{
    font-family: 'Inter', sans-serif!important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: HelveticaNeue !important;
}

h1 {

    line-height: 40px !important;
}

h2 {
    font-size: 44px !important;
    line-height: 45px !important;
}

h5 {
    line-height: 15px !important;
}

p,
a {
    font-family: 'Inter', sans-serif!important;
    font-size: 16px !important;
    line-height: 24px !important;
}

.dropdown-toggle::after {
    display: none !important;
}

/* NAVBAR DESKTOP */
.navbar {
    display: flex;
    justify-content: space-between;
}

.navPositionDesktop {
    width: 100%;
    position: absolute;
    top: 60px;
    z-index: 100;
    font-family: 'Inter', sans-serif!important;
}

.navbarLeftSide {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.navbarLeftSide img {
    width: 70%;
    padding-bottom: 10px;
}

.navActiveLabel {
    color: #2fbeba;
}

.footer p:hover {
    color: #2fbeba;
    transition: 0.2s;
}

.noneHover:hover {
    color: #fff !important;
}

.noneHoverButton:hover {
    color: #ffffff5f !important;
}

.navbarServices {
    color: #fff;
    font-family: 'Inter', sans-serif!important;
    margin-left: 40px;
}

.navLogo {
    border-right: 1px solid #999;
}

.scrollItem {
    position: absolute;
    color: #fff;
    display: flex;
    bottom: 2%;
    left: 7%;
}

.scrollItem i {
    font-size: 34px;
}

.scrollItem span {
    font-size: 10px;
    margin-top: 5px;
    line-height: 12px;
}

.navPositionDesktopSection {
    top: 0px;
    background-color: black;
    padding: 15px 0;
    position: relative;
}


/* .navbarServices :first-child {  
    padding-left: 40px;
} */

.navbarServices label {
    margin: 0px 20px;
    transition: all 300ms ease-in-out 0.01s;
    border-bottom: 1px solid rgba(255, 0, 0, 0);

}

.languageButton span {
    transition: all 300ms ease-in-out 0.01s;
    border-bottom: 1px solid rgba(255, 0, 0, 0);
}

.languageButton span:hover {
    color: #33baba;
    /* border-bottom: 1px solid #33baba; */
}

.navbarServices label:hover {
    color: #33baba;
    border-bottom: 1px solid #33baba;

}

.navbarServices .active {
    color: #33baba;
    border-bottom: 1px solid #33baba;
}

.navRightSideBorder {
    padding-bottom: 5px;
}

.navbarRightSide button {
    color: #fff;
}

.navbarRightSide {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.membersLoginButton {
    display: flex !important;
    align-items: center;
    font-size: 11px;
    padding: 0 15px;
    font-family: 'Inter', sans-serif!important;
    padding: 0 !important;
}

.navRightSideBorder i {
    font-size: 28px;
    padding-right: 5px;
}

.navRightSideBorder span {
    display: flex;
    align-items: center;
}

.dropdown-toggle::after {
    display: none;
}

.navRightIcon {
    font-size: 18px;
    padding-left: 10px;
}

.membersLoginButton span {
    display: flex;
    align-items: center;
    line-height: 15px !important;
    text-align: left;
    font-size: 15px;
}

.membersLoginButton i.bi-person {
    font-size: 28px;
    padding-right: 5px;
}

.languageButton {
    display: flex;
    align-items: stretch;
    padding: 0 15px;
    font-family: 'Inter', sans-serif!important;
}

/* .navRightSideBorder {
    border-left: 1px solid rgb(137, 137, 137);
} */

.navbarRightSide button:hover {
    color: #fff;
}

label.form-label.forgerPassword {
    float: right;
    color: #0028c6;
}
.iTracButton.solutionSectionButton {
    margin-top: 15px;
}
.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: #fff;
    background-color: transparent;
    border-color: transparent;
}

.navDropdownBox {
    background-color: #fff !important;
}

.navDropdownBox li button:hover {
    background-color: #d16f1863;
    background-image: linear-gradient(to right, #5164cd, #31bcb9);
}

.navDropdownBox li button {
    color: #000;
    font-family: 'Inter', sans-serif!important;
}

.navDropdownBoxSize {
    width: 300px;
}

.dropdown-menu[data-bs-popper] {
    left: -150px !important;
}

.navDropDownLangauge[data-bs-popper] {
    left: -87px !important;
}

.memberLoginForm {
    padding: 15px;
    font-size: 12px;
}

.memberLoginForm input {
    height: 38px !important;
    border-radius: 5px !important;
}

.memberLoginForm label {
    margin-bottom: 0px;
}

.memberLoginForm .bannerPrimaryBtn {
    display: flex;
    padding: 10px 40px;
    place-content: center;
}

.memberLoginForm .bannerBtn {
    padding-top: 20px;
    font-family: 'Inter', sans-serif!important;
    font-weight: 500;
}

.memberLoginImages .mamberImgFb {
    width: 18%;
}

.memberLoginImages .mamberImgGoogle {
    width: 17%;
}

.memberLoginImages {
    text-align-last: center;
}

.memberLoginOther p {
    text-align: -webkit-center;
    margin: 20px 0 10px 0;
}



/* BANNER SECTION */
.bannerImg1 {
    background: linear-gradient(rgba(0, 0, 0, .9), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(../images/banner01.jpg) 50% / cover;
    height: 85vh;
    position: relative;
}

.bannerImg2 {
    background: linear-gradient(rgba(0, 0, 0, .9), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(../images/banner02.jpg) 50% / cover;
    height: 85vh;
    position: relative;
}

.bannerImg3 {
    background: linear-gradient(rgba(0, 0, 0, .9), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(../images/banner01.jpg) 50% / cover;
    height: 100vh;
    position: relative;
}

button.carousel-control-prev.bannerPrevBtn {
    position: absolute;
    bottom: -85%;
    left: 70%;
}

button.carousel-control-next.bannerNextBtn {
    position: absolute;
    bottom: -85%;
    right: 11%;
}

.bannerPrevBtn .bannerPrevIcon {
    width: 18px;
    height: 15px;
}

.bannerNextBtn .bannerPrevIcon {
    width: 18px;
    height: 15px;
}

.bannerContent {
    position: absolute;
    bottom: 200px;
    top: 30vh;
    width: 100%;
    color: #fff;
}

.carouselOverflow {
    overflow-x: clip;
}

.bannerPrimaryBtn {
    background-image: linear-gradient(to right, #5164cd, #31bcb9);
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 14px;
}

.bannerSecondaryBtn {
    padding-left: 30px;
    font-family: 'Inter', sans-serif!important;
    font-size: 14px;
}

.bannerBtn {
    padding-top: 50px;
    font-family: 'Inter', sans-serif!important;
    font-weight: 500;
}

.bannerContent span {
    font-family: 'Inter', sans-serif!important;
    color: rgba(255, 255, 255, 0.8);
}

.bannerContent h1 {
    padding-bottom: 10px;
}


.offcanvas-menu {
    display: none;
}



/* INDEX SECTION ONE [About] */
.indexAboutSection {
    padding: 0 50px 100px 50px;
}

.aboutTrackImage img {
    width: 100%;
}

.indexAboutContentParagrafe {
    width: 400px;
    margin: 30px 0 30px 0;
    color: rgba(0, 0, 0, 0.8);
    line-height: 20px;
}

.iTracButton.indexSignupButton {
    text-align: -webkit-center;
}

.indexAboutSection>div {
    display: flex;
    align-items: center;
}

.aboutTrackerSection {
    text-align: center;
}

/* .secondaryBodyBtn{
    color: #000;
    border: 2px solid ;
} */
.secondaryBodyBtn {
    border-radius: 100rem;
    padding: 1rem;
    font-size: 1rem;
    color: #5164cd !important;
    padding: 10px 50px;
    box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
    border: solid 3px transparent;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #5164cd, #31bcb9);
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px #fff inset;
}

.secondaryBodyBtn:hover {
    box-shadow: none;
    color: #fefefe !important;
    transition: .5s;
}



.bannerBtn .button {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #5164cd, #31bcb9);
    padding: 15px 30px;
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    border-radius: 100px;
}

.bannerBtn .button span {
    position: relative;
    pointer-events: none;
}

.bannerBtn .button::before {
    --size: 0;
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
}

.bannerBtn .button:hover::before {
    --size: 500px;
}




/* iTracker Option */

.iTrackerOption {
    display: flex;
    align-items: center;
    padding: 35px 0;

}

.iTrackerOption img {
    width: 50px;
    margin-right: 30px;
}

.indexiTrackerOption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.indexiTrackerOptionImage {
    position: absolute;
    width: 100%;
    text-align: center;
    top: -150px;
}

.indexiTrackerOptionImage img {
    width: 50%;
}

.indexTrackerSection {
    padding: 50px 100px 0px 100px;
    position: relative;
}

.indexTrackerSection>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.indexiTrackerOptionRight>div {
    float: right;
}



/* ITRAC PACKAGES */
.iTracPackageSection {
    padding: 80px 50px 0;
}

.iTracPackageHeader {
    padding: 80px 325px 30px 325px;
    text-align: -webkit-center;
}

h3 {
    font-size: 38px !important;
    font-family: HelveticaNeue !important;
}

h4 {
    font-size: 30px !important;
    font-family: HelveticaNeue !important;
}

.iTracPackageBodyTop {
    padding: 25px 0;
    color: #fff;
    background-color: #5161cc;
    text-align: center;
    border-radius: 10px 10px 0 0;
}

.iTracPackageBodyBottom {
    text-align: center;
    padding: 80px 80px;
    background-color: #f5f3f3;
    border-radius: 0 0 10px 10px;
}

.iTracPackageBodyBottom p {
    padding-bottom: 20px;
}

/* .iTracPackageBodyBottom .b-green, .b-green:before {
    background: rgba(73, 155, 234, 1);
    background: -webkit-linear-gradient(45deg, rgba(73, 155, 234, 1) 0%, rgba(26, 188, 156, 1) 100%);
    background: -ms-linear-gradient(45deg, rgba(73, 155, 234, 1) 0%, rgba(26, 188, 156, 1) 100%);
} */
.iTracPackageBodyBottom p {
    padding-bottom: 20px;
}

.iTracPackageBodyTopMiddle {
    background: linear-gradient(to right, #5161cc 0%, #2fbeba 100%);
}

.iTracPackageBodyTopRight {
    background-color: #2fbeba !important;
}

/* .iTracPackageHeader p {
    padding-top: 20px;
} */

.aheadImg img {
    width: 100%;
}

.aheadImg {
    position: relative;
}

.aheadTextOne {
    position: absolute;
    bottom: 12%;
    right: 41%;
}

.aheadTextTwo {
    position: absolute;
    bottom: 12%;
    right: 46%;
}

.aheadTextThree {
    position: absolute;
    bottom: 12%;
    right: 32%;
}

.aboutpositionSection .aheadTextOne,
.aboutpositionSection .aheadTextTwo,
.aboutpositionSection .aheadTextThree {
    bottom: 12%;
}

.aheadTextOne p,
.aheadTextTwo p,
.aheadTextThree p {
    font-family: HelveticaNeue !important;
    font-size: 26px !important;
    font-weight: 700;
    color: #fff;
}

.packageBodyBtnBorder {
    margin-top: 30px;
}

.contactMenuAlign {
    padding: 30px 0;
}

.faqSearchBtn .input-group {
    align-items: center;
    width: 60%;
}

.faqSearchBtn input {
    font-family: 'Inter', sans-serif!important;
    height: 50px;
    border-radius: 50px;
    background-color: #eee !important;
    max-width: 95% !important;
    border: none;
    padding: 0 25px;
}

.faqSearchBtn .bannerBtn {
    padding: 0;
    position: absolute;
    right: 0;
}

.faqSearchBtn .button {
    padding: 15px 50px;
}

.faqSearchBtn>div {
    width: auto;
    text-align: -webkit-center;
    padding-bottom: 30px;
}

.accordion-button {
    padding: 20px 20px;
}

/* Tailormade Solution */
.solutionOne {
    background-image: url("../images/solution01.jpg");
    height: 500px;
    background-size: cover;
    object-position: 70% 83%;
    border-radius: 20px;
}

.solutionTwo {
    background-image: url("../images/solution02.png");
    height: 500px;
    background-size: cover;
    object-position: 70% 83%;
    border-radius: 20px;

}

.iTrackerOption h5 {
    margin-bottom: 0;
    font-size: 22px;
}

.iTracSolutionBodyBottomOne {
    position: absolute;
    bottom: 10%;
    left: 10%;
    width: 50%;
    z-index: 1000000;
}

.iTracSolutionBodyBottomTwo {
    position: absolute;
    bottom: 10%;
    left: 10%;
    width: 60%;
    z-index: 1000000;
}

.form-control:focus {
    box-shadow: none !important;
    border-color: #ced4da !important;
}

.iTracSolutionBodyBottomTwo p,
.iTracSolutionBodyBottomOne p {
    padding: 15px 0 15px 0;
    line-height: 25px;
    color: #fff;
}

.iTracSolutionBodyBottomTwo h3,
.iTracSolutionBodyBottomOne h3 {
    color: #fff;
}

.SolutionImageposition {
    position: relative;
}

.iTracSolutionSection {
    padding: 0px 50px 80px 50px;
}

.iTracPackageSection .secondaryBodyBtn {
    box-shadow: 2px 1000px 1px #f5f3f3 inset;
}

.iTracPackageBodyBottom h3 {
    padding: 20px;
}

.bannerLoginBtn .iTracPrimaryButton {
    width: 100%;
    text-transform: capitalize !important;
}


/* REVIEW SECTION */
.reviewBackGround {
    /* background-image: url("../images/review-banner.jpg"), linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)); */
    background-size: cover;
    height: 65vh;
    position: relative;
    background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('../images/review-banner.jpg');
    align-items: center;

}

.reviewSliderPossion {
    position: absolute;
    right: 40%;
    margin: 5%;
}

.swiperOverflow {
    overflow-x: auto;
}

.swiperBodySize {
    width: 19.6% !important;
}

/* .rorReverse{
    display: flex!important;
    flex-direction: row-reverse;
} */
.rating {
    display: flex;
    width: 100%;
    justify-content: center;
    overflow: hidden;
    flex-direction: row-reverse;
    position: relative;
    padding: 10px 0 25px;
}

.rating-0 {
    filter: grayscale(100%);
}

.rating>input {
    display: none;
}

.rating>label {
    cursor: pointer;
    width: 30px;
    height: 30px;
    margin-top: auto;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 76%;
    transition: .0s;
}

.rating>input:checked~label,
.rating>input:checked~label~label {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}


.rating>input:not(:checked)~label:hover,
.rating>input:not(:checked)~label:hover~label {
    background-image: url("../images/Layer 111.png");
}

.card-body img {
    width: 100px;
    border-radius: 100px;
    height: 100px;
    object-fit: cover;
}

.reviewCard {
    text-align: -webkit-center;
    padding: 30px;
}

.reviewCardTop p {
    font-weight: 700;
    padding: 20px 0 0px 0;
    margin-bottom: 0px;
}

.reviewCardTop small {
    font-size: 12px;
}

.clearFix {
    font-size: 12px;
    position: absolute;
    bottom: 40%;
    right: -4%;
    z-index: 100;
    color: #000;
}

.btn-check:focus+.btn,
.btn:focus {
    outline: 0;
    box-shadow: none !important;
}

.reviewPngImg {
    position: absolute;
    right: 10%;
    top: 14%;
}

.aboutAsset>div>div {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.previewPngText {
    position: absolute;
    bottom: -8%;
    left: 25%;
    text-align: center;
    color: #fff;
}
.easyLetterSpace{
    letter-spacing: 5px;
}

i.bi.bi-chevron-right, i.bi.bi-chevron-left {
    color: #fff;
    font-size: 28px;
}

.homeImageApp img {
    width: 15% !important;
}

.positionFixedHomeImage {
    position: relative;
}

.aboutVector {
    position: relative;
}

.aboutLineImage {
    position: absolute;
    bottom: -2%;
}

.aboutLineImage img {
    width: 75%;
    opacity: 0.4;
}

.previewPngText p {
    font-size: 32px !important;
    font-family: HelveticaNeue !important;
    line-height: 35px !important;
}

.previewPngText p span {
    font-size: 48px !important;
    font-family: HelveticaNeue !important;
    line-height: 55px !important;
}

button.btn.btn-archive.btn-sm.prev-btn {
    display: none;
}

.homeImageApp .logoGoogleplay {
    position: absolute;
    right: -35px;
    bottom: 30%;
}

.homeImageApp .logoAppStore {
    position: absolute;
    right: -35px;
    bottom: 23%;
}

.mainContentImage>div {
    display: flex;
    align-items: center;
}

.PlayButton {
    position: absolute;
    bottom: 23%;
    font-size: 80px !important;
    left: 36%;
    padding: 20px 15px 20px 25px;
    background-color: #09c7c0;
    border-radius: 100px;
    color: #fff;
}

.PlayButton:hover {
    color: #000;
    transition: 0.2s;
}

.homeSection img {
    width: 100%;
    position: relative;
}

.indexGradeContent {
    padding: 50px 0px 50px 150px;
}



/* CONTACT SECTION */
.contactSection {
    padding: 80px 80px;
    position: relative;
}

.conTT {
    text-align: -webkit-right;
}

.conTT .con03 {
    padding-bottom: 20px;
}

.contactSection>div>div {
    display: flex;
    align-items: center;
}

input#exampleFormControlInput1,
input#exampleFormControlInput2 {
    height: 50px;
    border-radius: 10px;
}

textarea#exampleFormControlTextarea1 {
    border-radius: 10px;
}

.contactSection .secondaryBodyBtnBorder {
    padding-top: 30px;
}

.conBall {
    position: absolute;
    left: 0%;
}

.conBall {
    position: absolute;
    left: 0%;
    bottom: -33%;
}

img.con02 {
    position: relative;
    z-index: 10;
}

.contactInputRadius {
    border-radius: 50px !important;
}

/* .aboutposition{
    position: relative;
} */



/* FOOTER */
.footer {
    color: #fff;
}

.footBg {
    background-size: cover;
    height: 100%;
    position: relative;
    background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
        url('../images/footerImgc.png');

}

.footerRightTopSection>div {
    display: flex;
    justify-content: space-between;
}

.footerBottomMenu {
    display: flex;
    justify-content: flex-start;
}

.footerLeftTextPosition {
    display: flex;
    justify-content: flex-start;
}

.footerLeftTextPosition .footerLeftText {
    width: 70px;
}

.footerHighlightText {
    color: #33baba;
}

.footerIcon {
    display: flex;
    flex-direction: column;
}

.footerTopAlign {
    padding: 50px 0;
}

.footerRightTopSection p {
    margin-bottom: 10px;
    font-size: 14px;
}

.footerlogoImages img {
    width: 20%;
    margin-right: 49px;
}

.footerlogoImages {
    padding: 50px 0 0px;
    display: flex;
    align-items: center;
}

.footerRightTopSection {
    border-bottom: 1px solid #232528;
    padding: 30px 0;
}

.footerIcon i {
    padding-bottom: 25px;
    padding-right: 40px;
    font-size: 20px;
}

.footerLeftSection {
    padding: 30px 0;
}

.footerLeftSection>p {
    padding: 40px 0 40px 0;
}

.footerLeftSection img {
    width: 30%;
}

.footerBottomMenu {
    padding-top: 70px;
    font-size: 14px;
    color: #ffffff96;
}

.footerBottomMenu p {
    padding-right: 20px;
}

.footerBottom {
    background-color: #000;
}

.footerBottom p {
    padding: 22px;
    color: #ffffff5f;
    text-align: center;
    margin-bottom: 0;
}

.footerAlign {
    padding: 0 50px;
}

.footerOsmium {
    color: #202651 !important;
}



/* button */

.iTracButton {
    z-index: 100;
    position: sticky;
}

.iTracButton a {
    display: block;
    text-decoration: none;
    margin: 20px 0;
}

/*the first button*/
.iTracPrimaryButton {
    position: relative;
    background: linear-gradient(to right, #5164cd, #31bcb9, #31bcb9, #5164cd);
    background-size: 400%;
    border-radius: 50px;
    width: 220px;
    height: 50px;
    line-height: 50px !important;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}



.iTracPrimaryButton:hover {
    animation: a 8s linear Infinite;
}

.iTracPrimaryButton:before {
    content: "";
    background: linear-gradient(to right, #5164cd, #31bcb9, #31bcb9, #5164cd);
    background-size: 400%;
    position: absolute;
    z-index: -1;
    border-radius: 50px;
    filter: blur(0);
    opacity: 0;
    transition: 0.5s;
}

.iTracPrimaryButton:hover:before {
    opacity: 1;
    filter: blur(0);
    animation: a 8s linear Infinite;
}

@keyframes a {
    0% {
        background-position: 0%;
    }

    100% {
        background-position: 400%;
    }
}

.iTracSecondaryButton{
    overflow: hidden;    
    position: relative;
      width: 200px;
      height: 50px;
      line-height:50px!important;
      text-align:center;
      box-sizing: border-box;
      text-transform: uppercase;
      color:#5164cd!important;
      font-size:20px;
      border:1px solid #5164cd;
      border-radius:50px;
      transition: all 0.5s ease  ;
  }
  .iTracSecondaryButton:before{
   
    content:"";
    position: absolute;
    background: linear-gradient(to   right,#5164cd, #31bcb9, #31bcb9, #5164cd);
     background-size:400%;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%) rotate(37deg);
    width: 100%;
    height: 0%;
    /* transition:all 0.6s ease  ; */
    z-index: -1;
    border-radius:50px;
    color:#ffffff;
    
  }
  .iTracControlSection{
    padding-top: 50px;
  }
  .iTracSecondaryButton:after{
     content:"";
     background: linear-gradient(to   right,#5164cd, #31bcb9, #31bcb9, #5164cd);
    background-size:400%;
    position: absolute;
    z-index: -1;
    border-radius:0px;
    filter: blur(0);
    opacity: 0;
    transition:0.5s;
    
    
  }
  .iTracSecondaryButton:hover{
    border:1px solid transparent;
    color:#ffffff!important;
    width: 200px;
    height: 50px;
  }
  .iTracSecondaryButton:hover:before{
     height: 300%;
    animation:  a 8s linear Infinite;
  }
  .iTracSecondaryButton:hover:after{
      opacity: 1;
    filter: blur(0);
    animation:  a  8s linear Infinite;
  }

.iTracButton.bannerButton {
    display: flex;
    align-items: center;
}

.MainBannerButtonSection {
    position: absolute;
    left: 8.3%;
    bottom: 10%;
}

.contactTop {
    text-align: center;
}

.iTracPackageHeader p {
    padding: 20px 0 0 0;
}

.navActiveButton .iTracPrimaryButton {
    width: 120px !important;
    height: 40px;
    line-height: 40px !important;
    font-size: 14px !important;
}

.navActiveButton {
    margin-left: 15px;
}




/* About Page */
.AboutSection {
    padding: 100px 50px 0px 50px;
}

.AboutSection>div {
    display: flex;
    align-items: center;
}

.aboutTrackerOption {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.aboutTrackerSection {
    padding: 80px 80px 0px 80px;
}

.aboutVideo {
    width: 100%;
    text-align-last: center;
    padding-top: 50px;
}

.aboutVideo img {
    width: 60%;
}

.aboutPackageSection {
    padding-bottom: 50px;
}

.aboutTrackerSection h2 {
    padding-bottom: 20px;
}

.aboutTrackerSection h5 {
    padding-bottom: 20px;
}

.aboutPackagesBodyBottom img {
    width: 100% !important;
    height: 350px;
    object-fit: cover;
}

.aboutPackagesBodyFoot {
    background-color: #eeee;
    border-radius: 0 0 10px 10px;
}

.aboutPackagesBodyFoot p {
    text-align: -webkit-center;
    padding: 40px 100px;
}

.aboutAsset img {
    width: 8%;
    height: 8%;
    margin-right: 10px;
}



/* Contact Page */
.contactTop p {
    padding: 20px 200px 40px 200px;
    text-align: -webkit-center;
}




/* FAQ Page */
div#accordionExample {
    width: 100%;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 0%) !important;
}

.accordion-item {
    border: none !important;
    border-bottom: 1px solid #eee !important;
}

/* .accordionBorder{
    border-top: 1px solid #eee!important;
} */
.accordion-button:not(.collapsed) {
    background-color: #ffffff !important;
}

button.accordion-button.collapsed {
    font-family: 'Inter', sans-serif!important;
    color: #000000c4 !important;
    font-weight: 500;
}

.accordion-button:not(.collapsed) {
    background-color: #e7f1ff;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.accordion-button:not(.collapsed) {
    color: #000000 !important;
    font-family: 'Inter', sans-serif!important;
    font-weight: 500;
}

.accordingTopContent {
    display: flex;
    text-align: -webkit-center;
    flex-direction: column;
    padding: 0 0 0 0;
}

.accordingTopContent p {
    padding: 20px 0 30px 0;
}

.contactSectionSpace {
    padding: 80px 0;
}

.loginMainContent>div {
    display: flex;
    align-items: center;
}

.loginContentText p {
    padding: 0 50px;
}

.packageTrackerOptionLeft>div {
    padding: 5px 0;
    justify-content: center;
}

.packageTrackerOptionLeft img {
    width: 24px !important;
}

.packageTrackerOptionLeft p {
    padding: 0 !important;
}

.packageTrackerOptionLeft {
    padding: 0 0 25px 0;
}

.aboutposition {
    position: relative;
}

.aboutVideoIcon {
    position: absolute;
}

.aboutVideoIcon {
    position: absolute;
    font-size: 64px;
    color: #fff;
    left: 48%;
    top: 32vh;
    /* bottom: 1%; */
    opacity: 0.4;
}
.bannerSecondaryBtn i{
    font-size: 12px!important;
}
.aboutVideoIcon:hover {
    opacity: 0.6;
}

.gradeLabel {
    padding: 20px 0;
}

.gradeLabel label {
    background-color: #001361;
    color: #fff;
    font-size: 16px;
    padding: 7px 15px;
}

.gradeList>div {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.gradeList img {
    width: 40px;
    height: fit-content;
    margin-right: 20px;
}

.gradeList p {
    margin-bottom: 0;
    letter-spacing: 1px;
    font-size: 20px !important;
}

.indexGradeSection {
    padding: 80px 0;
    position: relative;
}

.indexGradeSection>div>div {
    display: flex;
    align-items: center;
}

.shareIconsBody img {
    width: 30px;
    height: 30px;
    border: 1px solid #555;
    border-radius: 20px;
    padding: 7px;
    margin-bottom: 5px;
}

.shareIconsBody {
    position: absolute;
    right: 1%;
    top: 50%;
    opacity: 0.4;
}

.shareIconsBody:hover {
    opacity: 0.8;
}

.indexGradeContent h5 {
    font-size: 34px !important;
    line-height: 34px !important;
}



/* LOGIN Page */
.loginContentImg img {
    width: 100%;
}




.carouselMainContent .card {
    border: none;
}

  /* Style arrière plan */
  .background-container {
    position: relative;
    height: 65vh;
  }
  
  .background-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .background-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #00000060;
    background: linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.8));
  }
  
  .copyright {
    position: absolute;
    padding: 8px;
    bottom: 8px;
    right: 16px;
    opacity: 0.8;
    user-select: none;
  }
  
  .content-wrapper {
    display: flex;
    position: absolute;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    width: 100%;
    height: 100%;
    top: 0;
    right: 38%;
    pointer-events: none;
  }
  
  .content-title {
    width: calc(100% - 48px);
    font-size: 36px;
    color: white;
    line-height: 1.5;
    text-align: center;
  }
  
  .content-title pre {
    display: inline;
    position: relative;
    top: -1px;
    padding: 4px 8px;
    font-size: 30px;
    color: #3b3beb;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 8px #00000060;
  }
  
  .s-slider {
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    width: calc(100% - 96px);
    max-width: 80%;
    pointer-events: auto;
  }
  
  body[data-sliding] .slider-container {
    cursor: grabbing;
  }
  
  .slider-container {
    display: flex;
    position: relative;
    width: calc(100% + 48px);
    left: -24px;
    cursor: grab;

  }
  .contactSubTitle{
    padding-top: 20px!important;
}
  body[data-sliding] .slider-items {
    scroll-snap-type: none;
  }
  
  .slider-items {
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    width: 100%;
    padding: 24px;
    scroll-snap-type: x mandatory;
    scroll-padding: 24px;
    overflow: hidden;
    overflow-x: auto;
    scrollbar-width: none;
  }
  
  .slider-items::-webkit-scrollbar {
    display: none;
  }
  
  .slider-item {
    flex-shrink: 0;
    width: 150px;
    scroll-snap-align: start;
  }
  
  .slider-item img {
    position: relative;
    max-width: 100%;
    border-radius: 200px;
    object-fit: cover;
  }
  
  /* .slider-arrows {
    display: none;
  } */

  .slider-item {
    width: 370px!important;
    max-width: calc(100% / 3 - 0px)!important;
}
.aboutAssetLast{
    align-items: flex-start!important;
}



@media (max-width: 1750px) {
    img.con01 {
        height: 70vh;
    }

    img.con02 {
        height: 35vh;
    }

    img.con03 {
        height: 20vh;
    }
}


/*____MACBOOK13"____*/
@media (max-width: 1440px) {

    /* NAVBAR & BANNER SECTION */
    .bannerDot {
        right: 60vh;
        bottom: 29vh;
    }

    .bannerDot i {
        font-size: 80px;
    }

    .trackingLine {
        right: 59vh;
        bottom: 45vh;
    }

    .trackingLine label {
        width: 150px;
    }

    .offcanvas-menu {
        display: none;
    }
    .gradeLabel label {
        font-size: 14px;
        padding: 6px 10px;
    }
    /* .aboutposition{
        position: relative;
    } */
    .keepSignInput {
        display: flex;
        align-items: flex-end;
    }
    h2 {
        font-size: 43px !important;
        line-height: 45px !important;
    }
    .MainBannerButtonSection {
        position: absolute;
        left: 8.5%;
        bottom: -45%;
    }
    .iTracControlSection {
        padding-top: 0px;
    }
    .reviewSliderPossion {
        position: absolute;
        right: 46%;
        margin: 5%;
    }

    /* INDEX SECTION ONE [About] */
    .indexGradeContent {
        padding: 50px 0 50px 100px;
    }

    .gradeList p {
        font-size: 18px !important;
    }

    /* iTracker Option */
    .indexTrackerSection {
        padding: 80px 50px;
    }

    .iTrackerOption {
        padding: 20px 0;
    }

    .iTrackerOption img {
        width: 40px;
        margin-right: 20px;
    }

    .indexiTrackerOptionImage img {
        width: 55%;
    }

    .indexGradeContent h5 {
        font-size: 27px !important;
        line-height: 30px !important;
    }

    /* .reviewCarousel {
        position: absolute;
        top: 8% !important;
        left: 0% !important;
    } */

    /* ITRAC PACKAGES */
    .iTracPackageBodyTop {
        padding: 15px;

        text-align: center;
        border-radius: 10px 10px 0 0;
    }

    .aboutLineImage {
        position: absolute;
        bottom: -10%;
    }

    .iTracPackageBodyBottom {
        text-align: center;
        padding: 30px 50px;
        background-color: #f5f3f3;
        border-radius: 0 0 10px 10px;
    }

    .iTracPackageBodyBottom p {
        padding-bottom: 20px;
    }

    .iTracPackageSection {
        padding: 0px 50px 0;
    }

    /* .iTracPackageBodyBottom .b-green, .b-green:before {
        background: rgba(73, 155, 234, 1);
        background: -webkit-linear-gradient(45deg, rgba(73, 155, 234, 1) 0%, rgba(26, 188, 156, 1) 100%);
        background: -ms-linear-gradient(45deg, rgba(73, 155, 234, 1) 0%, rgba(26, 188, 156, 1) 100%);
    } */
    .iTracPackageBodyBottom p {
        padding-bottom: 20px;
    }
    .background-container {
        position: relative;
        height: 80vh!important;
    }
    .packageBodyBtnBorder {
        margin-bottom: 20px;
    }

    .iTracPackageBodyBottom h3 {
        padding: 10px;
    }

    .solutionOne,
    .solutionTwo {
        height: 400px;
    }

    .iTracPackageHeader {
        padding: 80px 150px 20px 150px;
        text-align: -webkit-center;
    }

    .aheadTextOne {
        right: 37%;
    }

    .aheadTextTwo {
        right: 45%;
    }

    .aheadTextThree {
        right: 25%;
    }

    .aboutTrackImage img {
        width: 120%;
    }
    .bannerSecondaryBtn i{
        font-size: 12px!important;
    }
    




    /* REVIEW SECTION */
    .reviewBackGround {
        height: 80vh;
    }

    .reviewCard {
        text-align: -webkit-center;
        padding: 20px;
    }

    button.btn.btn-archive.btn-sm.prev-btn {
        display: none;
    }

    .PlayButton {
        padding: 20px 15px 20px 25px;
    }


    /* CONTACT SECTION */
    img.con01 {
        height: 70vh;
    }

    img.con02 {
        height: 35vh;
        position: relative;
        z-index: 10;
    }

    img.con03 {
        height: 22vh;
    }

    .swiperBodySize {
        width: 19.5% !important;
    }

    .contactInputRadius {
        border-radius: 50px !important;
    }


    /* FOOTER */
    .footerlogoImages img {
        margin-right: 34px;
    }

    .footerTopAlign {
        padding: 50px 0 30px 0;
    }
    .iTracSolutionBodyBottomTwo p, .iTracSolutionBodyBottomOne p {
        padding: 5px 0 5px 0;
    }



    /* About Page */
    /* .aboutVideo {
        bottom: -90%;
    } */
    .aboutTrackerSection {
        padding: 80px 80px 0px 80px;
    }

    .aboutPackagesBodyBottom img {
        height: 250px;
    }

    .aboutPackagesBodyFoot p {
        padding: 40px 40px;
    }

    .contactSectionSpace .conBall {
        bottom: -70% !important;
    }





    /* Contact Page */
    .contactTop p {
        text-align: -webkit-center;
        padding: 0 20px 30px 20px;
    }

    .packageTrackerOptionLeft>div {
        padding: 5px 0;
        justify-content: center;
    }

    .contactMenuAlign {
        padding: 0 0 30px 0;
    }



    /* login page */
    .loginContentText p {
        padding: 0px;
    }
}



@media (max-width: 821px) {

    /* NAVBAR & BANNER SECTION */
    .navPositionDesktop {
        display: none;
    }

    .bannerDot {
        right: 2vh;
        bottom: 32vh;
    }

    .bannerDot i {
        font-size: 80px;
    }

    .trackingLine {
        right: -10px;
        bottom: 44vh;
    }

    .trackingLine label {
        width: 230px;
    }

    .bannerContent {
        top: 55vh;
    }

    .offcanvas-menu {
        display: block;
    }

    .mainLogoMobile {
        position: absolute;
        z-index: 1000;
        padding: 30px 45px;
    }

    .mainLogoMobile img {
        width: 80%;
    }

    .mainLogoMobileOff img {
        width: 80%;
    }

    @keyframes hover {
        50% {
            transform: translateX(10px);
        }
    }

    .offcanvas-menu>label {
        top: 45px;
        right: 45px;
        position: absolute;
        width: 40px;
        height: 40px;
        cursor: pointer;
        transition: 0.3s ease;
        display: flex;
        align-items: center;
        z-index: 9999;
    }

    .offcanvas-menu label span,
    .offcanvas-menu label span::before,
    .offcanvas-menu label span::after {
        transition: background 0.3s, transform 0.3s;
    }

    .offcanvas-menu label span,
    .offcanvas-menu label span::before,
    .offcanvas-menu label span::after {
        content: "";
        position: absolute;
        height: 4px;
        width: 40px;
        background: #b3b3b3;
    }

    .offcanvas-menu label span::before {
        transform: translateY(-12px);
    }

    .offcanvas-menu label span::after {
        transform: translateY(12px);
    }

    .offcanvas-menu nav {
        position: fixed;
        height: 100%;
        width: 100%;
        right: -100%;
        overflow: hidden;
        background-image: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8));
        transition: 0.3s ease;
        padding: 40px 30px;
        z-index: 1000;
    }

    .offcanvas-menu nav>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .offcanvas-menu nav>div a {
        font-size: 2.5rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        font-family: "Monoton", cursive;
        -webkit-text-fill-color: transparent;
    }

    .offcanvas-menu nav>div a i {
        font-size: 4rem;
        background: linear-gradient(120deg, #49a4ed 30%, #3d00a9 110%);
        -webkit-text-fill-color: transparent;
    }

    .offcanvas-menu nav>div label {
        width: 30px;
        height: 30px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.3s ease;
    }

    .offcanvas-menu nav>div label span,
    .offcanvas-menu nav>div label span:before,
    .offcanvas-menu nav>div label span:after {
        background: #4d4d4d;
    }

    .offcanvas-menu nav>ul {
        margin-top: 30px;
        counter-reset: nav-link-count;
    }

    .offcanvas-menu nav>ul li {
        cursor: pointer;
        padding: 10px 0;
        transform: translateX(-30px);
        opacity: 0;
        transition: 0.4s ease;
        counter-increment: nav-link-count;
    }

    .offcanvas-menu nav>ul li a {
        font-size: 2.5rem;
        line-height: 1.5;
        font-weight: 400;
        color: #ffffff;
        display: block;
    }

    .offcanvas-menu nav>ul li:hover {
        animation: hover 0.5s;
    }

    .offcanvas-menu input[type=checkbox] {
        display: none;
    }

    .offcanvas-menu input[type=checkbox]:checked~label {
        opacity: 0;
        pointer-events: none;
    }

    .offcanvas-menu input[type=checkbox]:checked~nav {
        right: 0;
    }

    .offcanvas-menu input[type=checkbox]:checked~nav label span {
        background: transparent;
    }

    .offcanvas-menu input[type=checkbox]:checked~nav label span:before {
        transform: rotate(-45deg);
    }

    .offcanvas-menu input[type=checkbox]:checked~nav label span:after {
        transform: rotate(45deg);
    }

    .offcanvas-menu input[type=checkbox]:checked~nav label span:before,
    .offcanvas-menu input[type=checkbox]:checked~nav label span:after {
        transition-delay: 0.2s;
    }

    .offcanvas-menu input[type=checkbox]:checked~nav ul li {
        opacity: 1;
        transform: translateX(0px);
    }

    .offcanvas-menu input[type=checkbox]:checked~nav ul li:nth-child(1) {
        transition-delay: 0.1s;
    }

    .offcanvas-menu input[type=checkbox]:checked~nav ul li:nth-child(2) {
        transition-delay: 0.2s;
    }

    .offcanvas-menu input[type=checkbox]:checked~nav ul li:nth-child(3) {
        transition-delay: 0.3s;
    }

    .offcanvas-menu input[type=checkbox]:checked~nav ul li:nth-child(4) {
        transition-delay: 0.4s;
    }

    .offcanvas-menu input[type=checkbox]:checked~nav ul li:nth-child(5) {
        transition-delay: 0.5s;
    }

    .offcanvas-menu input[type=checkbox]:checked~nav ul li:nth-child(6) {
        transition-delay: 0.6s;
    }

    .offcanvas-menu input[type=checkbox]:checked~nav ul li:nth-child(7) {
        transition-delay: 0.7s;
    }

    .languageButton {
        color: #fff;
        font-size: 2.5rem;
        font-weight: 400;
        padding: 0;
        display: flex;
        align-items: flex-end;
    }

    .membersLoginButton {
        color: #fff;
        display: flex;
        align-items: center;
        font-size: 2.5rem;
        padding: 0;
    }

    .navRightIcon {
        font-size: 34px;
        padding-left: 25px;
    }

    .navDropdownBox {
        background-color: #ffffff;
        width: 100%;
        font-size: 28px;
        font-family: 'Inter', sans-serif!important;
    }



    /* INDEX SECTION ONE [About] */
    .indexAboutContentParagrafe {
        width: initial;
    }

    .indexAboutSection {
        padding: 100px 0px 100px 0px;
    }



    /* iTracker Option */
    .indexiTrackerOptionImage {
        top: 90px;
    }

    .indexiTrackerOptionImage {
        position: absolute;
        width: 100%;
        text-align: center;
        top: -80px;
    }

    .indexiTrackerOptionImage img {
        width: 40%;
    }

    .indexTrackerSection {
        padding: 100px 0px;
    }

    .indexTrackerSection {
        padding: 200px 0px 100px 0px;
    }




    .iTracPackageSection {
        padding: 80px 0px 0;
    }

    .iTracPackageBodyTop>h4 {
        font-size: 26px !important;
    }

    .secondaryBodyBtn {
        padding: 8px 20px;
    }

    .iTracPackageBodyBottom {
        padding: 30px 25px;
    }

    .iTracSolutionSection {
        padding: 80px 0px;
    }






    /* REVIEW SECTION */
    .reviewPngImg {
        display: none;
    }

    .reviewSliderPossion {
        position: absolute;
        right: 0%;
        margin: 12%;
    }

    .reviewBackGround {
        height: 60vh;
    }



    .contactMobile {
        display: none;
    }

    .contactField {
        width: 100% !important;
    }

    .conBall img {
        opacity: 0.4;
    }

    .col.clearFix {
        display: none;
    }




    /* FOOTER */
    .footerAlign {
        padding: 0 0 0 35px;
    }

    .footerlogoImages img {
        margin-right: 18px;
    }

    .footerBottomMenu {
        font-size: 12px;
    }
}
@media (min-width: 901px) {
    .slider-container {
      left: -24px;
    }
  
    .slider-item {
        width: 400px;
        max-width: calc(100% / 3 - 15px);
    }
  
    /* .slider-item img {
      height: 207px;
    } */
    
    .slider-arrows {
      display: flex;
      position: absolute;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      padding-inline: 12px;
      pointer-events: none;
    }
    
    .slider-arrow {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      font-family: Poppins, sans-serif;
      font-size: 20px;
      border: none;
      border-radius: 50%;
      box-shadow: 0 2px 6px #00000060;
      cursor: pointer;
      pointer-events: auto;
    }
    
    @media (min-width: 1101px) {
      .slider-arrows {
        width: calc(100% + 128px);
        padding-inline: 0;
        left: -64px;
      }
  
      .slider-arrow {
        width: 0px;
    height: 0px;
    font-size: 32px;
    font-weight: 300;
    background-color: #f0f8ff00;
      }
    }
  }



@media (max-width: 575.98px) {
    html, body{
        overflow-x: hidden;
    }

    /* NAVBAR & BANNER SECTION */
    .bannerImg1,
    .bannerImg2,
    .bannerImg3 {
        height: 60vh;
    }

    h1 {
        line-height: 35px !important;
    }

    h2 {
        font-family: HelveticaNeue !important;
        line-height: 50px !important;
    }

    .bannerContent {
        top: 20vh;
        padding: 0 15px;
    }

    .bannerPrevBtn {
        right: 50px;
        left: auto;
        bottom: 30px;
        top: auto;
    }

    .homeSection img {
        display: none;
    }

    .bannerNextBtn {
        right: 10px;
        left: auto;
        bottom: 30px;
        top: auto;
    }

    .shareIconsBody {
        right: 2%;
        top: 60%;
    }

    .offcanvas-menu nav>ul li a {
        font-size: 1.5rem;
    }
    .gradeLabel label {
        font-size: 11px;
    }
    .gradeList p {
        font-size: 16px !important;
    }
    .languageButton,
    .membersLoginButton {
        font-size: 1.5rem;
    }

    .navRightIcon {
        font-size: 20px;
        padding-left: 15px;
    }

    .offcanvas-menu nav {
        background-image: linear-gradient(rgb(0 0 0), rgb(0 0 0), rgb(0 0 0));
    }

    .mainLogoMobile img {
        width: 50%;
    }

    .mainLogoMobile {
        padding: 20px 15px;
    }

    .offcanvas-menu label span,
    .offcanvas-menu label span::before,
    .offcanvas-menu label span::after {
        height: 4px;
        width: 35px;
    }

    .offcanvas-menu>label {
        top: 20px;
        right: 15px;
    }

    .mainLogoMobileOff img {
        width: 60%;
    }

    .offcanvas-menu nav {
        padding: 20px 20px;
    }

    button.carousel-control-prev.bannerPrevBtn {
        bottom: -90%;
        left: 65%;
    }

    button.carousel-control-next.bannerNextBtn {
        bottom: -90%;
        right: 4%;
    }

    .languageButtonMobile,
    .membersLoginButtonMobile {
        color: #fff !important;
        font-size: 16px !important;
        padding: 0 !important;
    }

    .navDropdownBoxMobile {
        inset: auto !important;
    }

    .Contenter,
    .Contenter-fluid,
    .Contenter-lg,
    .Contenter-md,
    .Contenter-sm,
    .Contenter-xl,
    .Contenter-xxl {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .scrollItem {
        display: none;
    }

    .bannerBtn {
        padding-top: 30px;
    }


    /* INDEX SECTION ONE [About] */
    .indexAboutSection>div {
        flex-direction: column-reverse;
    }

    .indexAboutContentParagrafe {
        width: fit-content;
    }

    .SolutionImageposition {
        padding-bottom: 20px;
    }

    .indexAboutSection {
        padding: 0px 15px 100px 15px;
    }

    .aboutTrackImage img {
        width: 100%;
    }

    .MainBannerButtonSection {
        position: absolute;
        left: 3%;
        bottom: -100%;
    }

    .homeImageApp .logoGoogleplay,
    .homeImageApp .logoAppStore {
        display: none;
    }

    .indexGradeContent {
        padding: 50px 15px 0 15px;
    }

    .indexiTrackerOptionLeft,
    .indexiTrackerOptionRight {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .iTrackerOption {
        padding: 10px 0;
    }

    .indexGradeSection {
        padding: 0 0 0 0;
    }

    .footBg {
        padding: 0 5px;
    }


    /* iTracker Option */

    .indexiTrackerOptionRight>div {
        float: left;
    }

    .indexTrackerSection {
        padding: 280px 15px 15px 15px;
    }

    .indexiTrackerOptionImage img {
        width: 80%;
    }

    .indexiTrackerOptionImage {
        top: -20px;
    }

    .iTracPackageHeader {
        padding: 50px 0 20px 0px;
        text-align: left;
    }

    .iTracPackageSection {
        padding: 0px 15px 0;
    }

    .packageMobile {
        padding-bottom: 15px;
    }

    .iTracSolutionSection {
        padding: 60px 15px 50px 15px;
        text-align-last: left;
    }

    .secondaryBodyBtn {
        padding: 10px 40px;
    }

    .iTracPackageBodyBottom {
        padding: 30px 40px;
    }




    /* REVIEW SECTION */
    .swiperBodySize {
        width: 16% !important;
    }

    .iTracPackageHeader p {
        padding: 10px 0 30px 0;
        text-align: left;
    }

    .reviewBackGround {
        height: 65vh;
    }

    .accordingTopContent {
        text-align: left;
    }

    .accordingTopContent p {
        padding: 10px 0 30px 0;
    }

    .accordion-body {
        padding: 15px 0 15px 0;
    }

    .iTracPrimaryFaqButton {
        width: 110px;
        text-align-last: center;
    }

    .faqSearchBtn>div {
        padding-bottom: 20px;
    }

    a.iTracSecondaryButton {
        text-align-last: center;
    }

    .accordion-button:not(.collapsed) {
        padding: 20px 0;
    }

    .accordion-button {
        padding: 20px 0;
    }

    button.accordion-button.collapsed {
        display: flex;
        align-items: flex-start;
    }

    .faqSearchBtn .input-group {
        width: 100%;
    }

    .clearFix {
        font-size: 12px;
        position: absolute;
        bottom: 50%;
        right: 8.5%;
        z-index: 100;
        color: #000;
    }

    .reviewSliderPossion {
        position: absolute;
        right: -16%;
        margin: 17%;
    }

    button.btn.btn-archive.btn-sm.prev-btn {
        position: absolute;
        right: 35vh;
    }

    .iTracSolutionBodyBottomOne,
    .iTracSolutionBodyBottomTwo {
        width: 55%;
    }

    .col.clearFix {
        display: block;
        z-index: 1000;
    }

    button.btn.btn-archive.btn-sm.prev-btn {
        display: block;
    }

    .btn-check:checked+.btn,
    .btn.active,
    .btn.show,
    .btn:first-child:active,
    :not(.btn-check)+.btn:active {
        color: #fff;
        background-color: none;
        border-color: none;
    }

    .btn.disabled,
    .btn:disabled,
    fieldset:disabled .btn {
        border-color: #ffffff00 !important;
        color: #000 !important;

    }


    /* FOOTER */
    .conBall img {
        width: 100%;
    }

    .contactSection {
        padding: 80px 15px;
    }

    .footerAlign {
        padding: 0;
    }

    .footerBottomMenu p {
        padding-right: 14px;
        font-size: 14px !important;
    }

    .footerBottomMenu {
        padding-top: 12px;
    }

    .footerLeftSection {
        padding: 0px 0;
    }

    .footerlogoImages .logoAppStore {
        margin-right: 0 !important;
    }

    .footerlogoImages {
        padding: 30px 0 30px 0;
        justify-content: space-between;
    }
    .content-wrapper {
        right: 0%!important;
    }
    .slider-item {
        width: 401px!important;
        max-width: calc(100% / 1 - 0px)!important;
    }
    



    .mainLogoMobileSection {
        width: 100%;
        background-color: black;
    }

    .mainLogoMobileSection img {
        width: 28%;
    }

    /* .contactSectionSpace .contactMobile {
        display: block;
    } */
    .contactMenuAlign {
        text-align-last: left;
        padding: 10px 0 40px 0;
    }

    .contactSectionSpace {
        padding: 120px 15px 50px 15px;
        text-align-last: left;
    }

    .contactSectionSpace .conBall {
        bottom: -30% !important;
    }

    .contactTop p {
        text-align: left;
        padding: 0 0 30px 0;
    }


    /* About Page */
    .AboutSection {
        padding: 130px 15px 0px 15px;
    }

    .aboutVideo {
        /* bottom: -75%; */
        padding: 0 15px 0px 15px;
    }

    .aboutTrackImage {
        padding-top: 60px !important;
    }

    .aboutVideo img {
        width: 100%;
    }

    .aboutTrackerSection {
        padding: 30px 15px 0px 15px;
        text-align: left;
    }

    .aboutPackageSection {
        padding: 0 15px 50px 15px;
    }

    .footerTopAlign {
        padding: 50px 0 0px 0;
    }

    .aboutposition {
        padding-bottom: 30px;
    }
    .slider-arrowLeft{
        position: absolute;
        left: -50px;
        background-color: #fff0;
        border: none;
    }
    .slider-arrowRight{
        position: absolute;
        right: -50px;
        background-color: #fff0;
        border: none;
    }
    .background-container {
        position: relative;
        height: 65vh!important;
    }
    .aheadTextOne, .aheadTextTwo, .aheadTextThree{
        bottom: 10%;
    }
    .iTracButton a {
        text-align-last: center;
        /* margin-top: 20px!important; */
    }
    .gradeList img {
        width: 7%;
        height: 7%;
        margin-right: 20px;
    }
    .bannerContent h1 {
        padding-bottom: 0px;
    }

}