:root {
  --bs-quicksand: "Quicksand", sans-serif;
  --bs-oufit: "Outfit", sans-serif;
  --bs-Aggreen: #02a4aa;
  --bs-Agorange: #ff9601;
  --bs-darkblue: #091358;
  --bs-white: #fff;
  --bs-black: #000;
  --bs-blackgrey: #515151;
  --bs-grey: #a9a9a9;
  --bs-whiteblue: #f7f9ff;
  --bs-whites: #fafafa;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  /* background-image: url(../image/bg.webp);
  background-repeat: no-repeat;
  background-size: 100% 150%; */
}
html::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

html::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

html::-webkit-scrollbar-thumb {
  background-color: var(--bs-Aggreen);
  border: 1px solid #02a4aa;
}

/* Navbar */
.navbar {
  width: 100%;
  background-color: var(--bs-white);
  box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

.navbar .container-fluid {
  width: 95%;
  margin: 0 auto;
}

.navbar-brand img {
  width: 150px;
}

.head {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  font-family: var(--bs-quicksand);
  font-weight: 600;
}

.nav-1 {
  width: 70%;
  display: flex;
  gap: 20px;
  align-items: center;
}

.nav-2 {
  width: 30%;
  display: flex;
  justify-content: end;
  gap: 20px;
  align-items: center;
}

.nav-item .btn {
  background-color: var(--bs-Agorange);
  color: var(--bs-white);
  font-weight: 500;
}

.navbar .nav-item .nav-link {
  color: var(--bs-black);
  font-size: 17px;
}

.navbar .nav-item .nav-link:hover {
  color: var(--bs-Agorange);
}
.navbar.white {
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px !important;
}
/* Home page css */
.main {
  position: relative;
}

.main-sec {
  width: 95%;
  display: flex;
  margin: 0px auto 0px;
  padding-top: 100px;
}

.main-1 {
  width: 50%;
  padding-top: 50px;
  padding-left: 10px;
  line-height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main-2 {
  width: 60%;
  text-align: end;
}

.main-2 img {
  width: 90%;
}

.main-1 h1 {
  color: var(--bs-Aggreen);
  font-family: var(--bs-oufit);
  font-size: 58px;
  font-weight: 700;
}

.main-1 p {
  font-family: var(--bs-quicksand);
  font-weight: 500;
  font-size: 16px;
}

.main-btn .buy-now {
  background-color: var(--bs-Agorange);
  font-family: var(--bs-quicksand);
  font-weight: 600;
  padding: 10px 15px;
  font-size: 16px;
  color: var(--bs-white);
  margin-right: 15px;
}

.main-btn .enquiry {
  background-color: #f0f0f0;
  font-family: var(--bs-quicksand);
  font-weight: 600;
  padding: 10px 15px;
  font-size: 16px;
}

.element-1 img {
  position: absolute;
  bottom: 70px;
  left: -80px;
  width: 150px;
  opacity: 15%;
}

.main-div-2 span {
  font-family: var(--bs-quicksand);
  font-weight: 600;
  color: var(--bs-black);
  margin-right: 20px;
}

.main-div-2 a {
  color: var(--bs-Aggreen);
  margin-right: 10px;
  font-size: 20px;
}

.clients {
  width: 95%;
  margin: 40px auto 0px;
  border-top: 1px solid #dedede;
  padding: 30px 0px 0px;
}

.clients h2 {
  font-family: var(--bs-oufit);
  text-align: center;
  color: var(--bs-darkblue);
  font-weight: 600;
}

.client-img {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 30px;
}

.client-img img {
  width: 150px;
}

/* Device */
.truckezy-device {
  width: 95%;
  margin: 200px auto 0px;
}

.truckezy-prod {
  width: 100%;
  text-align: center;
}

.truckezy-prod span {
  background-color: #d2fdff;
  font-family: var(--bs-quicksand);
  padding: 10px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bs-darkblue);
}

.truckezy-prod h2 {
  font-family: var(--bs-oufit);
  color: var(--bs-darkblue);
  font-weight: 600;
  margin-top: 20px;
  font-size: 42px;
}

.device-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 80px;
}

.device-1 {
  width: 20%;
  height: 250px;
  background-color: #f5faffe0;
  border-radius: 20px;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
  /* border: 1px solid #e3e3e3; */
}

.device-img {
  width: 60%;
  display: flex;
  height: 200px;
}

.device-title {
  width: 100%;
  height: 50px;
  margin-top: 10px;
}

.device-btn {
  width: 40%;
  height: 50px;
}

.device-btn a {
  display: block;
  position: absolute;
  bottom: -15px;
}

.device-img img {
  width: 200px;
  position: absolute;
  top: -30px;
}

.device-1 .btn {
  width: fit-content;
  background-color: var(--bs-Agorange);
  color: var(--bs-white);
  font-family: var(--bs-quicksand);
  font-weight: 500;
}

.device-1 p {
  font-family: var(--bs-quicksand);
  font-size: 20px;
  font-weight: 600;
  color: var(--bs-darkblue);
}

/* About us */
.about-div {
  position: relative;
  width: 100%;
  z-index: -1;
  margin-top: 10%;
}

.about-us {
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 80px 0px 0px;
}

.about-us-1 {
  width: 45%;
}

.about-us-2 {
  width: 55%;
  text-align: center;
}

.about-us-2 img {
  width: 90%;
}

.about-us-1 h2 {
  font-family: var(--bs-oufit);
  color: var(--bs-darkblue);
  font-weight: 600;
  margin-top: 20px;
  font-size: 42px;
}

.about-us-1 p {
  font-family: var(--bs-quicksand);
  font-size: 16px;
  font-weight: 400;
  color: var(--bs-black);
  line-height: 24px;
}

.about-div span img {
  position: absolute;
  z-index: -1;
  top: 0;
  width: 100%;
}

/* What we do */
.what-we-do {
  width: 95%;
  margin: 15% auto 0px;
}

.title-header span {
  background-color: #d2fdff;
  font-family: var(--bs-quicksand);
  padding: 10px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bs-darkblue);
}

.what-we-do h2 {
  font-family: var(--bs-oufit);
  color: var(--bs-darkblue);
  font-weight: 600;
  margin-top: 20px;
  font-size: 42px;
}

.what-we-div {
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
}

.what-do-div {
  width: 22%;
  border: 1px solid #ededed;
  padding: 20px;
  border-radius: 10px;
  height: 320px;
  transition: 700ms ease-in-out !important;
}
.what-do-div:hover {
  box-shadow: rgba(50, 50, 93, 0) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.152) 0px 11px 16px -8px;
}

.what-icon {
  background-color: var(--bs-Aggreen);
  width: 70px;
  margin-bottom: 20px;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
}

.what-icon img {
  width: 45px;
}

.what-do-div span {
  font-family: var(--bs-oufit);
  font-weight: 500;
  font-size: 24px;
  color: var(--bs-darkblue);
}

.what-we-div p {
  font-family: var(--bs-quicksand);
  font-size: 15px;
  font-weight: 400;
  color: var(--bs-black);
  line-height: 24px;
  margin-top: 10px;
}

.what-do-1 {
  margin-top: 50px;
}

.what-do-1 .what-icon {
  background-color: var(--bs-Agorange);
}

/* App-Content */
.app-div {
  margin-top: 10%;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.app-sect {
  display: flex;
  width: 90%;
  margin: 0 auto;
  align-items: center;
}

.app-sect-1 {
  width: 50%;
  text-align: center;
  position: relative;
}

.app-bg {
  position: absolute;
  z-index: -1;
  right: -200px;
  opacity: 10%;
}

.app-sect-2 {
  width: 50%;
}

.app-sect-1 img {
  width: 60%;
  text-align: center;
  margin-right: 15px;
}

.bg-app-img {
  position: absolute;
  width: 48% !important;
  z-index: -1;
  left: 50px;
  top: 80px;
}

.app-sect-2 .title-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-sect-2 h2 {
  font-family: var(--bs-oufit);
  color: var(--bs-darkblue);
  font-weight: 600;
  margin-top: 20px;
  font-size: 42px;
}

.app-sect-2 h2 span {
  color: var(--bs-Aggreen);
}

.app-sect-2 p {
  font-family: var(--bs-quicksand);
  font-size: 15px;
  font-weight: 400;
  color: var(--bs-black);
  line-height: 24px;
}

.app-sect-2 .title-header p a {
  color: var(--bs-darkblue);
  text-decoration: none;
  font-family: var(--bs-quicksand);
  font-size: 16px;
  font-weight: 700;
}

.app-sect-2 ul {
  padding-left: 0px;
}

.app-sect-2 ul li {
  list-style: none;
  font-family: var(--bs-quicksand);
  font-weight: 500;
  margin-bottom: 20px;
  display: flex;
}

.app-sect-2 ul li .svg-inline--fa {
  color: var(--bs-Aggreen) !important;
  font-size: 14px;
  margin-right: 10px;
}

.app-sect-2 ul li span {
  font-weight: 600;
  color: var(--bs-darkblue);
}

.App-link span {
  color: var(--bs-darkblue);
  font-weight: 600;
  font-family: var(--bs-oufit);
  font-size: 28px;
}

.App-link .app-store {
  width: 60px;
  margin-right: 25px;
}

.App-link .play-store {
  width: 200px;
}

/* Call of Action */
.call-of-act {
  margin-top: 10%;
  width: 100%;
}

.action-div {
  width: 85%;
  margin: 0 auto;
  background: rgb(2, 164, 170);
  background: linear-gradient(
    180deg,
    rgba(2, 164, 170, 1) 50%,
    rgba(1, 82, 85, 1) 100%
  );
  display: flex;
  height: fit-content;
  align-items: center;
  border-radius: 180px;
  overflow: hidden;
  transition: 1000ms ease-in-out;
}
.action-div:hover {
  box-shadow: rgba(6, 85, 34, 0.432) 0px 25px 50px -12px;
}
.action-1 {
  width: 40%;
}

.action-1 img {
  width: 90%;
}

.action-2 {
  width: 55%;
  padding: 20px;
}

.action-2 h3 {
  font-family: var(--bs-oufit);
  font-size: 62px;
  color: var(--bs-white);
}

.action-2 p {
  font-family: var(--bs-quicksand);
  color: var(--bs-white);
  font-size: 20px;
}

.action-2 .btn {
  background-color: var(--bs-white);
  padding: 10px 15px;
  font-family: var(--bs-quicksand);
  font-weight: 600;
}

/* Footer */
.footer {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 5%;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgb(255, 255, 255) 50%,
    rgba(234, 246, 252, 1) 100%
  );
}

.footer-logo a img {
  width: 200px;
}

.footer a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  font-family: var(--bs-quicksand);
  transition: 500ms ease-in-out;
  font-weight: 500;
}

.footer-2 a:hover {
  padding-left: 10px;
  color: var(--bs-Agorange);
}

.footer-3 a:hover {
  padding-left: 10px;
  color: var(--bs-Agorange);
}

.footer-section {
  margin: 0px 10px 0px 10px;
}

.footer-div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  padding: 30px 40px 0px 40px;
}

.footer-1 {
  width: 30%;
}

.footer-2 {
  width: 15%;
}

.footer-3 {
  width: 20%;
}

.footer-4 {
  width: 25%;
}

.footer-logo img {
  width: 30%;
}

.footer-div ul li {
  line-height: 35px;
  font-family: var(--bs-quicksand);
  color: var(--bs-blackgrey);
}

.footer-div h5 {
  font-family: var(--bs-quicksand);
  border-bottom: 1px solid #ff9601;
  width: fit-content;
  font-size: 18px;
}

.footer-1 p {
  font-family: var(--bs-quicksand);
  color: var(--bs-blackgrey);
  font-size: 15px;
  line-height: 25px;
  margin-top: 15px;
  font-weight: 500;
}

.footer-4 p {
  font-family: var(--bs-quicksand);
  color: var(--bs-blackgrey);
}

.footer-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 98.5%;
  border-top: 2px solid rgb(235 235 235);
}

.footer-6 {
  width: 50%;
  margin-top: 15px;
}

.footer-7 {
  text-align: end;
  width: 50%;
  margin-top: 15px;
}

.footer ul {
  padding: 0px;
}

.footer ul li {
  list-style: none;
}

.footer .bx {
  color: var(--bs-Aggreen);
  font-size: 22px;
}

.footer ul p,
.footer-1 p {
  font-family: var(--bs-quicksand);
  font-weight: 500;
}

.footer-6 {
  font-family: var(--bs-quicksand);
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.footer-6 p {
  display: flex;
  justify-content: center;
  gap: 5px;
  font-weight: 600;
}

.footer-2 i {
  color: var(--bs-Aggreen);
}

.footer-2 a svg {
  color: var(--bs-Agorange);
}

.footer-4 svg {
  color: var(--bs-Agorange);
}

.footer-6 a {
  font-weight: 600;
}

.footer-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 3%;
  width: 30%;
}

/* About Page */
.parallex {
  width: 100%;
  height: 320px;
  position: relative;
  /* margin-bottom: 300px; */
}

.parallax {
  background-image: url(../image/about-us-bg.webp);
  height: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100% 55%;
}

.parallex h1 {
  font-family: var(--bs-oufit);
  font-size: 52px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: 600;
  z-index: 1;
  width: 90%;
  color: var(--bs-white);
}

.parallex p {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--bs-quicksand);
  font-size: 16px;
  color: var(--bs-white);
  text-align: center;
  font-weight: 400;
  z-index: 1;
  width: 60%;
}

.overlay {
  position: absolute;
  background-color: var(--bs-black);
  opacity: 40%;
  width: 100%;
  height: 320px;
  z-index: 0;
  top: 0;
}

.about {
  width: 95%;
  margin: 70px auto 0px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.about h2 {
  font-family: var(--bs-oufit);
  font-weight: 600;
  color: var(--bs-darkblue);
  font-size: 40px;
}

.about p {
  font-family: var(--bs-quicksand);
  font-size: 16px;
  width: 85%;
  font-weight: 500;
}

.about-div {
  width: 100%;
  margin: 150px auto 0px;
}

.comp-tag {
  display: flex;
}

.about-tag {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

.about-tag img {
  width: 150px;
}

.about-tag span {
  font-family: var(--bs-oufit);
  font-size: 24px;
  font-weight: 600;
  color: var(--bs-darkblue);
}

.about-tag p {
  font-family: var(--bs-quicksand);
  font-size: 14px;
  width: 70%;
  text-align: center;
  line-height: 26px;
}

.about-tag-1 img {
  width: 100px;
}

.why-truckezy {
  width: 95%;
  margin: 50px auto 0px;
  background-color: #fbfaff;
  padding: 30px 30px;
}

.why-cont {
  display: flex;
  justify-content: space-between;
}

.why-cont-1 {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.why-cont-2 {
  width: 50%;
  padding: 30px 50px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.tip1 {
  width: 98%;
  height: 200px;
  border-radius: 10px;
  background-image: url(../image/tip1.webp);
  background-size: 100% 140%;
  background-position: center;
  background-repeat: no-repeat;
}

.tip2 {
  width: 28%;
  height: 300px;
  border-radius: 10px;
  background-image: url(../image/tip2.webp);
  background-size: 100% 140%;
  background-position: center;
  background-repeat: no-repeat;
}

.tip3 {
  width: 68%;
  height: 300px;
  border-radius: 10px;
  background-image: url(../image/tip3.webp);
  background-size: 100% 140%;
  background-position: center;
  background-repeat: no-repeat;
}

.tip2 {
  font-family: var(--bs-oufit);
  font-size: 32px;
  padding: 30px 15px;
  font-weight: 600;
  color: var(--bs-white);
}

.why-truckezy h2 {
  font-family: var(--bs-quicksand);
  color: var(--bs-darkblue);
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 40px;
}

.why-tap {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 200px;
}

.why-tap img {
  width: 50px;
}

.why-tap span {
  font-family: var(--bs-oufit);
  font-weight: 400;
  font-size: 20px;
}

.why-tap p {
  font-family: var(--bs-quicksand);
  font-size: 14px;
  font-weight: 500;
}

.truckezy-exp {
  width: 95%;
  margin: 100px auto 0px;
  display: flex;
  justify-content: space-between;
}

.truckezy-exp-1 {
  width: 50%;
}

.truckezy-exp-2 {
  width: 50%;
  text-align: center;
}

.truckezy-exp-2 img {
  width: 80%;
}

.truckezy-exp-sec {
  width: 100%;
  gap: 50px;
  display: flex;
  flex-direction: column;
}

.truckezy-expt {
  width: 100%;
  display: flex;
}

.truckezy-img {
  width: 15%;
}

.truckezy-expt-cont {
  width: 70%;
}

.truckezy-img img {
  width: 80px;
}

.why-header h2 {
  font-family: var(--bs-oufit);
  color: var(--bs-darkblue);
  font-weight: 600;
  margin-top: 15px;
  margin-bottom: 40px;
  font-size: 36px;
}

.truckezy-expt-cont span {
  font-family: var(--bs-oufit);
  font-weight: 400;
  font-size: 20px;
}

.truckezy-expt-cont p {
  font-family: var(--bs-quicksand);
  font-weight: 400;
  font-size: 16px;
}

.footer-abt {
  margin-top: 0%;
}

.coa {
  width: 100%;
  background-color: var(--bs-Aggreen);
  height: 15rem;
  margin-top: 15%;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.coa span {
  font-family: var(--bs-oufit);
  font-size: 38px;
  font-weight: 500;
  color: var(--bs-white);
  position: relative;
  z-index: 1;
}

.coa .btn {
  background-color: var(--bs-Agorange);
  margin-top: 15px;
  color: var(--bs-white);
  font-family: var(--bs-quicksand);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.coa-bg {
  position: absolute;
  width: 100%;
  padding: 20px;
}

/* Vehcile Tracking */
.v5-div {
  margin: 0px auto;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.v5-gps {
  display: flex;
  justify-content: space-between;
}

.v5-gps1 {
  width: 50%;
  padding: 150px 50px;
  position: relative;
}

.v5-gps2 {
  width: 50%;
}

.rectangle {
  width: 1000px;
  height: 335px;
  background-color: #fbfaff;
  border-radius: 210px;
  transform: rotate(130deg);
  position: relative;
  overflow: hidden;
}

.rectangle img {
  width: 55%;
  transform: rotate(227deg);
  position: absolute;
  bottom: -100px;
  right: -10px;
}

.v5-gps1 h1 {
  font-family: var(--bs-oufit);
  font-size: 56px;
  color: var(--bs-Aggreen);
}

.v5-gps1 p {
  font-family: var(--bs-quicksand);
  color: #262626;
  line-height: 32px;
  font-weight: 500;
}

.v5-gps1 .btn {
  background-color: var(--bs-Agorange);
  font-family: var(--bs-quicksand);
  font-weight: 500;
  color: var(--bs-white);
}

.v5-gps2 span img {
  width: 25%;
  /* transform: rotate(358deg); */
  top: 70px;
  position: absolute;
  right: -85px;
}

.v5-features {
  width: 95%;
  margin: 100px auto;
  text-align: center;
}

.v5-features h2 {
  font-family: var(--bs-oufit);
  margin-top: 10px;
  font-weight: 600;
  font-size: 36px;
  color: var(--bs-darkblue);
}

.v5-feat-sec {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.v5-fet {
  width: 48%;
  background-color: var(--bs-white);
  box-shadow: rgba(242, 242, 255, 0.747) 0px 10px 15px -3px,
    rgba(233, 233, 255, 0.626) 0px 4px 6px -2px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #f1f1f1;
  padding: 30px;
}

.v5-fet .v5-icon {
  background: rgb(2, 164, 170);
  background: linear-gradient(
    180deg,
    rgba(2, 164, 170, 1) 0%,
    rgba(1, 82, 85, 1) 100%
  );
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: var(--bs-white);
  display: flex;
  justify-content: center;
  align-items: center;
}

.v5-icon .svg-inline--fa {
  height: 1.5rem;
}

.v5-fet span {
  font-family: var(--bs-oufit);
  font-size: 28px;
  color: var(--bs-darkblue);
  font-weight: 400;
}

.v5-fet p {
  font-family: var(--bs-quicksand);
  font-size: 15px;
  line-height: 26px;
  margin-top: 5px;
}

.v5-abt {
  background-color: #f4f8fa;
  padding: 0.5px 0px 80px;
}

.v5-abt .truckezy-exp {
  margin: 80px auto 0px;
  width: 95%;
}

.v5-abt .truckezy-exp-1 {
  width: 55%;
}

.v5-abt .truckezy-exp-2 {
  display: flex;
  justify-content: space-between;
  width: 45%;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
}

.exp1 {
  width: 48%;
  height: 300px;
  background-color: #02a4aa;
  border-radius: 10px;
  overflow: hidden;
}

.exp2 {
  width: 48%;
  height: 400px;
  background-color: #091358;
  position: relative;
  z-index: 1;
  border-radius: 10px;
  overflow: hidden;
}

.exp3 {
  width: 100%;
  height: 300px;
  background-color: #262626;
  position: absolute;
  bottom: -45px;
  overflow: hidden;
  border-radius: 10px;
  overflow: hidden;
}

.element-3 {
  background-color: #f4f8fa;
  width: 50%;
  height: 100px;
  position: absolute;
  top: 0;
  border-radius: 0px 10px;
  right: 0;
}

.exp3 img {
  width: 100%;
}

.exp1 img {
  width: 100%;
}

.exp2 img {
  width: 100%;
}

.truckezy-choose {
  width: 95%;
  margin: 80px auto;
  text-align: center;
}

.truk-cho {
  width: 90%;
  margin: 0 auto;
}

.truk-cho-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  width: 85%;
  margin: 0 auto;
}

.number-choose-img {
  width: 12%;
}

.element-5 {
  width: 20%;
}

.truk-cho-2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.cho-pts {
  width: 30%;
  text-align: center;
  margin-top: 10px;
}

.truk-cho-2 span {
  font-family: var(--bs-oufit);
  font-size: 28px;
  color: var(--bs-darkblue);
  font-weight: 500;
}

.cho-pts p {
  width: 95%;
  text-align: center;
  font-family: var(--bs-quicksand);
  font-weight: 500;
}

.truk-slogan {
  width: 100%;
  margin: 50px 0px 0px;
  text-align: center;
  background-color: white;
  position: relative;
  z-index: 100;
}

.truk-slogan .svg-inline--fa {
  color: var(--bs-Aggreen);
  height: 3.5rem;
}

.truk-slogan p {
  font-family: var(--bs-quicksand);
  color: var(--bs-darkblue);
  font-weight: 500;
  font-size: 28px;
}

.truk-slogan .btn {
  background-color: var(--bs-Agorange);
  font-family: var(--bs-quicksand);
  font-weight: 500;
  color: var(--bs-white);
}

.truk-slogan p span {
  color: var(--bs-Aggreen);
  font-weight: 700;
}

.element-6 {
  width: 150px;
  left: -90px;
  bottom: -50px;
  z-index: -1;
  position: absolute;
  opacity: 50%;
}

/* Dash Cam */
.dash-cam {
  padding-bottom: 60px;
}

.dash-cam .rectangle {
  overflow: visible;
}

.dash-cam .rectangle img {
  width: 47%;
  transform: rotate(230deg);
  position: absolute;
  bottom: -155px;
  right: 0px;
}

.dash-feature {
  margin: 100px auto;
  text-align: center;
  width: 95%;
}

.dash-feature h2 {
  font-family: var(--bs-quicksand);
  margin-top: 10px;
  font-weight: 800;
  font-size: 36px;
  color: var(--bs-darkblue);
}

.dash-feature-div {
  margin-top: 50px;
  position: relative;
  display: flex;
  justify-content: center;
}

.truk-feature {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 50px;
}

.feature-pts {
  width: 30%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  background-color: #f1f1f1;
  border-radius: 10px;
  padding: 30px 20px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.067);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  gap: 10px;
}

.feature-pts p {
  text-align: left;
}

.feature-pts span {
  font-family: var(--bs-quicksand);
  font-size: 18px;
  font-weight: 700;
}

.feature-pts p {
  font-family: var(--bs-quicksand);
  font-size: 15px;
}

.feature-pts .svg-inline--fa {
  height: 2rem;
  color: var(--bs-Aggreen);
}

.dash-feature-div .element-7 {
  position: absolute;
  width: 70%;
  z-index: -1;
  opacity: 30%;
}

.exp3 img {
  width: 100%;
}

/* Fuel Sensor */
.fs-div {
  width: 95%;
  margin: 0 auto;
  text-align: center;
}

.fs-div h2 {
  font-family: var(--bs-quicksand);
  margin-top: 10px;
  font-weight: 800;
  font-size: 36px;
  color: var(--bs-darkblue);
}

.fs-sec-feat {
  margin-top: 30px;
}

.fs-sect-header {
  width: 100%;
  border: 1px solid #d6d6d6;
  height: 80px;
  border-radius: 15px;
  display: flex;
  align-items: center;
}

.fs-pts-1 {
  width: 40%;
  font-family: var(--bs-oufit);
  font-size: 32px;
  color: var(--bs-darkblue);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  font-weight: 600;
}

.fs-pts-2 {
  width: 40%;
  background-color: var(--bs-Aggreen);
  font-family: var(--bs-oufit);
  font-size: 26px;
  color: var(--bs-white);
  height: 100%;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  padding: 20px;
  font-weight: 600;
}

.fs-pts-3 {
  width: 40%;
  font-family: var(--bs-oufit);
  font-size: 26px;
  color: var(--bs-darkblue);
  height: 100%;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  padding: 20px;
  font-weight: 600;
}

.fs-sect-pts {
  width: 100%;
  border: 1px solid #d6d6d6;
  height: 210px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  margin-top: 20px;
  overflow: hidden;
  position: relative;
}

.fs-sect-pts .fs-pts-1 {
  width: 40%;
  font-family: var(--bs-quicksand);
  font-size: 26px;
  color: var(--bs-darkblue);
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 20px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.fs-sect-pts .fs-pts-2 {
  width: 40%;
  background-color: var(--bs-Aggreen);
  font-family: var(--bs-quicksand);
  font-size: 20px;
  color: var(--bs-white);
  height: 100%;
  display: flex;
  align-items: flex-start;
  padding: 20px;
  font-weight: 400;
}

.fs-sect-pts .fs-pts-3 {
  width: 40%;
  font-family: var(--bs-quicksand);
  font-size: 20px;
  color: var(--bs-darkblue);
  height: 100%;
  display: flex;
  align-items: flex-start;
  padding: 20px;
  font-weight: 400;
}

.fs-sect-pts .fs-pts-2,
.fs-sect-pts .fs-pts-3 {
  text-align: left;
}

.fs-pts-1 .svg-inline--fa {
  position: absolute;
  bottom: 0;
  height: 7rem;
  left: -30px;
  opacity: 10%;
}
.gps3 .rectangle img {
  width: 47%;
  transform: rotate(230deg);
  position: absolute;
  bottom: -30px;
  right: 80px;
}
/* Application Css */
.appl-div {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding: 100px 50px;
}
.appl-div h1 {
  font-family: var(--bs-oufit);
  font-size: 56px;
  font-weight: 600;
  color: var(--bs-Aggreen);
}
.appl-div h1 span {
  color: var(--bs-Agorange);
}
.appl-div p {
  font-family: var(--bs-quicksand);
  font-size: 16px;
  width: 100%;
  text-align: center;
  font-weight: 500;
}
.appl-app p {
  font-family: var(--bs-oufit);
  font-weight: 500;
  font-size: 24px;
}
.appl-app span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100%;
}
.appl-app .appstore {
  width: 50px;
  display: block;
}
.appl-app .play {
  width: 190px;
  display: block;
}
.mobile-app-sec {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  align-items: center;
  width: 100%;
}
.mobile-app-sec .mobile-app-1 {
  width: 70%;
}
.mobile-app-sec .mobile-app-2 {
  width: 45%;
}
.mobile-app-sec .mobile-app-3 {
  width: 45%;
}
.mobile-app-sect-1 {
  width: 32%;
  text-align: end;
  position: relative;
}
.mobile-app-sect-2 {
  width: 25%;
}
.mobile-app-sect-3 {
  width: 32%;
  text-align: left;
  position: relative;
}
.element-11 {
  position: absolute;
  z-index: -1;
  bottom: -15px;
  right: 170px;
}
.element-11 img {
  width: 70px;
}
.element-13 {
  position: absolute;
  z-index: -1;
  top: -30px;
  left: 110px;
}
.element-13 img {
  width: 70px;
}
.appl-feature {
  text-align: center;
  width: 95%;
  margin: 80px auto 0px;
}
.appl-feature h2 {
  font-family: var(--bs-oufit);
  color: var(--bs-darkblue);
  font-weight: 600;
  margin-top: 20px;
  font-size: 42px;
}
.appl-tab {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.appl-tab .nav-pills {
  border: 1px solid #d6d6d6;
  border-radius: 50px;
}
.appl-tab .nav-link {
  border-radius: 50px !important;
  font-family: var(--bs-quicksand);
  font-size: 20px;
  color: var(--bs-black);
  font-weight: 600;
}
.appl-tab .nav-link.active {
  background-color: var(--bs-Aggreen) !important;
}
.mobile-section-1 {
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
  align-items: center;
}
.mobile-section-set-1 {
  width: 50%;
}
.mobile-section-set-2 {
  width: 50%;
  text-align: left;
}
.mobile-section-set-2 h3 {
  margin-top: 15px;
  font-family: var(--bs-oufit);
  font-size: 38px;
  color: var(--bs-darkblue);
}
.mobile-section-set-2 p {
  font-family: var(--bs-quicksand);
  font-size: 16px;
  font-weight: 500;
}
.mobile-section-set-2 ul {
  margin: 0px;
  padding: 0px 0px;
}
.mobile-section-set-2 ul li {
  list-style: none;
  font-family: var(--bs-quicksand);
  font-size: 18px;
  font-weight: 500;
  color: var(--bs-black);
}
.mobile-section-set-2 ul li .svg-inline--fa {
  color: var(--bs-Agorange);
}
.mobile-section-set-1 {
  position: relative;
}
.mobile-section-set-1 .element-14 img {
  position: absolute;
  width: 55%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
.app-images-1 img {
  width: 60%;
  position: relative;
  z-index: 1;
}
.app-images-2 img {
  width: 40%;
  position: absolute;
  z-index: 2;
  bottom: -15px;
}
.rectangle-div-1 img {
  width: 100%;
  position: absolute;
  left: 0;
  z-index: -1;
  height: 40rem;
}
.mobile-section-2 {
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
  align-items: center;
}
.mobile-section-set-1 {
  width: 50%;
}
.mobile-section-set-2 {
  width: 50%;
  text-align: left;
}
.mobile-section-set-2 h3 {
  margin-top: 15px;
  font-family: var(--bs-oufit);
  font-size: 38px;
  color: var(--bs-darkblue);
}
.mobile-section-set-2 p {
  font-family: var(--bs-quicksand);
  font-size: 16px;
  font-weight: 500;
}
.mobile-section-set-2 ul {
  margin: 0px;
  padding: 0px 0px;
}
.mobile-section-set-2 ul li {
  list-style: none;
  font-family: var(--bs-quicksand);
  font-size: 16px;
  font-weight: 500;
  color: var(--bs-black);
  margin-top: 5px;
}
.mobile-section-set-2 ul li .svg-inline--fa {
  color: var(--bs-Agorange);
}
.mobile-section-set-1 {
  position: relative;
}
.mobile-section-set-1 .element-14 img {
  position: absolute;
  width: 55%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
.app-images-1 img {
  width: 60%;
  position: relative;
  z-index: 1;
}
.app-images-2 img {
  width: 40%;
  position: absolute;
  z-index: 2;
  bottom: -15px;
}
.mobile-section-2 .mobile-section-set-2 {
  padding-left: 50px;
}
.mobile-section-2 .app-images-2 img {
  width: 40%;
  position: absolute;
  z-index: 2;
  bottom: -15px;
  left: 80px;
}
.rectangle-div-2 img {
  width: 100%;
  position: absolute;
  left: 0;
  z-index: -1;
  height: 40rem;
  top: 43%;
}
.truck-features {
  text-align: center;
  width: 95%;
  margin: 100px auto 0px;
}
.truck-features h2 {
  font-family: var(--bs-oufit);
  font-size: 36px;
  margin-top: 10px;
  color: var(--bs-darkblue);
}
.Features-list {
  width: 95%;
  margin: 30px auto 0px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 55px;
}
.features-pts {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 20px;
  gap: 5px;
}
.features-pts img {
  width: 80px;
}
.features-pts span {
  font-family: var(--bs-oufit);
  font-size: 22px;
  margin-top: 5px;
  font-weight: 600;
  color: var(--bs-darkblue);
}
.features-pts p {
  text-align: left;
  font-family: var(--bs-quicksand);
  font-weight: 500;
  line-height: 28px;
}
.element-15 img {
  position: absolute;
  left: -250px;
}
.element-16 img {
  position: absolute;
  right: -350px;
  top: -150px;
  width: 45%;
}
.element-17 img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -10;
  height: 55rem;
  opacity: 50%;
}
.web-app {
  width: 100%;
  margin: 20px auto 0px;
  display: flex;
  justify-content: space-between;
  /* gap: 40px; */
  align-items: center;
}
.web-app-1 {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* gap: 20px; */
}
.web-app-2 {
  width: 55%;
}
.web-app-1 .web-title {
  font-family: var(--bs-oufit);
  text-align: center;
  color: var(--bs-darkblue);
  font-weight: 600;
  font-size: 42px;
}
.web-app-1 p {
  font-family: var(--bs-quicksand);
  font-size: 15px;
  text-align: left;
}
.web-app-1 .svg-inline--fa {
  height: 1.5rem;
  color: var(--bs-Agorange);
}
.web-app-1 .nav-link span {
  text-align: left;
  font-size: 16px;
  font-family: var(--bs-quicksand);
  font-weight: 700;
  margin-top: 5px;
}
.web-app-1 .web-app-icon {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    113deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 250, 245, 0.47111344537815125) 25%,
    rgba(255, 150, 30, 0.26943277310924374) 100%
  );
  padding: 5px;
  display: flex;
  border-radius: 5px;
}
.web-app-image {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.web-app-image img {
  width: 100%;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
}
.web-app-1 .nav-link.active {
  background-color: var(--bs-white);
  font-size: 18px;
  color: var(--bs-darkblue);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
.web-app-1 .nav-link {
  display: flex !important;
  flex-direction: column;
  background-color: var(--bs-white);
  margin-right: 20px;
  padding: 20px;
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset,
    rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
  color: var(--bs-darkblue);
  width: 90%;
  border: none;
  border-radius: 10px;
}
.web-app-image.active img {
  display: block;
}
.web-app-image img {
  display: none;
}
.web-app-1 .nav-tabs {
  border: none;
}
.web-app-1 .nav-item {
  width: 100%;
}
.web-tabs {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 30px;
}
.web-app-section {
  width: 100%;
  margin: 150px auto;
}
.web-app-sect-div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.web-app-pts-1 {
  width: 48%;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: var(--bs-white);
}
.web-app-pts-1 img {
  width: 100%;
}
.web-app-pts-1 span {
  font-family: var(--bs-oufit);
  font-size: 32px;
  color: var(--bs-darkblue);
  font-weight: 600;
}
.web-app-pts-1 p {
  font-family: var(--bs-quicksand);
  font-weight: 500;
  color: var(--bs-blackgrey);
  font-size: 15px;
}
.fuels .rectangle img {
  width: 50% !important;
  transform: rotate(230deg);
  position: absolute;
  bottom: -120px;
  right: 65px;
}
.btn:hover {
  background-color: #02a4aa !important;
  color: var(--bs-white) !important;
}
.pp-body {
  padding: 50px;
  margin-top: 50px;
  font-family: var(--bs-quicksand);
  font-weight: 500;
}
.pp-body h1 {
  font-family: var(--bs-oufit);
  color: var(--bs-Aggreen);
}
.web-app-image span {
  font-family: var(--bs-oufit);
  font-size: 22px;
  font-weight: 500;
  color: var(--bs-darkblue);
}
.web-app-image p {
  font-family: var(--bs-quicksand);
  font-size: 14px;
  text-align: left;
}
/* Social Media Icon */
.social-icon1 {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  height: 35px;
  width: 45px;
  z-index: 9;
}
.main-bg img {
  position: absolute;
  width: 100%;
  z-index: -1;
  height: 115%;
  top: 0;
}
/* Mobile Responsive Media Query */
@media only screen and (max-width: 600px) {
  body {
    width: 100%;
    height: 100%;
  }
  .nav-1 {
    display: block;
    width: 100%;
  }
  .nav-2 {
    display: block;
    width: 100%;
  }
  .main-sec {
    flex-wrap: wrap;
    margin: 80px auto 0px;
  }
  .main-1 {
    width: 100%;
    padding: 5px;
  }
  .main-2 {
    width: 100%;
    display: none;
  }
  .device-div {
    flex-wrap: wrap;
    gap: 100px;
  }
  .device-1 {
    width: 100%;
  }
  .about-us {
    flex-wrap: wrap;
  }
  .about-us-1 {
    width: 100%;
  }
  .about-us-2 {
    width: 100%;
  }
  .about-bg {
    display: none;
  }
  .what-we-div {
    flex-wrap: wrap;
  }
  .what-do-div {
    width: 100%;
  }
  .app-sect {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .app-sect-1 {
    width: 100%;
  }
  .app-sect-2 {
    width: 100%;
  }
  .action-div {
    flex-wrap: wrap;
    border-radius: 60px;
  }
  .action-1 {
    width: 100%;
    display: none;
  }
  .action-2 {
    width: 100%;
    text-align: center;
  }
  .footer-1 {
    width: 100%;
  }
  .footer-2,
  .footer-3 {
    width: 50%;
  }
  .footer-4 {
    width: 100%;
  }
  .footer-6 {
    flex-direction: column;
  }
  .footer-div {
    padding: 30px 10px 0px 10px;
  }
  /* About Us */
  .coa {
    height: auto;
    padding: 35px 30px;
  }
  .coa span {
    font-size: 28px;
  }
  .truckezy-exp {
    flex-direction: column;
    gap: 30px;
  }
  .truckezy-exp-1 {
    width: 100%;
  }
  .truckezy-exp-2 {
    width: 100%;
  }
  .truckezy-expt {
    justify-content: space-between;
  }
  .truckezy-expt-cont {
    width: 75%;
  }
  .truckezy-exp-2 img {
    width: 95%;
  }
  .comp-tag {
    flex-direction: column;
    gap: 20px;
  }
  .about-tag {
    width: 100%;
  }
  .why-truckezy {
    padding: 30px 10px;
  }
  .why-cont {
    flex-direction: column;
  }
  .why-cont-1 {
    width: 100%;
  }
  .tip1 {
    width: 100%;
    background-size: 110% 100%;
  }
  .tip2 {
    width: 30%;
    height: 190px;
    font-size: 18px;
    padding: 10px 15px;
  }
  .tip3 {
    width: 65%;
    height: 190px;
    background-size: 115% 100%;
  }
  .why-cont-2 {
    width: 100%;
    padding: 40px 0px;
  }
  .about-div {
    margin: 70px auto 0px;
  }
  .parallex {
    height: 350px;
  }
  .overlay {
    height: 350px;
  }
  .parallex h1 {
    font-size: 48px;
    top: 35%;
    left: 50%;
    width: 97%;
  }
  .parallex p {
    top: 65%;
    width: 97%;
    font-size: 15px;
  }
  .about p {
    width: 95%;
  }
  .truckezy-choose {
    flex-direction: column;
  }
  .truk-cho {
    width: 95%;
  }
  .truk-cho-2 {
    flex-direction: column;
  }
  .cho-pts {
    width: 100%;
  }
  .truk-cho-1 {
    display: none;
  }
  .v5-abt .truckezy-exp-1 {
    width: 100%;
  }
  .v5-abt .truckezy-exp-2 {
    width: 100%;
    display: none;
  }
  .v5-fet {
    width: 100%;
  }
  .v5-gps {
    flex-direction: column;
  }
  .v5-gps1 {
    width: 100%;
    padding: 90px 20px 50px;
  }
  .v5-gps2 {
    width: 100%;
  }
  .rectangle {
    width: 100%;
    height: 350px;
  }
  .rectangle img {
    width: 100%;
    transform: rotate(227deg);
    position: relative;
    bottom: 0px;
    right: 0px;
  }
  .gps3 .rectangle img {
    width: 85%;
    transform: rotate(230deg);
    position: absolute;
    bottom: -5px;
    right: 83px;
  }
  .feature-pts {
    width: 100%;
  }
  .dash-feature-div .element-7 {
    display: none;
  }
  .dash-cam .rectangle img {
    width: 90%;
    transform: rotate(230deg);
    position: absolute;
    bottom: -20px;
    right: 0px;
  }
  .fuels .rectangle img {
    width: 100% !important;
  }
  .fs-sect-header {
    flex-wrap: wrap;
    height: auto;
  }
  .fs-pts-1 {
    width: 100%;
    font-size: 28px;
    justify-content: center;
  }
  .fs-pts-2 {
    width: 50%;
    font-size: 18px;
  }
  .fs-pts-3 {
    width: 50%;
    font-size: 18px;
    background-color: var(--bs-whiteblue);
  }
  .fs-sect-pts {
    flex-wrap: wrap;
    height: auto;
    align-items: flex-start;
  }
  .fs-sect-pts .fs-pts-1 {
    width: 100%;
    justify-content: center;
  }
  .fs-sect-pts .fs-pts-2 {
    width: 50%;
    height: 430px;
  }
  .fs-sect-pts .fs-pts-3 {
    width: 50%;
    height: 430px;
  }
  .fs-sect-pts .fs-pts-2,
  .fs-sect-pts .fs-pts-3 {
    text-align: center;
  }
  .pp-body {
    padding: 25px;
  }
  .element-15 img {
    display: none;
  }
  .features-pts {
    width: 100%;
  }
  .mobile-section-2 {
    flex-direction: column;
  }
  .element-13,
  .rectangle-div-1 img,
  .rectangle-div-2 img {
    display: none;
  }
  .mobile-section-1 {
    flex-direction: column-reverse;
  }
  .web-app-1 {
    width: 100%;
  }
  .mobile-section-set-2 {
    width: 100%;
    padding: 20px;
  }
  .mobile-section-set-1 {
    width: 100%;
    padding: 20px;
  }
  .element-16 img {
    display: none;
  }
  .mobile-section-2 .mobile-section-set-2 {
    padding-left: 20px;
  }
  .web-app-sect-div{
    flex-direction: column;
  }
  .web-app-pts-1{
    width: 100%;
    padding: 10px;
  }
  .web-app{
    flex-direction: column;
    gap: 40px;
  }
  .web-app-2{
    width: 100%;
  }
  .app-images-1 img{
    width: 100%;
  }
  .app-images-2 img{
    width: 60%;
    bottom: 0px;
    right: 0;
  }
  .mobile-section-2 .app-images-2 img{
    width: 60%;
    left: 0px;
  }
  .mobile-app-sect-1, .mobile-app-sect-3{
    display: none;
  }
  .mobile-app-sect-2{
    width: 80%;
  }
  .mobile-app-sec .mobile-app-1{
    width: 100%;
  }
  .web-app-1 .nav-link{
    padding: 20px 10px;
    color: var(--bs-darkblue);
    width: 85%;
  }
  .web-app-1 .svg-inline--fa{
    height: 1rem;
  }
  .web-app-1 .nav-link span{
    font-size: 12px;
  }
  #pills-profile{
    padding: 20px;
  }
  .web-tabs{
    gap: 10px;
  }
}
/* .tab-content1 .fade.active {
  transition: opacity 0.15s linear;
  animation: 1s slide-left;
}
@keyframes slide-left {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
} */