WebbTools.css

@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
body {
  background: #2b2d37;
  scroll-behavior: smooth;
}
#spinner-box {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pulse-container {
  background-color: #23252f;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pulse-bubble {
  width: 20px;
  height: 20px;
  margin: 10px;
  border-radius: 50%;
  background-color: var(--color);
}
.pulse-bubble-1 {
  animation: pulse 0.4s ease 0s infinite alternate;
}
.pulse-bubble-2 {
  animation: pulse 0.4s ease 0.2s infinite alternate;
}
.pulse-bubble-3 {
  animation: pulse 0.4s ease 0.4s infinite alternate;
}
@keyframes pulse {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0.25;
  }
}

/* root color */
:root {
  --color: #5c61ed;
  --button: #3d3f4a;
  --nav-color: #fff;
}

/* navbar */
.navbar-brand {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  transition: 0.3s ease-in-out;
}
.navbar-brand span {
  font-weight: 400;
  color: var(--nav-color);
}
.nav {
  padding: 10px;
}
.thin-text {
  font-family: "Poppins", sans-serif;
  font-weight: lighter;
  font-size: 15px;
}
.more {
  color: var(--nav-color);
  transition: 0.3s ease-in-out;
}
.more:hover {
  color: var(--color);
}
.more:focus {
  color: var(--color);
}
#nav-icon1 {
  width: 60px;
  height: 45px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

#nav-icon1 span {
  display: block;
  position: absolute;
  height: 5px;
  width: 40px;
  background: var(--color);
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
  top: 0px;
}
#nav-icon1 span:nth-child(2) {
  top: 13px;
}
#nav-icon1 span:nth-child(3) {
  top: 26px;
}
#nav-icon1.open span:nth-child(1) {
  top: 18px;
  background-color: red;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  background-color: red;
  left: -60px;
}
#nav-icon1.open span:nth-child(3) {
  top: 18px;
  background-color: red;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* content */
.path-0 {
  animation: pathAnim-0 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pathAnim-0 {
  0% {
    d: path(
      "M 0,400 C 0,400 0,133 0,133 C 66.71727928546892,120.389213328753 133.43455857093784,107.778426657506 203,123 C 272.56544142906216,138.221573342494 344.9790450017177,181.27550669872898 413,183 C 481.0209549982823,184.72449330127102 544.6492614221917,145.11954654757815 606,130 C 667.3507385778083,114.88045345242185 726.4239093095156,124.24630711095844 791,137 C 855.5760906904844,149.75369288904156 925.6551013397459,165.8952250085881 997,153 C 1068.344898660254,140.1047749914119 1140.9556853315012,98.1727928546891 1215,90 C 1289.0443146684988,81.8272071453109 1364.5221573342494,107.41360357265545 1440,133 C 1440,133 1440,400 1440,400 Z"
    );
  }
  25% {
    d: path(
      "M 0,400 C 0,400 0,133 0,133 C 56.05015458605291,144.0882858124356 112.10030917210582,155.1765716248712 181,151 C 249.89969082789418,146.8234283751288 331.6489178976297,127.38199931295087 407,110 C 482.3510821023703,92.61800068704913 551.3040192373755,77.29543112332532 617,92 C 682.6959807626245,106.70456887667468 745.1350051528683,151.43627619374783 818,166 C 890.8649948471317,180.56372380625217 974.155960151151,164.9594641016833 1052,160 C 1129.844039848849,155.0405358983167 1202.2411542425282,160.72586739951905 1266,158 C 1329.7588457574718,155.27413260048095 1384.879422878736,144.13706630024046 1440,133 C 1440,133 1440,400 1440,400 Z"
    );
  }
  50% {
    d: path(
      "M 0,400 C 0,400 0,133 0,133 C 71.72998969426314,128.70250772930262 143.45997938852628,124.40501545860528 218,127 C 292.5400206114737,129.59498454139472 369.89007214015805,139.0824458948815 434,134 C 498.10992785984195,128.9175541051185 548.9797320508416,109.26520096186879 613,105 C 677.0202679491584,100.73479903813121 754.1909996564754,111.8567502576434 827,117 C 899.8090003435246,122.1432497423566 968.2562693232567,121.30779800755755 1039,132 C 1109.7437306767433,142.69220199244245 1182.783923050498,164.9120577121264 1250,167 C 1317.216076949502,169.0879422878736 1378.608038474751,151.0439711439368 1440,133 C 1440,133 1440,400 1440,400 Z"
    );
  }
  75% {
    d: path(
      "M 0,400 C 0,400 0,133 0,133 C 67.03538302988665,128.90381312263827 134.0707660597733,124.80762624527654 210,120 C 285.9292339402267,115.19237375472346 370.7523187907935,109.67330814153213 432,106 C 493.2476812092065,102.32669185846787 530.9199587770526,100.49914118859498 587,109 C 643.0800412229474,117.50085881140502 717.567846100996,136.33012710408795 785,149 C 852.432153899004,161.66987289591205 912.8086568189626,168.18035039505324 996,158 C 1079.1913431810374,147.81964960494676 1185.1975266231536,120.94847131569908 1263,114 C 1340.8024733768464,107.05152868430092 1390.401236688423,120.02576434215047 1440,133 C 1440,133 1440,400 1440,400 Z"
    );
  }
  100% {
    d: path(
      "M 0,400 C 0,400 0,133 0,133 C 66.71727928546892,120.389213328753 133.43455857093784,107.778426657506 203,123 C 272.56544142906216,138.221573342494 344.9790450017177,181.27550669872898 413,183 C 481.0209549982823,184.72449330127102 544.6492614221917,145.11954654757815 606,130 C 667.3507385778083,114.88045345242185 726.4239093095156,124.24630711095844 791,137 C 855.5760906904844,149.75369288904156 925.6551013397459,165.8952250085881 997,153 C 1068.344898660254,140.1047749914119 1140.9556853315012,98.1727928546891 1215,90 C 1289.0443146684988,81.8272071453109 1364.5221573342494,107.41360357265545 1440,133 C 1440,133 1440,400 1440,400 Z"
    );
  }
}
.path-1 {
  animation: pathAnim-1 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pathAnim-1 {
  0% {
    d: path(
      "M 0,400 C 0,400 0,266 0,266 C 49.646856750257655,241.01958090003436 99.29371350051531,216.0391618000687 179,217 C 258.7062864994847,217.9608381999313 368.4720027481965,244.86293369975954 443,255 C 517.5279972518035,265.13706630024046 556.8182755066987,258.5091034008932 604,255 C 651.1817244933013,251.49089659910683 706.2548952250086,251.1006526966678 788,253 C 869.7451047749914,254.8993473033322 978.162143593267,259.08828581243563 1058,255 C 1137.837856406733,250.9117141875644 1189.0965304019237,238.54620405358986 1248,239 C 1306.9034695980763,239.45379594641014 1373.4517347990381,252.72689797320507 1440,266 C 1440,266 1440,400 1440,400 Z"
    );
  }
  25% {
    d: path(
      "M 0,400 C 0,400 0,266 0,266 C 82.75506698728961,249.9773273789076 165.51013397457922,233.9546547578152 231,236 C 296.4898660254208,238.0453452421848 344.7145310889729,258.15870834764684 399,261 C 453.2854689110271,263.84129165235316 513.6317416695294,249.4105118515974 580,252 C 646.3682583304706,254.5894881484026 718.7585022329096,274.1992442459636 799,273 C 879.2414977670904,271.8007557540364 967.3342493988321,249.79251116454827 1043,252 C 1118.665750601168,254.20748883545173 1181.9045001717623,280.63071109584337 1246,287 C 1310.0954998282377,293.36928890415663 1375.0477499141189,279.6846444520783 1440,266 C 1440,266 1440,400 1440,400 Z"
    );
  }
  50% {
    d: path(
      "M 0,400 C 0,400 0,266 0,266 C 49.457918241154246,251.4950188938509 98.91583648230849,236.99003778770182 172,239 C 245.0841635176915,241.00996221229818 341.7945723119203,259.53486774304366 417,259 C 492.2054276880797,258.46513225695634 545.9058742700104,238.87049124012367 600,239 C 654.0941257299896,239.12950875987633 708.5819306080384,258.9831672964617 787,272 C 865.4180693919616,285.0168327035383 967.766403297836,291.1968395740295 1054,285 C 1140.233596702164,278.8031604259705 1210.3524562006182,260.2294744074201 1272,255 C 1333.6475437993818,249.77052559257987 1386.8237718996909,257.8852627962899 1440,266 C 1440,266 1440,400 1440,400 Z"
    );
  }
  75% {
    d: path(
      "M 0,400 C 0,400 0,266 0,266 C 74.26726210924082,259.69975953280664 148.53452421848164,253.39951906561322 226,256 C 303.46547578151836,258.6004809343868 384.12916523531436,270.1016832703538 441,259 C 497.87083476468564,247.89831672964618 530.9488148402612,214.1937478529715 585,225 C 639.0511851597388,235.8062521470285 714.0755754036413,291.12332531776025 789,304 C 863.9244245963587,316.87667468223975 938.7488835451736,287.3129508759876 1017,270 C 1095.2511164548264,252.6870491240124 1176.9288904156647,247.62487117828923 1248,249 C 1319.0711095843353,250.37512882171077 1379.5355547921677,258.1875644108554 1440,266 C 1440,266 1440,400 1440,400 Z"
    );
  }
  100% {
    d: path(
      "M 0,400 C 0,400 0,266 0,266 C 49.646856750257655,241.01958090003436 99.29371350051531,216.0391618000687 179,217 C 258.7062864994847,217.9608381999313 368.4720027481965,244.86293369975954 443,255 C 517.5279972518035,265.13706630024046 556.8182755066987,258.5091034008932 604,255 C 651.1817244933013,251.49089659910683 706.2548952250086,251.1006526966678 788,253 C 869.7451047749914,254.8993473033322 978.162143593267,259.08828581243563 1058,255 C 1137.837856406733,250.9117141875644 1189.0965304019237,238.54620405358986 1248,239 C 1306.9034695980763,239.45379594641014 1373.4517347990381,252.72689797320507 1440,266 C 1440,266 1440,400 1440,400 Z"
    );
  }
}
.path-1 {
  animation: pathAnim-1 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pathAnim-1 {
  0% {
    d: path(
      "M 0,400 C 0,400 0,266 0,266 C 83.35829611817243,277.64273445551356 166.71659223634487,289.2854689110271 240,280 C 313.28340776365513,270.7145310889729 376.4919271727928,240.500858811405 431,238 C 485.5080728272072,235.499141188595 531.3156990724838,260.71109584335284 598,273 C 664.6843009275162,285.28890415664716 752.2452765372724,284.65475781518376 827,276 C 901.7547234627276,267.34524218481624 963.7031947784267,250.66987289591208 1029,253 C 1094.2968052215733,255.33012710408792 1162.9419443490208,276.665750601168 1232,282 C 1301.0580556509792,287.334249398832 1370.5290278254897,276.66712469941604 1440,266 C 1440,266 1440,400 1440,400 Z"
    );
  }
  25% {
    d: path(
      "M 0,400 C 0,400 0,266 0,266 C 56.444520783236015,256.0439711439368 112.88904156647203,246.08794228787357 188,249 C 263.11095843352797,251.91205771212643 356.8883545173479,267.69220199244245 427,279 C 497.1116454826521,290.30779800755755 543.557540364136,297.1432497423566 606,299 C 668.442459635864,300.8567502576434 746.881484026108,297.7347990381312 825,286 C 903.118515973892,274.2652009618688 980.9165235314326,253.91755410511848 1045,239 C 1109.0834764685674,224.08244589488152 1159.4524218481622,214.5949845413947 1223,220 C 1286.5475781518378,225.4050154586053 1363.273789075919,245.70250772930265 1440,266 C 1440,266 1440,400 1440,400 Z"
    );
  }
  50% {
    d: path(
      "M 0,400 C 0,400 0,266 0,266 C 78.74201305393336,284.43627619374786 157.48402610786673,302.87255238749566 216,285 C 274.5159738921333,267.12744761250434 312.80590862246646,212.94606664376505 388,220 C 463.19409137753354,227.05393335623495 575.2923394022673,295.34318103744414 653,312 C 730.7076605977327,328.65681896255586 774.0247337684644,293.6812092064582 830,270 C 885.9752662315356,246.31879079354175 954.6087255238751,233.93198213672278 1027,232 C 1099.3912744761249,230.06801786327722 1175.5403641360358,238.59086224665063 1245,246 C 1314.4596358639642,253.40913775334937 1377.229817931982,259.70456887667467 1440,266 C 1440,266 1440,400 1440,400 Z"
    );
  }
  75% {
    d: path(
      "M 0,400 C 0,400 0,266 0,266 C 73.0999656475438,251.3617313637925 146.1999312950876,236.72346272758503 207,233 C 267.8000687049124,229.27653727241497 316.30024046719336,236.4678804534524 397,236 C 477.69975953280664,235.5321195465476 590.5991068361388,227.4050154586053 653,246 C 715.4008931638612,264.5949845413947 727.3033321882514,309.9120577121264 789,301 C 850.6966678117486,292.0879422878736 962.1875644108554,228.94675369288908 1052,221 C 1141.8124355891446,213.05324630711092 1209.946410168327,260.30092751631736 1271,277 C 1332.053589831673,293.69907248368264 1386.0267949158365,279.8495362418413 1440,266 C 1440,266 1440,400 1440,400 Z"
    );
  }
  100% {
    d: path(
      "M 0,400 C 0,400 0,266 0,266 C 83.35829611817243,277.64273445551356 166.71659223634487,289.2854689110271 240,280 C 313.28340776365513,270.7145310889729 376.4919271727928,240.500858811405 431,238 C 485.5080728272072,235.499141188595 531.3156990724838,260.71109584335284 598,273 C 664.6843009275162,285.28890415664716 752.2452765372724,284.65475781518376 827,276 C 901.7547234627276,267.34524218481624 963.7031947784267,250.66987289591208 1029,253 C 1094.2968052215733,255.33012710408792 1162.9419443490208,276.665750601168 1232,282 C 1301.0580556509792,287.334249398832 1370.5290278254897,276.66712469941604 1440,266 C 1440,266 1440,400 1440,400 Z"
    );
  }
}
.path-0 {
  animation: pathAnim-0 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pathAnim-0 {
  0% {
    d: path(
      "M 0,400 C 0,400 0,133 0,133 C 49.43455857093781,132.45723119203024 98.86911714187562,131.91446238406047 180,129 C 261.1308828581244,126.08553761593953 373.95809000343525,120.79938165578838 448,134 C 522.0419099965648,147.20061834421162 557.2985228443833,178.888010992786 613,171 C 668.7014771556167,163.111989007214 744.8478186190312,115.64857437306766 817,112 C 889.1521813809688,108.35142562693234 957.3102026794918,148.5176915149433 1026,166 C 1094.6897973205082,183.4823084850567 1163.9113706630021,178.28065956715906 1233,169 C 1302.0886293369979,159.71934043284094 1371.0443146684988,146.35967021642045 1440,133 C 1440,133 1440,400 1440,400 Z"
    );
  }
  25% {
    d: path(
      "M 0,400 C 0,400 0,133 0,133 C 58.85812435589145,142.167296461697 117.7162487117829,151.334592923394 191,137 C 264.2837512882171,122.66540707660599 351.99312950875986,84.82892476812091 427,86 C 502.00687049124014,87.17107523187909 564.3112332531778,127.3497080041223 633,132 C 701.6887667468222,136.6502919958777 776.7619374785295,105.7722432153899 840,91 C 903.2380625214705,76.2277567846101 954.6410168327036,77.56131913431813 1025,92 C 1095.3589831672964,106.43868086568187 1184.6739951906561,133.9824802473377 1257,143 C 1329.3260048093439,152.0175197526623 1384.663002404672,142.50875987633117 1440,133 C 1440,133 1440,400 1440,400 Z"
    );
  }
  50% {
    d: path(
      "M 0,400 C 0,400 0,133 0,133 C 70.40467193404331,157.42322226039164 140.80934386808661,181.84644452078325 217,176 C 293.1906561319134,170.15355547921675 375.167296461697,134.0374441772587 442,114 C 508.832703538303,93.96255582274132 560.5214702851254,90.00377877018205 622,108 C 683.4785297148746,125.99622122981795 754.7468223978015,165.94744074201307 828,158 C 901.2531776021985,150.05255925798693 976.4912401236686,94.2064582617657 1051,98 C 1125.5087598763314,101.7935417382343 1199.2882171075232,165.22672621092408 1264,181 C 1328.7117828924768,196.77327378907592 1384.3558914462383,164.88663689453796 1440,133 C 1440,133 1440,400 1440,400 Z"
    );
  }
  75% {
    d: path(
      "M 0,400 C 0,400 0,133 0,133 C 55.34111989007215,114.27035383029886 110.6822397801443,95.54070766059773 180,85 C 249.3177602198557,74.45929233940227 332.61216076949495,72.10752318790793 411,95 C 489.38783923050505,117.89247681209207 562.8691171418757,166.0291995877705 620,171 C 677.1308828581243,175.9708004122295 717.9113706630025,137.77567846101 788,122 C 858.0886293369975,106.22432153899001 957.4854002061147,112.86808656818963 1036,128 C 1114.5145997938853,143.13191343181037 1172.1470285125386,166.75197526623154 1236,169 C 1299.8529714874614,171.24802473376846 1369.9264857437306,152.12401236688424 1440,133 C 1440,133 1440,400 1440,400 Z"
    );
  }
  100% {
    d: path(
      "M 0,400 C 0,400 0,133 0,133 C 49.43455857093781,132.45723119203024 98.86911714187562,131.91446238406047 180,129 C 261.1308828581244,126.08553761593953 373.95809000343525,120.79938165578838 448,134 C 522.0419099965648,147.20061834421162 557.2985228443833,178.888010992786 613,171 C 668.7014771556167,163.111989007214 744.8478186190312,115.64857437306766 817,112 C 889.1521813809688,108.35142562693234 957.3102026794918,148.5176915149433 1026,166 C 1094.6897973205082,183.4823084850567 1163.9113706630021,178.28065956715906 1233,169 C 1302.0886293369979,159.71934043284094 1371.0443146684988,146.35967021642045 1440,133 C 1440,133 1440,400 1440,400 Z"
    );
  }
}

.video {
  display: none;
}
.video-content {
  width: 450px;
  z-index: -1;
}
.hide {
  overflow: hidden;
}
.col-xl-3 {
  margin-right: -70px;
}
.desc {
  max-width: 500px;
  font-size: 21px;
  font-family: "Poppins", sans-serif;
  color: var(--nav-color);
}
#home {
  padding-top: 6rem;
}
h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 65px;
  color: var(--nav-color);
}
.header {
  color: var(--nav-color);
}
.explore {
  background-color: var(--button);
  text-decoration: none;
  color: white;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  transition: 0.3s ease-in;
}
.explore-2 {
  border-radius: 10px;
  background-color: var(--button);
  text-decoration: none;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 19px;
  padding-right: 19px;
  color: white;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  opacity: 1;
  transition: 0.3s ease-in;
}
.explore {
  border: 2px solid transparent;
}
.explore-2 {
  border: 2px solid var(--button);
}
.explore-2:hover {
  background-color: #23252f;
}
.explore-2:hover button {
  background-color: #23252f;
  color: var(--nav-color);
}

/* mengatur responsive */
@media screen and (max-width: 600px) {
  .video-content {
    display: none;
    width: 400px;
  }
  .video {
    display: block;
  }
}
@media screen and (max-width: 800px) {
  .video-content {
    display: none;
    width: 250px;
  }
  .video {
    display: block;
  }
}
@media screen and (max-width: 992px) {
  .video-content {
    display: none;
  }
  .video {
    display: block;
  }
}
@media screen and (min-width: 992px) {
  .video-content {
    width: 380px;
  }
  .video {
    display: none;
  }
}
@media screen and (min-width: 1500px) {
  .video-content {
    width: 450px;
    z-index: -1;
  }
}

/* Explore */
/* .owl-dot {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  margin: 0 5px;
  background: #23252f !important;
}
.owl-dot:hover,
.owl-dot.active {
  height: 10px;
  width: 10px;
  background: #6fcf97 !important;
} */
#explore {
  padding-top: 5rem;
}
h4 {
  font-family: "Poppins", sans-serif;
  text-decoration: none;
  font-weight: 500;
  font-size: 20px;
  color: var(--nav-color);
}
.category {
  color: var(--nav-color);
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 34px;
}
img {
  width: 18rem;
}
.title {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: var(--text-color);
  margin-top: -3px;
}
.bi-caret-right::before {
  font-size: 20px;
  font-weight: 600;
  margin-left: -10px;
  left: -10px;
  opacity: 0;
  transition: 0.3s ease-in-out;
}
.card-1,
.card-2,
.card-3,
.card-4,
.card-5,
.card-6,
.card-7,
.card-8 {
  margin-top: 100px;
}
.card-1 a {
  text-decoration: none;
  color: var(--nav-color);
}
.card-2 a {
  text-decoration: none;
  color: var(--nav-color);
}
.card-3 a {
  text-decoration: none;
  color: var(--nav-color);
}
.card-4 a {
  text-decoration: none;
  color: var(--nav-color);
}
.card-5 a {
  text-decoration: none;
  color: var(--nav-color);
}
.card-6 a {
  text-decoration: none;
  color: var(--nav-color);
}
.card-7 a {
  text-decoration: none;
  color: var(--nav-color);
}
.card-8 a {
  text-decoration: none;
  color: var(--nav-color);
}
.card-1:hover .bi-caret-right::before {
  transform: translateX(10px);
  opacity: 1;
}
.card-2:hover .bi-caret-right::before {
  transform: translateX(10px);
  opacity: 1;
}
.card-3:hover .bi-caret-right::before {
  transform: translateX(10px);
  opacity: 1;
}
.card-4:hover .bi-caret-right::before {
  transform: translateX(10px);
  opacity: 1;
}
.card-5:hover .bi-caret-right::before {
  transform: translateX(10px);
  opacity: 1;
}
.card-6:hover .bi-caret-right::before {
  transform: translateX(10px);
  opacity: 1;
}
.card-7:hover .bi-caret-right::before {
  transform: translateX(10px);
  opacity: 1;
}
.card-8:hover .bi-caret-right::before {
  transform: translateX(10px);
  opacity: 1;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: grey;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color);
}
::selection {
  background: var(--color);
  color: #fff;
}

/* footer */
.information p,
.copyright {
  color: #999;
  font-size: 18px;
}
.bi-instagram,
.bi-youtube,
.bi-facebook,
.bi-github {
  color: #999;
  padding: 15px;
  font-size: 24px;
  transition: 0.4s ease-in-out;
}
.bi-instagram:hover {
  color: var(--color);
}
.bi-youtube:hover {
  color: var(--color);
}
.bi-facebook:hover {
  color: var(--color);
}
.bi-github:hover {
  color: var(--color);
}
.license,
.license-2 {
  color: #999;
  font-size: 18px;
  text-decoration: none;
}
.license-2:hover {
  color: #999;
  text-decoration: underline;
}