@charset "UTF-8";
.homeBanner {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 0;
  background-color: var(--primaryColor);
  margin-top: 80px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .homeBanner {
    margin-top: 70px;
  }
}
@media (max-width: 480px) {
  .homeBanner {
    margin-top: 60px;
  }
}
.homeBanner::after {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: url(../images/bannerLine.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.homeBanner .homeBannerMain {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.homeBanner .homeBannerMain .homeBannerDetails {
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1024px) {
  .homeBanner .homeBannerMain .homeBannerDetails {
    flex: 100%;
    justify-content: center;
    align-items: center;
    padding-top: 80px;
  }
}
@media (max-width: 768px) {
  .homeBanner .homeBannerMain .homeBannerDetails {
    padding-top: 60px;
  }
}
.homeBanner .homeBannerMain .homeBannerDetails h1 {
  color: white;
  font-size: 5.3em;
}
@media (max-width: 1024px) {
  .homeBanner .homeBannerMain .homeBannerDetails h1 {
    font-size: 3.5em;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .homeBanner .homeBannerMain .homeBannerDetails h1 {
    font-size: 2.5em;
  }
}
@media (max-width: 480px) {
  .homeBanner .homeBannerMain .homeBannerDetails h1 {
    font-size: 2.2em;
  }
}
.homeBanner .homeBannerMain .homeBannerDetails p {
  font-size: 20px;
  color: white;
  margin-top: 20px;
  line-height: 1.5;
  font-weight: 300;
}
@media (max-width: 1024px) {
  .homeBanner .homeBannerMain .homeBannerDetails p {
    font-size: 18px;
    text-align: center;
    width: 75%;
  }
}
@media (max-width: 840px) {
  .homeBanner .homeBannerMain .homeBannerDetails p {
    width: 90%;
  }
}
@media (max-width: 768px) {
  .homeBanner .homeBannerMain .homeBannerDetails p {
    font-size: 16px;
  }
}
@media (max-width: 500px) {
  .homeBanner .homeBannerMain .homeBannerDetails p {
    width: 100%;
  }
}
.homeBanner .homeBannerMain .homeBannerDetails .bannerBtn {
  display: flex;
  margin-top: 40px;
  align-items: center;
  gap: 20px;
}
@media (max-width: 500px) {
  .homeBanner .homeBannerMain .homeBannerDetails .bannerBtn {
    flex-direction: column;
    margin-top: 30px;
    gap: 15px;
  }
}
.homeBanner .homeBannerMain .homeBannerDetails .bannerBtn .bannerBtnPrimary {
  padding: 16px 34px;
  background: white;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primaryColor);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: 0.3s;
}
@media (max-width: 500px) {
  .homeBanner .homeBannerMain .homeBannerDetails .bannerBtn .bannerBtnPrimary {
    width: 100%;
  }
}
.homeBanner .homeBannerMain .homeBannerDetails .bannerBtn .bannerBtnPrimary:hover {
  background: var(--primaryHoverColor);
  color: white;
  transition: 0.3s;
  border-color: var(--primaryHoverColor);
}
.homeBanner .homeBannerMain .homeBannerDetails .bannerBtn .bannerBtnSecondary {
  padding: 16px 34px;
  background: rgba(255, 255, 255, 0.1529411765);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: 0.3s;
}
@media (max-width: 768px) {
  .homeBanner .homeBannerMain .homeBannerDetails .bannerBtn .bannerBtnSecondary {
    display: none;
  }
}
.homeBanner .homeBannerMain .homeBannerDetails .bannerBtn .bannerBtnSecondary:hover {
  background: var(--primaryHoverColor);
  color: white;
  transition: 0.3s;
  border-color: var(--primaryHoverColor);
}
.homeBanner .homeBannerMain .homeBannerDetails .bannerBtn .mobileBannerBtnSecondary {
  padding: 16px 34px;
  background: rgba(255, 255, 255, 0.1529411765);
  border-radius: 50px;
  display: none;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: 0.3s;
}
@media (max-width: 768px) {
  .homeBanner .homeBannerMain .homeBannerDetails .bannerBtn .mobileBannerBtnSecondary {
    display: flex;
  }
}
.homeBanner .homeBannerMain .homeBannerDetails .bannerBtn .mobileBannerBtnSecondary:hover {
  background: var(--primaryHoverColor);
  color: white;
  transition: 0.3s;
  border-color: var(--primaryHoverColor);
}
.homeBanner .homeBannerMain .homeBannerThumbanil {
  flex: 0 0 40%;
  position: relative;
  z-index: 0;
  display: flex;
}
@media (max-width: 1024px) {
  .homeBanner .homeBannerMain .homeBannerThumbanil {
    flex: 100%;
    height: 400px;
    margin-top: 60px;
  }
}
@media (max-width: 500px) {
  .homeBanner .homeBannerMain .homeBannerThumbanil {
    height: 300px;
    margin-top: 40px;
  }
}
.homeBanner .homeBannerMain .homeBannerThumbanil::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 55%;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #b077ff;
  clip-path: polygon(0 30%, 100% 0%, 100% 100%, 0% 100%);
}
.homeBanner .homeBannerMain .homeBannerThumbanil img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.homeBanner .homeBannerMain .homeBannerThumbanil .element1 {
  position: absolute;
  width: 150px;
  bottom: 50px;
  left: -50px;
  animation: bounce1 6s linear infinite;
}
@media (max-width: 768px) {
  .homeBanner .homeBannerMain .homeBannerThumbanil .element1 {
    left: 0;
  }
}
@media (max-width: 480px) {
  .homeBanner .homeBannerMain .homeBannerThumbanil .element1 {
    left: 0;
    width: 80px;
  }
}
@keyframes bounce1 {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}
.homeBanner .homeBannerMain .homeBannerThumbanil .element1 img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.homeBanner .homeBannerMain .homeBannerThumbanil .element2 {
  position: absolute;
  width: 170px;
  top: 100px;
  right: -50px;
  animation: bounce2 5s linear infinite;
  animation-delay: 1s;
}
@media (max-width: 768px) {
  .homeBanner .homeBannerMain .homeBannerThumbanil .element2 {
    right: 0;
  }
}
@media (max-width: 480px) {
  .homeBanner .homeBannerMain .homeBannerThumbanil .element2 {
    right: 0;
    top: 40px;
    width: 100px;
  }
}
@keyframes bounce2 {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}
.homeBanner .homeBannerMain .homeBannerThumbanil .element2 img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 6px;
  overflow: hidden;
}
.homeBanner .bvideo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.1;
  display: none;
}
.homeBanner .bvideo video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.homeBanner .dots {
  position: absolute;
  top: -10%;
  left: -10%;
  display: grid;
  grid-template-columns: repeat(20, 100px);
  grid-template-rows: repeat(20, 100px);
  place-items: center;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.7;
}
.homeBanner .dots .dot {
  width: 4px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.6941176471);
  border-radius: 50%;
  animation: dot 28s calc(var(--delay1, 0s) + var(--delay2, 0s)) infinite ease-in-out;
}
@keyframes dot {
  from {
    transform: rotate(0deg) translateX(100px);
  }
  to {
    transform: rotate(1440deg) translateX(100px);
  }
}
.homeBanner .dots .dot:nth-child(1) {
  --hue: 99.2111656794;
}
.homeBanner .dots .dot:nth-child(2) {
  --hue: 331.5534480174;
}
.homeBanner .dots .dot:nth-child(3) {
  --hue: 50.9635745755;
}
.homeBanner .dots .dot:nth-child(4) {
  --hue: 218.2179725198;
}
.homeBanner .dots .dot:nth-child(5) {
  --hue: 312.8053483981;
}
.homeBanner .dots .dot:nth-child(6) {
  --hue: 225.1482065754;
}
.homeBanner .dots .dot:nth-child(7) {
  --hue: 125.537780366;
}
.homeBanner .dots .dot:nth-child(8) {
  --hue: 338.3245111823;
}
.homeBanner .dots .dot:nth-child(9) {
  --hue: 226.2560848391;
}
.homeBanner .dots .dot:nth-child(10) {
  --hue: 132.8169135327;
}
.homeBanner .dots .dot:nth-child(11) {
  --hue: 297.4276634758;
}
.homeBanner .dots .dot:nth-child(12) {
  --hue: 251.071466576;
}
.homeBanner .dots .dot:nth-child(13) {
  --hue: 165.9337009111;
}
.homeBanner .dots .dot:nth-child(14) {
  --hue: 119.2977267796;
}
.homeBanner .dots .dot:nth-child(15) {
  --hue: 69.8023102336;
}
.homeBanner .dots .dot:nth-child(16) {
  --hue: 66.3846586253;
}
.homeBanner .dots .dot:nth-child(17) {
  --hue: 103.3194642064;
}
.homeBanner .dots .dot:nth-child(18) {
  --hue: 288.3597253576;
}
.homeBanner .dots .dot:nth-child(19) {
  --hue: 163.5820587172;
}
.homeBanner .dots .dot:nth-child(20) {
  --hue: 177.5583889928;
}
.homeBanner .dots .dot:nth-child(21) {
  --hue: 197.9228815598;
}
.homeBanner .dots .dot:nth-child(22) {
  --hue: 175.2478107764;
}
.homeBanner .dots .dot:nth-child(23) {
  --hue: 334.2797111443;
}
.homeBanner .dots .dot:nth-child(24) {
  --hue: 321.7827558266;
}
.homeBanner .dots .dot:nth-child(25) {
  --hue: 66.2188118688;
}
.homeBanner .dots .dot:nth-child(26) {
  --hue: 174.0504729053;
}
.homeBanner .dots .dot:nth-child(27) {
  --hue: 152.2345943766;
}
.homeBanner .dots .dot:nth-child(28) {
  --hue: 12.5225943627;
}
.homeBanner .dots .dot:nth-child(29) {
  --hue: 66.1341817335;
}
.homeBanner .dots .dot:nth-child(30) {
  --hue: 329.0842504808;
}
.homeBanner .dots .dot:nth-child(31) {
  --hue: 4.7970540473;
}
.homeBanner .dots .dot:nth-child(32) {
  --hue: 158.8605551418;
}
.homeBanner .dots .dot:nth-child(33) {
  --hue: 70.0791817485;
}
.homeBanner .dots .dot:nth-child(34) {
  --hue: 274.5698557674;
}
.homeBanner .dots .dot:nth-child(35) {
  --hue: 253.40387163;
}
.homeBanner .dots .dot:nth-child(36) {
  --hue: 128.8050213014;
}
.homeBanner .dots .dot:nth-child(37) {
  --hue: 325.0503271388;
}
.homeBanner .dots .dot:nth-child(38) {
  --hue: 84.577604219;
}
.homeBanner .dots .dot:nth-child(39) {
  --hue: 279.4201009011;
}
.homeBanner .dots .dot:nth-child(40) {
  --hue: 186.5398570373;
}
.homeBanner .dots .dot:nth-child(41) {
  --hue: 335.666760966;
}
.homeBanner .dots .dot:nth-child(42) {
  --hue: 90.225400887;
}
.homeBanner .dots .dot:nth-child(43) {
  --hue: 340.7261135475;
}
.homeBanner .dots .dot:nth-child(44) {
  --hue: 134.7580409978;
}
.homeBanner .dots .dot:nth-child(45) {
  --hue: 89.041670493;
}
.homeBanner .dots .dot:nth-child(46) {
  --hue: 108.139206789;
}
.homeBanner .dots .dot:nth-child(47) {
  --hue: 288.2477345224;
}
.homeBanner .dots .dot:nth-child(48) {
  --hue: 320.0401671568;
}
.homeBanner .dots .dot:nth-child(49) {
  --hue: 237.6221166675;
}
.homeBanner .dots .dot:nth-child(50) {
  --hue: 98.7230870779;
}
.homeBanner .dots .dot:nth-child(51) {
  --hue: 56.7754556591;
}
.homeBanner .dots .dot:nth-child(52) {
  --hue: 95.3276441341;
}
.homeBanner .dots .dot:nth-child(53) {
  --hue: 316.0958353542;
}
.homeBanner .dots .dot:nth-child(54) {
  --hue: 278.3861526847;
}
.homeBanner .dots .dot:nth-child(55) {
  --hue: 160.3866414668;
}
.homeBanner .dots .dot:nth-child(56) {
  --hue: 307.605787165;
}
.homeBanner .dots .dot:nth-child(57) {
  --hue: 349.4254780127;
}
.homeBanner .dots .dot:nth-child(58) {
  --hue: 330.0675044351;
}
.homeBanner .dots .dot:nth-child(59) {
  --hue: 72.3699682131;
}
.homeBanner .dots .dot:nth-child(60) {
  --hue: 174.8632903445;
}
.homeBanner .dots .dot:nth-child(61) {
  --hue: 12.243438164;
}
.homeBanner .dots .dot:nth-child(62) {
  --hue: 334.2304248823;
}
.homeBanner .dots .dot:nth-child(63) {
  --hue: 116.1336651936;
}
.homeBanner .dots .dot:nth-child(64) {
  --hue: 138.1932003045;
}
.homeBanner .dots .dot:nth-child(65) {
  --hue: 219.404007316;
}
.homeBanner .dots .dot:nth-child(66) {
  --hue: 315.2230057337;
}
.homeBanner .dots .dot:nth-child(67) {
  --hue: 58.5692883119;
}
.homeBanner .dots .dot:nth-child(68) {
  --hue: 37.3030794676;
}
.homeBanner .dots .dot:nth-child(69) {
  --hue: 219.4172205012;
}
.homeBanner .dots .dot:nth-child(70) {
  --hue: 357.7075575102;
}
.homeBanner .dots .dot:nth-child(71) {
  --hue: 29.4437000624;
}
.homeBanner .dots .dot:nth-child(72) {
  --hue: 344.5747805869;
}
.homeBanner .dots .dot:nth-child(73) {
  --hue: 136.3000907882;
}
.homeBanner .dots .dot:nth-child(74) {
  --hue: 325.5834975006;
}
.homeBanner .dots .dot:nth-child(75) {
  --hue: 68.747629921;
}
.homeBanner .dots .dot:nth-child(76) {
  --hue: 348.84400729;
}
.homeBanner .dots .dot:nth-child(77) {
  --hue: 53.4314970959;
}
.homeBanner .dots .dot:nth-child(78) {
  --hue: 30.6041852981;
}
.homeBanner .dots .dot:nth-child(79) {
  --hue: 319.143016367;
}
.homeBanner .dots .dot:nth-child(80) {
  --hue: 230.9866954609;
}
.homeBanner .dots .dot:nth-child(81) {
  --hue: 35.0484010815;
}
.homeBanner .dots .dot:nth-child(82) {
  --hue: 138.895862192;
}
.homeBanner .dots .dot:nth-child(83) {
  --hue: 70.1390447823;
}
.homeBanner .dots .dot:nth-child(84) {
  --hue: 103.0962817657;
}
.homeBanner .dots .dot:nth-child(85) {
  --hue: 232.5392040305;
}
.homeBanner .dots .dot:nth-child(86) {
  --hue: 89.7745182328;
}
.homeBanner .dots .dot:nth-child(87) {
  --hue: 260.6388033842;
}
.homeBanner .dots .dot:nth-child(88) {
  --hue: 148.5180561933;
}
.homeBanner .dots .dot:nth-child(89) {
  --hue: 221.3973879015;
}
.homeBanner .dots .dot:nth-child(90) {
  --hue: 146.5506236054;
}
.homeBanner .dots .dot:nth-child(91) {
  --hue: 207.4704588607;
}
.homeBanner .dots .dot:nth-child(92) {
  --hue: 98.371079294;
}
.homeBanner .dots .dot:nth-child(93) {
  --hue: 184.901489321;
}
.homeBanner .dots .dot:nth-child(94) {
  --hue: 56.2434659732;
}
.homeBanner .dots .dot:nth-child(95) {
  --hue: 167.2895562406;
}
.homeBanner .dots .dot:nth-child(96) {
  --hue: 282.1614694003;
}
.homeBanner .dots .dot:nth-child(97) {
  --hue: 125.2930869859;
}
.homeBanner .dots .dot:nth-child(98) {
  --hue: 176.0982181089;
}
.homeBanner .dots .dot:nth-child(99) {
  --hue: 352.6840293487;
}
.homeBanner .dots .dot:nth-child(100) {
  --hue: 187.4487903166;
}
.homeBanner .dots .dot:nth-child(101) {
  --hue: 12.0541503468;
}
.homeBanner .dots .dot:nth-child(102) {
  --hue: 204.6516818291;
}
.homeBanner .dots .dot:nth-child(103) {
  --hue: 28.8663055115;
}
.homeBanner .dots .dot:nth-child(104) {
  --hue: 336.3450620099;
}
.homeBanner .dots .dot:nth-child(105) {
  --hue: 26.4586910951;
}
.homeBanner .dots .dot:nth-child(106) {
  --hue: 340.6674897765;
}
.homeBanner .dots .dot:nth-child(107) {
  --hue: 346.3194223352;
}
.homeBanner .dots .dot:nth-child(108) {
  --hue: 149.6067509612;
}
.homeBanner .dots .dot:nth-child(109) {
  --hue: 351.0879883845;
}
.homeBanner .dots .dot:nth-child(110) {
  --hue: 3.223392481;
}
.homeBanner .dots .dot:nth-child(111) {
  --hue: 92.9889207053;
}
.homeBanner .dots .dot:nth-child(112) {
  --hue: 290.5263795107;
}
.homeBanner .dots .dot:nth-child(113) {
  --hue: 285.8539404673;
}
.homeBanner .dots .dot:nth-child(114) {
  --hue: 356.8275304452;
}
.homeBanner .dots .dot:nth-child(115) {
  --hue: 20.2894768777;
}
.homeBanner .dots .dot:nth-child(116) {
  --hue: 186.4805977775;
}
.homeBanner .dots .dot:nth-child(117) {
  --hue: 34.5199487677;
}
.homeBanner .dots .dot:nth-child(118) {
  --hue: 124.9430750702;
}
.homeBanner .dots .dot:nth-child(119) {
  --hue: 348.8998621567;
}
.homeBanner .dots .dot:nth-child(120) {
  --hue: 253.2565220229;
}
.homeBanner .dots .dot:nth-child(121) {
  --hue: 106.652072611;
}
.homeBanner .dots .dot:nth-child(122) {
  --hue: 302.4675750348;
}
.homeBanner .dots .dot:nth-child(123) {
  --hue: 126.3657212858;
}
.homeBanner .dots .dot:nth-child(124) {
  --hue: 245.6887835476;
}
.homeBanner .dots .dot:nth-child(125) {
  --hue: 308.2646605273;
}
.homeBanner .dots .dot:nth-child(126) {
  --hue: 74.2820662775;
}
.homeBanner .dots .dot:nth-child(127) {
  --hue: 223.7742301588;
}
.homeBanner .dots .dot:nth-child(128) {
  --hue: 63.6035613917;
}
.homeBanner .dots .dot:nth-child(129) {
  --hue: 274.3708492782;
}
.homeBanner .dots .dot:nth-child(130) {
  --hue: 8.9537890953;
}
.homeBanner .dots .dot:nth-child(131) {
  --hue: 186.4345077956;
}
.homeBanner .dots .dot:nth-child(132) {
  --hue: 281.3753875117;
}
.homeBanner .dots .dot:nth-child(133) {
  --hue: 359.7124656289;
}
.homeBanner .dots .dot:nth-child(134) {
  --hue: 123.1614166534;
}
.homeBanner .dots .dot:nth-child(135) {
  --hue: 99.970224257;
}
.homeBanner .dots .dot:nth-child(136) {
  --hue: 42.5295457332;
}
.homeBanner .dots .dot:nth-child(137) {
  --hue: 29.0926841918;
}
.homeBanner .dots .dot:nth-child(138) {
  --hue: 312.7633556386;
}
.homeBanner .dots .dot:nth-child(139) {
  --hue: 58.2262534118;
}
.homeBanner .dots .dot:nth-child(140) {
  --hue: 24.225236312;
}
.homeBanner .dots .dot:nth-child(141) {
  --hue: 346.7462757247;
}
.homeBanner .dots .dot:nth-child(142) {
  --hue: 167.3685186435;
}
.homeBanner .dots .dot:nth-child(143) {
  --hue: 301.0296861299;
}
.homeBanner .dots .dot:nth-child(144) {
  --hue: 30.1141557414;
}
.homeBanner .dots .dot:nth-child(145) {
  --hue: 296.8375604039;
}
.homeBanner .dots .dot:nth-child(146) {
  --hue: 274.0791913013;
}
.homeBanner .dots .dot:nth-child(147) {
  --hue: 325.7847447366;
}
.homeBanner .dots .dot:nth-child(148) {
  --hue: 227.0438384827;
}
.homeBanner .dots .dot:nth-child(149) {
  --hue: 223.9889285876;
}
.homeBanner .dots .dot:nth-child(150) {
  --hue: 145.5158569812;
}
.homeBanner .dots .dot:nth-child(151) {
  --hue: 42.1266877683;
}
.homeBanner .dots .dot:nth-child(152) {
  --hue: 132.3517208242;
}
.homeBanner .dots .dot:nth-child(153) {
  --hue: 343.8279536731;
}
.homeBanner .dots .dot:nth-child(154) {
  --hue: 162.1990772258;
}
.homeBanner .dots .dot:nth-child(155) {
  --hue: 29.4034796924;
}
.homeBanner .dots .dot:nth-child(156) {
  --hue: 319.8120130019;
}
.homeBanner .dots .dot:nth-child(157) {
  --hue: 79.2156469402;
}
.homeBanner .dots .dot:nth-child(158) {
  --hue: 271.1977109478;
}
.homeBanner .dots .dot:nth-child(159) {
  --hue: 172.1819366151;
}
.homeBanner .dots .dot:nth-child(160) {
  --hue: 110.3332351193;
}
.homeBanner .dots .dot:nth-child(161) {
  --hue: 325.6876376818;
}
.homeBanner .dots .dot:nth-child(162) {
  --hue: 352.6296576882;
}
.homeBanner .dots .dot:nth-child(163) {
  --hue: 265.8863111415;
}
.homeBanner .dots .dot:nth-child(164) {
  --hue: 12.0718679519;
}
.homeBanner .dots .dot:nth-child(165) {
  --hue: 103.4237574182;
}
.homeBanner .dots .dot:nth-child(166) {
  --hue: 216.5110013831;
}
.homeBanner .dots .dot:nth-child(167) {
  --hue: 307.7278246707;
}
.homeBanner .dots .dot:nth-child(168) {
  --hue: 177.8175357202;
}
.homeBanner .dots .dot:nth-child(169) {
  --hue: 257.3429124648;
}
.homeBanner .dots .dot:nth-child(170) {
  --hue: 57.0118348496;
}
.homeBanner .dots .dot:nth-child(171) {
  --hue: 355.9503224361;
}
.homeBanner .dots .dot:nth-child(172) {
  --hue: 348.8832980021;
}
.homeBanner .dots .dot:nth-child(173) {
  --hue: 123.2723459799;
}
.homeBanner .dots .dot:nth-child(174) {
  --hue: 180.3423207186;
}
.homeBanner .dots .dot:nth-child(175) {
  --hue: 135.2712645727;
}
.homeBanner .dots .dot:nth-child(176) {
  --hue: 258.6827401678;
}
.homeBanner .dots .dot:nth-child(177) {
  --hue: 90.7259231887;
}
.homeBanner .dots .dot:nth-child(178) {
  --hue: 157.4149218358;
}
.homeBanner .dots .dot:nth-child(179) {
  --hue: 185.0082562831;
}
.homeBanner .dots .dot:nth-child(180) {
  --hue: 223.3292817571;
}
.homeBanner .dots .dot:nth-child(181) {
  --hue: 301.6360282058;
}
.homeBanner .dots .dot:nth-child(182) {
  --hue: 303.1295692143;
}
.homeBanner .dots .dot:nth-child(183) {
  --hue: 79.6384012943;
}
.homeBanner .dots .dot:nth-child(184) {
  --hue: 95.4737972227;
}
.homeBanner .dots .dot:nth-child(185) {
  --hue: 89.2388837613;
}
.homeBanner .dots .dot:nth-child(186) {
  --hue: 142.3319548564;
}
.homeBanner .dots .dot:nth-child(187) {
  --hue: 41.8651385753;
}
.homeBanner .dots .dot:nth-child(188) {
  --hue: 343.4269250947;
}
.homeBanner .dots .dot:nth-child(189) {
  --hue: 257.1405985822;
}
.homeBanner .dots .dot:nth-child(190) {
  --hue: 28.1491204025;
}
.homeBanner .dots .dot:nth-child(191) {
  --hue: 185.8935316653;
}
.homeBanner .dots .dot:nth-child(192) {
  --hue: 254.7948862533;
}
.homeBanner .dots .dot:nth-child(193) {
  --hue: 283.9191913586;
}
.homeBanner .dots .dot:nth-child(194) {
  --hue: 92.7392580846;
}
.homeBanner .dots .dot:nth-child(195) {
  --hue: 1.4829380851;
}
.homeBanner .dots .dot:nth-child(196) {
  --hue: 13.9811951806;
}
.homeBanner .dots .dot:nth-child(197) {
  --hue: 34.5683128281;
}
.homeBanner .dots .dot:nth-child(198) {
  --hue: 286.9850009594;
}
.homeBanner .dots .dot:nth-child(199) {
  --hue: 268.5547887359;
}
.homeBanner .dots .dot:nth-child(200) {
  --hue: 3.4018421134;
}
.homeBanner .dots .dot:nth-child(201) {
  --hue: 72.0245027692;
}
.homeBanner .dots .dot:nth-child(202) {
  --hue: 145.072922385;
}
.homeBanner .dots .dot:nth-child(203) {
  --hue: 186.5204557888;
}
.homeBanner .dots .dot:nth-child(204) {
  --hue: 312.4333029993;
}
.homeBanner .dots .dot:nth-child(205) {
  --hue: 266.9687797516;
}
.homeBanner .dots .dot:nth-child(206) {
  --hue: 84.1091961577;
}
.homeBanner .dots .dot:nth-child(207) {
  --hue: 12.2987573377;
}
.homeBanner .dots .dot:nth-child(208) {
  --hue: 33.4622536366;
}
.homeBanner .dots .dot:nth-child(209) {
  --hue: 112.3257005198;
}
.homeBanner .dots .dot:nth-child(210) {
  --hue: 51.9234523304;
}
.homeBanner .dots .dot:nth-child(211) {
  --hue: 115.8679913542;
}
.homeBanner .dots .dot:nth-child(212) {
  --hue: 351.5517241954;
}
.homeBanner .dots .dot:nth-child(213) {
  --hue: 49.5681147741;
}
.homeBanner .dots .dot:nth-child(214) {
  --hue: 270.1922287896;
}
.homeBanner .dots .dot:nth-child(215) {
  --hue: 349.2924990781;
}
.homeBanner .dots .dot:nth-child(216) {
  --hue: 293.6101424973;
}
.homeBanner .dots .dot:nth-child(217) {
  --hue: 161.1372910516;
}
.homeBanner .dots .dot:nth-child(218) {
  --hue: 132.4712959323;
}
.homeBanner .dots .dot:nth-child(219) {
  --hue: 357.5722303487;
}
.homeBanner .dots .dot:nth-child(220) {
  --hue: 248.8434431951;
}
.homeBanner .dots .dot:nth-child(221) {
  --hue: 84.1347257401;
}
.homeBanner .dots .dot:nth-child(222) {
  --hue: 112.5681592678;
}
.homeBanner .dots .dot:nth-child(223) {
  --hue: 300.3723171637;
}
.homeBanner .dots .dot:nth-child(224) {
  --hue: 55.3042050252;
}
.homeBanner .dots .dot:nth-child(225) {
  --hue: 54.291050701;
}
.homeBanner .dots .dot:nth-child(226) {
  --hue: 171.4300312967;
}
.homeBanner .dots .dot:nth-child(227) {
  --hue: 297.916007106;
}
.homeBanner .dots .dot:nth-child(228) {
  --hue: 119.2178351861;
}
.homeBanner .dots .dot:nth-child(229) {
  --hue: 278.596597054;
}
.homeBanner .dots .dot:nth-child(230) {
  --hue: 272.1836106301;
}
.homeBanner .dots .dot:nth-child(231) {
  --hue: 155.8858540584;
}
.homeBanner .dots .dot:nth-child(232) {
  --hue: 134.3134339643;
}
.homeBanner .dots .dot:nth-child(233) {
  --hue: 277.7028907698;
}
.homeBanner .dots .dot:nth-child(234) {
  --hue: 104.7688489844;
}
.homeBanner .dots .dot:nth-child(235) {
  --hue: 109.1356268203;
}
.homeBanner .dots .dot:nth-child(236) {
  --hue: 162.882810089;
}
.homeBanner .dots .dot:nth-child(237) {
  --hue: 338.3225611073;
}
.homeBanner .dots .dot:nth-child(238) {
  --hue: 230.6868446564;
}
.homeBanner .dots .dot:nth-child(239) {
  --hue: 72.8411143038;
}
.homeBanner .dots .dot:nth-child(240) {
  --hue: 9.7151519386;
}
.homeBanner .dots .dot:nth-child(241) {
  --hue: 55.8769864344;
}
.homeBanner .dots .dot:nth-child(242) {
  --hue: 96.9139073243;
}
.homeBanner .dots .dot:nth-child(243) {
  --hue: 56.8211874093;
}
.homeBanner .dots .dot:nth-child(244) {
  --hue: 106.2069632255;
}
.homeBanner .dots .dot:nth-child(245) {
  --hue: 99.8945003332;
}
.homeBanner .dots .dot:nth-child(246) {
  --hue: 138.8187480121;
}
.homeBanner .dots .dot:nth-child(247) {
  --hue: 351.6593646092;
}
.homeBanner .dots .dot:nth-child(248) {
  --hue: 236.1408231503;
}
.homeBanner .dots .dot:nth-child(249) {
  --hue: 228.2043434569;
}
.homeBanner .dots .dot:nth-child(250) {
  --hue: 10.9446351906;
}
.homeBanner .dots .dot:nth-child(251) {
  --hue: 336.1442358041;
}
.homeBanner .dots .dot:nth-child(252) {
  --hue: 153.1283166388;
}
.homeBanner .dots .dot:nth-child(253) {
  --hue: 132.2078644001;
}
.homeBanner .dots .dot:nth-child(254) {
  --hue: 135.2407298659;
}
.homeBanner .dots .dot:nth-child(255) {
  --hue: 70.9213147371;
}
.homeBanner .dots .dot:nth-child(256) {
  --hue: 185.8151455081;
}
.homeBanner .dots .dot:nth-child(257) {
  --hue: 151.8564761024;
}
.homeBanner .dots .dot:nth-child(258) {
  --hue: 134.2908999459;
}
.homeBanner .dots .dot:nth-child(259) {
  --hue: 87.6673489343;
}
.homeBanner .dots .dot:nth-child(260) {
  --hue: 267.254480245;
}
.homeBanner .dots .dot:nth-child(261) {
  --hue: 261.9351597967;
}
.homeBanner .dots .dot:nth-child(262) {
  --hue: 128.3181963575;
}
.homeBanner .dots .dot:nth-child(263) {
  --hue: 352.171069339;
}
.homeBanner .dots .dot:nth-child(264) {
  --hue: 245.9502913218;
}
.homeBanner .dots .dot:nth-child(265) {
  --hue: 313.2476182194;
}
.homeBanner .dots .dot:nth-child(266) {
  --hue: 193.6819755448;
}
.homeBanner .dots .dot:nth-child(267) {
  --hue: 275.4450680753;
}
.homeBanner .dots .dot:nth-child(268) {
  --hue: 141.3048818168;
}
.homeBanner .dots .dot:nth-child(269) {
  --hue: 33.6967751296;
}
.homeBanner .dots .dot:nth-child(270) {
  --hue: 82.5508939502;
}
.homeBanner .dots .dot:nth-child(271) {
  --hue: 13.5835511314;
}
.homeBanner .dots .dot:nth-child(272) {
  --hue: 265.8945714517;
}
.homeBanner .dots .dot:nth-child(273) {
  --hue: 0.7824993126;
}
.homeBanner .dots .dot:nth-child(274) {
  --hue: 305.6983533235;
}
.homeBanner .dots .dot:nth-child(275) {
  --hue: 182.8460580765;
}
.homeBanner .dots .dot:nth-child(276) {
  --hue: 87.5512454273;
}
.homeBanner .dots .dot:nth-child(277) {
  --hue: 300.5389366664;
}
.homeBanner .dots .dot:nth-child(278) {
  --hue: 47.0217728553;
}
.homeBanner .dots .dot:nth-child(279) {
  --hue: 198.84440095;
}
.homeBanner .dots .dot:nth-child(280) {
  --hue: 270.4695351611;
}
.homeBanner .dots .dot:nth-child(281) {
  --hue: 48.5599103047;
}
.homeBanner .dots .dot:nth-child(282) {
  --hue: 223.5495727517;
}
.homeBanner .dots .dot:nth-child(283) {
  --hue: 231.2214985328;
}
.homeBanner .dots .dot:nth-child(284) {
  --hue: 251.9768561171;
}
.homeBanner .dots .dot:nth-child(285) {
  --hue: 143.7885995341;
}
.homeBanner .dots .dot:nth-child(286) {
  --hue: 221.6953417064;
}
.homeBanner .dots .dot:nth-child(287) {
  --hue: 36.9261520942;
}
.homeBanner .dots .dot:nth-child(288) {
  --hue: 67.363952422;
}
.homeBanner .dots .dot:nth-child(289) {
  --hue: 203.0500964346;
}
.homeBanner .dots .dot:nth-child(290) {
  --hue: 159.5638978684;
}
.homeBanner .dots .dot:nth-child(291) {
  --hue: 302.5990144743;
}
.homeBanner .dots .dot:nth-child(292) {
  --hue: 284.1187241057;
}
.homeBanner .dots .dot:nth-child(293) {
  --hue: 320.256798181;
}
.homeBanner .dots .dot:nth-child(294) {
  --hue: 77.3772609692;
}
.homeBanner .dots .dot:nth-child(295) {
  --hue: 343.5380726193;
}
.homeBanner .dots .dot:nth-child(296) {
  --hue: 52.4903359455;
}
.homeBanner .dots .dot:nth-child(297) {
  --hue: 302.269675979;
}
.homeBanner .dots .dot:nth-child(298) {
  --hue: 132.8186962427;
}
.homeBanner .dots .dot:nth-child(299) {
  --hue: 55.9288663881;
}
.homeBanner .dots .dot:nth-child(300) {
  --hue: 81.7980502849;
}
.homeBanner .dots .dot:nth-child(301) {
  --hue: 28.9319257124;
}
.homeBanner .dots .dot:nth-child(302) {
  --hue: 349.4778678973;
}
.homeBanner .dots .dot:nth-child(303) {
  --hue: 344.5388419506;
}
.homeBanner .dots .dot:nth-child(304) {
  --hue: 174.8928894865;
}
.homeBanner .dots .dot:nth-child(305) {
  --hue: 150.5866138;
}
.homeBanner .dots .dot:nth-child(306) {
  --hue: 41.9969691046;
}
.homeBanner .dots .dot:nth-child(307) {
  --hue: 314.872415209;
}
.homeBanner .dots .dot:nth-child(308) {
  --hue: 178.7190460256;
}
.homeBanner .dots .dot:nth-child(309) {
  --hue: 6.7187675114;
}
.homeBanner .dots .dot:nth-child(310) {
  --hue: 260.224306914;
}
.homeBanner .dots .dot:nth-child(311) {
  --hue: 82.3927474878;
}
.homeBanner .dots .dot:nth-child(312) {
  --hue: 184.8325886933;
}
.homeBanner .dots .dot:nth-child(313) {
  --hue: 141.5339284477;
}
.homeBanner .dots .dot:nth-child(314) {
  --hue: 259.0398707558;
}
.homeBanner .dots .dot:nth-child(315) {
  --hue: 286.0013250584;
}
.homeBanner .dots .dot:nth-child(316) {
  --hue: 237.1314667083;
}
.homeBanner .dots .dot:nth-child(317) {
  --hue: 256.0941700745;
}
.homeBanner .dots .dot:nth-child(318) {
  --hue: 107.0047457599;
}
.homeBanner .dots .dot:nth-child(319) {
  --hue: 67.9584691672;
}
.homeBanner .dots .dot:nth-child(320) {
  --hue: 293.0202836599;
}
.homeBanner .dots .dot:nth-child(321) {
  --hue: 185.4012067773;
}
.homeBanner .dots .dot:nth-child(322) {
  --hue: 80.1381805499;
}
.homeBanner .dots .dot:nth-child(323) {
  --hue: 310.2508572896;
}
.homeBanner .dots .dot:nth-child(324) {
  --hue: 40.7227874478;
}
.homeBanner .dots .dot:nth-child(325) {
  --hue: 230.8418001258;
}
.homeBanner .dots .dot:nth-child(326) {
  --hue: 59.2574767867;
}
.homeBanner .dots .dot:nth-child(327) {
  --hue: 50.4811946454;
}
.homeBanner .dots .dot:nth-child(328) {
  --hue: 34.1443892914;
}
.homeBanner .dots .dot:nth-child(329) {
  --hue: 134.4560839668;
}
.homeBanner .dots .dot:nth-child(330) {
  --hue: 34.2194338183;
}
.homeBanner .dots .dot:nth-child(331) {
  --hue: 213.026467284;
}
.homeBanner .dots .dot:nth-child(332) {
  --hue: 350.8043843865;
}
.homeBanner .dots .dot:nth-child(333) {
  --hue: 40.8673943939;
}
.homeBanner .dots .dot:nth-child(334) {
  --hue: 272.0480429944;
}
.homeBanner .dots .dot:nth-child(335) {
  --hue: 103.4475821495;
}
.homeBanner .dots .dot:nth-child(336) {
  --hue: 185.6609656383;
}
.homeBanner .dots .dot:nth-child(337) {
  --hue: 235.5803581168;
}
.homeBanner .dots .dot:nth-child(338) {
  --hue: 25.2912928016;
}
.homeBanner .dots .dot:nth-child(339) {
  --hue: 288.7806959114;
}
.homeBanner .dots .dot:nth-child(340) {
  --hue: 51.0133642107;
}
.homeBanner .dots .dot:nth-child(341) {
  --hue: 16.5048412789;
}
.homeBanner .dots .dot:nth-child(342) {
  --hue: 2.9102039147;
}
.homeBanner .dots .dot:nth-child(343) {
  --hue: 156.6359665741;
}
.homeBanner .dots .dot:nth-child(344) {
  --hue: 340.950170231;
}
.homeBanner .dots .dot:nth-child(345) {
  --hue: 168.3589765611;
}
.homeBanner .dots .dot:nth-child(346) {
  --hue: 154.5108275105;
}
.homeBanner .dots .dot:nth-child(347) {
  --hue: 162.3385540268;
}
.homeBanner .dots .dot:nth-child(348) {
  --hue: 116.4050662827;
}
.homeBanner .dots .dot:nth-child(349) {
  --hue: 203.2571641876;
}
.homeBanner .dots .dot:nth-child(350) {
  --hue: 43.9849661427;
}
.homeBanner .dots .dot:nth-child(351) {
  --hue: 234.1157793419;
}
.homeBanner .dots .dot:nth-child(352) {
  --hue: 343.6569705457;
}
.homeBanner .dots .dot:nth-child(353) {
  --hue: 199.877944493;
}
.homeBanner .dots .dot:nth-child(354) {
  --hue: 357.4577421911;
}
.homeBanner .dots .dot:nth-child(355) {
  --hue: 254.2408111161;
}
.homeBanner .dots .dot:nth-child(356) {
  --hue: 146.0913031113;
}
.homeBanner .dots .dot:nth-child(357) {
  --hue: 348.2865946404;
}
.homeBanner .dots .dot:nth-child(358) {
  --hue: 67.681816548;
}
.homeBanner .dots .dot:nth-child(359) {
  --hue: 167.1400453238;
}
.homeBanner .dots .dot:nth-child(360) {
  --hue: 320.8520745247;
}
.homeBanner .dots .dot:nth-child(361) {
  --hue: 348.9373503568;
}
.homeBanner .dots .dot:nth-child(362) {
  --hue: 52.9054025653;
}
.homeBanner .dots .dot:nth-child(363) {
  --hue: 238.7219070086;
}
.homeBanner .dots .dot:nth-child(364) {
  --hue: 99.9843401708;
}
.homeBanner .dots .dot:nth-child(365) {
  --hue: 116.7825813535;
}
.homeBanner .dots .dot:nth-child(366) {
  --hue: 158.491554231;
}
.homeBanner .dots .dot:nth-child(367) {
  --hue: 132.914275125;
}
.homeBanner .dots .dot:nth-child(368) {
  --hue: 290.3751862406;
}
.homeBanner .dots .dot:nth-child(369) {
  --hue: 290.882618342;
}
.homeBanner .dots .dot:nth-child(370) {
  --hue: 242.2748023433;
}
.homeBanner .dots .dot:nth-child(371) {
  --hue: 27.8962447995;
}
.homeBanner .dots .dot:nth-child(372) {
  --hue: 292.405137257;
}
.homeBanner .dots .dot:nth-child(373) {
  --hue: 80.2342504643;
}
.homeBanner .dots .dot:nth-child(374) {
  --hue: 93.2345539557;
}
.homeBanner .dots .dot:nth-child(375) {
  --hue: 323.7242303757;
}
.homeBanner .dots .dot:nth-child(376) {
  --hue: 258.4636411592;
}
.homeBanner .dots .dot:nth-child(377) {
  --hue: 281.7735258255;
}
.homeBanner .dots .dot:nth-child(378) {
  --hue: 140.1592399931;
}
.homeBanner .dots .dot:nth-child(379) {
  --hue: 297.8829257675;
}
.homeBanner .dots .dot:nth-child(380) {
  --hue: 112.2652394351;
}
.homeBanner .dots .dot:nth-child(381) {
  --hue: 140.244307652;
}
.homeBanner .dots .dot:nth-child(382) {
  --hue: 348.3124016588;
}
.homeBanner .dots .dot:nth-child(383) {
  --hue: 130.7500067438;
}
.homeBanner .dots .dot:nth-child(384) {
  --hue: 13.2742584694;
}
.homeBanner .dots .dot:nth-child(385) {
  --hue: 79.9204987895;
}
.homeBanner .dots .dot:nth-child(386) {
  --hue: 348.5318477863;
}
.homeBanner .dots .dot:nth-child(387) {
  --hue: 172.2369082808;
}
.homeBanner .dots .dot:nth-child(388) {
  --hue: 19.187131955;
}
.homeBanner .dots .dot:nth-child(389) {
  --hue: 357.2302308972;
}
.homeBanner .dots .dot:nth-child(390) {
  --hue: 50.7423819232;
}
.homeBanner .dots .dot:nth-child(391) {
  --hue: 141.4351760935;
}
.homeBanner .dots .dot:nth-child(392) {
  --hue: 205.213586551;
}
.homeBanner .dots .dot:nth-child(393) {
  --hue: 241.1241623971;
}
.homeBanner .dots .dot:nth-child(394) {
  --hue: 286.0919146707;
}
.homeBanner .dots .dot:nth-child(395) {
  --hue: 95.8595387274;
}
.homeBanner .dots .dot:nth-child(396) {
  --hue: 261.5773456537;
}
.homeBanner .dots .dot:nth-child(397) {
  --hue: 128.6788481001;
}
.homeBanner .dots .dot:nth-child(398) {
  --hue: 329.2192233746;
}
.homeBanner .dots .dot:nth-child(399) {
  --hue: 69.4202863233;
}
.homeBanner .dots .dot:nth-child(400) {
  --hue: 329.2282328952;
}
.homeBanner .dots .dot:nth-child(20n+1) {
  --delay1: 0s;
}
.homeBanner .dots .dot:nth-child(n+1):nth-child(-n+20) {
  --delay2: 0s;
}
.homeBanner .dots .dot:nth-child(20n+2) {
  --delay1: -0.3s;
}
.homeBanner .dots .dot:nth-child(n+21):nth-child(-n+40) {
  --delay2: -0.2s;
}
.homeBanner .dots .dot:nth-child(20n+3) {
  --delay1: -0.6s;
}
.homeBanner .dots .dot:nth-child(n+41):nth-child(-n+60) {
  --delay2: -0.4s;
}
.homeBanner .dots .dot:nth-child(20n+4) {
  --delay1: -0.9s;
}
.homeBanner .dots .dot:nth-child(n+61):nth-child(-n+80) {
  --delay2: -0.6s;
}
.homeBanner .dots .dot:nth-child(20n+5) {
  --delay1: -1.2s;
}
.homeBanner .dots .dot:nth-child(n+81):nth-child(-n+100) {
  --delay2: -0.8s;
}
.homeBanner .dots .dot:nth-child(20n+6) {
  --delay1: -1.5s;
}
.homeBanner .dots .dot:nth-child(n+101):nth-child(-n+120) {
  --delay2: -1s;
}
.homeBanner .dots .dot:nth-child(20n+7) {
  --delay1: -1.8s;
}
.homeBanner .dots .dot:nth-child(n+121):nth-child(-n+140) {
  --delay2: -1.2s;
}
.homeBanner .dots .dot:nth-child(20n+8) {
  --delay1: -2.1s;
}
.homeBanner .dots .dot:nth-child(n+141):nth-child(-n+160) {
  --delay2: -1.4s;
}
.homeBanner .dots .dot:nth-child(20n+9) {
  --delay1: -2.4s;
}
.homeBanner .dots .dot:nth-child(n+161):nth-child(-n+180) {
  --delay2: -1.6s;
}
.homeBanner .dots .dot:nth-child(20n+10) {
  --delay1: -2.7s;
}
.homeBanner .dots .dot:nth-child(n+181):nth-child(-n+200) {
  --delay2: -1.8s;
}
.homeBanner .dots .dot:nth-child(20n+11) {
  --delay1: -3s;
}
.homeBanner .dots .dot:nth-child(n+201):nth-child(-n+220) {
  --delay2: -2s;
}
.homeBanner .dots .dot:nth-child(20n+12) {
  --delay1: -3.3s;
}
.homeBanner .dots .dot:nth-child(n+221):nth-child(-n+240) {
  --delay2: -2.2s;
}
.homeBanner .dots .dot:nth-child(20n+13) {
  --delay1: -3.6s;
}
.homeBanner .dots .dot:nth-child(n+241):nth-child(-n+260) {
  --delay2: -2.4s;
}
.homeBanner .dots .dot:nth-child(20n+14) {
  --delay1: -3.9s;
}
.homeBanner .dots .dot:nth-child(n+261):nth-child(-n+280) {
  --delay2: -2.6s;
}
.homeBanner .dots .dot:nth-child(20n+15) {
  --delay1: -4.2s;
}
.homeBanner .dots .dot:nth-child(n+281):nth-child(-n+300) {
  --delay2: -2.8s;
}
.homeBanner .dots .dot:nth-child(20n+16) {
  --delay1: -4.5s;
}
.homeBanner .dots .dot:nth-child(n+301):nth-child(-n+320) {
  --delay2: -3s;
}
.homeBanner .dots .dot:nth-child(20n+17) {
  --delay1: -4.8s;
}
.homeBanner .dots .dot:nth-child(n+321):nth-child(-n+340) {
  --delay2: -3.2s;
}
.homeBanner .dots .dot:nth-child(20n+18) {
  --delay1: -5.1s;
}
.homeBanner .dots .dot:nth-child(n+341):nth-child(-n+360) {
  --delay2: -3.4s;
}
.homeBanner .dots .dot:nth-child(20n+19) {
  --delay1: -5.4s;
}
.homeBanner .dots .dot:nth-child(n+361):nth-child(-n+380) {
  --delay2: -3.6s;
}
.homeBanner .dots .dot:nth-child(20n+20) {
  --delay1: -5.7s;
}
.homeBanner .dots .dot:nth-child(n+381):nth-child(-n+400) {
  --delay2: -3.8s;
}
.homeBanner canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.5;
  display: none;
}

.homeClient {
  width: 100%;
  position: relative;
  overflow: hidden;
  z-index: 0;
  background: #f9f3ff;
}
.homeClient .scroller {
  width: 100%;
}
.homeClient .scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
}
.homeClient .scroller__inner img {
  width: 100px;
  -o-object-fit: contain;
     object-fit: contain;
}
.homeClient .scroller[data-animated=true] {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}
.homeClient .scroller[data-animated=true] .scroller__inner {
  width: -moz-max-content;
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}
.homeClient .scroller[data-direction=right] {
  --_animation-direction: reverse;
}
.homeClient .scroller[data-direction=left] {
  --_animation-direction: forwards;
}
.homeClient .scroller[data-speed=fast] {
  --_animation-duration: 20s;
}
.homeClient .scroller[data-speed=slow] {
  --_animation-duration: 60s;
}
@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

.homeFeatures {
  width: 100%;
  padding: 100px 0px;
  background: white;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
@media (max-width: 768px) {
  .homeFeatures {
    padding: 60px 0;
  }
}
.homeFeatures .homeFeaturesHead {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.homeFeatures .homeFeaturesHead h2 {
  width: 70%;
  color: var(--primaryHoverColor);
}
@media (max-width: 850px) {
  .homeFeatures .homeFeaturesHead h2 {
    width: 90%;
  }
}
@media (max-width: 768px) {
  .homeFeatures .homeFeaturesHead h2 {
    width: 100%;
  }
}
.homeFeatures .homeFeaturesHead p {
  width: 65%;
  margin-top: 10px;
  color: #000;
  line-height: 1.5;
}
@media (max-width: 1024px) {
  .homeFeatures .homeFeaturesHead p {
    width: 75%;
  }
}
@media (max-width: 850px) {
  .homeFeatures .homeFeaturesHead p {
    width: 85%;
  }
}
@media (max-width: 768px) {
  .homeFeatures .homeFeaturesHead p {
    width: 100%;
  }
}
.homeFeatures .homeFeaturesMain {
  width: 100%;
  margin-top: 50px;
}
.homeFeatures .homeFeaturesMain .homeFeaturesList {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
@media (max-width: 768px) {
  .homeFeatures .homeFeaturesMain .homeFeaturesList {
    gap: 20px;
  }
}
.homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox {
  width: calc(33.3333333333% - 20px);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #e5d2ff;
  border-radius: 20px;
  gap: 30px;
}
@media (max-width: 1024px) {
  .homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox {
    width: calc(50% - 15px);
    padding: 25px;
    gap: 25px;
  }
}
@media (max-width: 768px) {
  .homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox {
    width: calc(50% - 10px);
    padding: 20px;
    gap: 20px;
  }
}
@media (max-width: 550px) {
  .homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox {
    width: 100%;
  }
}
.homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox .homeFeaturesBoxThumbnail {
  width: 150px;
  height: 150px;
  border-radius: 20px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1024px) {
  .homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox .homeFeaturesBoxThumbnail {
    width: 130px;
    height: 130px;
  }
}
@media (max-width: 768px) {
  .homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox .homeFeaturesBoxThumbnail {
    width: 100px;
    height: 100px;
  }
}
@media (max-width: 480px) {
  .homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox .homeFeaturesBoxThumbnail {
    width: 80px;
    height: 80px;
  }
}
.homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox .homeFeaturesBoxThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox .homeFeaturesBoxThumbnail .element {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  background: var(--primaryColor);
  background: radial-gradient(circle, rgb(51, 47, 208) 0%, rgb(255, 255, 255) 100%);
  border-radius: 50px;
  z-index: -1;
  animation: roate3 10s infinite linear forwards;
  display: none;
}
@keyframes roate3 {
  0% {
    top: -50px;
    left: -50px;
  }
  25% {
    top: -50px;
    left: calc(100% - 50px);
  }
  50% {
    top: calc(100% - 50px);
    left: calc(100% - 50px);
  }
  75% {
    top: calc(100% - 50px);
    left: -50px;
  }
  100% {
    top: -50px;
    left: -50px;
  }
}
.homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox .homeFeaturesBoxContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox .homeFeaturesBoxContent h3 {
  font-size: 26px;
  font-weight: 500;
  text-align: center;
}
@media (max-width: 768px) {
  .homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox .homeFeaturesBoxContent h3 {
    font-size: 22px;
  }
}
@media (max-width: 480px) {
  .homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox .homeFeaturesBoxContent h3 {
    font-size: 20px;
  }
}
.homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox .homeFeaturesBoxContent p {
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
  color: #000;
  line-height: 1.5;
  text-align: center;
}
.homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox .homeFeaturesBoxContent a {
  text-decoration: none;
  padding: 14px 24px;
  font-size: 14px;
  margin-top: 20px;
  border-radius: 50px;
  font-weight: 500;
  transition: 0.3s;
  background: white;
  color: var(--primaryColor);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.homeFeatures .homeFeaturesMain .homeFeaturesList .homeFeaturesBox .homeFeaturesBoxContent a:hover {
  background: var(--primaryColor);
  color: white;
  transition: 0.3s;
  border-color: var(--primaryColor);
}
.homeFeatures .homeFeaturesFooter {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
}
@media (max-width: 768px) {
  .homeFeatures .homeFeaturesFooter {
    margin-top: 40px;
  }
}
.homeFeatures .homeFeaturesFooter .homeFeaturesFooterLink {
  text-decoration: none;
  color: var(--primaryColor);
  font-size: 16px;
  font-weight: 500;
  padding: 14px 30px;
  border-radius: 50px;
  background: white;
  border: 1px solid var(--primaryColor);
  transition: 0.3s;
}
@media (max-width: 480px) {
  .homeFeatures .homeFeaturesFooter .homeFeaturesFooterLink {
    font-size: 14px;
    padding: 10px 20px;
  }
}
.homeFeatures .homeFeaturesFooter .homeFeaturesFooterLink:hover {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  color: white;
  transition: 0.3s;
}

.homeFunFact {
  width: 100%;
  background: #b077ff;
  padding: 50px 0px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='200' preserveAspectRatio='none' viewBox='0 0 1440 200'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1009%26quot%3b)' fill='none'%3e%3cpath d='M 0%2c94 C 96%2c79.4 288%2c26.6 480%2c21 C 672%2c15.4 768%2c68.8 960%2c66 C 1152%2c63.2 1344%2c18.8 1440%2c7L1440 200L0 200z' fill='rgba(162%2c 95%2c 255%2c 1)'%3e%3c/path%3e%3cpath d='M 0%2c182 C 57.6%2c172.6 172.8%2c138.4 288%2c135 C 403.2%2c131.6 460.8%2c166.6 576%2c165 C 691.2%2c163.4 748.8%2c120 864%2c127 C 979.2%2c134 1036.8%2c196.4 1152%2c200 C 1267.2%2c203.6 1382.4%2c156 1440%2c145L1440 200L0 200z' fill='rgba(144%2c 64%2c 255%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1009'%3e%3crect width='1440' height='200' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
}
.homeFunFact .homeFunFactMain {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  position: relative;
  z-index: 0;
}
.homeFunFact .homeFunFactMain::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  border-left: 2px dashed white;
  left: calc(33.3333333333% - 10px);
  top: 0;
}
@media (max-width: 890px) {
  .homeFunFact .homeFunFactMain::after {
    display: none;
  }
}
.homeFunFact .homeFunFactMain::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  border-left: 2px dashed white;
  right: calc(33.3333333333% - 7px);
  top: 0;
}
@media (max-width: 890px) {
  .homeFunFact .homeFunFactMain::before {
    display: none;
  }
}
@media (max-width: 890px) {
  .homeFunFact .homeFunFactMain {
    gap: 30px;
  }
}
.homeFunFact .homeFunFactMain .homeFunFactBox {
  width: calc(33.3333333333% - 34px);
  display: flex;
  gap: 10px;
  flex-direction: column;
}
@media (max-width: 890px) {
  .homeFunFact .homeFunFactMain .homeFunFactBox {
    width: calc(50% - 25px);
    border-top: 2px dashed white;
    border-bottom: 2px dashed white;
    padding: 30px 0px;
  }
  .homeFunFact .homeFunFactMain .homeFunFactBox:nth-of-type(1) {
    border-top: none;
    padding-top: 0;
  }
  .homeFunFact .homeFunFactMain .homeFunFactBox:nth-of-type(2) {
    padding-top: 0;
    border-top: none;
    border-bottom: 2px dashed white;
  }
  .homeFunFact .homeFunFactMain .homeFunFactBox:nth-of-type(3) {
    border-top: none;
    border-bottom: none;
    padding-bottom: 0;
    padding-top: 0;
  }
}
@media (max-width: 600px) {
  .homeFunFact .homeFunFactMain .homeFunFactBox {
    width: 100%;
  }
}
.homeFunFact .homeFunFactMain .homeFunFactBox .homeFunFactBoxCol1 {
  display: flex;
}
.homeFunFact .homeFunFactMain .homeFunFactBox .homeFunFactBoxCol1 h2 {
  font-size: 3em;
  color: white;
}
@media (max-width: 768px) {
  .homeFunFact .homeFunFactMain .homeFunFactBox .homeFunFactBoxCol1 h2 {
    font-size: 2.5em;
  }
}
@media (max-width: 480px) {
  .homeFunFact .homeFunFactMain .homeFunFactBox .homeFunFactBoxCol1 h2 {
    font-size: 2.2em;
  }
}
.homeFunFact .homeFunFactMain .homeFunFactBox .homeFunFactBoxCol2 {
  display: flex;
  flex-direction: column;
}
.homeFunFact .homeFunFactMain .homeFunFactBox .homeFunFactBoxCol2 h3 {
  font-size: 22px;
  font-weight: 400;
  width: 87%;
  line-height: 1.5;
  color: white;
}
@media (max-width: 1024px) {
  .homeFunFact .homeFunFactMain .homeFunFactBox .homeFunFactBoxCol2 h3 {
    font-size: 20px;
    width: 100%;
  }
}
@media (max-width: 890px) {
  .homeFunFact .homeFunFactMain .homeFunFactBox .homeFunFactBoxCol2 h3 {
    width: 80%;
  }
}
@media (max-width: 890px) {
  .homeFunFact .homeFunFactMain .homeFunFactBox .homeFunFactBoxCol2 h3 {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .homeFunFact .homeFunFactMain .homeFunFactBox .homeFunFactBoxCol2 h3 {
    font-size: 18px;
    width: 80%;
  }
}
@media (max-width: 600px) {
  .homeFunFact .homeFunFactMain .homeFunFactBox .homeFunFactBoxCol2 h3 {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .homeFunFact .homeFunFactMain .homeFunFactBox .homeFunFactBoxCol2 h3 {
    font-size: 16px;
  }
}

.homeAbout {
  width: 100%;
  padding: 100px 0px;
}
@media (max-width: 768px) {
  .homeAbout {
    padding: 60px 0px;
  }
}
.homeAbout .homeAboutMain {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}
.homeAbout .homeAboutMain .homeAboutDetails {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 100px;
}
@media (max-width: 1231px) {
  .homeAbout .homeAboutMain .homeAboutDetails {
    flex: 0 0 55%;
  }
}
@media (max-width: 1132px) {
  .homeAbout .homeAboutMain .homeAboutDetails {
    flex: 100%;
    top: inherit;
    position: inherit;
    margin-top: 50px;
  }
}
.homeAbout .homeAboutMain .homeAboutDetails ul {
  width: 100%;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.homeAbout .homeAboutMain .homeAboutDetails ul li {
  width: 100%;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.homeAbout .homeAboutMain .homeAboutDetails ul li .icon {
  width: 50px;
  height: 50px;
  background: var(--hoverColor);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  color: var(--primaryColor);
}
.homeAbout .homeAboutMain .homeAboutDetails ul li .icon svg {
  width: 20px;
  height: 20px;
}
.homeAbout .homeAboutMain .homeAboutDetails ul li .details {
  width: calc(100% - 70px);
  display: flex;
  flex-direction: column;
}
.homeAbout .homeAboutMain .homeAboutDetails ul li .details h3 {
  font-size: 18px;
}
.homeAbout .homeAboutMain .homeAboutDetails ul li .details h5 {
  font-size: 16px;
  margin-top: 10px;
  font-weight: 400;
  line-height: 1.5;
  width: 70%;
}
@media (max-width: 480px) {
  .homeAbout .homeAboutMain .homeAboutDetails ul li .details h5 {
    width: 100%;
  }
}
.homeAbout .homeAboutMain .homeAboutThumbnail {
  flex: 0 0 40%;
  display: flex;
  z-index: 0;
  border-radius: 30px;
  position: sticky;
  top: 100px;
}
@media (max-width: 1231px) {
  .homeAbout .homeAboutMain .homeAboutThumbnail {
    flex: 0 0 35%;
  }
}
@media (max-width: 1132px) {
  .homeAbout .homeAboutMain .homeAboutThumbnail {
    position: relative;
    top: inherit;
  }
}
@media (max-width: 1024px) {
  .homeAbout .homeAboutMain .homeAboutThumbnail {
    flex: 0 0 45%;
    height: 400px;
  }
}
@media (max-width: 768px) {
  .homeAbout .homeAboutMain .homeAboutThumbnail {
    flex: 100%;
  }
}
@media (max-width: 420px) {
  .homeAbout .homeAboutMain .homeAboutThumbnail {
    height: auto;
  }
}
.homeAbout .homeAboutMain .homeAboutThumbnail::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 65%;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: var(--primaryColor);
  clip-path: polygon(0 30%, 100% 0%, 100% 100%, 0% 100%);
  border-radius: 0px 0px 28px 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%236420c1' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23691ed1' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%236f1ce1' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%237623e8' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%237D2CED' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%238333f1' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23893bf5' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%238f43f9' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23954bfc' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%239B54FF' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.homeAbout .homeAboutMain .homeAboutThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 1024px) {
  .homeAbout .homeAboutMain .homeAboutThumbnail img {
    -o-object-fit: contain;
       object-fit: contain;
  }
}
.homeAbout .homeAboutMain .homeAboutThumbnail .element1 {
  position: absolute;
  width: 150px;
  bottom: 50px;
  left: -50px;
  display: flex;
  animation: bounce1 6s linear infinite;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.0509803922);
  border-radius: 10px;
}
@media (max-width: 1024px) {
  .homeAbout .homeAboutMain .homeAboutThumbnail .element1 {
    left: 0;
  }
}
@media (max-width: 768px) {
  .homeAbout .homeAboutMain .homeAboutThumbnail .element1 {
    width: 120px;
  }
}
@media (max-width: 480px) {
  .homeAbout .homeAboutMain .homeAboutThumbnail .element1 {
    width: 100px;
  }
}
@keyframes bounce1 {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}
.homeAbout .homeAboutMain .homeAboutThumbnail .element1 img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0;
}
.homeAbout .homeAboutMain .homeAboutThumbnail .element2 {
  position: absolute;
  width: 170px;
  top: 100px;
  right: -50px;
  animation: bounce2 5s linear infinite;
  animation-delay: 1s;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.0509803922);
  display: flex;
  border-radius: 10px;
}
@media (max-width: 1024px) {
  .homeAbout .homeAboutMain .homeAboutThumbnail .element2 {
    right: 0;
  }
}
@media (max-width: 768px) {
  .homeAbout .homeAboutMain .homeAboutThumbnail .element2 {
    width: 150px;
  }
}
@media (max-width: 480px) {
  .homeAbout .homeAboutMain .homeAboutThumbnail .element2 {
    width: 120px;
  }
}
@keyframes bounce2 {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}
.homeAbout .homeAboutMain .homeAboutThumbnail .element2 img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 6px;
  overflow: hidden;
}

.homeWhyChoose {
  width: 100%;
  padding: 60px 0px 100px 0px;
}
@media (max-width: 768px) {
  .homeWhyChoose {
    padding: 0px 0px 60px 0px;
  }
}
@media (max-width: 480px) {
  .homeWhyChoose {
    padding: 40px 0px;
  }
}
.homeWhyChoose .homeWhyChooseHead {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.homeWhyChoose .homeWhyChooseHead h2 {
  width: 70%;
  text-align: center;
}
@media (max-width: 1024px) {
  .homeWhyChoose .homeWhyChooseHead h2 {
    width: 90%;
  }
}
@media (max-width: 768px) {
  .homeWhyChoose .homeWhyChooseHead h2 {
    width: 100%;
  }
}
.homeWhyChoose .homeWhyChooseHead p {
  width: 65%;
  text-align: center;
}
@media (max-width: 1024px) {
  .homeWhyChoose .homeWhyChooseHead p {
    width: 85%;
  }
}
@media (max-width: 768px) {
  .homeWhyChoose .homeWhyChooseHead p {
    width: 100%;
  }
}
.homeWhyChoose .homeWhyChooseMain {
  width: 100%;
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox {
  width: calc(33.3333333333% - 14px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1024px) {
  .homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox {
    width: calc(50% - 10px);
  }
}
@media (max-width: 600px) {
  .homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox {
    width: 100%;
  }
}
.homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox .icon {
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
}
@media (max-width: 768px) {
  .homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox .icon {
    width: 80px;
    height: 80px;
  }
}
@media (max-width: 480px) {
  .homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox .icon {
    width: 70px;
    height: 70px;
  }
}
.homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox .icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox .homeWhyChooseBoxDetail {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox .homeWhyChooseBoxDetail h3 {
  font-size: 22px;
  color: var(--primaryColor);
  text-align: center;
}
@media (max-width: 768px) {
  .homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox .homeWhyChooseBoxDetail h3 {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  .homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox .homeWhyChooseBoxDetail h3 {
    font-size: 18px;
  }
}
.homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox .homeWhyChooseBoxDetail p {
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
  color: #000;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 1024px) {
  .homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox .homeWhyChooseBoxDetail p {
    font-size: 16px;
  }
}
.homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox:nth-of-type(1) .icon {
  border-color: #3cc3ff;
}
.homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox:nth-of-type(2) .icon {
  border-color: #a3e10d;
}
.homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox:nth-of-type(3) .icon {
  border-color: #ffbf33;
}
.homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox:nth-of-type(4) .icon {
  border-color: #4e45e9;
}
.homeWhyChoose .homeWhyChooseMain .homeWhyChooseBox:nth-of-type(5) .icon {
  border-color: #12d097;
}

.homeAppLink {
  width: 100%;
  padding: 100px 0px 0px 0px;
  position: relative;
  z-index: 0;
  background-image: url("../images/bannerGraid.png");
  background-color: var(--primaryColor);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 768px) {
  .homeAppLink {
    padding: 60px 0px 0px 0px;
  }
}
.homeAppLink::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: url(../images/bannerLine.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.homeAppLink .homeAppLinkMain {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.homeAppLink .homeAppLinkMain .homeAppLinkHead {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.homeAppLink .homeAppLinkMain .homeAppLinkHead h2 {
  color: white;
  width: 70%;
  text-align: center;
}
@media (max-width: 1024px) {
  .homeAppLink .homeAppLinkMain .homeAppLinkHead h2 {
    width: 90%;
  }
}
@media (max-width: 768px) {
  .homeAppLink .homeAppLinkMain .homeAppLinkHead h2 {
    width: 100%;
  }
}
.homeAppLink .homeAppLinkMain .homeAppLinkHead p {
  width: 60%;
  text-align: center;
  color: white;
}
@media (max-width: 1024px) {
  .homeAppLink .homeAppLinkMain .homeAppLinkHead p {
    width: 80%;
  }
}
@media (max-width: 768px) {
  .homeAppLink .homeAppLinkMain .homeAppLinkHead p {
    width: 100%;
  }
}
.homeAppLink .homeAppLinkMain .homeAppLinkHead .homeAppLinkBtnArea {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 15px;
}
@media (max-width: 480px) {
  .homeAppLink .homeAppLinkMain .homeAppLinkHead .homeAppLinkBtnArea {
    flex-direction: column;
  }
}
.homeAppLink .homeAppLinkMain .homeAppLinkHead .homeAppLinkBtnArea a {
  text-decoration: none;
  background: white;
  border-radius: 50px;
  padding: 6px 24px 6px 6px;
  font-size: 20px;
  color: black;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 15px;
  white-space: nowrap;
  transition: 0.3s;
}
@media (max-width: 768px) {
  .homeAppLink .homeAppLinkMain .homeAppLinkHead .homeAppLinkBtnArea a {
    font-size: 16px;
  }
}
.homeAppLink .homeAppLinkMain .homeAppLinkHead .homeAppLinkBtnArea a:hover {
  transition: 0.3s;
  background: var(--hoverColor);
}
.homeAppLink .homeAppLinkMain .homeAppLinkHead .homeAppLinkBtnArea a:hover .icon {
  background: var(--primaryColor);
  color: white;
  transition: 0.3s;
}
.homeAppLink .homeAppLinkMain .homeAppLinkHead .homeAppLinkBtnArea a .icon {
  width: 50px;
  height: 50px;
  background: #eee;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hoverColor);
  color: var(--primaryColor);
  transition: 0.3s;
}
.homeAppLink .homeAppLinkMain .homeAppLinkHead .homeAppLinkBtnArea a .icon svg {
  width: 28px;
  height: 28px;
}
.homeAppLink .homeAppLinkMain .homeAppLinkThumbnail {
  width: 70%;
  height: 400px;
  display: flex;
  margin-top: 40px;
}
@media (max-width: 1440px) {
  .homeAppLink .homeAppLinkMain .homeAppLinkThumbnail {
    width: 90%;
    margin-top: 20px;
  }
}
@media (max-width: 1024px) {
  .homeAppLink .homeAppLinkMain .homeAppLinkThumbnail {
    width: 100%;
    margin-top: 0px;
    height: 350px;
  }
}
@media (max-width: 768px) {
  .homeAppLink .homeAppLinkMain .homeAppLinkThumbnail {
    height: 300px;
  }
}
@media (max-width: 480px) {
  .homeAppLink .homeAppLinkMain .homeAppLinkThumbnail {
    height: auto;
  }
}
.homeAppLink .homeAppLinkMain .homeAppLinkThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.homePricing {
  width: 100%;
  padding: 100px 0px;
}
@media (max-width: 768px) {
  .homePricing {
    padding: 60px 0px;
  }
}
.homePricing .homePricingMain {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.homePricing .homePricingMain .homePricingHead {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.homePricing .homePricingMain .homePricingHead h2 {
  text-align: center;
}
.homePricing .homePricingMain .homePricingHead p {
  text-align: center;
}
.homePricing .homePricingMain .homePricingHead h3 {
  font-size: 30px;
  font-weight: 500;
  margin-top: 60px;
}
@media (max-width: 768px) {
  .homePricing .homePricingMain .homePricingHead h3 {
    font-size: 28px;
  }
}
@media (max-width: 480px) {
  .homePricing .homePricingMain .homePricingHead h3 {
    font-size: 26px;
  }
}
.homePricing .homePricingMain .homePricingHead .priceToggleArea {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  -moz-column-gap: 20px;
       column-gap: 20px;
  row-gap: 30px;
}
@media (max-width: 480px) {
  .homePricing .homePricingMain .homePricingHead .priceToggleArea {
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
}
.homePricing .homePricingMain .homePricingHead .priceToggleArea .priceToggleBtn {
  display: flex;
}
.homePricing .homePricingMain .homePricingHead .priceToggleArea .priceToggleBtn input {
  display: none;
}
.homePricing .homePricingMain .homePricingHead .priceToggleArea .priceToggleBtn input:checked ~ label .icon {
  background: var(--primaryColor);
  transition: 0.3s;
}
.homePricing .homePricingMain .homePricingHead .priceToggleArea .priceToggleBtn input:checked ~ label .icon::after {
  transition: 0.3s;
  transform: scale(1);
}
.homePricing .homePricingMain .homePricingHead .priceToggleArea .priceToggleBtn label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: #f9f3ff;
  position: relative;
  border-radius: 50px;
  padding: 5px 20px 5px 5px;
}
.homePricing .homePricingMain .homePricingHead .priceToggleArea .priceToggleBtn label .icon {
  width: 25px;
  height: 25px;
  border-radius: 50px;
  border: 2px solid var(--primaryColor);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  background: white;
}
.homePricing .homePricingMain .homePricingHead .priceToggleArea .priceToggleBtn label .icon::after {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50px;
  transform: scale(0);
  transition: 0.3s;
}
.homePricing .homePricingMain .homePricingHead .priceToggleArea .priceToggleBtn label p {
  font-size: 16px;
  font-weight: 500;
}
@media (max-width: 480px) {
  .homePricing .homePricingMain .homePricingHead .priceToggleArea .priceToggleBtn label p {
    font-size: 14px;
  }
}
.homePricing .homePricingMain .homePricingHead .priceToggleArea .priceToggleBtn label .offer {
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  background: #00a100;
  padding: 6px 14px;
  border-radius: 50px;
  color: #fff;
  font-size: 12px;
  z-index: 1;
  white-space: nowrap;
}
.homePricing .homePricingMain .homePricingList {
  width: 100%;
  margin-top: 40px;
  padding: 0px 15%;
}
@media (max-width: 1440px) {
  .homePricing .homePricingMain .homePricingList {
    padding: 0px 5%;
  }
}
@media (max-width: 1245px) {
  .homePricing .homePricingMain .homePricingList {
    padding: 0px;
  }
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox {
  width: calc(33.3333333333% - 14px);
  background: #f9f3ff;
  padding: 30px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1136px) {
  .homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox {
    width: calc(50% - 10px);
  }
}
@media (max-width: 700px) {
  .homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox {
    width: 100%;
  }
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--primaryColor);
  text-align: center;
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox p {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 10px;
  text-align: center;
  width: 100%;
}
@media (max-width: 1440px) {
  .homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox p {
    width: 100%;
  }
}
@media (max-width: 1229px) {
  .homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox p {
    width: 100%;
  }
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox ul li {
  width: 100%;
  border-top: 1px solid #dadada;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 0px;
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox ul li:nth-of-type(1) {
  border-top: none;
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox ul li p {
  width: calc(100% - 35px);
  font-size: 16px;
  font-weight: 500;
  margin-top: 0;
  text-align: left;
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox ul li svg {
  width: 25px;
  height: 25px;
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox ul li .green {
  color: #00aa00;
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox ul li .red {
  color: #ff0000;
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox .price {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox .price svg {
  width: 26px;
  height: 26px;
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox .price h4 {
  font-size: 30px;
  font-weight: 700;
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox .homePricingBoxBtn {
  width: 100%;
  margin-top: auto;
  padding: 16px;
  border-radius: 50px;
  background: var(--primaryColor);
  color: white;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--primaryColor);
}
.homePricing .homePricingMain .homePricingList .homePricingListCol2 .homePricingBox .homePricingBoxBtn:hover {
  transition: 0.3s;
  border: 1px solid var(--primaryHoverColor);
  background: var(--primaryHoverColor);
}

.testimonial-section {
  padding: 80px 0;
  background-color: #f9f3ff;
  position: relative;
  overflow: hidden;
}
.testimonial-section .testimonial-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.testimonial-section .testimonial-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;
  text-align: center;
}
.testimonial-section .testimonial-header .testimonial-header-image {
  width: 100%;
  max-width: 500px;
  margin-bottom: 30px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.testimonial-section .testimonial-header .testimonial-header-image .testimonial-hero-image {
  width: 100%;
  height: auto;
  display: block;
}
.testimonial-section .testimonial-header .testimonial-header-content .testimonial-main-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20px;
  line-height: 1.2;
}
.testimonial-section .testimonial-header .testimonial-header-content .testimonial-rating-summary .testimonial-rating-label {
  font-size: 1.1rem;
  font-weight: 500;
  color: #666;
  margin-bottom: 8px;
}
.testimonial-section .testimonial-header .testimonial-header-content .testimonial-rating-summary .testimonial-rating-value {
  font-size: 3rem;
  font-weight: 700;
  color: #6E3AFF;
  margin-bottom: 10px;
  line-height: 1;
}
.testimonial-section .testimonial-header .testimonial-header-content .testimonial-rating-summary .testimonial-rating-stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 8px;
}
.testimonial-section .testimonial-header .testimonial-header-content .testimonial-rating-summary .testimonial-rating-stars .testimonial-rating-star {
  width: 24px;
  height: 24px;
  color: #FFB800;
}
.testimonial-section .testimonial-header .testimonial-header-content .testimonial-rating-summary .testimonial-rating-stars .testimonial-rating-star.filled, .testimonial-section .testimonial-header .testimonial-header-content .testimonial-rating-summary .testimonial-rating-stars .testimonial-rating-star.half-filled {
  fill: #FFB800;
}
.testimonial-section .testimonial-header .testimonial-header-content .testimonial-rating-summary .testimonial-review-count {
  font-size: 1rem;
  color: #666;
}
.testimonial-section .testimonial-carousel-wrapper {
  position: relative;
  padding: 0 20px;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-swiper {
  padding: 20px 0 60px;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-swiper .swiper-pagination {
  bottom: 20px;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-swiper .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(110, 58, 255, 0.3);
  opacity: 1;
  transition: all 0.3s ease;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-swiper .swiper-pagination .swiper-pagination-bullet-active {
  background: #6E3AFF;
  width: 30px;
  border-radius: 5px;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-swiper .swiper-button-next,
.testimonial-section .testimonial-carousel-wrapper .testimonial-swiper .swiper-button-prev {
  color: #6E3AFF;
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-swiper .swiper-button-next::after,
.testimonial-section .testimonial-carousel-wrapper .testimonial-swiper .swiper-button-prev::after {
  font-size: 1rem;
  font-weight: bold;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-swiper .swiper-button-next:hover,
.testimonial-section .testimonial-carousel-wrapper .testimonial-swiper .swiper-button-prev:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-slide {
  height: auto;
  padding: 10px;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-card .testimonial-quote {
  position: relative;
  margin-bottom: 25px;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-card .testimonial-quote .testimonial-quote-icon {
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 0;
  opacity: 0.5;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-card .testimonial-quote .testimonial-text {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  margin: 0;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-card .testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-card .testimonial-author .testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-card .testimonial-author .testimonial-avatar .testimonial-avatar-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-card .testimonial-author .testimonial-author-info .testimonial-author-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: #1a1a1a;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-card .testimonial-author .testimonial-author-info .testimonial-author-role {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 8px;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-card .testimonial-author .testimonial-author-info .testimonial-author-rating {
  display: flex;
  gap: 2px;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-card .testimonial-author .testimonial-author-info .testimonial-author-rating .testimonial-rating-star {
  width: 16px;
  height: 16px;
  color: #ddd;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-card .testimonial-author .testimonial-author-info .testimonial-author-rating .testimonial-rating-star.filled {
  color: #FFB800;
  fill: #FFB800;
}
.testimonial-section .testimonial-carousel-wrapper .testimonial-card .testimonial-author .testimonial-author-info .testimonial-author-rating .testimonial-rating-star.half-filled {
  color: #FFB800;
  fill: url(#half-gradient);
}
@media (min-width: 768px) {
  .testimonial-section .testimonial-header {
    flex-direction: row;
    text-align: left;
    gap: 60px;
  }
  .testimonial-section .testimonial-header .testimonial-header-image {
    margin-bottom: 0;
    flex: 0 0 40%;
  }
  .testimonial-section .testimonial-header .testimonial-header-content {
    flex: 1;
    text-align: left;
  }
  .testimonial-section .testimonial-header .testimonial-header-content .testimonial-rating-summary .testimonial-rating-stars {
    justify-content: flex-start;
  }
}
@media (max-width: 640px) {
  .testimonial-section {
    padding: 60px 0;
  }
  .testimonial-section .testimonial-header {
    margin-bottom: 40px;
  }
  .testimonial-section .testimonial-header .testimonial-header-content .testimonial-main-title {
    font-size: 2rem;
  }
  .testimonial-section .testimonial-header .testimonial-header-content .testimonial-rating-summary .testimonial-rating-value {
    font-size: 2.5rem;
  }
  .testimonial-section .testimonial-carousel-wrapper {
    padding: 0;
  }
  .testimonial-section .testimonial-carousel-wrapper .testimonial-swiper {
    padding-bottom: 50px;
  }
  .testimonial-section .testimonial-carousel-wrapper .testimonial-card {
    padding: 25px;
  }
}
@media (max-width: 480px) {
  .testimonial-section {
    padding: 40px 0;
  }
  .testimonial-section .testimonial-header .testimonial-header-content .testimonial-main-title {
    font-size: 1.8rem;
  }
  .testimonial-section .testimonial-carousel-wrapper .testimonial-card {
    padding: 20px;
  }
}

.homeBlog {
  width: 100%;
  padding: 100px 0px;
}
@media (max-width: 768px) {
  .homeBlog {
    padding: 60px 0px;
  }
}
.homeBlog .homeBlogHead {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.homeBlog .homeBlogHead h2 {
  text-align: center;
  width: 80%;
}
@media (max-width: 768px) {
  .homeBlog .homeBlogHead h2 {
    width: 100%;
  }
}
.homeBlog .homeBlogHead p {
  text-align: center;
}
.homeBlog .homeBlogList {
  width: 100%;
  margin-top: 50px;
}
.homeBlog .homeBlogList .homeBlogBox {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  background: #f9f3ff;
  border-radius: 20px;
  transition: 0.3s;
}
.homeBlog .homeBlogList .homeBlogBox:hover .homeBlogBoxThumbnail img {
  transform: scale(1.05);
  transition: 0.3s;
}
.homeBlog .homeBlogList .homeBlogBox .homeBlogBoxThumbnail {
  width: 100%;
  height: 260px;
  background: white;
  border-radius: 15px;
  overflow: hidden;
}
@media (max-width: 1440px) {
  .homeBlog .homeBlogList .homeBlogBox .homeBlogBoxThumbnail {
    height: 200px;
  }
}
@media (max-width: 1024px) {
  .homeBlog .homeBlogList .homeBlogBox .homeBlogBoxThumbnail {
    height: 240px;
  }
}
@media (max-width: 768px) {
  .homeBlog .homeBlogList .homeBlogBox .homeBlogBoxThumbnail {
    height: 340px;
  }
}
@media (max-width: 580px) {
  .homeBlog .homeBlogList .homeBlogBox .homeBlogBoxThumbnail {
    height: 280px;
  }
}
@media (max-width: 500px) {
  .homeBlog .homeBlogList .homeBlogBox .homeBlogBoxThumbnail {
    height: 240px;
  }
}
@media (max-width: 480px) {
  .homeBlog .homeBlogList .homeBlogBox .homeBlogBoxThumbnail {
    height: 200px;
  }
}
.homeBlog .homeBlogList .homeBlogBox .homeBlogBoxThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.3s;
}
.homeBlog .homeBlogList .homeBlogBox .homeBlogBoxDetails {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.homeBlog .homeBlogList .homeBlogBox .homeBlogBoxDetails .date {
  font-size: 14px;
  font-weight: 500;
  color: var(--primaryColor);
}
.homeBlog .homeBlogList .homeBlogBox .homeBlogBoxDetails h3 {
  font-size: 22px;
  margin-top: 20px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: black;
}
.homeBlog .homeBlogList .homeBlogBox .homeBlogBoxDetails p {
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
  color: #000;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.homeBlog .homeBlogList .homeBlogBox .homeBlogBoxDetails a {
  text-decoration: none;
  background: var(--primaryColor);
  padding: 12px 30px;
  border-radius: 50px;
  margin-top: 20px;
  width: -moz-fit-content;
  width: fit-content;
  color: white;
  font-size: 14px;
  transition: 0.3s;
  border: 1px solid var(--primaryColor);
}
.homeBlog .homeBlogList .homeBlogBox .homeBlogBoxDetails a:hover {
  transition: 0.3s;
  border: 1px solid var(--primaryHoverColor);
  background: var(--primaryHoverColor);
}
.homeBlog .homeBlogList .homeBlogBtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
}
.homeBlog .homeBlogList .homeBlogBtn .customNavBtn {
  width: 45px;
  height: 45px;
  background: var(--primaryColor);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--primaryColor);
}
.homeBlog .homeBlogList .homeBlogBtn .customNavBtn:hover {
  background: var(--primaryHoverColor);
  border: 1px solid var(--primaryHoverColor);
}
.homeBlog .homeBlogList .homeBlogBtn .customNavBtn:hover svg {
  color: white;
}
.homeBlog .homeBlogList .homeBlogBtn .customNavBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: scale(0.8);
  transition: all 0.3s ease;
}
.homeBlog .homeBlogList .homeBlogBtn .customNavBtn:disabled:hover {
  background: var(--primaryColor);
  border: 1px solid var(--primaryColor);
}
.homeBlog .homeBlogList .homeBlogBtn .customNavBtn:disabled:hover svg {
  color: white;
}
.homeBlog .homeBlogList .homeBlogBtn .customNavBtn svg {
  width: 25px;
  height: 25px;
  color: white;
  transition: color 0.3s ease;
}

.homeContact {
  width: 100%;
  padding: 100px 0px;
  position: relative;
  z-index: 0;
  background-image: url("../images/bannerGraid.png");
  background-color: var(--primaryColor);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 768px) {
  .homeContact {
    padding: 60px 0px;
  }
}
.homeContact::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: url(../images/contactLine.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center left;
}
.homeContact .homeContactMain {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 1024px) {
  .homeContact .homeContactMain {
    flex-direction: column;
    align-items: flex-start;
  }
}
.homeContact .homeContactMain .homeContactCol1 {
  flex: 0 0 70%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .homeContact .homeContactMain .homeContactCol1 {
    flex: 100%;
  }
}
.homeContact .homeContactMain .homeContactCol1 h2 {
  color: white;
}
.homeContact .homeContactMain .homeContactCol2 {
  flex: 0 0 25%;
}
@media (max-width: 1024px) {
  .homeContact .homeContactMain .homeContactCol2 {
    flex: 100%;
    margin-top: 40px;
  }
}
@media (max-width: 480px) {
  .homeContact .homeContactMain .homeContactCol2 {
    margin-top: 30px;
  }
}
.homeContact .homeContactMain .homeContactCol2 a {
  padding: 18px 34px;
  background: white;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primaryColor);
  font-weight: 500;
  font-size: 20px;
  text-decoration: none;
  transition: 0.3s;
  width: -moz-fit-content;
  width: fit-content;
  border: 1px solid white;
}
@media (max-width: 480px) {
  .homeContact .homeContactMain .homeContactCol2 a {
    padding: 16px 30px;
    font-size: 16px;
  }
}
.homeContact .homeContactMain .homeContactCol2 a:hover {
  background: transparent;
  color: white;
  transition: 0.3s;
  border: 1px solid white;
}

.featuresBanner {
  width: 100%;
  padding: 100px 0px;
  background-image: url("../images/bannerGraid.png");
  background-color: var(--primaryColor);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 0;
  margin-top: 80px;
}
@media (max-width: 768px) {
  .featuresBanner {
    margin-top: 70px;
    padding: 60px 0px;
  }
}
.featuresBanner::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: url(../images/bannerLine.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.featuresBanner .featuresBannerMain {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.featuresBanner .featuresBannerMain h2 {
  text-align: center;
  width: 55%;
  color: white;
}
@media (max-width: 1553px) {
  .featuresBanner .featuresBannerMain h2 {
    width: 60%;
  }
}
@media (max-width: 1436px) {
  .featuresBanner .featuresBannerMain h2 {
    width: 70%;
  }
}
@media (max-width: 1252px) {
  .featuresBanner .featuresBannerMain h2 {
    width: 80%;
  }
}
@media (max-width: 1114px) {
  .featuresBanner .featuresBannerMain h2 {
    width: 90%;
  }
}
@media (max-width: 1024px) {
  .featuresBanner .featuresBannerMain h2 {
    width: 100%;
  }
}
.featuresBanner .featuresBannerMain p {
  text-align: center;
  width: 50%;
  color: white;
}
@media (max-width: 1553px) {
  .featuresBanner .featuresBannerMain p {
    width: 60%;
  }
}
@media (max-width: 1436px) {
  .featuresBanner .featuresBannerMain p {
    width: 70%;
  }
}
@media (max-width: 1252px) {
  .featuresBanner .featuresBannerMain p {
    width: 80%;
  }
}
@media (max-width: 1114px) {
  .featuresBanner .featuresBannerMain p {
    width: 90%;
  }
}
@media (max-width: 1024px) {
  .featuresBanner .featuresBannerMain p {
    width: 100%;
  }
}

.contactBg {
  padding: 40px 0px !important;
}

.featuresList {
  width: 100%;
  padding: 100px 0px;
}
@media (max-width: 768px) {
  .featuresList {
    padding: 60px 0px;
  }
}
.featuresList .featuresListMain {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media (max-width: 600px) {
  .featuresList .featuresListMain {
    gap: 40px;
  }
}
.featuresList .featuresListMain .featuresListBox {
  width: 100%;
  background: #f9f3ff;
  padding: 60px;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}
@media (max-width: 1024px) {
  .featuresList .featuresListMain .featuresListBox {
    padding: 40px;
  }
}
@media (max-width: 500px) {
  .featuresList .featuresListMain .featuresListBox {
    padding: 20px;
  }
}
.featuresList .featuresListMain .featuresListBox .featuresListBoxThumbnail {
  flex: 0 0 45%;
  position: sticky;
  top: 100px;
  background: white;
  border-radius: 20px;
  padding: 20px;
}
@media (max-width: 850px) {
  .featuresList .featuresListMain .featuresListBox .featuresListBoxThumbnail {
    position: static;
    flex: 100%;
  }
}
.featuresList .featuresListMain .featuresListBox .featuresListBoxThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border: 1px solid #ddd;
  border-radius: 20px;
}
.featuresList .featuresListMain .featuresListBox .featuresListBoxDetails {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 850px) {
  .featuresList .featuresListMain .featuresListBox .featuresListBoxDetails {
    flex: 100%;
    margin-top: 40px;
  }
}
.featuresList .featuresListMain .featuresListBox .featuresListBoxDetails h3 {
  font-size: 3em;
  color: var(--primaryColor);
}
@media (max-width: 768px) {
  .featuresList .featuresListMain .featuresListBox .featuresListBoxDetails h3 {
    font-size: 2.5em;
  }
}
@media (max-width: 480px) {
  .featuresList .featuresListMain .featuresListBox .featuresListBoxDetails h3 {
    font-size: 2.2em;
  }
}
.featuresList .featuresListMain .featuresListBox .featuresListBoxDetails ul {
  width: 100%;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.featuresList .featuresListMain .featuresListBox .featuresListBoxDetails ul li {
  list-style: none;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding-top: 15px;
  position: relative;
}
.featuresList .featuresListMain .featuresListBox .featuresListBoxDetails ul li:nth-of-type(1) {
  padding: 0;
}
.featuresList .featuresListMain .featuresListBox .featuresListBoxDetails ul li:nth-of-type(1)::after {
  border-top: 0;
}
.featuresList .featuresListMain .featuresListBox .featuresListBoxDetails ul li::after {
  position: absolute;
  content: "";
  width: calc(100% - 45px);
  height: 1px;
  border-top: 1px dashed #ddd;
  top: 0;
  right: 0;
}
.featuresList .featuresListMain .featuresListBox .featuresListBoxDetails ul li .icon {
  width: 30px;
  height: 30px;
  background: var(--hoverColor);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  color: var(--primaryColor);
}
.featuresList .featuresListMain .featuresListBox .featuresListBoxDetails ul li .icon svg {
  width: 15px;
  height: 15px;
}
.featuresList .featuresListMain .featuresListBox .featuresListBoxDetails ul li h4 {
  width: calc(100% - 45px);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 5px;
}

.featuresFaq {
  width: 100%;
  padding: 60px 0px 100px 0px;
}
@media (max-width: 768px) {
  .featuresFaq {
    padding: 0px 0px 60px 0px;
  }
}
.featuresFaq .featuresFaqHead {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.featuresFaq .featuresFaqHead h2 {
  width: 60%;
  text-align: center;
}
@media (max-width: 768px) {
  .featuresFaq .featuresFaqHead h2 {
    width: 100%;
  }
}
.featuresFaq .featuresFaqHead p {
  text-align: center;
}
.featuresFaq .featuresFaqMain {
  width: 100%;
  display: flex;
  flex-direction: column;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 50px;
}
.featuresFaq .featuresFaqMain .faqBox {
  width: 100%;
  background: #eaeeef;
  border: 1px solid #eee;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: 0.5s ease;
  overflow: hidden;
}
.featuresFaq .featuresFaqMain .faqBox:hover {
  transition: 0.5s ease;
  border-color: var(--primaryColor);
}
.featuresFaq .featuresFaqMain .faqBox .faqBoxHead {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  cursor: pointer;
}
.featuresFaq .featuresFaqMain .faqBox .faqBoxHead h3 {
  width: calc(100% - 60px);
  font-size: 24px;
  font-weight: 500;
}
@media (max-width: 1024px) {
  .featuresFaq .featuresFaqMain .faqBox .faqBoxHead h3 {
    font-size: 22px;
  }
}
@media (max-width: 768px) {
  .featuresFaq .featuresFaqMain .faqBox .faqBoxHead h3 {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  .featuresFaq .featuresFaqMain .faqBox .faqBoxHead h3 {
    font-size: 18px;
  }
}
.featuresFaq .featuresFaqMain .faqBox .faqBoxHead .faqBoxHeadIcon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0ffef;
  color: var(--primaryColor);
}
.featuresFaq .featuresFaqMain .faqBox .faqBoxHead .faqBoxHeadIcon svg {
  width: 25px;
  height: 25px;
}
.featuresFaq .featuresFaqMain .faqBox .faqBoxBody {
  width: 100%;
  border-top: 1px solid transparent;
  display: flex;
  flex-direction: column;
  transition: 0.3s ease;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.featuresFaq .featuresFaqMain .faqBox .faqBoxBody .faqBoxBodyMain {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.featuresFaq .featuresFaqMain .faqBox .faqBoxBody p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--FontColor);
  margin-top: 20px;
  font-weight: 300;
}
.featuresFaq .featuresFaqMain .faqBox .faqBoxBody p:nth-of-type(1) {
  margin-top: 0;
}
@media (max-width: 768px) {
  .featuresFaq .featuresFaqMain .faqBox .faqBoxBody p {
    font-size: 16px;
  }
}
.featuresFaq .featuresFaqMain .faqBox .faqBoxBody ul {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 20px;
}
.featuresFaq .featuresFaqMain .faqBox .faqBoxBody ul li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.featuresFaq .featuresFaqMain .faqBox .faqBoxBody ul li .icon {
  width: 7px;
  height: 7px;
  background: var(--primaryColor);
  border-radius: 50px;
  margin-top: 7px;
}
.featuresFaq .featuresFaqMain .faqBox .faqBoxBody ul li h5 {
  width: calc(100% - 27px);
  font-size: 16px;
  line-height: 1.5;
  color: var(--FontColor);
}
.featuresFaq .featuresFaqMain .faqBox.active {
  background-color: var(--primaryColor);
  transition: 0.5s ease;
}
.featuresFaq .featuresFaqMain .faqBox.active .faqBoxHead h3 {
  color: white;
}
.featuresFaq .featuresFaqMain .faqBox.active .faqBoxBody {
  transition: max-height 0.3s ease;
  border-top: 1px solid rgba(255, 255, 255, 0.2470588235);
}
.featuresFaq .featuresFaqMain .faqBox.active .faqBoxBody p {
  color: white;
}
.featuresFaq .featuresFaqMain .faqBox.active .faqBoxBody ul li .icon {
  background: white;
}
.featuresFaq .featuresFaqMain .faqBox.active .faqBoxBody ul li h5 {
  color: white;
}

.IndustriesBanner {
  width: 100%;
  padding: 100px 0px;
  background-image: url("../images/bannerGraid.png");
  background-color: var(--primaryColor);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 0;
  margin-top: 80px;
}
@media (max-width: 768px) {
  .IndustriesBanner {
    margin-top: 70px;
    padding: 60px 0px;
  }
}
.IndustriesBanner::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: url(../images/bannerLine.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.IndustriesBanner .IndustriesBannerMain {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.IndustriesBanner .IndustriesBannerMain h2 {
  text-align: center;
  width: 65%;
  color: white;
}
@media (max-width: 1807px) {
  .IndustriesBanner .IndustriesBannerMain h2 {
    width: 70%;
  }
}
@media (max-width: 1689px) {
  .IndustriesBanner .IndustriesBannerMain h2 {
    width: 80%;
  }
}
@media (max-width: 1496px) {
  .IndustriesBanner .IndustriesBannerMain h2 {
    width: 90%;
  }
}
@media (max-width: 1347px) {
  .IndustriesBanner .IndustriesBannerMain h2 {
    width: 100%;
  }
}
.IndustriesBanner .IndustriesBannerMain p {
  text-align: center;
  width: 50%;
  color: white;
}
@media (max-width: 1553px) {
  .IndustriesBanner .IndustriesBannerMain p {
    width: 60%;
  }
}
@media (max-width: 1436px) {
  .IndustriesBanner .IndustriesBannerMain p {
    width: 70%;
  }
}
@media (max-width: 1252px) {
  .IndustriesBanner .IndustriesBannerMain p {
    width: 80%;
  }
}
@media (max-width: 1114px) {
  .IndustriesBanner .IndustriesBannerMain p {
    width: 90%;
  }
}
@media (max-width: 1024px) {
  .IndustriesBanner .IndustriesBannerMain p {
    width: 100%;
  }
}

.industries {
  width: 100%;
  padding: 90px 0 100px;
  background-color: #f9f9f9;
}
@media (max-width: 768px) {
  .industries {
    padding: 50px 0 60px;
  }
}
.industries .industriesMain {
  display: flex;
  flex-direction: column;
}
.industries .industriesMain .industriesMainBox {
  width: 100%;
  background-color: #f9f9f9;
  margin-bottom: 40px;
  padding: 10px 0;
}
@media (max-width: 500px) {
  .industries .industriesMain .industriesMainBox {
    margin-bottom: 0;
  }
}
.industries .industriesMain .industryTabs {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.industries .industriesMain .industryTabs .industryTab {
  width: calc(25% - 12px);
  color: #000;
  cursor: pointer;
  background-color: #fff;
  border: 2px solid transparent;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 24px 6px 6px;
  transition: all 0.3s ease;
}
@media (max-width: 1024px) {
  .industries .industriesMain .industryTabs .industryTab {
    width: calc(33.3333333333% - 10px);
  }
}
.industries .industriesMain .industryTabs .industryTab:hover {
  border-color: var(--primaryColor);
}
.industries .industriesMain .industryTabs .industryTab.active {
  background-color: var(--primaryColor);
}
.industries .industriesMain .industryTabs .industryTab.active .tabIcon {
  background: white;
  color: var(--primaryColor);
}
.industries .industriesMain .industryTabs .industryTab.active .tabTitle h4 {
  color: white;
}
.industries .industriesMain .industryTabs .industryTab .tabIcon {
  color: white;
  background: var(--primaryColor);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.industries .industriesMain .industryTabs .industryTab .tabIcon svg {
  width: 20px;
  height: 20px;
}
.industries .industriesMain .industryTabs .industryTab .tabTitle {
  width: calc(100% - 40px - 12px);
}
.industries .industriesMain .industryTabs .industryTab .tabTitle h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primaryColor);
  margin: 0;
}
.industries .industriesMain .industriesBox {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  margin-top: 20px;
  align-items: flex-start;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.5s ease;
}
@media (max-width: 1100px) {
  .industries .industriesMain .industriesBox {
    gap: 40px;
  }
}
@media (max-width: 768px) {
  .industries .industriesMain .industriesBox {
    margin-top: 80px;
  }
  .industries .industriesMain .industriesBox:nth-of-type(1) {
    margin-top: 0;
  }
}
.industries .industriesMain .industriesBox.fade-up {
  opacity: 0;
  transform: translateY(20px);
}
.industries .industriesMain .industriesBox .industriesImgBox {
  width: 50%;
  position: sticky;
  top: 100px;
}
@media (max-width: 1100px) {
  .industries .industriesMain .industriesBox .industriesImgBox {
    width: 100%;
    position: relative;
    top: auto;
  }
}
.industries .industriesMain .industriesBox .industriesImgBox .imgBox {
  width: 80%;
  height: 500px;
  position: relative;
}
@media (max-width: 1100px) {
  .industries .industriesMain .industriesBox .industriesImgBox .imgBox {
    width: 90%;
  }
}
@media (max-width: 768px) {
  .industries .industriesMain .industriesBox .industriesImgBox .imgBox {
    width: 100%;
    height: auto;
  }
}
.industries .industriesMain .industriesBox .industriesImgBox .imgBox .industryImage {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
}
@media (max-width: 768px) {
  .industries .industriesMain .industriesBox .industriesImgBox .imgBox .industryImage {
    height: 400px;
  }
}
@media (max-width: 500px) {
  .industries .industriesMain .industriesBox .industriesImgBox .imgBox .industryImage {
    height: 340px;
  }
}
.industries .industriesMain .industriesBox .industriesImgBox .imgBox .floatingIcons {
  position: absolute;
  right: -20%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (max-width: 1440px) {
  .industries .industriesMain .industriesBox .industriesImgBox .imgBox .floatingIcons {
    right: -30%;
  }
}
@media (max-width: 1100px) {
  .industries .industriesMain .industriesBox .industriesImgBox .imgBox .floatingIcons {
    right: -20%;
  }
}
@media (max-width: 1024px) {
  .industries .industriesMain .industriesBox .industriesImgBox .imgBox .floatingIcons {
    right: -15%;
  }
}
@media (max-width: 768px) {
  .industries .industriesMain .industriesBox .industriesImgBox .imgBox .floatingIcons {
    position: static;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
    margin-top: 20px;
  }
}
.industries .industriesMain .industriesBox .industriesImgBox .imgBox .floatingIcons .iconContainer {
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}
.industries .industriesMain .industriesBox .industriesImgBox .imgBox .floatingIcons .iconContainer:hover {
  transform: translateX(5px);
}
.industries .industriesMain .industriesBox .industriesImgBox .imgBox .floatingIcons .iconContainer .iconCircle {
  width: 44px;
  height: 44px;
  background: var(--primaryColor);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: relative;
}
.industries .industriesMain .industriesBox .industriesImgBox .imgBox .floatingIcons .iconContainer .iconCircle .icon {
  width: 18px;
  height: 18px;
}
.industries .industriesMain .industriesBox .industriesImgBox .imgBox .floatingIcons .iconContainer .iconText {
  background: white;
  padding: 10px 20px 10px 30px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  position: relative;
  left: -20px;
  z-index: 1;
  min-width: 140px;
}
@media (max-width: 768px) {
  .industries .industriesMain .industriesBox .industriesImgBox .imgBox .floatingIcons .iconContainer .iconText {
    min-width: auto;
  }
}
.industries .industriesMain .industriesBox .industriesContentBox {
  width: calc(50% - 60px);
  position: sticky;
  top: 100px;
}
@media (max-width: 1100px), (max-width: 768px), (max-width: 480px) {
  .industries .industriesMain .industriesBox .industriesContentBox {
    width: 100%;
    position: static;
    top: auto;
  }
}
.industries .industriesMain .industriesBox .industriesContentBox .title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .industries .industriesMain .industriesBox .industriesContentBox .title {
    font-size: 24px;
  }
}
.industries .industriesMain .industriesBox .industriesContentBox .desc {
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 30px;
}
.industries .industriesMain .industriesBox .industriesContentBox .sectionHeading {
  font-size: 20px;
  font-weight: 700;
  color: var(--primaryColor);
  margin-top: 30px;
  margin-bottom: 20px;
}
.industries .industriesMain .industriesBox .industriesContentBox .industriesListBox {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.industries .industriesMain .industriesBox .industriesContentBox .industriesListBox ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.industries .industriesMain .industriesBox .industriesContentBox .industriesListBox ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.industries .industriesMain .industriesBox .industriesContentBox .industriesListBox ul li .tickIcon {
  width: 30px;
  height: 30px;
  background: var(--hoverColor);
  color: var(--primaryColor);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.industries .industriesMain .industriesBox .industriesContentBox .industriesListBox ul li .tickIcon svg {
  width: 15px;
  height: 15px;
}
.industries .industriesMain .industriesBox .industriesContentBox .industriesListBox ul li p {
  font-size: 17px;
  line-height: 1.5;
  color: #444;
  margin: 0;
}
.industries .industriesMain .industriesBox .industriesContentBox .industriesListBox .descriptionPoints {
  margin-top: 40px;
}

#price-sub {
  font-size: 17px;
  display: none;
}

.industriesListBox {
  margin-top: 20px;
}
.industriesListBox .featuresHeading,
.industriesListBox .descriptionHeading {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}
.industriesListBox ul {
  list-style: none;
  padding: 0;
}
.industriesListBox ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.industriesListBox ul li .tickIcon {
  color: #2ecc71;
  font-size: 18px;
  margin-top: 3px;
}
.industriesListBox ul li p {
  margin: 0;
  font-size: 16px;
  color: #555;
}
.industriesListBox .descriptionPoints {
  margin-top: 10px;
}
.industriesListBox .descriptionPoints li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 15px;
  color: #444;
}
.industriesListBox .descriptionPoints li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #0070f3;
  font-size: 20px;
  line-height: 1;
}

.blogBanner {
  width: 100%;
  padding: 100px 0px;
  background-image: url("../images/bannerGraid.png");
  background-color: var(--primaryColor);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 0;
  margin-top: 80px;
}
@media (max-width: 768px) {
  .blogBanner {
    margin-top: 70px;
    padding: 60px 0px;
  }
}
.blogBanner::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: url(../images/bannerLine.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.blogBanner .blogBannerMain {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.blogBanner .blogBannerMain h2 {
  text-align: center;
  width: 65%;
  color: white;
}
@media (max-width: 1807px) {
  .blogBanner .blogBannerMain h2 {
    width: 70%;
  }
}
@media (max-width: 1689px) {
  .blogBanner .blogBannerMain h2 {
    width: 80%;
  }
}
@media (max-width: 1496px) {
  .blogBanner .blogBannerMain h2 {
    width: 90%;
  }
}
@media (max-width: 1347px) {
  .blogBanner .blogBannerMain h2 {
    width: 100%;
  }
}
.blogBanner .blogBannerMain p {
  text-align: center;
  width: 50%;
  color: white;
}
@media (max-width: 1553px) {
  .blogBanner .blogBannerMain p {
    width: 60%;
  }
}
@media (max-width: 1436px) {
  .blogBanner .blogBannerMain p {
    width: 70%;
  }
}
@media (max-width: 1252px) {
  .blogBanner .blogBannerMain p {
    width: 80%;
  }
}
@media (max-width: 1114px) {
  .blogBanner .blogBannerMain p {
    width: 90%;
  }
}
@media (max-width: 1024px) {
  .blogBanner .blogBannerMain p {
    width: 100%;
  }
}

.blogList {
  width: 100%;
  padding: 100px 0px;
}
@media (max-width: 768px) {
  .blogList {
    padding: 60px 0px;
  }
}
.blogList .BlogHead {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 40px;
  background: red;
}
.blogList .BlogHead h2 {
  text-align: center;
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 15px;
}
.blogList .BlogHead p {
  text-align: center;
  font-size: 1.1rem;
  color: #666;
  max-width: 700px;
}
.blogList .blogListMain {
  width: 100%;
}
.blogList .blogListMain .blogGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
@media (max-width: 1440px) {
  .blogList .blogListMain .blogGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  .blogList .blogListMain .blogGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .blogList .blogListMain .blogGrid {
    grid-template-columns: 1fr;
  }
}
.blogList .blogListMain .BlogBox {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  background: #f9f3ff;
  border-radius: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blogList .blogListMain .BlogBox:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.blogList .blogListMain .BlogBox:hover .BlogBoxThumbnail img {
  transform: scale(1.05);
}
.blogList .blogListMain .BlogBox .BlogBoxThumbnail {
  width: 100%;
  height: 240px;
  background: white;
  border-radius: 15px;
  overflow: hidden;
}
@media (max-width: 1440px) {
  .blogList .blogListMain .BlogBox .BlogBoxThumbnail {
    height: 200px;
  }
}
.blogList .blogListMain .BlogBox .BlogBoxThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}
.blogList .blogListMain .BlogBox .BlogBoxDetails {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.blogList .blogListMain .BlogBox .BlogBoxDetails .date {
  font-size: 14px;
  font-weight: 500;
  color: var(--primaryColor);
}
.blogList .blogListMain .BlogBox .BlogBoxDetails h3 {
  font-size: 1.4rem;
  margin-top: 15px;
  line-height: 1.3;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.blogList .blogListMain .BlogBox .BlogBoxDetails p {
  font-size: 1rem;
  font-weight: 300;
  margin-top: 10px;
  color: #666;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.blogList .blogListMain .BlogBox .BlogBoxDetails a {
  text-decoration: none;
  background: var(--primaryColor);
  padding: 12px 30px;
  border-radius: 50px;
  margin-top: 20px;
  width: -moz-fit-content;
  width: fit-content;
  color: white;
  font-size: 14px;
  transition: all 0.3s ease;
  border: 1px solid var(--primaryColor);
}
.blogList .blogListMain .BlogBox .BlogBoxDetails a:hover {
  border: 1px solid var(--primaryHoverColor);
  background: var(--primaryHoverColor);
}

.innerBlog {
  width: 100%;
  padding: 50px 0px 100px 0px;
  margin-top: 80px;
}
@media (max-width: 768px) {
  .innerBlog {
    margin-top: 70px;
    padding: 50px 0px 60px 0px;
  }
}
.innerBlog .innerBlogMain {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0px 20%;
}
@media (max-width: 1440px) {
  .innerBlog .innerBlogMain {
    padding: 0px 10%;
  }
}
@media (max-width: 900px) {
  .innerBlog .innerBlogMain {
    padding: 0;
  }
}
.innerBlog .innerBlogMain .backBtn {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--primaryColor);
  font-size: 16px;
  font-weight: 500;
  border: 1px solid var(--primaryColor);
  width: -moz-fit-content;
  width: fit-content;
  padding: 5px 16px;
  border-radius: 50px;
  transition: 0.3s;
}
@media (max-width: 768px) {
  .innerBlog .innerBlogMain .backBtn {
    font-size: 14px;
  }
}
.innerBlog .innerBlogMain .backBtn:hover {
  transition: 0.3s;
  background: var(--primaryColor);
  color: white;
  border-color: var(--primaryColor);
}
.innerBlog .innerBlogMain .backBtn svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 768px) {
  .innerBlog .innerBlogMain .backBtn svg {
    width: 14px;
    height: 14px;
  }
}
.innerBlog .innerBlogMain h1 {
  font-size: 3em;
  color: var(--primaryColor);
  margin-top: 40px;
}
@media (max-width: 1408px) {
  .innerBlog .innerBlogMain h1 {
    font-size: 2.5em;
  }
}
@media (max-width: 1280px) {
  .innerBlog .innerBlogMain h1 {
    font-size: 2.2em;
  }
}
@media (max-width: 1101px) {
  .innerBlog .innerBlogMain h1 {
    font-size: 2em;
  }
}
@media (max-width: 500px) {
  .innerBlog .innerBlogMain h1 {
    font-size: 1.7em;
  }
}
.innerBlog .innerBlogMain .date {
  font-size: 20px;
  color: var(--primaryColor);
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
}
@media (max-width: 768px) {
  .innerBlog .innerBlogMain .date {
    font-size: 16px;
  }
}
.innerBlog .innerBlogMain .date svg {
  width: 20px;
  height: 20px;
}
.innerBlog .innerBlogMain .innerBlogThumbnail {
  width: 100%;
  margin-top: 40px;
}
.innerBlog .innerBlogMain .innerBlogThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 20px;
}
.innerBlog .innerBlogMain p {
  margin-top: 30px;
  font-size: 18px;
  font-weight: 400;
}
@media (max-width: 768px) {
  .innerBlog .innerBlogMain p {
    font-size: 16px;
  }
}

.contactUs {
  width: 100%;
  padding: 60px 0;
  background-color: #fff;
}
.contactUs .contactMain {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contactUs .contactAddress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}
.contactUs .contactAddress .contactBox {
  background: #fff;
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}
.contactUs .contactAddress .contactBox:hover {
  transform: translateY(-5px);
}
.contactUs .contactAddress .contactBox .iconBox {
  width: 40px;
  height: 40px;
  background: #f9f3ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.contactUs .contactAddress .contactBox .iconBox .icon {
  color: var(--primaryColor);
  font-size: 18px;
}
.contactUs .contactAddress .contactBox h3 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 15px;
  color: #333;
}
.contactUs .contactAddress .contactBox a, .contactUs .contactAddress .contactBox p {
  color: #666;
  font-size: 1rem;
  line-height: 1.6;
  transition: color 0.3s ease;
}
.contactUs .contactAddress .contactBox a:hover {
  color: var(--primaryColor);
  text-decoration: none;
}
.contactUs .contactFormMap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 992px) {
  .contactUs .contactFormMap {
    grid-template-columns: 1fr;
  }
}
.contactUs .contactForm {
  background: #fff;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.contactUs .contactForm h2 {
  font-size: 1.8rem;
  margin-bottom: 30px;
  color: #333;
  text-align: center;
}
.contactUs .contactForm .formGroup {
  margin-bottom: 20px;
}
.contactUs .contactForm .formGroup label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
}
.contactUs .contactForm .formGroup input, .contactUs .contactForm .formGroup textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}
.contactUs .contactForm .formGroup input:focus, .contactUs .contactForm .formGroup textarea:focus {
  outline: none;
  border-color: var(--primaryColor);
}
.contactUs .contactForm .formGroup textarea {
  resize: vertical;
  min-height: 120px;
}
.contactUs .contactForm .submitBtn {
  width: 100%;
  padding: 15px;
  background: var(--primaryColor);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}
.contactUs .contactForm .submitBtn:hover {
  background: var(--primaryHoverColor);
  transform: translateY(-2px);
}
.contactUs .contactMap {
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.contactUs .contactMap iframe {
  width: 100%;
  height: 100%;
  min-height: 500px;
}
@media (max-width: 992px) {
  .contactUs .contactMap iframe {
    min-height: 400px;
  }
}
@media (max-width: 768px) {
  .contactUs .contactAddress {
    grid-template-columns: 1fr;
  }
  .contactUs .contactForm {
    padding: 30px 20px;
  }
}

.pricing-des {
  font-size: 13px;
  line-height: 0.2;
}

.privacyPolicy {
  padding: 100px 20px;
  background: #f9f9f9;
  color: #222;
  font-family: Arial, sans-serif;
}
.privacyPolicy .container h1 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: black;
}
.privacyPolicy .container h2 {
  margin-top: 25px;
  font-size: 1.4rem;
  color: black;
}
.privacyPolicy .container p,
.privacyPolicy .container li {
  font-size: 1rem;
  line-height: 1.6;
  margin: 10px 0;
}
.privacyPolicy .container ul {
  padding-left: 20px;
}
.privacyPolicy .container a {
  color: var(--primaryColor);
  text-decoration: underline;
}

.termsAndCondition {
  padding: 100px 20px;
  background: #f9f9f9;
  color: #222;
  font-family: Arial, sans-serif;
}
.termsAndCondition .container h1 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: black;
}
.termsAndCondition .container h2 {
  margin-top: 25px;
  font-size: 1.4rem;
  color: black;
}
.termsAndCondition .container p,
.termsAndCondition .container li {
  font-size: 1rem;
  line-height: 1.6;
  margin: 10px 0;
}
.termsAndCondition .container ul {
  padding-left: 20px;
}
.termsAndCondition .container a {
  color: var(--primaryColor);
  text-decoration: underline;
}

.modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modalContent {
  background: #fff;
  width: 560px;
  max-width: 92vw;
  border-radius: 16px;
  padding: 24px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modalClose {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

.btnCallback {
  padding-bottom: 10px;
  text-align: center;
}

.modalForm {
  display: grid;
  gap: 12px;
}
.modalForm label {
  display: grid;
  gap: 6px;
  font-size: 14px;
}
.modalForm input, .modalForm textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
}
.modalForm .submitBtn {
  margin-top: 6px;
  background: var(--primaryColor);
  color: #fff;
  border: 0;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.modalForm .submitBtn:hover {
  background: var(--primaryHoverColor);
}

.locationTracking {
  padding: 150px 0px 0px;
  font-family: "Inter", sans-serif;
  color: #1d1d1f;
  /* ✅ Hero Section */
  /* ✅ Responsive Fixes */
}
.locationTracking .hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}
.locationTracking .hero .textContent {
  flex: 1;
  max-width: 600px;
  /* ✅ Updated numbered list */
}
.locationTracking .hero .textContent .sectionSubtitle {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.locationTracking .hero .textContent .title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 20px;
  color: #111827;
}
.locationTracking .hero .textContent .title.primary {
  color: var(--primaryColor);
}
.locationTracking .hero .textContent .description {
  font-size: 17px;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 25px;
}
.locationTracking .hero .textContent .featuresList {
  list-style: none;
  margin: 0 0 25px 0;
  padding: 0;
}
.locationTracking .hero .textContent .featuresList .featureItem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.6;
}
.locationTracking .hero .textContent .featuresList .featureItem .featureNumber {
  display: inline-block;
  background: var(--primaryColor);
  color: #fff;
  font-weight: 600;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  text-align: center;
  line-height: 26px;
  flex-shrink: 0;
}
.locationTracking .hero .textContent .featuresList .featureItem .featureText {
  flex: 1;
}
.locationTracking .hero .textContent .note {
  font-size: 15px;
  font-weight: 500;
  color: #6b7280;
  margin-top: 15px;
  background: #f9fafb;
  padding: 12px 16px;
  border-left: 4px solid var(--primaryColor);
  border-radius: 8px;
}
.locationTracking .hero .imageContent {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.locationTracking .hero .imageContent .mainImg {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 1024px) {
  .locationTracking {
    padding: 100px 20px;
  }
  .locationTracking .hero {
    flex-direction: column;
    text-align: center;
  }
  .locationTracking .hero .textContent {
    max-width: 100%;
    padding-top: 100px;
  }
  .locationTracking .hero .textContent .title {
    font-size: 34px;
  }
  .locationTracking .hero .textContent .featuresList {
    text-align: left;
  }
  .locationTracking .hero .imageContent {
    margin-top: 30px;
  }
}
@media (max-width: 768px) {
  .locationTracking {
    padding: 80px 15px 30px;
  }
  .locationTracking .hero {
    gap: 30px;
  }
  .locationTracking .hero .textContent .title {
    font-size: 26px;
  }
}
@media (max-width: 480px) {
  .locationTracking {
    padding: 60px 12px;
  }
  .locationTracking .hero {
    gap: 20px;
  }
  .locationTracking .hero .textContent .title {
    font-size: 22px;
  }
  .locationTracking .hero .featuresList .featureItem {
    font-size: 14px;
  }
  .locationTracking .hero .featuresList .featureItem .featureNumber {
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
    line-height: 22px;
  }
}

.featuresSection {
  text-align: center;
  padding-top: 40px;
  /* ✅ Responsive Fixes */
}
.featuresSection .title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 50px;
  color: #111827;
}
.featuresSection .featuresGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 35px;
}
.featuresSection .featuresGrid .featureBox {
  padding: 32px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.featuresSection .featuresGrid .featureBox .iconBox {
  font-size: 38px;
  color: var(--primaryColor);
  margin-bottom: 18px;
}
.featuresSection .featuresGrid .featureBox:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.featuresSection .featuresGrid .featureBox h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #111827;
}
.featuresSection .featuresGrid .featureBox p {
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
}
@media (max-width: 1024px) {
  .featuresSection .title {
    font-size: 28px;
  }
}
@media (max-width: 768px) {
  .featuresSection .title {
    font-size: 24px;
  }
}
@media (max-width: 480px) {
  .featuresSection .title {
    font-size: 20px;
  }
}

.featuresSections {
  width: 100%;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* ✅ Responsive */
}
.featuresSections .featureBlock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 80px;
}
.featuresSections .featureBlock.featureBlockTwo {
  background: #f5f8ff;
  padding: 40px;
  border-radius: 12px;
  margin-bottom: 30px;
}
.featuresSections .featureBlock .featureImageWrapper {
  flex: 1;
}
.featuresSections .featureBlock .featureImageWrapper .featureImage {
  width: 100%;
  height: auto;
  border-radius: 12px;
  -o-object-fit: cover;
     object-fit: cover;
}
.featuresSections .featureBlock .featureContent {
  flex: 1;
}
.featuresSections .featureBlock .featureContent .featureHeading {
  font-size: 40px;
  font-weight: 700;
  color: var(--primaryColor);
  margin-bottom: 10px;
}
.featuresSections .featureBlock .featureContent .featureSubtext {
  font-size: 1rem;
  color: #666;
  margin-bottom: 20px;
}
.featuresSections .featureBlock .featureContent .featureSubtextBlue {
  font-size: 1rem;
  color: var(--primaryColor);
  margin-bottom: 20px;
}
.featuresSections .featureBlock .featureContent .featureList {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.featuresSections .featureBlock .featureContent .featureList .featureListItem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  margin-bottom: 16px;
  line-height: 1.6;
}
.featuresSections .featureBlock .featureContent .featureList .featureListItem .featureNumber {
  display: inline-block;
  background: var(--primaryColor);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  text-align: center;
  line-height: 26px;
  flex-shrink: 0;
}
.featuresSections .featureBlock .featureContent .featureList .featureListItem .featureText {
  flex: 1;
}
.featuresSections .featureBlock .featureContent .featureButton {
  padding: 12px 28px;
  background: var(--primaryColor);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s ease;
}
.featuresSections .featureBlock .featureContent .featureButton:hover {
  background: var(--primaryHoverColor);
}
@media (max-width: 1024px) {
  .featuresSections .featureBlock {
    gap: 30px;
  }
  .featuresSections .featureBlock .featureContent .featureHeading {
    font-size: 1.6rem;
  }
  .featuresSections .featureBlock .featureContent .featureSubtext,
  .featuresSections .featureBlock .featureContent .featureSubtextBlue {
    font-size: 0.95rem;
  }
}
@media (max-width: 768px) {
  .featuresSections .featureBlock {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  .featuresSections .featureBlock.featureBlockTwo {
    padding: 20px;
  }
  .featuresSections .featureBlock .featureImageWrapper .featureImage {
    max-width: 90%;
    margin: 0 auto 20px;
  }
  .featuresSections .featureBlock .featureContent .featureHeading {
    font-size: 1.4rem;
  }
  .featuresSections .featureBlock .featureContent .featureList .featureListItem {
    justify-content: center;
  }
  .featuresSections .featureBlock .featureContent .featureButton {
    margin-top: 20px;
  }
}
@media (max-width: 480px) {
  .featuresSections .featureBlock {
    gap: 20px;
  }
  .featuresSections .featureBlock .featureImageWrapper .featureImage {
    max-width: 100%;
    border-radius: 8px;
  }
  .featuresSections .featureBlock .featureContent .featureHeading {
    font-size: 1.2rem;
  }
  .featuresSections .featureBlock .featureContent .featureSubtext,
  .featuresSections .featureBlock .featureContent .featureSubtextBlue {
    font-size: 0.85rem;
  }
  .featuresSections .featureBlock .featureContent .featureList .featureListItem {
    font-size: 0.85rem;
    gap: 8px;
  }
  .featuresSections .featureBlock .featureContent .featureList .featureListItem .featureNumber {
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
    line-height: 22px;
  }
  .featuresSections .featureBlock .featureContent .featureButton {
    width: 100%;
    padding: 10px 0;
    font-size: 0.9rem;
  }
}

.clientTestimonialSection {
  width: 100%;
  padding: 60px 20px;
  background: #f9fafb;
}
.clientTestimonialSection .clientTestimonialContainer {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.clientTestimonialSection .clientTestimonialTitle {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  color: #1e293b;
  margin-bottom: 40px;
}
.clientTestimonialSection .clientTestimonialGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.clientTestimonialSection .clientTestimonialCard {
  background: #fff;
  border-radius: 12px;
  padding: 25px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.clientTestimonialSection .clientTestimonialCard:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.clientTestimonialSection .clientTestimonialImageWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}
.clientTestimonialSection .clientTestimonialImageWrapper .clientTestimonialImage {
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.clientTestimonialSection .clientTestimonialImageWrapper .clientTestimonialLogo {
  max-height: 60px;
  -o-object-fit: contain;
     object-fit: contain;
}
.clientTestimonialSection .clientTestimonialName {
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}
.clientTestimonialSection .clientTestimonialRole {
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 15px;
}
.clientTestimonialSection .clientTestimonialText {
  font-size: 15px;
  line-height: 1.6;
  color: #334155;
}

.bannerWrapper {
  width: 100%;
  min-height: 100dvh;
  padding: 100px 20px 0;
  background: linear-gradient(135deg, #782ae4 0%, #3a0ca3 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* ================================
     RESPONSIVE FIXES
  ================================= */
}
.bannerWrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/assets/images/pattern.svg") no-repeat;
  background-size: cover;
  opacity: 0.05;
  z-index: 1;
}
.bannerWrapper .contentGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}
.bannerWrapper .textContent {
  text-align: left;
}
.bannerWrapper .bannerMainTitle {
  font-size: 4rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 24px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}
@media screen and (max-width: 1024px) {
  .bannerWrapper .bannerMainTitle {
    font-size: 3rem;
    padding-top: 50px;
  }
}
@media screen and (max-width: 768px) {
  .bannerWrapper .bannerMainTitle {
    font-size: 2rem;
    padding-top: 50px;
  }
}
.bannerWrapper .bannerDescription {
  font-size: 1.25rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 500px;
  font-family: Roboto, sans-serif;
}
.bannerWrapper .imageContent {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
  transition: transform 0.3s ease;
}
.bannerWrapper .imageContent:hover {
  transform: perspective(1000px) rotateY(0) rotateX(0);
}
.bannerWrapper .bannerImage {
  width: 100%;
  height: auto;
  display: block;
}
.bannerWrapper .ctaButtons {
  display: flex;
  gap: 16px;
  margin-top: 40px;
}
.bannerWrapper .primaryButton {
  background: #fff;
  color: #6e3aff;
  border: none;
  padding: 16px 32px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.bannerWrapper .primaryButton:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.bannerWrapper .secondaryButton {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 16px 32px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.bannerWrapper .secondaryButton:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}
.bannerWrapper .aiAssistant {
  position: fixed;
  bottom: 100px;
  right: 45px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 8px;
  border-radius: 50px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.4, 1);
  z-index: 100;
  cursor: pointer;
  display: none;
  overflow: hidden; /* Ensure content doesn't overflow during transition */
}
.bannerWrapper .aiAssistant .assistantAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #8a63ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.bannerWrapper .aiAssistant .assistantBox {
  display: flex;
  align-items: center;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.4s ease 0.1s, width 0.5s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.bannerWrapper .aiAssistant:hover {
  width: 400px;
  padding: 12px 16px;
  cursor: default;
}
.bannerWrapper .aiAssistant:hover .assistantAvatar {
  transform: scale(0.95); /* Slight scale effect for avatar */
}
.bannerWrapper .aiAssistant:hover .assistantBox {
  opacity: 1;
  width: 100%;
  margin-left: 12px;
}
.bannerWrapper .aiAssistant .assistantInput {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.95rem;
  color: #000;
  background: transparent;
  padding: 8px 12px;
  transition: opacity 0.3s ease;
}
.bannerWrapper .aiAssistant .assistantInput::-moz-placeholder {
  color: rgba(0, 0, 0, 0.5);
  -moz-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.bannerWrapper .aiAssistant .assistantInput::placeholder {
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.3s ease;
}
.bannerWrapper .aiAssistant .sendButton {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #8a63ff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.3s ease;
}
.bannerWrapper .aiAssistant .sendButton:hover {
  background: #6e3aff;
}
@media (max-width: 1200px) {
  .bannerWrapper {
    padding: 80px 20px;
  }
}
@media (max-width: 1024px) {
  .bannerWrapper {
    padding: 80px 20px;
    min-height: auto;
  }
  .bannerWrapper .contentGrid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .bannerWrapper .textContent {
    text-align: center;
  }
  .bannerWrapper .bannerDescription {
    max-width: 100%;
  }
  .bannerWrapper .ctaButtons {
    justify-content: center;
  }
  .bannerWrapper .imageContent {
    max-width: 600px;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .bannerWrapper {
    padding: 60px 20px;
    min-height: auto;
  }
  .bannerWrapper .bannerMainTitle {
    padding-top: 20px;
  }
  .bannerWrapper .bannerDescription {
    font-size: 1.1rem;
  }
  .bannerWrapper .ctaButtons {
    flex-direction: column;
    gap: 12px;
  }
  .bannerWrapper .primaryButton,
  .bannerWrapper .secondaryButton {
    width: 100%;
    padding: 14px;
  }
  .bannerWrapper .aiAssistant {
    bottom: 20px;
    right: 20px;
    padding: 8px;
  }
}
@media (max-width: 480px) {
  .bannerWrapper .bannerMainTitle {
    font-size: 1.8rem;
    padding-top: 50px;
  }
  .bannerWrapper .bannerDescription {
    font-size: 1rem;
  }
  .bannerWrapper .assistantInput {
    font-size: 0.9rem;
  }
}

/* PRODUCT FEATURES */
.features-section {
  padding: 100px 0px 80px;
  background: white;
  color: var(--primaryColor);
  text-align: center;
  /* Responsive */
}
.features-section .section-title {
  font-size: 4rem;
  margin-bottom: 50px;
  font-weight: 700;
  color: var(--primaryColor);
  position: relative;
  display: inline-block;
  max-width: 1000px;
}
@media screen and (max-width: 1024px) {
  .features-section .section-title {
    font-size: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .features-section .section-title {
    font-size: 2rem;
  }
}
.features-section a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.features-section a:hover {
  text-decoration: none;
}
.features-section .features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .features-section .features-grid {
    padding: 20px;
  }
}
.features-section .features-grid .feature-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 25px;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.features-section .features-grid .feature-card::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle at top left, var(--primaryHoverColor), transparent 70%);
  opacity: 0.08;
  transform: rotate(25deg);
}
.features-section .features-grid .feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  border-color: var(--primaryColor);
}
.features-section .features-grid .feature-card .feature-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.features-section .features-grid .feature-card .feature-header .icon {
  font-size: 2rem;
  color: var(--primaryColor);
  background: var(--hoverColor);
  padding: 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.features-section .features-grid .feature-card .feature-header .feature-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--thirdColor);
  margin: 0;
}
.features-section .features-grid .feature-card .feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.features-section .features-grid .feature-card .feature-list .feature-item {
  margin-bottom: 10px;
  font-size: 1rem;
  color: var(--thirdColor);
  display: flex;
  align-items: center;
  gap: 8px;
}
.features-section .features-grid .feature-card .feature-list .feature-item::before {
  content: "✔";
  color: var(--primaryColor);
  font-weight: bold;
}
@media (max-width: 768px) {
  .features-section .section-title {
    font-size: 2rem;
  }
  .features-section .features-grid .feature-card {
    padding: 20px;
  }
  .features-section .features-grid .feature-card .feature-header .icon {
    font-size: 1.6rem;
    padding: 8px;
  }
}

.realmine-section {
  background: white;
  color: black;
  padding: 100px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.realmine-section .container .realmine-header {
  margin-bottom: 20px;
}
.realmine-section .container .realmine-header .realmine-badge {
  display: inline-block;
  background: var(--primaryColor);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}
.realmine-section .container .realmine-header .realmine-title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
}
@media screen and (max-width: 768px) {
  .realmine-section .container .realmine-header .realmine-title {
    font-size: 2rem !important;
  }
}
@media screen and (max-width: 1024px) {
  .realmine-section .container .realmine-header .realmine-title {
    font-size: 3rem;
  }
}
.realmine-section .container .realmine-header .realmine-title span {
  color: var(--primaryColor);
  position: relative;
}
.realmine-section .container .realmine-header .realmine-title span::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 8px;
  background: rgba(37, 99, 235, 0.2);
  z-index: -1;
}
.realmine-section .container .realmine-header .realmine-divider {
  width: 80px;
  height: 4px;
  background: var(--primaryColor);
  margin: 0 auto;
  border-radius: 2px;
}
.realmine-section .container .realmine-intro {
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.realmine-section .container .realmine-intro .realmine-subtitle {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--primaryColor);
}
.realmine-section .container .realmine-intro .realmine-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: black;
}
.realmine-section .container .realmine-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 50px;
}
.realmine-section .container .realmine-stats .realmine-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.realmine-section .container .realmine-stats .realmine-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--primaryColor);
  transition: all 0.3s ease;
}
.realmine-section .container .realmine-stats .realmine-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.realmine-section .container .realmine-stats .realmine-card:hover::before {
  height: 100%;
}
.realmine-section .container .realmine-stats .realmine-card:hover .realmine-icon-wrapper {
  background: var(--primaryColor);
  transform: rotate(10deg);
}
.realmine-section .container .realmine-stats .realmine-card:hover .realmine-icon {
  color: white;
}
.realmine-section .container .realmine-stats .realmine-card .realmine-icon-wrapper {
  width: 70px;
  height: 70px;
  background: rgba(37, 99, 235, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  transition: all 0.3s ease;
}
.realmine-section .container .realmine-stats .realmine-card .realmine-icon {
  font-size: 1.75rem;
  color: var(--primaryColor);
  transition: all 0.3s ease;
}
.realmine-section .container .realmine-stats .realmine-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: black;
}
.realmine-section .container .realmine-stats .realmine-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: black;
  margin: 0;
}
@media (max-width: 768px) {
  .realmine-section .realmine-container .realmine-header .realmine-title {
    font-size: 2rem;
  }
  .realmine-section .realmine-container .realmine-stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.crmTestimonialSection {
  background: var(--primaryColor);
  color: #fff;
  padding: 80px 20px;
  text-align: center;
  font-family: "Segoe UI", sans-serif;
}
.crmTestimonialSection .crmTestimonialHeading {
  font-size: 4rem;
  font-weight: 700;
  max-width: 1000px;
  margin: 0 auto 40px;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .crmTestimonialSection .crmTestimonialHeading {
    font-size: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .crmTestimonialSection .crmTestimonialHeading {
    font-size: 2rem !important;
  }
}
.crmTestimonialSection .crmTestimonialSubHeading {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 40px;
  opacity: 0.9;
}
.crmTestimonialSection .crmTestimonialSlider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: nowrap;
}
.crmTestimonialSection .crmTestimonialSlider .crmTestimonialCard {
  background: rgba(255, 255, 255, 0.1);
  padding: 30px;
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.crmTestimonialSection .crmTestimonialSlider .crmTestimonialCard .crmTestimonialImageWrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.crmTestimonialSection .crmTestimonialSlider .crmTestimonialCard .crmTestimonialImage {
  border-radius: 50%;
  border: 3px solid #fff;
  -o-object-fit: cover;
     object-fit: cover;
}
.crmTestimonialSection .crmTestimonialSlider .crmTestimonialCard .crmTestimonialQuote {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 20px;
  text-overflow: ellipsis;
  overflow: scroll;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.crmTestimonialSection .crmTestimonialSlider .crmTestimonialCard .crmTestimonialAuthor {
  font-size: 1rem;
  font-weight: 400;
}
.crmTestimonialSection .crmTestimonialSlider .crmTestimonialCard .crmTestimonialAuthor span {
  font-weight: 600;
}
.crmTestimonialSection .crmTestimonialSlider .crmTestimonialCard .crmTestimonialAuthor em {
  font-style: italic;
}
.crmTestimonialSection .crmTestimonialSlider .crmTestimonialNavButton {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  padding: 10px 14px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}
@media screen and (max-width: 480px) {
  .crmTestimonialSection .crmTestimonialSlider .crmTestimonialNavButton {
    display: none;
  }
}
.crmTestimonialSection .crmTestimonialSlider .crmTestimonialNavButton:hover {
  background: rgba(255, 255, 255, 0.4);
}
.crmTestimonialSection .crmTestimonialDots {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.crmTestimonialSection .crmTestimonialDots .crmTestimonialDot {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}
.crmTestimonialSection .crmTestimonialDots .crmTestimonialDot.crmTestimonialDotActive {
  background: #fff;
}

.crmHeroSection {
  margin-bottom: 100px;
  position: relative;
  width: 100%;
  height: 60vh;
  background: url("/assets/images/feature/img10.webp") no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crmHeroSection .crmHeroOverlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.crmHeroSection .crmHeroOverlay .crmHeroContent {
  text-align: center;
  color: #fff;
  padding: 20px;
}
.crmHeroSection .crmHeroOverlay .crmHeroContent .crmHeroTitle {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 20px;
  width: 100%;
}
@media (max-width: 1024px) {
  .crmHeroSection .crmHeroOverlay .crmHeroContent .crmHeroTitle {
    font-size: 3rem;
  }
}
@media (max-width: 768px) {
  .crmHeroSection .crmHeroOverlay .crmHeroContent .crmHeroTitle {
    font-size: 2rem;
  }
}
.crmHeroSection .crmHeroOverlay .crmHeroContent .crmHeroSubtitle {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 40px;
}
.crmHeroSection .crmHeroOverlay .crmHeroContent .crmHeroActions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.crmHeroSection .crmHeroOverlay .crmHeroContent .crmHeroActions .crmHeroPrimaryButton {
  padding: 12px 28px;
  background: var(--primaryColor);
  border: none;
  border-radius: 30px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s ease;
}
.crmHeroSection .crmHeroOverlay .crmHeroContent .crmHeroActions .crmHeroPrimaryButton:hover {
  background: var(--primaryHoverColor);
}
.crmHeroSection .crmHeroOverlay .crmHeroContent .crmHeroActions .crmHeroSecondaryButton {
  padding: 12px 28px;
  border: 2px solid #fff;
  border-radius: 30px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
}
.crmHeroSection .crmHeroOverlay .crmHeroContent .crmHeroActions .crmHeroSecondaryButton:hover {
  background: #fff;
  color: #000;
}

.audienceBoxSection {
  background: #ffffff;
  color: #2d3748;
  padding: 40px 20px 40px;
  font-family: "Inter", sans-serif;
  position: relative;
  overflow: hidden;
  /* Decorative soft glows (kept similar spirit to your previous) */
  /* === Title block (kept center + subtitle as before) === */
  /* === Two large group cards side-by-side (stack on mobile) === */
  /* === Grid of small box cards === */
  /* Audience item style */
  /* Solution item style */
}
.audienceBoxSection::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(121, 42, 228, 0.12) 0%, rgba(121, 42, 228, 0) 70%);
  pointer-events: none;
}
.audienceBoxSection::after {
  content: "";
  position: absolute;
  bottom: -70px;
  left: -70px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.12) 0%, rgba(79, 70, 229, 0) 70%);
  pointer-events: none;
}
.audienceBoxSection .sectionHeader {
  text-align: center;
  margin-bottom: 70px;
}
.audienceBoxSection .sectionHeader .subtitle {
  font-size: 1.075rem;
  color: #4a5568;
  max-width: 720px;
  margin: 0 auto;
  padding-top: 10px;
}
@media (max-width: 768px) {
  .audienceBoxSection .sectionHeader .subtitle {
    font-size: 1rem;
  }
}
.audienceBoxSection .groupRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
@media (max-width: 992px) {
  .audienceBoxSection .groupRow {
    grid-template-columns: 1fr;
  }
}
.audienceBoxSection .groupCard {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  padding: 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.audienceBoxSection .groupCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .audienceBoxSection .groupCard {
    padding: 24px 20px;
  }
}
.audienceBoxSection .groupHeader {
  margin-bottom: 26px;
}
.audienceBoxSection .groupHeader h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 12px;
}
.audienceBoxSection .groupHeader .groupDivider {
  height: 3px;
  width: 64px;
  border-radius: 3px;
  background: linear-gradient(90deg, #4f46e5, #782ae4);
}
.audienceBoxSection .itemGrid {
  display: flex;
  flex-direction: column;
  gap: 25px;
  /* Audience uses 4 across on wide screens */
  /* Solutions are descriptive; 2 columns for readability */
}
.audienceBoxSection .itemGrid.audienceGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .audienceBoxSection .itemGrid.audienceGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .audienceBoxSection .itemGrid.audienceGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 460px) {
  .audienceBoxSection .itemGrid.audienceGrid {
    grid-template-columns: 1fr;
  }
}
.audienceBoxSection .itemGrid.solutionGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px) {
  .audienceBoxSection .itemGrid.solutionGrid {
    grid-template-columns: 1fr;
  }
}
.audienceBoxSection .itemCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.audienceBoxSection .itemCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}
.audienceBoxSection .audienceItem {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
}
.audienceBoxSection .audienceItem .itemIcon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #4f46e5, #782ae4);
  color: #ffffff;
}
.audienceBoxSection .audienceItem .itemIcon .itemIconInner {
  font-size: 1.25rem;
  line-height: 1;
}
.audienceBoxSection .audienceItem .itemTitle {
  font-size: 1.05rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
}
.audienceBoxSection .solutionItem {
  position: relative;
  padding: 22px 18px 18px 54px;
}
.audienceBoxSection .solutionItem .checkBadge {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #4f46e5, #782ae4);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.audienceBoxSection .solutionItem .itemText {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #4a5568;
}

.crmComparison {
  background: #fff;
  color: #333;
  padding: 80px 20px;
  text-align: center;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
.crmComparison .compareHeading {
  margin: 0 auto;
  padding-bottom: 30px;
  text-align: center;
}
.crmComparison .subtitle {
  font-size: 1.25rem;
  margin-bottom: 60px;
  font-weight: 500;
  color: #666;
}
.crmComparison .tableWrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}
.crmComparison .tableHeader,
.crmComparison .tableRow {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: center;
}
.crmComparison .tableHeader {
  font-weight: 600;
  background: #f8f9fa;
  color: #5e17eb;
  padding: 16px 0;
  border-bottom: 1px solid #eee;
}
.crmComparison .tableRow {
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s ease;
}
.crmComparison .tableRow:last-child {
  border-bottom: none;
}
.crmComparison .tableRow:hover {
  background: #fafaff;
}
.crmComparison .cell {
  padding: 12px 20px;
  font-size: 1rem;
  display: flex;
  justify-content: start;
  align-items: start;
  text-align: start;
}
.crmComparison .cell.featureHead {
  justify-content: flex-start;
  font-weight: 700;
  padding-left: 30px;
}
.crmComparison .cell.productHead {
  font-weight: 700;
  color: #5e17eb;
}
.crmComparison .cell.feature {
  justify-content: flex-start;
  font-weight: 500;
  padding-left: 30px;
  color: #444;
}
.crmComparison .comparisonCell {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-weight: 500;
}
.crmComparison .comparisonCell .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.crmComparison .comparisonCell .icon.success {
  color: #10b981;
}
.crmComparison .comparisonCell .icon.danger {
  color: #ef4444;
}
@media (max-width: 768px) {
  .crmComparison {
    padding: 40px 16px;
  }
  .crmComparison .title {
    font-size: 1.8rem;
    margin-bottom: 12px;
  }
  .crmComparison .subtitle {
    font-size: 1rem;
    margin-bottom: 32px;
  }
  .crmComparison .tableWrapper {
    box-shadow: none;
    border: none;
    background: transparent;
  }
  .crmComparison .tableHeader {
    display: none;
  }
  .crmComparison .tableRow {
    display: flex;
    flex-direction: column;
    background: #fff;
    margin-bottom: 16px;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
    overflow: hidden;
  }
  .crmComparison .tableRow:last-child {
    margin-bottom: 0;
  }
  .crmComparison .cell {
    width: 100%;
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    justify-content: space-between;
  }
  .crmComparison .cell.feature {
    background: #f8f9fa;
    font-weight: 600;
    color: #5e17eb;
    padding: 16px;
    border-bottom: none;
  }
  .crmComparison .cell:last-child {
    border-bottom: none;
  }
  .crmComparison .comparisonCell {
    justify-content: space-between;
    width: 100%;
  }
  .crmComparison .comparisonCell::before {
    content: attr(data-label);
    font-weight: 600;
    color: #666;
    margin-right: auto;
    padding-right: 16px;
  }
  .crmComparison .cell:nth-child(2) .comparisonCell::before {
    content: "RealMind";
  }
  .crmComparison .cell:nth-child(3) .comparisonCell::before {
    content: "Excel/Manual";
  }
  .crmComparison .cell:nth-child(4) .comparisonCell::before {
    content: "Generic CRM";
  }
}
@media (max-width: 480px) {
  .crmComparison .title {
    font-size: 1.6rem;
  }
  .crmComparison .subtitle {
    font-size: 0.95rem;
  }
  .crmComparison .cell {
    padding: 14px 16px;
    font-size: 0.95rem;
  }
  .crmComparison .comparisonCell .icon {
    width: 18px;
    height: 18px;
  }
}

.videoSection {
  background: #ffffff;
  color: var(--primaryColor);
  text-align: center;
  padding: 80px 20px;
  font-family: "Inter", sans-serif;
}
.videoSection .videoTitle {
  font-size: 4rem;
  font-weight: 700;
  margin: 0 auto 16px;
  color: var(--primaryColor);
  max-width: 1200px;
}
@media screen and (max-width: 1024px) {
  .videoSection .videoTitle {
    font-size: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .videoSection .videoTitle {
    font-size: 2rem;
  }
}
.videoSection .videoSubtitle {
  font-size: 1.2rem;
  margin: 0 auto 40px;
  color: #333;
  max-width: 700px;
}
.videoSection .videoWrapper {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.videoSection .videoWrapper .thumbnail {
  width: 100%;
  height: 100%;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.videoSection .videoWrapper .thumbnail .playButton {
  background: var(--primaryColor);
  border: none;
  color: #fff;
  font-size: 2.5rem;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.videoSection .videoWrapper .thumbnail .playButton:hover {
  transform: scale(1.1);
  background: #5f1db6;
}
.videoSection .videoWrapper .iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.aboutBanner {
  width: 100%;
  padding: 100px 0px;
  background-image: url("../images/bannerGraid.png");
  background-color: var(--primaryColor);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 0;
  margin-top: 80px;
}
@media (max-width: 768px) {
  .aboutBanner {
    margin-top: 70px;
    padding: 60px 0px;
  }
}
.aboutBanner::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: url(../images/bannerLine.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.aboutBanner .aboutBannerMain {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.aboutBanner .aboutBannerMain h2 {
  text-align: center;
  width: 65%;
  color: white;
}
@media (max-width: 1807px) {
  .aboutBanner .aboutBannerMain h2 {
    width: 70%;
  }
}
@media (max-width: 1689px) {
  .aboutBanner .aboutBannerMain h2 {
    width: 80%;
  }
}
@media (max-width: 1496px) {
  .aboutBanner .aboutBannerMain h2 {
    width: 90%;
  }
}
@media (max-width: 1347px) {
  .aboutBanner .aboutBannerMain h2 {
    width: 100%;
  }
}
.aboutBanner .aboutBannerMain p {
  text-align: center;
  width: 50%;
  color: white;
}
@media (max-width: 1553px) {
  .aboutBanner .aboutBannerMain p {
    width: 60%;
  }
}
@media (max-width: 1436px) {
  .aboutBanner .aboutBannerMain p {
    width: 70%;
  }
}
@media (max-width: 1252px) {
  .aboutBanner .aboutBannerMain p {
    width: 80%;
  }
}
@media (max-width: 1114px) {
  .aboutBanner .aboutBannerMain p {
    width: 90%;
  }
}
@media (max-width: 1024px) {
  .aboutBanner .aboutBannerMain p {
    width: 100%;
  }
}

.aboutSection {
  padding: 100px 0;
  background: #fff;
  font-family: "Inter", sans-serif;
}
.aboutSection .aboutContent {
  display: flex;
  align-items: center;
  gap: 60px;
}
.aboutSection .aboutContent .textContent {
  flex: 1;
}
.aboutSection .aboutContent .textContent .aboutTextContent {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.aboutSection .aboutContent .textContent .aboutTextContent p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555;
}
.aboutSection .aboutContent .textContent .aboutTextContent strong {
  color: var(--primaryColor);
  font-weight: 600;
}
.aboutSection .aboutContent .imageContent {
  flex: 1;
}
.aboutSection .aboutContent .imageContent .imageWrapper {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.aboutSection .aboutContent .imageContent .imageWrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.aboutSection .aboutContent .imageContent .imageWrapper .aboutImage {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 992px) {
  .aboutSection .aboutContent {
    flex-direction: column;
  }
  .aboutSection .aboutContent .textContent {
    order: 2;
  }
  .aboutSection .aboutContent .imageContent {
    order: 1;
    margin-bottom: 40px;
    width: 100%;
  }
}
@media (max-width: 768px) {
  .aboutSection {
    padding: 70px 0;
  }
  .aboutSection .aboutContent .textContent .aboutTextContent p {
    font-size: 1rem;
  }
}

.mission-vision-container {
  --secondary-color: #3f37c9;
  --accent-color: #4361ee;
  --text-color: #2b2d42;
  --light-bg: #f8f9fa;
  --border-radius: 12px;
  --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-family: "Inter", "Segoe UI", sans-serif;
  color: var(--text-color);
  line-height: 1.6;
  overflow-x: hidden;
  /* Content Wrapper */
  /* Divider */
  /* Section Backgrounds */
  /* Values Section */
  /* Responsive Styles */
}
.mission-vision-container .content-wrapper {
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 100px 0;
}
.mission-vision-container .content-wrapper.reverse {
  flex-direction: row-reverse;
}
.mission-vision-container .content-wrapper .text-content {
  flex: 1;
  min-width: 0;
}
.mission-vision-container .content-wrapper .text-content .section-label {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--secondary-color);
  font-weight: 600;
  margin-bottom: 1rem;
  display: inline-block;
}
.mission-vision-container .content-wrapper .text-content .highlight-box {
  background: rgba(76, 201, 240, 0.1);
  border-left: 4px solid var(--accent-color);
  padding: 1.5rem;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
}
.mission-vision-container .content-wrapper .text-content .highlight-box .highlight-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.mission-vision-container .content-wrapper .text-content .highlight-box .highlight-text {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-color);
  margin: 0;
}
.mission-vision-container .content-wrapper .image-content {
  flex: 1;
  min-width: 0;
  position: relative;
}
.mission-vision-container .content-wrapper .image-content .image-wrapper {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--box-shadow);
  aspect-ratio: 5/4;
  transition: var(--transition);
}
.mission-vision-container .content-wrapper .image-content .image-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}
.mission-vision-container .content-wrapper .image-content .image-wrapper .content-image {
  -o-object-fit: cover;
     object-fit: cover;
}
.mission-vision-container .divider {
  position: relative;
  height: 120px;
  background: var(--light-bg);
}
.mission-vision-container .divider svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mission-vision-container .divider svg .shape-fill {
  fill: white;
}
.mission-vision-container .mission-section {
  background: white;
}
.mission-vision-container .vision-section {
  background: var(--light-bg);
}
.mission-vision-container .values-section {
  padding: 100px 0;
  background: white;
  text-align: center;
}
.mission-vision-container .values-section .section-header {
  max-width: 700px;
  margin: 0 auto 4rem;
}
.mission-vision-container .values-section .values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}
.mission-vision-container .values-section .values-grid .value-card {
  background: white;
  border-radius: var(--border-radius);
  padding: 2.5rem 2rem;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
}
.mission-vision-container .values-section .values-grid .value-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.mission-vision-container .values-section .values-grid .value-card .value-icon {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}
.mission-vision-container .values-section .values-grid .value-card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--text-color);
}
.mission-vision-container .values-section .values-grid .value-card p {
  color: #666;
  font-size: 1rem;
  line-height: 1.6;
}
@media (max-width: 992px) {
  .mission-vision-container .content-wrapper {
    gap: 50px;
    padding: 80px 0;
  }
  .mission-vision-container .hero-title {
    font-size: 2.8rem;
  }
}
@media (max-width: 768px) {
  .mission-vision-container .content-wrapper {
    flex-direction: column;
    gap: 40px;
    padding: 60px 0;
  }
  .mission-vision-container .content-wrapper.reverse {
    flex-direction: column;
  }
  .mission-vision-container .content-wrapper .image-wrapper {
    max-width: 600px;
    margin: 0 auto;
  }
  .mission-vision-container .hero-title {
    font-size: 2.4rem;
  }
  .mission-vision-container .hero-subtitle {
    font-size: 1.1rem;
  }
  .mission-vision-container .title {
    font-size: 2rem;
  }
  .mission-vision-container .values-section .values-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
@media (max-width: 576px) {
  .mission-vision-container .hero-section {
    padding: 80px 0 60px;
  }
  .mission-vision-container .hero-title {
    font-size: 2rem;
  }
  .mission-vision-container .title {
    font-size: 1.8rem;
  }
  .mission-vision-container .description {
    font-size: 1rem;
  }
  .mission-vision-container .highlight-box {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.2rem;
  }
  .mission-vision-container .values-section .values-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
  .mission-vision-container .values-section .values-grid .value-card {
    padding: 2rem 1.5rem;
  }
}

.industrySolutions {
  padding: 80px 0 20px;
  background-color: #f9fafc;
  /* Responsive Styles */
}
.industrySolutions .industryHeader {
  text-align: center;
  margin-bottom: 60px;
}
.industrySolutions .industryFeature {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 100px;
}
.industrySolutions .industryFeature .industryFeature__visual {
  flex: 1;
  position: relative;
}
.industrySolutions .industryFeature .industryFeature__visual .industryFeature__image {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.industrySolutions .industryFeature .industryFeature__visual .industryFeature__badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 16px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--primaryColor);
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.15);
}
.industrySolutions .industryFeature .industryFeature__visual .industryFeature__stats {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 16px;
}
.industrySolutions .industryFeature .industryFeature__visual .industryFeature__stats .industryFeature__statItem {
  background: rgba(255, 255, 255, 0.9);
  padding: 12px 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.industrySolutions .industryFeature .industryFeature__visual .industryFeature__stats .industryFeature__statItem .industryFeature__statNumber {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primaryColor);
}
.industrySolutions .industryFeature .industryFeature__visual .industryFeature__stats .industryFeature__statItem .industryFeature__statLabel {
  font-size: 0.875rem;
  color: #5a6b87;
}
.industrySolutions .industryFeature .industryFeature__content {
  flex: 1;
}
.industrySolutions .industryFeature .industryFeature__content .industryFeature__tag {
  display: inline-block;
  background: #e8f0fe;
  color: var(--primaryHoverColor);
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 16px;
}
.industrySolutions .industryFeature .industryFeature__content .industryFeature__heading {
  font-size: 2rem;
  font-weight: 700;
  color: #1a2b49;
  margin-bottom: 20px;
  line-height: 1.3;
}
.industrySolutions .industryFeature .industryFeature__content .industryFeature__description {
  font-size: 1.125rem;
  color: #5a6b87;
  margin-bottom: 30px;
  line-height: 1.6;
}
.industrySolutions .industryFeature .industryFeature__content .industryFeature__list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}
.industrySolutions .industryFeature .industryFeature__content .industryFeature__list .industryFeature__item {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}
.industrySolutions .industryFeature .industryFeature__content .industryFeature__list .industryFeature__item .industryFeature__icon {
  width: 36px;
  height: 36px;
  background: var(--primaryColor);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.industrySolutions .industryFeature .industryFeature__content .industryFeature__list .industryFeature__item .industryFeature__itemTitle {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a2b49;
  margin-bottom: 4px;
}
.industrySolutions .industryFeature .industryFeature__content .industryFeature__list .industryFeature__item .industryFeature__itemText {
  font-size: 1rem;
  color: #5a6b87;
  line-height: 1.6;
  margin: 0;
}
.industrySolutions .industryFeature .industryFeature__content .industryFeature__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primaryColor);
  color: white;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.industrySolutions .industryFeature .industryFeature__content .industryFeature__cta:hover {
  background: var(--primaryHoverColor);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26, 115, 232, 0.3);
}
.industrySolutions .industryFeature .industryFeature__content .industryFeature__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 500px) {
  .industrySolutions .industryFeature .industryFeature__content .industryFeature__grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
.industrySolutions .industryFeature .industryFeature__content .industryFeature__grid .industryFeature__card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.industrySolutions .industryFeature .industryFeature__content .industryFeature__grid .industryFeature__card .industryFeature__cardIcon {
  width: 32px;
  height: 32px;
  background: #e8f0fe;
  color: var(--primaryColor);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 16px;
}
.industrySolutions .industryFeature .industryFeature__content .industryFeature__grid .industryFeature__card .industryFeature__cardTitle {
  font-size: 1rem;
  font-weight: 600;
  color: #1a2b49;
  margin-bottom: 8px;
}
.industrySolutions .industryFeature .industryFeature__content .industryFeature__grid .industryFeature__card .industryFeature__cardText {
  font-size: 0.9375rem;
  color: #5a6b87;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 1024px) {
  .industrySolutions .industryFeature {
    gap: 40px;
  }
  .industrySolutions .industryFeature .industryFeature__heading {
    font-size: 1.75rem;
  }
  .industrySolutions .industryFeature .industryFeature__description {
    font-size: 1rem;
  }
  .industrySolutions .industryFeature .industryFeature__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .industrySolutions {
    padding: 60px 0;
  }
  .industrySolutions .industryTitle {
    font-size: 2rem;
    margin-bottom: 12px;
  }
  .industrySolutions .industrySubtitle {
    font-size: 1.125rem;
  }
  .industrySolutions .industryFeature {
    flex-direction: column;
    margin-bottom: 80px;
  }
  .industrySolutions .industryFeature--distance {
    flex-direction: column;
  }
  .industrySolutions .industryFeature .industryFeature__visual,
  .industrySolutions .industryFeature .industryFeature__content {
    width: 100%;
    padding: 10px;
  }
  .industrySolutions .industryFeature .industryFeature__heading {
    font-size: 1.5rem;
  }
}
@media (max-width: 480px) {
  .industrySolutions .industryHeader {
    margin-bottom: 40px;
  }
  .industrySolutions .industryTitle {
    font-size: 1.75rem;
  }
  .industrySolutions .industrySubtitle {
    font-size: 1rem;
  }
  .industrySolutions .industryFeature {
    margin-bottom: 60px;
  }
  .industrySolutions .industryFeature .industryFeature__heading {
    font-size: 1.375rem;
  }
  .industrySolutions .industryFeature .industryFeature__item {
    gap: 12px;
  }
  .industrySolutions .industryFeature .industryFeature__item .industryFeature__icon {
    width: 30px;
    height: 30px;
    font-size: 0.875rem;
  }
  .industrySolutions .industryFeature .industryFeature__cta {
    width: 100%;
    justify-content: center;
  }
}

/* Tablet Fixes */
@media (max-width: 1024px) {
  .industryFeature {
    flex-direction: column;
    gap: 40px;
    margin-bottom: 80px;
  }
  .industryFeature .industryFeature__visual,
  .industryFeature .industryFeature__content {
    width: 100%;
    flex: unset;
  }
  .industryFeature .industryFeature__visual .industryFeature__image {
    max-width: 100%;
    height: auto;
  }
  .industryFeature .industryFeature__heading {
    font-size: 1.75rem;
  }
  .industryFeature .industryFeature__description {
    font-size: 1rem;
  }
  .industryFeature .industryFeature__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
.trackingSection {
  padding: 50px 20px 20px;
  background: #f9f9fc;
  font-family: "Inter", sans-serif;
}
.trackingSection .trackingTitle {
  text-align: center;
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 60px;
  color: #1a1a1a;
}
@media screen and (max-width: 1024px) {
  .trackingSection .trackingTitle {
    font-size: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .trackingSection .trackingTitle {
    font-size: 2rem;
  }
}
.trackingSection .trackingTitle span {
  color: #7a3bff;
}
.trackingSection .trackingTimeline {
  position: relative;
  margin: 0 auto;
  padding-left: 40px;
  border-left: 3px solid #e0d9ff;
  max-width: 1000px;
}
.trackingSection .trackingTimeline .trackingItem {
  position: relative;
  margin-bottom: 50px;
  padding-left: 40px;
}
.trackingSection .trackingTimeline .trackingItem .trackingIcon {
  position: absolute;
  left: -28px;
  top: 0;
  background: #7a3bff;
  color: #fff;
  font-size: 20px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(122, 59, 255, 0.3);
}
.trackingSection .trackingTimeline .trackingItem .trackingContent {
  background: #fff;
  padding: 20px 25px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.trackingSection .trackingTimeline .trackingItem .trackingContent h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #222;
}
.trackingSection .trackingTimeline .trackingItem .trackingContent p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
}
.trackingSection .trackingTimeline .trackingItem:hover .trackingContent {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
@media (max-width: 768px) {
  .trackingSection .trackingTimeline {
    border-left: none;
    padding-left: 0;
  }
  .trackingSection .trackingTimeline .trackingItem {
    padding-left: 0;
  }
  .trackingSection .trackingTimeline .trackingItem .trackingIcon {
    position: relative;
    left: 0;
    margin-bottom: 12px;
  }
  .trackingSection .trackingTimeline .trackingItem .trackingContent {
    padding: 18px;
  }
}

.leadCommon {
  padding: 100px 20px;
  font-family: "Inter", sans-serif;
  background: linear-gradient(135deg, #f8faff, #f3efff);
  /* Impact Section */
  /* Benefits Section */
  /* Responsive */
}
.leadCommon .sectionTitle {
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  color: var(--primaryColor);
  margin-bottom: 50px;
  position: relative;
}
.leadCommon .sectionTitle::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--primaryColor), var(--primaryHoverColor));
  margin: 14px auto 0;
  border-radius: 2px;
}
.leadCommon .impactBox {
  margin-bottom: 90px;
}
.leadCommon .impactBox .impactGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 35px;
}
.leadCommon .impactBox .impactCard {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 35px 25px;
  border-radius: 18px;
  text-align: center;
  border: 1px solid rgba(120, 42, 228, 0.15);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.35s ease;
  cursor: pointer;
}
.leadCommon .impactBox .impactCard:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(120, 42, 228, 0.2);
}
.leadCommon .impactBox .impactCard .icon {
  font-size: 42px;
  background: linear-gradient(135deg, var(--primaryColor), var(--primaryHoverColor));
  color: var(--primaryColor);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
}
.leadCommon .impactBox .impactCard p {
  font-size: 18px;
  font-weight: 600;
  color: var(--primaryColor);
}
.leadCommon .benefitsBox .benefitsList {
  max-width: 750px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.leadCommon .benefitsBox .benefitsList li {
  font-size: 18px;
  font-weight: 500;
  padding: 18px 24px;
  background: #fff;
  border-left: 6px solid transparent;
  -o-border-image: linear-gradient(180deg, var(--primaryColor), var(--primaryHoverColor)) 1;
     border-image: linear-gradient(180deg, var(--primaryColor), var(--primaryHoverColor)) 1;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}
.leadCommon .benefitsBox .benefitsList li .checkmark {
  font-size: 20px;
  color: var(--primaryColor);
  font-weight: bold;
}
.leadCommon .benefitsBox .benefitsList li:hover {
  background: linear-gradient(135deg, #f7f3ff, #ffffff);
  transform: translateX(8px);
}
@media (max-width: 768px) {
  .leadCommon .sectionTitle {
    font-size: 28px;
  }
  .leadCommon .impactCard {
    padding: 25px 18px;
  }
  .leadCommon .impactCard p {
    font-size: 16px;
  }
  .leadCommon .benefitsList li {
    font-size: 16px;
    padding: 14px 18px;
  }
}

.presaleFeaturesSection {
  width: 100%;
  padding-top: 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* ✅ Responsive */
}
.presaleFeaturesSection .presaleBlock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 80px;
}
.presaleFeaturesSection .presaleBlock.presaleBlockTwo {
  background: #f5f8ff;
  padding: 40px;
  border-radius: 12px;
  margin-bottom: 30px;
}
.presaleFeaturesSection .presaleBlock .presaleImageWrapper {
  flex: 1;
}
.presaleFeaturesSection .presaleBlock .presaleImageWrapper .presaleImage {
  width: 100%;
  height: auto;
  border-radius: 12px;
  -o-object-fit: cover;
     object-fit: cover;
}
.presaleFeaturesSection .presaleBlock .presaleContent {
  flex: 1;
}
.presaleFeaturesSection .presaleBlock .presaleContent .presaleHeading {
  font-size: 40px;
  font-weight: 700;
  color: var(--primaryColor);
  margin-bottom: 10px;
}
.presaleFeaturesSection .presaleBlock .presaleContent .presaleSubtext {
  font-size: 1rem;
  color: #666;
  margin-bottom: 20px;
}
.presaleFeaturesSection .presaleBlock .presaleContent .presaleSubtextBlue {
  font-size: 1rem;
  color: var(--primaryColor);
  margin-bottom: 20px;
}
.presaleFeaturesSection .presaleBlock .presaleContent .presaleList {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.presaleFeaturesSection .presaleBlock .presaleContent .presaleList .presaleListItem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  margin-bottom: 16px;
  line-height: 1.6;
}
.presaleFeaturesSection .presaleBlock .presaleContent .presaleList .presaleListItem .presaleNumber {
  display: inline-block;
  background: var(--primaryColor);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  text-align: center;
  line-height: 26px;
  flex-shrink: 0;
}
.presaleFeaturesSection .presaleBlock .presaleContent .presaleList .presaleListItem .presaleText {
  flex: 1;
}
.presaleFeaturesSection .presaleBlock .presaleContent .presaleButton {
  padding: 12px 28px;
  background: var(--primaryColor);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s ease;
}
.presaleFeaturesSection .presaleBlock .presaleContent .presaleButton:hover {
  background: var(--primaryHoverColor);
}
@media (max-width: 1024px) {
  .presaleFeaturesSection .presaleBlock {
    gap: 30px;
  }
  .presaleFeaturesSection .presaleBlock .presaleContent .presaleHeading {
    font-size: 1.6rem;
  }
  .presaleFeaturesSection .presaleBlock .presaleContent .presaleSubtext,
  .presaleFeaturesSection .presaleBlock .presaleContent .presaleSubtextBlue {
    font-size: 0.95rem;
  }
}
@media (max-width: 768px) {
  .presaleFeaturesSection .presaleBlock {
    flex-direction: column;
    text-align: center;
    padding: 20px;
    padding-top: 50px;
  }
  .presaleFeaturesSection .presaleBlock.presaleBlockTwo {
    padding: 20px;
  }
  .presaleFeaturesSection .presaleBlock .presaleImageWrapper .presaleImage {
    max-width: 90%;
    margin: 0 auto 20px;
  }
  .presaleFeaturesSection .presaleBlock .presaleContent .presaleHeading {
    font-size: 1.4rem;
  }
  .presaleFeaturesSection .presaleBlock .presaleContent .presaleList .presaleListItem {
    justify-content: center;
  }
  .presaleFeaturesSection .presaleBlock .presaleContent .presaleButton {
    margin-top: 20px;
  }
}
@media (max-width: 480px) {
  .presaleFeaturesSection .presaleBlock {
    gap: 20px;
  }
  .presaleFeaturesSection .presaleBlock .presaleImageWrapper .presaleImage {
    max-width: 100%;
    border-radius: 8px;
  }
  .presaleFeaturesSection .presaleBlock .presaleContent .presaleHeading {
    font-size: 1.2rem;
  }
  .presaleFeaturesSection .presaleBlock .presaleContent .presaleSubtext,
  .presaleFeaturesSection .presaleBlock .presaleContent .presaleSubtextBlue {
    font-size: 0.85rem;
  }
  .presaleFeaturesSection .presaleBlock .presaleContent .presaleList .presaleListItem {
    font-size: 0.85rem;
    gap: 8px;
  }
  .presaleFeaturesSection .presaleBlock .presaleContent .presaleList .presaleListItem .presaleNumber {
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
    line-height: 22px;
  }
  .presaleFeaturesSection .presaleBlock .presaleContent .presaleButton {
    width: 100%;
    padding: 10px 0;
    font-size: 0.9rem;
  }
}

.leads-section {
  background: rgba(255, 255, 255, 0.95); /* White background */
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.leads-container {
  background: var(--primaryColor); /* Purple box */
  border-radius: 20px;
  max-width: 800px;
  width: 100%;
  padding: 40px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  animation: fadeInUp 0.8s ease forwards;
  text-align: center;
  color: #fff; /* All text inside is white */
}

.leads-title {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: 700;
  color: #fff;
}

.leads-subtitle {
  font-size: 1.5rem;
  margin-bottom: 20px;
  font-weight: 600;
  color: #fff; /* White text */
}

.leads-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  font-size: 1rem;
  line-height: 1.8;
  color: #fff;
}
.leads-list li {
  margin-bottom: 15px;
  position: relative;
  padding-left: 30px;
}
.leads-list li::before {
  content: "✔";
  color: #fff; /* White checkmarks */
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}
.leads-list li strong {
  color: #fff;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.campaignSection {
  width: 100%;
  padding: 100px 20px 30px;
  background: #f8fafc;
  /* ✅ Tablet View */
  /* ✅ Mobile View */
  /* ✅ Small Mobile */
}
.campaignSection .campaignGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 50px;
  padding: 50px;
  border-radius: 20px;
}
.campaignSection .campaignImageWrapper .campaignImage {
  width: 100%;
  height: auto;
  max-height: 500px;
  border-radius: 16px;
  -o-object-fit: cover;
     object-fit: cover;
}
.campaignSection .campaignContent .campaignTitle {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primaryColor, #1e40af);
  margin-bottom: 16px;
}
.campaignSection .campaignContent .campaignDescription {
  font-size: 1.1rem;
  color: #4b5563;
  margin-bottom: 24px;
}
.campaignSection .campaignContent .campaignList {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.campaignSection .campaignContent .campaignList .campaignListItem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  color: #374151;
  margin-bottom: 14px;
  line-height: 1.6;
}
.campaignSection .campaignContent .campaignList .campaignListItem .campaignNumber {
  display: inline-block;
  background: var(--primaryColor, #1e40af);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  text-align: center;
  line-height: 26px;
  flex-shrink: 0;
}
.campaignSection .campaignContent .campaignList .campaignListItem .campaignText {
  flex: 1;
}
.campaignSection .campaignContent .campaignNote {
  font-size: 0.95rem;
  color: #6b7280;
  margin-bottom: 30px;
  font-style: italic;
}
.campaignSection .campaignContent .campaignButton {
  padding: 14px 32px;
  background: var(--primaryColor, #1e40af);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.campaignSection .campaignContent .campaignButton:hover {
  background: var(--primaryHoverColor, #1d4ed8);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 1200px) {
  .campaignSection .campaignGrid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    text-align: center;
    padding: 40px;
    gap: 40px;
  }
  .campaignSection .campaignImageWrapper .campaignImage {
    max-width: 80%;
    margin: 0 auto;
    max-height: 450px;
  }
  .campaignSection .campaignContent .campaignTitle {
    font-size: 2.2rem;
  }
}
@media (max-width: 768px) {
  .campaignSection .campaignGrid {
    gap: 30px;
    padding: 30px;
  }
  .campaignSection .campaignImageWrapper .campaignImage {
    max-width: 100%;
    max-height: 400px;
  }
  .campaignSection .campaignContent .campaignListItem {
    justify-content: center;
  }
  .campaignSection .campaignContent .campaignButton {
    margin-top: 20px;
  }
}
@media (max-width: 480px) {
  .campaignSection .campaignGrid {
    padding: 20px;
    gap: 20px;
    padding-top: 50px;
  }
  .campaignSection .campaignImageWrapper .campaignImage {
    max-height: 350px;
  }
  .campaignSection .campaignContent .campaignTitle {
    font-size: 1.8rem;
  }
  .campaignSection .campaignContent .campaignDescription {
    font-size: 1rem;
  }
  .campaignSection .campaignContent .campaignListItem {
    font-size: 0.9rem;
  }
  .campaignSection .campaignContent .campaignListItem .campaignNumber {
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
    line-height: 22px;
  }
  .campaignSection .campaignContent .campaignButton {
    width: 100%;
  }
}

.salesCommonSection {
  padding: 20px 20px;
  font-family: "Inter", sans-serif;
  background: linear-gradient(135deg, #f8faff, #eef3ff);
  /* Section Title */
  /* Impact Cards */
  /* Benefits List */
  /* Responsive */
}
.salesCommonSection .container {
  max-width: 1200px;
  margin: 0 auto;
}
.salesCommonSection .sectionTitle {
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  color: var(--primaryColor);
  margin-bottom: 60px;
  position: relative;
}
.salesCommonSection .sectionTitle::after {
  content: "";
  display: block;
  width: 90px;
  height: 5px;
  background: linear-gradient(90deg, var(--primaryColor), var(--primaryHoverColor));
  margin: 16px auto 0;
  border-radius: 3px;
}
.salesCommonSection .impactSection {
  margin-bottom: 50px;
}
.salesCommonSection .impactSection .impactGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 35px;
}
.salesCommonSection .impactSection .impactCard {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 40px 25px;
  border-radius: 18px;
  text-align: center;
  border: 1px solid rgba(120, 42, 228, 0.15);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.35s ease;
  cursor: pointer;
}
.salesCommonSection .impactSection .impactCard:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 20px 50px rgba(120, 42, 228, 0.2);
}
.salesCommonSection .impactSection .impactCard .impactIcon {
  font-size: 48px;
  color: var(--primaryColor); /* Updated to primary color */
  margin-bottom: 20px;
}
.salesCommonSection .impactSection .impactCard p {
  font-size: 18px;
  font-weight: 600;
  color: var(--primaryColor); /* Updated to primary color */
}
.salesCommonSection .benefitsSection .benefitsList {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.salesCommonSection .benefitsSection .benefitsList .benefitItem {
  background: #fff;
  border-radius: 14px;
  padding: 18px 24px;
  font-size: 18px;
  font-weight: 500;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 14px;
  border-left: 6px solid transparent;
  -o-border-image: linear-gradient(180deg, var(--primaryColor), var(--primaryHoverColor)) 1;
     border-image: linear-gradient(180deg, var(--primaryColor), var(--primaryHoverColor)) 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}
.salesCommonSection .benefitsSection .benefitsList .benefitItem:hover {
  background: linear-gradient(135deg, #faf8ff, #ffffff);
  transform: translateX(8px);
}
.salesCommonSection .benefitsSection .benefitsList .benefitItem .checkmark {
  color: var(--primaryColor);
  font-size: 22px;
  font-weight: bold;
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .salesCommonSection .sectionTitle {
    font-size: 34px;
  }
  .salesCommonSection .impactCard p {
    font-size: 16px;
  }
  .salesCommonSection .benefitsList .benefitItem {
    font-size: 16px;
    padding: 16px 20px;
  }
}
@media (max-width: 768px) {
  .salesCommonSection {
    padding: 20px 20px;
  }
  .salesCommonSection .sectionTitle {
    font-size: 28px;
  }
  .salesCommonSection .impactCard {
    padding: 30px 20px;
  }
  .salesCommonSection .benefitsList .benefitItem {
    font-size: 15px;
    padding: 14px 18px;
  }
}
@media (max-width: 480px) {
  .salesCommonSection {
    padding: 20px 15px;
  }
  .salesCommonSection .sectionTitle {
    font-size: 24px;
  }
  .salesCommonSection .impactCard {
    padding: 24px 16px;
  }
  .salesCommonSection .benefitsList .benefitItem {
    font-size: 14px;
  }
}

.sfa-features-section {
  padding: 100px 0px 80px;
  background: white;
  color: var(--primaryColor);
  text-align: center;
  /* Responsive */
}
.sfa-features-section .sfa-section-title {
  font-size: 4rem;
  margin-bottom: 50px;
  font-weight: 700;
  color: var(--primaryColor);
  position: relative;
  display: inline-block;
  max-width: 1200px;
}
@media screen and (max-width: 1024px) {
  .sfa-features-section .sfa-section-title {
    font-size: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .sfa-features-section .sfa-section-title {
    font-size: 2rem;
  }
}
.sfa-features-section a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.sfa-features-section a:hover {
  text-decoration: none;
}
.sfa-features-section .sfa-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .sfa-features-section .sfa-features-grid {
    padding: 20px;
  }
}
.sfa-features-section .sfa-features-grid .sfa-feature-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 25px;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.sfa-features-section .sfa-features-grid .sfa-feature-card::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle at top left, var(--primaryHoverColor), transparent 70%);
  opacity: 0.08;
  transform: rotate(25deg);
}
.sfa-features-section .sfa-features-grid .sfa-feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  border-color: var(--primaryColor);
}
.sfa-features-section .sfa-features-grid .sfa-feature-card .sfa-feature-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.sfa-features-section .sfa-features-grid .sfa-feature-card .sfa-feature-header .sfa-icon {
  font-size: 2rem;
  color: var(--primaryColor);
  background: var(--hoverColor);
  padding: 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sfa-features-section .sfa-features-grid .sfa-feature-card .sfa-feature-header .sfa-feature-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--thirdColor);
  margin: 0;
}
.sfa-features-section .sfa-features-grid .sfa-feature-card .sfa-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sfa-features-section .sfa-features-grid .sfa-feature-card .sfa-feature-list .sfa-feature-item {
  margin-bottom: 10px;
  font-size: 1rem;
  color: var(--thirdColor);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sfa-features-section .sfa-features-grid .sfa-feature-card .sfa-feature-list .sfa-feature-item::before {
  content: "✔";
  color: var(--primaryColor);
  font-weight: bold;
}
@media (max-width: 768px) {
  .sfa-features-section .sfa-section-title {
    font-size: 2rem;
  }
  .sfa-features-section .sfa-features-grid .sfa-feature-card {
    padding: 20px;
  }
  .sfa-features-section .sfa-features-grid .sfa-feature-card .sfa-feature-header .sfa-icon {
    font-size: 1.6rem;
    padding: 8px;
  }
}

.sfa-section {
  background: white;
  color: black;
  padding: 100px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sfa-section .container .sfa-header {
  margin-bottom: 20px;
}
.sfa-section .container .sfa-header .sfa-badge {
  display: inline-block;
  background: var(--primaryColor);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}
.sfa-section .container .sfa-header .sfa-title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
}
@media screen and (max-width: 768px) {
  .sfa-section .container .sfa-header .sfa-title {
    font-size: 2rem !important;
  }
}
@media screen and (max-width: 1024px) {
  .sfa-section .container .sfa-header .sfa-title {
    font-size: 3rem;
  }
}
.sfa-section .container .sfa-header .sfa-title span {
  color: var(--primaryColor);
  position: relative;
}
.sfa-section .container .sfa-header .sfa-title span::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 8px;
  background: rgba(37, 99, 235, 0.2);
  z-index: -1;
}
.sfa-section .container .sfa-header .sfa-divider {
  width: 80px;
  height: 4px;
  background: var(--primaryColor);
  margin: 0 auto;
  border-radius: 2px;
}
.sfa-section .container .sfa-intro {
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.sfa-section .container .sfa-intro .sfa-subtitle {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--primaryColor);
}
.sfa-section .container .sfa-intro .sfa-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: black;
}
.sfa-section .container .sfa-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 50px;
}
.sfa-section .container .sfa-stats .sfa-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sfa-section .container .sfa-stats .sfa-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--primaryColor);
  transition: all 0.3s ease;
}
.sfa-section .container .sfa-stats .sfa-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.sfa-section .container .sfa-stats .sfa-card:hover::before {
  height: 100%;
}
.sfa-section .container .sfa-stats .sfa-card:hover .sfa-icon-wrapper {
  background: var(--primaryColor);
  transform: rotate(10deg);
}
.sfa-section .container .sfa-stats .sfa-card:hover .sfa-icon {
  color: white;
}
.sfa-section .container .sfa-stats .sfa-card .sfa-icon-wrapper {
  width: 70px;
  height: 70px;
  background: rgba(37, 99, 235, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  transition: all 0.3s ease;
}
.sfa-section .container .sfa-stats .sfa-card .sfa-icon {
  font-size: 1.75rem;
  color: var(--primaryColor);
  transition: all 0.3s ease;
}
.sfa-section .container .sfa-stats .sfa-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: black;
}
.sfa-section .container .sfa-stats .sfa-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: black;
  margin: 0;
}
@media (max-width: 768px) {
  .sfa-section .sfa-container .sfa-header .sfa-title {
    font-size: 2rem;
  }
  .sfa-section .sfa-container .sfa-stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.sfaAudienceSection {
  background: #ffffff;
  color: #2d3748;
  padding: 40px 20px 40px;
  font-family: "Inter", sans-serif;
  position: relative;
  overflow: hidden;
}
.sfaAudienceSection::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(121, 42, 228, 0.12) 0%, rgba(121, 42, 228, 0) 70%);
  pointer-events: none;
}
.sfaAudienceSection::after {
  content: "";
  position: absolute;
  bottom: -70px;
  left: -70px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.12) 0%, rgba(79, 70, 229, 0) 70%);
  pointer-events: none;
}
.sfaAudienceSection .sfaSectionHeader {
  text-align: center;
  margin-bottom: 70px;
}
.sfaAudienceSection .sfaSectionHeader .sfaSubtitle {
  font-size: 1.075rem;
  color: #4a5568;
  max-width: 720px;
  margin: 0 auto;
  padding-top: 10px;
}
@media (max-width: 768px) {
  .sfaAudienceSection .sfaSectionHeader .sfaSubtitle {
    font-size: 1rem;
  }
}
.sfaAudienceSection .sfaGroupRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
@media (max-width: 992px) {
  .sfaAudienceSection .sfaGroupRow {
    grid-template-columns: 1fr;
  }
}
.sfaAudienceSection .sfaGroupCard {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  padding: 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sfaAudienceSection .sfaGroupCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .sfaAudienceSection .sfaGroupCard {
    padding: 24px 20px;
  }
}
.sfaAudienceSection .sfaGroupHeader {
  margin-bottom: 26px;
}
.sfaAudienceSection .sfaGroupHeader h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 12px;
}
.sfaAudienceSection .sfaGroupHeader .sfaGroupDivider {
  height: 3px;
  width: 64px;
  border-radius: 3px;
  background: linear-gradient(90deg, #4f46e5, #782ae4);
}
.sfaAudienceSection .sfaItemGrid {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.sfaAudienceSection .sfaItemGrid.sfaAudienceGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .sfaAudienceSection .sfaItemGrid.sfaAudienceGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .sfaAudienceSection .sfaItemGrid.sfaAudienceGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 460px) {
  .sfaAudienceSection .sfaItemGrid.sfaAudienceGrid {
    grid-template-columns: 1fr;
  }
}
.sfaAudienceSection .sfaItemGrid.sfaSolutionGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px) {
  .sfaAudienceSection .sfaItemGrid.sfaSolutionGrid {
    grid-template-columns: 1fr;
  }
}
.sfaAudienceSection .sfaItemCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sfaAudienceSection .sfaItemCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}
.sfaAudienceSection .sfaAudienceItem {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
}
.sfaAudienceSection .sfaAudienceItem .sfaItemIcon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #4f46e5, #782ae4);
  color: #ffffff;
}
.sfaAudienceSection .sfaAudienceItem .sfaItemIcon .sfaItemIconInner {
  font-size: 1.25rem;
  line-height: 1;
}
.sfaAudienceSection .sfaAudienceItem .sfaItemTitle {
  font-size: 1.05rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
}
.sfaAudienceSection .sfaSolutionItem {
  position: relative;
  padding: 22px 18px 18px 54px;
}
.sfaAudienceSection .sfaSolutionItem .sfaCheckBadge {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #4f46e5, #782ae4);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.sfaAudienceSection .sfaSolutionItem .sfaItemText {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #4a5568;
}

.benefits-section {
  width: 100%;
  padding: 100px 20px;
  background: linear-gradient(135deg, #5a00f0, #8f00ff);
  color: #fff;
  text-align: center;
}
.benefits-section .container {
  max-width: 1200px;
  margin: 0 auto;
}
.benefits-section .section-title {
  font-size: 3.8em;
  font-weight: 800;
  list-style: 1.5;
  color: white;
  padding-bottom: 30px;
}
@media (max-width: 1024px) {
  .benefits-section .section-title {
    font-size: 3em;
  }
}
@media (max-width: 768px) {
  .benefits-section .section-title {
    font-size: 2.5em;
  }
}
@media (max-width: 480px) {
  .benefits-section .section-title {
    font-size: 2.2em;
  }
}
.benefits-section .benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.benefits-section .benefit-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 30px;
  border-radius: 16px;
  text-align: left;
  transition: transform 0.3s ease, background 0.3s ease;
}
.benefits-section .benefit-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
}
.benefits-section .benefit-card .benefit-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #fff;
}
.benefits-section .benefit-card .benefit-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #f3f3f3;
}

.sfaCommon {
  padding: 0px 20px 50px;
  font-family: "Inter", sans-serif;
  background: linear-gradient(135deg, #f8faff, #f3efff);
  /* Impact Section */
  /* Benefits Section */
  /* Responsive */
}
.sfaCommon .sectionTitle {
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  color: var(--primaryColor);
  margin-bottom: 50px;
  position: relative;
}
.sfaCommon .sectionTitle::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--primaryColor), var(--primaryHoverColor));
  margin: 14px auto 0;
  border-radius: 2px;
}
.sfaCommon .impactBox {
  margin-bottom: 90px;
}
.sfaCommon .impactBox .impactGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 35px;
}
.sfaCommon .impactBox .impactCard {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 35px 25px;
  border-radius: 18px;
  text-align: center;
  border: 1px solid rgba(120, 42, 228, 0.15);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.35s ease;
  cursor: pointer;
}
.sfaCommon .impactBox .impactCard:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(120, 42, 228, 0.2);
}
.sfaCommon .impactBox .impactCard .icon {
  font-size: 42px;
  color: var(--primaryColor); /* ✅ Updated to primary color */
  margin-bottom: 20px;
}
.sfaCommon .impactBox .impactCard p {
  font-size: 18px;
  font-weight: 600;
  color: var(--primaryColor); /* ✅ Updated to primary color */
}
.sfaCommon .benefitsBox .benefitsList {
  max-width: 750px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.sfaCommon .benefitsBox .benefitsList li {
  font-size: 18px;
  font-weight: 500;
  padding: 18px 24px;
  background: #fff;
  border-left: 6px solid transparent;
  -o-border-image: linear-gradient(180deg, var(--primaryColor), var(--primaryHoverColor)) 1;
     border-image: linear-gradient(180deg, var(--primaryColor), var(--primaryHoverColor)) 1;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sfaCommon .benefitsBox .benefitsList li .checkmark {
  font-size: 20px;
  color: var(--primaryColor);
  font-weight: bold;
}
.sfaCommon .benefitsBox .benefitsList li:hover {
  background: linear-gradient(135deg, #f7f3ff, #ffffff);
  transform: translateX(8px);
}
@media (max-width: 768px) {
  .sfaCommon .sectionTitle {
    font-size: 28px;
  }
  .sfaCommon .impactCard {
    padding: 25px 18px;
  }
  .sfaCommon .impactCard p {
    font-size: 16px;
  }
  .sfaCommon .benefitsList li {
    font-size: 16px;
    padding: 14px 18px;
  }
}

.sfaSection {
  width: 100%;
  padding: 100px 20px 30px;
  background: #f8fafc;
  /* ✅ Tablet View */
  /* ✅ Mobile View */
  /* ✅ Small Mobile */
}
.sfaSection .sfaGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 50px;
  padding: 50px;
  border-radius: 20px;
}
.sfaSection .sfaImageWrapper .sfaImage {
  width: 100%;
  height: auto;
  max-height: 500px;
  border-radius: 16px;
  -o-object-fit: cover;
     object-fit: cover;
}
.sfaSection .sfaContent .sfaTitle {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primaryColor, #1e40af);
  margin-bottom: 16px;
}
.sfaSection .sfaContent .sfaDescription {
  font-size: 1.1rem;
  color: #4b5563;
  margin-bottom: 24px;
}
.sfaSection .sfaContent .sfaList {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.sfaSection .sfaContent .sfaList .sfaListItem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  color: #374151;
  margin-bottom: 14px;
  line-height: 1.6;
}
.sfaSection .sfaContent .sfaList .sfaListItem .sfaNumber {
  display: inline-block;
  background: var(--primaryColor, #1e40af);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  text-align: center;
  line-height: 26px;
  flex-shrink: 0;
}
.sfaSection .sfaContent .sfaList .sfaListItem .sfaText {
  flex: 1;
}
.sfaSection .sfaContent .sfaNote {
  font-size: 0.95rem;
  color: #6b7280;
  margin-bottom: 30px;
  font-style: italic;
}
.sfaSection .sfaContent .sfaButton {
  padding: 14px 32px;
  background: var(--primaryColor, #1e40af);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.sfaSection .sfaContent .sfaButton:hover {
  background: var(--primaryHoverColor, #1d4ed8);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 1200px) {
  .sfaSection .sfaGrid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    text-align: center;
    padding: 40px;
    gap: 40px;
  }
  .sfaSection .sfaImageWrapper .sfaImage {
    max-width: 80%;
    margin: 0 auto;
    max-height: 450px;
  }
  .sfaSection .sfaContent .sfaTitle {
    font-size: 2.2rem;
  }
}
@media (max-width: 768px) {
  .sfaSection .sfaGrid {
    gap: 30px;
    padding: 30px;
    padding-top: 50px;
  }
  .sfaSection .sfaImageWrapper .sfaImage {
    max-width: 100%;
    max-height: 400px;
  }
  .sfaSection .sfaContent .sfaListItem {
    justify-content: center;
  }
  .sfaSection .sfaContent .sfaButton {
    margin-top: 20px;
  }
}
@media (max-width: 480px) {
  .sfaSection .sfaGrid {
    padding: 20px;
    gap: 20px;
    padding-top: 50px;
  }
  .sfaSection .sfaImageWrapper .sfaImage {
    max-height: 350px;
  }
  .sfaSection .sfaContent .sfaTitle {
    font-size: 1.8rem;
  }
  .sfaSection .sfaContent .sfaDescription {
    font-size: 1rem;
  }
  .sfaSection .sfaContent .sfaListItem {
    font-size: 0.9rem;
  }
  .sfaSection .sfaContent .sfaListItem .sfaNumber {
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
    line-height: 22px;
  }
  .sfaSection .sfaContent .sfaButton {
    width: 100%;
  }
}/*# sourceMappingURL=style.css.map */