custom.css 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542
  1. /* your styles go here */
  2. .text-center {
  3. text-align: center;
  4. }
  5. /* LP-components nav */
  6. #navigation .navbar-nav .main-link {
  7. background-color: white;
  8. border-top: none;
  9. color: black;
  10. font-weight: 400;
  11. padding: 3px 3px 3px 3px;
  12. margin: 18px 12px 18px 12px;
  13. font-size: 1.5rem;
  14. text-decoration: none;
  15. }
  16. #navigation .navbar-nav .dropdown.active .main-link {
  17. border-bottom: 3px solid #EA5413
  18. }
  19. #navigation .navbar-nav .signin-link {
  20. padding: 8px 18px 8px 18px;
  21. margin: 13px 10px 13px 10px;
  22. text-decoration: none;
  23. color: #EA5413;
  24. font-size: 1.5rem;
  25. font-weight: 400;
  26. border: 1px solid #EA5413;
  27. border-radius: 3rem;
  28. }
  29. #navigation .navbar-nav .signin-link:hover, #navigation .navbar-nav .signin-link:focus {
  30. background-color: transparent;
  31. }
  32. #navigation .navbar-nav .signup-link {
  33. padding: 8px 18px 8px 18px;
  34. margin: 13px 10px 13px 10px;
  35. text-decoration: none;
  36. color: white;
  37. font-size: 1.5rem;
  38. font-weight: 400;
  39. border: 1px solid #EA5413;
  40. border-radius: 3rem;
  41. background-color: #EA5413;
  42. }
  43. #navigation .navbar-nav .signup-link:hover, #navigation .navbar-nav .signup-link:focus {
  44. background-color: #EA5413;
  45. }
  46. /* sec-hero */
  47. .sec-hero {
  48. padding: 6rem 0;
  49. padding-bottom: 0;
  50. margin-bottom: 0 !important;
  51. }
  52. .sec-hero .hero-title {
  53. font-size: 3.5rem;
  54. letter-spacing: 1px;
  55. padding-top: 2.5rem;
  56. }
  57. .sec-hero .hero-txt {
  58. font-size: 1.8rem;
  59. letter-spacing: 1px;
  60. }
  61. .sec-hero .hero-btn {
  62. border: none;
  63. outline: none;
  64. border-radius: 3rem;
  65. margin-top: 2rem;
  66. padding: 1rem 2.5rem;
  67. background: linear-gradient(20deg, #EA5413, #920783);
  68. color: white;
  69. font-size: 1.8rem;
  70. box-shadow: 1px 1px 5px 1px rgba(207, 207, 207, 0.534);
  71. }
  72. .hero-orange {
  73. position: absolute;
  74. left: 10%;
  75. top: 0%;
  76. }
  77. .hero-purple {
  78. position: absolute;
  79. right: 0%;
  80. top: -10%;
  81. z-index: -1;
  82. width: 180px;
  83. }
  84. .hero-orange-s {
  85. position: absolute;
  86. left: -5%;
  87. bottom: 13%;
  88. z-index: -1;
  89. animation: floating 8s infinite ease-in-out;
  90. width: 80px;
  91. }
  92. .hero-textgrp {
  93. z-index: 3;
  94. position: absolute;
  95. left: 5%;
  96. top: 10%;
  97. animation: floating3 6s infinite 1s ease-in-out;
  98. width: 300px;
  99. }
  100. .hero-video {
  101. z-index: 3;
  102. position: absolute;
  103. right: 3%;
  104. top: -5%;
  105. animation: floating 8s infinite 1.5s ease-in-out;
  106. width: 120px;
  107. }
  108. .hero-amplify {
  109. z-index: 3;
  110. position: absolute;
  111. bottom: 5%;
  112. right: 0;
  113. animation: floating2 5s infinite ease-in-out;
  114. width: 120px;
  115. }
  116. .hero-imgfr {
  117. width: 100%;
  118. height: 95%;
  119. }
  120. .hero-imgfr img {
  121. width: 100%;
  122. }
  123. @keyframes floating {
  124. from { transform: translate(0px, 0); }
  125. 65% { transform: translate(25px, 0); }
  126. to { transform: translate(0, -0px); }
  127. }
  128. @keyframes floating3 {
  129. from { transform: translate(0px, 0); }
  130. 65% { transform: translate(-20px, 0); }
  131. to { transform: translate(0, -0px); }
  132. }
  133. @keyframes floating2 {
  134. from { transform: translate(0px, 0); }
  135. 65% { transform: translate(0px, 10px); }
  136. to { transform: translate(0, -0px); }
  137. }
  138. /* sec-usecase */
  139. .sec-usecase {
  140. padding: 6rem 0;
  141. position: relative;
  142. margin-bottom: 0 !important;
  143. }
  144. .sec-usecase::after {
  145. content: " ";
  146. position: absolute;
  147. bottom: 0;
  148. left: 0;
  149. right: 0;
  150. height: 40%;
  151. width: 100%;
  152. background-color: #FFEBE2;
  153. z-index: -1;
  154. }
  155. .sec-usecase .usecase-title {
  156. font-size: 3rem;
  157. text-align: center;
  158. }
  159. .sec-usecase .usecase-sub {
  160. font-size: 1.8rem;
  161. text-align: center;
  162. }
  163. .sec-usecase .usecase-sub i {
  164. color: #EA5413;
  165. }
  166. .sec-usecase .usecase-block {
  167. padding: 0 1rem;
  168. z-index: 3;
  169. }
  170. .sec-usecase .usecase-imgfr {
  171. width: 100%;
  172. height: 25rem;
  173. border-radius: 1rem;
  174. overflow: hidden;
  175. box-shadow: 0 3px 11px 3px rgba(192, 192, 192, 0.637);
  176. }
  177. .sec-usecase .usecase-imgfr img {
  178. width: 100%;
  179. height: 100%;
  180. }
  181. /* sec-steps */
  182. .sec-steps {
  183. padding: 6rem 0;
  184. padding-bottom: 0;
  185. }
  186. .sec-steps .steps-title {
  187. font-size: 3rem;
  188. text-align: center;
  189. letter-spacing: 1px;
  190. }
  191. .sec-steps .steps-title strong {
  192. font-size: 5rem;
  193. }
  194. .sec-steps .steps-block {
  195. padding: 0 1rem;
  196. display: flex;
  197. flex-direction: column;
  198. align-items: center;
  199. justify-content: center;
  200. position: relative;
  201. }
  202. .sec-steps .steps-block::after {
  203. position: absolute;
  204. bottom: -1rem;
  205. left: 0;
  206. width: 100%;
  207. height: 15rem;
  208. background-color: #FFEBE2;
  209. content: " ";
  210. z-index: -1;
  211. border-radius: 2rem;
  212. }
  213. .sec-steps .steps-imgfr {
  214. width: 75%;
  215. height: 23rem;
  216. }
  217. .sec-steps .steps-imgfr img {
  218. width: 100%;
  219. height: 100%;
  220. }
  221. .sec-steps .steps-txt {
  222. display: flex;
  223. align-items: center;
  224. }
  225. .sec-steps .steps-txt span {
  226. display: inline-block;
  227. width: 40px;
  228. height: 40px;
  229. background-color: #EA5413;
  230. color: white;
  231. font-size: 2.5rem;
  232. line-height: 40px;
  233. border-radius: 50%;
  234. text-align: center;
  235. margin-right: 1rem;
  236. }
  237. /* sec-features */
  238. .sec-features {
  239. padding: 5rem 0;
  240. }
  241. .sec-features .row {
  242. margin: 8rem 0;
  243. }
  244. .sec-features .row:nth-of-type(1) {
  245. margin: 4rem 0;
  246. }
  247. .sec-features .row:nth-of-type(4) {
  248. margin-bottom: 0;
  249. }
  250. .features-orangel {
  251. position: absolute;
  252. left: -150px;
  253. top: 5%;
  254. z-index: -1;
  255. }
  256. .features-purpler {
  257. position: absolute;
  258. right: -150px;
  259. top: 5%;
  260. z-index: -1;
  261. }
  262. .features-purplel {
  263. position: absolute;
  264. left: -150px;
  265. top: 5%;
  266. z-index: -1;
  267. }
  268. .features-oranger {
  269. position: absolute;
  270. right: -150px;
  271. top: 5%;
  272. z-index: -1;
  273. }
  274. .sec-features .row .d-block {
  275. display: none;
  276. }
  277. .sec-features .features-col {
  278. position: relative;
  279. }
  280. .sec-features .features-col .features-block {
  281. position: absolute;
  282. left: 10rem;
  283. top: 6rem;
  284. display: flex;
  285. opacity: 0;
  286. transition: all .8s;
  287. }
  288. .sec-features .features-col .block-right {
  289. transform: translateX(-30%) scale(0.95);
  290. }
  291. .sec-features .features-col .block-left {
  292. transform: translateX(30%) scale(0.95);
  293. }
  294. .sec-features .features-col .features-block.active {
  295. opacity: 1;
  296. transform: translateX(0%) scale(1);
  297. }
  298. .sec-features .features-num {
  299. display: inline-block;
  300. font-size: 12rem;
  301. color: #F0F0F0;
  302. }
  303. .sec-features .features-title {
  304. font-size: 3rem;
  305. text-align: center;
  306. letter-spacing: 1px;
  307. padding-bottom: 6px;
  308. border-bottom: 8px solid #EA5413;
  309. display: inline-block;
  310. }
  311. .sec-features .features-title strong {
  312. font-size: 5rem;
  313. }
  314. .sec-features .features-imgfr {
  315. width: 100%;
  316. }
  317. .sec-features .features-imgfr video {
  318. width: 100%;
  319. }
  320. .sec-features .features-list {
  321. text-align: left;
  322. }
  323. .sec-blogtab {
  324. padding-bottom: 5rem;
  325. }
  326. .blog-tabs {
  327. display: flex;
  328. align-items: center;
  329. }
  330. .blogtab-title {
  331. font-size: 3rem;
  332. letter-spacing: 1px;
  333. padding-bottom: 6px;
  334. border-bottom: 8px solid #EA5413;
  335. display: inline-block;
  336. text-align: center;
  337. }
  338. .blog-tabs .blog-tabs-nav {
  339. width: 35%;
  340. background-color: #F0F0F0;
  341. padding: 4rem 2.5rem;
  342. list-style: none;
  343. box-shadow: 0 2px 5px -2px rgb(173, 173, 173);
  344. text-align: left;
  345. }
  346. .blog-tabs .blog-tabs-nav li {
  347. padding: 10px;
  348. border-bottom: 1px dashed grey;
  349. }
  350. .blog-tabs .blog-tabs-nav li a {
  351. color: #EA5413;
  352. }
  353. .blog-tabs .blog-tabs-stage {
  354. width: 65%;
  355. padding: 3.5rem;
  356. padding-bottom: 8rem;
  357. box-shadow: 1px 1px 10px 2px grey;
  358. height: 48rem;
  359. overflow: hidden;
  360. text-align: left;
  361. }
  362. .blog-tab-box {
  363. height: 95%;
  364. overflow: scroll;
  365. }
  366. .blog-tabs .blog-tabs-stage .blog-txt {
  367. font-size: 1.6rem;
  368. }
  369. .btn-light {
  370. color: black;
  371. border: 1px solid #EA5413;
  372. padding: 1rem 2.5rem;
  373. outline: none;
  374. background-color: white;
  375. margin-top: 4rem;
  376. border-radius: 3rem;
  377. font-size: 1.8rem;
  378. box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
  379. }
  380. .btn-dark {
  381. color: white;
  382. border: 1px solid #EA5413;
  383. padding: 1rem 2.5rem;
  384. outline: none;
  385. background-color: #EA5413;
  386. margin-top: 4rem;
  387. border-radius: 3rem;
  388. font-size: 1.8rem;
  389. box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
  390. }
  391. .blog-tabs .btn-light {
  392. margin-top: 1.5rem;
  393. color: #EA5413;
  394. }
  395. /* sec-action */
  396. .sec-action {
  397. padding-bottom: 7rem;
  398. background-color: #FFEBE2;
  399. margin-bottom: 0 !important;
  400. }
  401. .sec-action .container-fluid {
  402. padding: 0;
  403. }
  404. .sec-action .action-clip {
  405. width: 100%;
  406. background-color: #EA5413;
  407. padding: 2rem 0;
  408. border-color: #EA5413;
  409. }
  410. .sec-action .action-clip h2 {
  411. color: white;
  412. }
  413. .sec-action .action-triangle {
  414. clip-path: polygon(0 0, 50% 60%, 100% 0);
  415. -webkit-clip-path: polygon(0 0, 50% 60%, 100% 0);
  416. background: #EA5413;
  417. height: 8rem;
  418. border-color: #EA5413;
  419. }
  420. .sec-action form {
  421. padding: 4rem 0;
  422. }
  423. .sec-action form .action-input {
  424. padding: .8rem;
  425. display: block;
  426. width: 35rem;
  427. margin: 0 auto;
  428. border: 1px solid #9B9B9B;
  429. border-radius: 8px;
  430. outline: none;
  431. }
  432. .sec-action form .action-input::placeholder {
  433. color: #9B9B9B;
  434. }
  435. .sec-action form .action-input::-webkit-input-placeholder {
  436. color: #9B9B9B;
  437. }
  438. .sec-action form .action-input:-moz-input-placeholder{
  439. color: #9B9B9B;
  440. }
  441. .sec-action form .action-input:-ms-input-placeholder{
  442. color: #9B9B9B;
  443. }
  444. .sec-action .action-btn {
  445. border: none;
  446. outline: none;
  447. padding: .8rem 3.5rem;
  448. border-radius: 3rem;
  449. font-size: 2.2rem;
  450. background-color: white;
  451. color: #EA5413;
  452. margin-top: 3rem;
  453. }
  454. /* footer */
  455. .footer {
  456. background-color: #F0F0F0;
  457. padding: 3rem;
  458. }
  459. .footer .row{
  460. display: flex;
  461. align-items: center;
  462. }
  463. .footer .footer-aigirl {
  464. font-weight: 600;
  465. font-size: 2rem;
  466. margin-top: 1rem;
  467. margin-bottom: 2.5rem;
  468. }
  469. .footer .footer-follow {
  470. font-size: 1.6rem;
  471. margin-bottom: 1rem;
  472. }
  473. .footer .footer-socials a{
  474. margin-right: 5px;
  475. }
  476. #content .container {
  477. margin-top: 50px;
  478. }
  479. .box-image-text .image {
  480. min-height: 200px;
  481. max-height: 200px;
  482. }
  483. .box-simple {
  484. min-height: 200px;
  485. margin-bottom: 0;
  486. }
  487. .box-simple .video__desc {
  488. color: black;
  489. font-size: 1.8rem;
  490. text-align: left;
  491. padding-left: 1rem;
  492. padding-right: 1rem;
  493. }
  494. .goto__btn {
  495. text-align: center;
  496. margin-top: 2rem;
  497. margin-left: auto;
  498. margin-right: auto;
  499. }
  500. .container__footer {
  501. display: flex;
  502. align-items: center;
  503. }
  504. .box-simple .icon__feature {
  505. width: 120px;
  506. height: 120px;
  507. border-radius: 50%;
  508. display: flex;
  509. align-items: center;
  510. justify-content: center;
  511. margin-left: auto;
  512. margin-right: auto;
  513. }
  514. .box-simple .icon__feature > i {
  515. font-size: 4.5rem;
  516. }
  517. #content .container_list {
  518. margin-top: 100px;
  519. }
  520. #post-content img {
  521. width: 100%;
  522. box-shadow: 0 11px 21px 0 rgba(194, 194, 194, 0.644);
  523. transition: all .3s;
  524. margin: 1.5rem 0;
  525. }
  526. #post-content img:hover {
  527. transform: translateY(-.125em);
  528. box-shadow: 0 5px 10px 0 rgba(grey, 0.3);
  529. }
  530. #post-content i {
  531. font-size: 2rem;
  532. vertical-align: middle;
  533. }
  534. #blog-post {
  535. padding-bottom: 3rem;
  536. }
  537. #blog-post h2 {
  538. font-family: "Proxima Nova",sans-serif;
  539. margin-right: 5px;
  540. }
  541. #blog-post p, #blog-post li{
  542. font-size: 1.8rem;
  543. font-family: "Proxima Nova",sans-serif;
  544. }
  545. #block-vtuber {
  546. padding: 30px 0;
  547. margin-bottom: 40px;
  548. font-family: "Proxima Nova",sans-serif;
  549. color: #181c47;
  550. }
  551. #block-vtuber h2 {
  552. font-family: 'Poppins', sans-serif;
  553. font-weight: bolder;
  554. font-size: 3.7rem;
  555. }
  556. #block-vtuber p {
  557. font-size: 1.8rem;
  558. line-height: 3rem;
  559. }
  560. .txt-block {
  561. padding: 4rem 0;
  562. }
  563. .sec {
  564. padding: 9rem 0;
  565. margin-bottom: 0;
  566. }
  567. .sec01 {
  568. padding-top: 2rem;
  569. }
  570. .sec-right {
  571. position: absolute;
  572. right: -15%;
  573. top: 10%;
  574. }
  575. .sec02 {
  576. background-color: #FFEBE2;
  577. position: relative;
  578. /* clip-path: polygon(0% -10%, 100% 0%, 110% 100%, 0% 100%); */
  579. }
  580. .sec03, .sec04, .sec05 {
  581. text-align: center;
  582. padding: 12rem 0;
  583. }
  584. .sec04 {
  585. padding: 8rem 0;
  586. background-color: #FFEBE2;
  587. position: relative;
  588. padding-top: 3rem;
  589. }
  590. .sec04::after {
  591. display: none;
  592. content: "";
  593. position: absolute;
  594. top: -66px;
  595. left: 0;
  596. display: block;
  597. width: 100%;
  598. height: 66px;
  599. transform: rotate(180deg);
  600. background-image: url("https://i.imgur.com/fR4Tz5V.png");
  601. background-size: 3840px 66px;
  602. background-position: 0 0;
  603. }
  604. .sec02::after {
  605. display: none;
  606. content: "";
  607. position: absolute;
  608. bottom: -66px;
  609. left: 0;
  610. display: block;
  611. width: 100%;
  612. height: 66px;
  613. background-image: url("https://i.imgur.com/fR4Tz5V.png");
  614. background-size: 3840px 66px;
  615. background-position: 0 0;
  616. }
  617. .sec05 {
  618. position: relative;
  619. padding-top: 0;
  620. padding-bottom: 4rem;
  621. background-color: #FFEBE2;
  622. }
  623. .sec05::after {
  624. display: none;
  625. content: "";
  626. position: absolute;
  627. bottom: -66px;
  628. left: 0;
  629. display: block;
  630. width: 100%;
  631. height: 66px;
  632. background-image: url("https://i.imgur.com/fR4Tz5V.png");
  633. background-size: 3840px 66px;
  634. background-position: 0 0;
  635. }
  636. .img_decor {
  637. position: absolute;
  638. left: 4rem;
  639. top: 1rem;
  640. }
  641. .project {
  642. max-height: 15rem;
  643. }
  644. .project .owl-pagination {
  645. display: none;
  646. }
  647. .owl-carousel.project .owl-buttons {
  648. bottom: 0;
  649. transform: translateX(-50%);
  650. }
  651. .owl-carousel.project .owl-buttons div {
  652. box-shadow: 3px 3px 16px 0 rgb(98 125 152 / 8%), 0 -1px 8px 0 rgb(0 0 0 / 4%);
  653. padding: 1rem;
  654. width: 40px;
  655. height: 40px;
  656. border-radius: 50%;
  657. color: black;
  658. }
  659. .owl-carousel.project .owl-buttons div:hover {
  660. box-shadow: 3px 3px 16px 0 rgb(98 125 152 / 3%), 0 -1px 8px 0 rgb(0 0 0 / 1%);
  661. }
  662. .owl-carousel .owl-controls .owl-buttons, .owl-theme .owl-controls .owl-buttons {
  663. top: 110%;
  664. right: 50%;
  665. }
  666. .txt-block .rankblock {
  667. list-style: none;
  668. padding: 0;
  669. }
  670. .txt-block .rankblock li {
  671. font-size: 2.2rem;
  672. margin-bottom: 1rem;
  673. }
  674. .txt-block .rankblock span {
  675. display: inline-block;
  676. width: 45px;
  677. height: 45px;
  678. border-radius: 50%;
  679. background-color: #EA5413;
  680. color: white;
  681. line-height: 35px;
  682. margin-right: 1rem;
  683. font-size: 1.6rem;
  684. padding-left: 6px;
  685. padding-top: 6px;
  686. }
  687. .btn-template-main {
  688. color: #EA5413;
  689. }
  690. .btn {
  691. color: #EA5413;
  692. border: 2px solid #EA5413;
  693. border-radius: 2rem;
  694. }
  695. .btn:hover {
  696. background-color: #EA5413;
  697. border: 2px solid #EA5413;
  698. }
  699. #blog-listing-medium .post{
  700. color: #181c47;
  701. }
  702. #blog-listing-medium .tag-post .image {
  703. position: relative;
  704. overflow: visible;
  705. }
  706. #blog-listing-medium .tag-post .image::after {
  707. position: absolute;
  708. content: " ";
  709. right: 2rem;
  710. bottom: 2rem;
  711. width: 100%;
  712. height: 100%;
  713. z-index: -1;
  714. }
  715. #blog-listing-medium .tag-post .image img {
  716. border: 5px solid white;
  717. }
  718. #blog-listing-medium .tag-post:nth-of-type(3n+1) .image::after {
  719. background-color: thistle;
  720. }
  721. #blog-listing-medium .tag-post:nth-of-type(3n+2) .image::after {
  722. background-color: #f3f3f9;
  723. }
  724. #blog-listing-medium .tag-post:nth-of-type(3n) .image::after {
  725. background-color: #eba764;
  726. }
  727. .v-tabs {
  728. max-width: 100%;
  729. }
  730. .v-tabs-nav li {
  731. float: left;
  732. width: 25%;
  733. list-style: none;
  734. }
  735. .v-tabs-nav li a {
  736. color: grey;
  737. font-size: 2.5rem;
  738. letter-spacing: 2px;
  739. display: block;
  740. font-weight: 600;
  741. padding: 10px 0;
  742. text-align: center;
  743. text-decoration: none;
  744. }
  745. .v-tabs-nav li a:hover {
  746. color: black;
  747. }
  748. .v-tab-active a {
  749. background: #fff;
  750. border-bottom: 2px solid grey;
  751. color: #2db34a;
  752. cursor: default;
  753. }
  754. .v-tabs-stage {
  755. clear: both;
  756. padding: 40px 30px 10px 30px;
  757. position: relative;
  758. top: -1px;
  759. text-align: left;
  760. }
  761. #block-vtuber .v-tabs-stage h2 {
  762. font-size: 2.5rem;
  763. }
  764. #block-vtuber .v-tabs .owl-page span {
  765. background: #EA5413;
  766. }
  767. .d-tabs {
  768. max-width: 100%;
  769. }
  770. .d-tabs-nav li {
  771. float: left;
  772. width: 50%;
  773. list-style: none;
  774. }
  775. .d-tabs-nav li a {
  776. color: grey;
  777. font-size: 2.5rem;
  778. letter-spacing: 2px;
  779. display: block;
  780. font-weight: 600;
  781. padding: 10px 0;
  782. text-align: center;
  783. text-decoration: none;
  784. }
  785. .d-tabs-nav li a:hover {
  786. color: black;
  787. }
  788. .d-tab-active a {
  789. background: transparent;
  790. border-bottom: 2px solid grey;
  791. color: #2db34a;
  792. cursor: default;
  793. }
  794. .d-tabs-stage {
  795. clear: both;
  796. padding: 40px 30px 10px 30px;
  797. position: relative;
  798. top: -1px;
  799. text-align: left;
  800. }
  801. #block-vtuber .d-tabs-stage h2 {
  802. font-size: 2.5rem;
  803. }
  804. .m-tabs {
  805. max-width: 100%;
  806. }
  807. .m-tabs-nav li {
  808. float: left;
  809. width: 50%;
  810. list-style: none;
  811. }
  812. .m-tabs-nav li a {
  813. color: grey;
  814. font-size: 2.5rem;
  815. letter-spacing: 2px;
  816. display: block;
  817. font-weight: 600;
  818. padding: 10px 0;
  819. text-align: center;
  820. text-decoration: none;
  821. }
  822. .m-tabs-nav li a:hover {
  823. color: black;
  824. }
  825. .m-tab-active a {
  826. background: transparent;
  827. border-bottom: 2px solid grey;
  828. color: #2db34a;
  829. cursor: default;
  830. }
  831. .m-tabs-stage {
  832. clear: both;
  833. padding: 40px 30px 10px 30px;
  834. position: relative;
  835. top: -1px;
  836. text-align: left;
  837. }
  838. #block-vtuber .m-tabs-stage h2 {
  839. font-size: 2.5rem;
  840. }
  841. .sec06 {
  842. text-align: center;
  843. padding: 2rem 0;
  844. }
  845. .grow_title {
  846. text-align: center;
  847. }
  848. .grow_txt {
  849. font-size: 1.2rem;
  850. }
  851. .grow_call {
  852. font-weight: 700;
  853. font-family: Arial, Helvetica, sans-serif;
  854. font-size: 2.3rem;
  855. display: block;
  856. margin-top: 1.5rem;
  857. margin-bottom: 1rem;
  858. }
  859. .grow_btn {
  860. padding: 1.2rem 7rem;
  861. font-size: 2.5rem;
  862. border: 2px solid #EA5413;
  863. background: transparent;
  864. outline: none;
  865. border-radius: 5rem;
  866. transition: all .3s;
  867. display: inline-block;
  868. color: #EA5413;
  869. text-decoration: none;
  870. }
  871. .grow_btn:hover {
  872. color: white;
  873. background: #EA5413;
  874. text-decoration: none;
  875. }
  876. .grow_img {
  877. display: block;
  878. margin: 0 auto;
  879. margin-top: 1rem;
  880. }
  881. .owl-item {
  882. height: 300px;
  883. overflow: hidden;
  884. }
  885. @media (max-width: 992px) {
  886. .sec-steps .steps-block {
  887. padding: 0rem;
  888. }
  889. .sec-steps .steps-block::after {
  890. width: 100%;
  891. height: 12rem;
  892. }
  893. .sec-steps .steps-imgfr {
  894. width: 100%;
  895. height: 20rem;
  896. }
  897. .sec-steps .steps-imgfr img {
  898. width: 100%;
  899. }
  900. .sec-steps .steps-txt h3.steps-sub {
  901. font-size: 1.3rem;
  902. }
  903. .sec-steps .steps-txt span {
  904. width: 25px;
  905. height: 25px;
  906. background-color: #EA5413;
  907. font-size: 1.3rem;
  908. line-height: 25px;
  909. }
  910. .sec-features .row {
  911. margin: 5rem 0;
  912. }
  913. .sec-features .features-col {
  914. position: relative;
  915. height: 25vh;
  916. }
  917. .sec-features .features-col .features-block {
  918. left: 2rem;
  919. top: 1rem;
  920. }
  921. .sec-features .row .d-md-block {
  922. display: none;
  923. }
  924. .sec-features .row .d-block {
  925. display: block;
  926. }
  927. .sec-hero .col-left {
  928. margin-top: 2.5rem;
  929. }
  930. }
  931. @media (max-width: 765px) {
  932. .sec-steps .steps-block {
  933. padding: 2rem 15rem;
  934. }
  935. .sec-steps .steps-imgfr {
  936. width: 100%;
  937. height: 32vh;
  938. }
  939. .sec-usecase .row>div {
  940. width: 50%;
  941. }
  942. .sec-features {
  943. margin-bottom: 0;
  944. }
  945. .blog-tabs {
  946. flex-direction: column;
  947. }
  948. .blog-tabs .blog-tabs-stage {
  949. width: 95%;
  950. margin-top: -4rem;
  951. background-color: white;
  952. }
  953. .blog-tabs .blog-tabs-nav {
  954. width: 95%;
  955. background-color: #F0F0F0;
  956. padding: 4rem 2.5rem;
  957. list-style: none;
  958. box-shadow: 0 2px 5px -2px rgb(173, 173, 173);
  959. text-align: left;
  960. }
  961. .blog-tabs .blog-tabs-nav li {
  962. padding: 10px;
  963. border-bottom: 1px dashed grey;
  964. }
  965. .blog-tabs .blog-tabs-nav li a {
  966. color: #EA5413;
  967. }
  968. .footer .container .row {
  969. flex-direction: column;
  970. text-align: center;
  971. }
  972. .navbar-collapse .navbar-nav li {
  973. display: inline-block;
  974. }
  975. .nav>li {
  976. display: inline-block;
  977. }
  978. }
  979. @media (max-width: 576px) {
  980. .sec {
  981. padding-left: 2rem;
  982. padding-right: 2rem;
  983. }
  984. .sec-hero {
  985. padding: 4rem 0;
  986. }
  987. .sec-hero .hero-title {
  988. font-size: 2.5rem;
  989. }
  990. .sec-steps .steps-block {
  991. padding: 2rem 6rem;
  992. }
  993. .sec-steps .steps-imgfr {
  994. width: 100%;
  995. height: 20rem;
  996. }
  997. .sec-steps .steps-txt h3.steps-sub {
  998. font-size: 1.5rem;
  999. }
  1000. .sec-usecase .row>div {
  1001. width: 100%;
  1002. }
  1003. .sec-usecase .usecase-block {
  1004. padding: 0 4rem;
  1005. }
  1006. .hero-purple {
  1007. width: 130px;
  1008. }
  1009. .hero-orange-s {
  1010. left: 0%;
  1011. width: 60px;
  1012. }
  1013. .hero-textgrp {
  1014. left: 8%;
  1015. width: 200px;
  1016. }
  1017. .hero-video {
  1018. right: 5%;
  1019. width: 90px;
  1020. }
  1021. .hero-amplify {
  1022. width: 90px;
  1023. }
  1024. #content .container {
  1025. margin-top: 0;
  1026. }
  1027. .sec01 {
  1028. padding-top: 0;
  1029. }
  1030. #heading-breadcrumbs {
  1031. margin-bottom: 0;
  1032. }
  1033. #block-vtuber {
  1034. padding: 0;
  1035. }
  1036. #blog-listing-medium .tag-post:nth-of-type(3n+1) .image::after {
  1037. background-color: transparent;
  1038. }
  1039. #blog-listing-medium .tag-post:nth-of-type(3n+2) .image::after {
  1040. background-color: transparent;
  1041. }
  1042. #blog-listing-medium .tag-post:nth-of-type(3n) .image::after {
  1043. background-color: transparent;
  1044. }
  1045. .owl-carousel .owl-controls .owl-buttons, .owl-theme .owl-controls .owl-buttons {
  1046. top: 130%;
  1047. }
  1048. .owl-item {
  1049. height: unset;
  1050. }
  1051. .v-tabs-nav {
  1052. padding: 0 30px;
  1053. }
  1054. .d-tabs-nav {
  1055. padding: 0 30px;
  1056. }
  1057. .m-tabs-nav {
  1058. padding: 0 30px;
  1059. }
  1060. }
  1061. @media (max-width: 992px) {
  1062. .container__footer {
  1063. flex-direction: column;
  1064. }
  1065. .container__footer > div {
  1066. margin-bottom: 1.5rem;
  1067. }
  1068. .video__col {
  1069. margin-bottom: 2rem;
  1070. }
  1071. .mb-mobile {
  1072. margin-bottom: 5rem;
  1073. }
  1074. .step__box {
  1075. margin-bottom: 2rem;
  1076. }
  1077. }
  1078. .btn:hover {
  1079. background-color: #181c47;
  1080. color: white;
  1081. }
  1082. .box-steps {
  1083. border: 1px solid #181c47;
  1084. padding: 1rem;
  1085. border-radius: 5rem;
  1086. position: relative;
  1087. }
  1088. .box-steps .step__box {
  1089. position: absolute;
  1090. left: -5px;
  1091. top: -5px;
  1092. width: 4rem;
  1093. height: 4rem;
  1094. background-color: white;
  1095. }
  1096. .box-steps .step__box span {
  1097. font-size: 3rem;
  1098. font-weight: 600;
  1099. color: #38a7bb;
  1100. }
  1101. .box-steps .icon {
  1102. border: none;
  1103. }
  1104. .box-steps .icon > i {
  1105. font-size: 3.5rem;
  1106. }
  1107. .box__video {
  1108. min-height: 280px;
  1109. }
  1110. .footer__btn__text {
  1111. font-size: 2rem;
  1112. color: white;
  1113. }
  1114. .table {
  1115. display: flex;
  1116. /* box-shadow: 0 0 5px 1px rgb(197, 197, 197); */
  1117. border-radius: 15px;
  1118. align-items: center;
  1119. height: 280px;
  1120. }
  1121. .table .column {
  1122. min-height: 280px;
  1123. background-color: white;
  1124. padding: 10px 2rem;
  1125. }
  1126. .table .column .body__company {
  1127. font-size: 1.6rem;
  1128. font-weight: 500;
  1129. }
  1130. .fa-check {
  1131. margin-left: 4px;
  1132. color: rgb(5, 212, 5);
  1133. }
  1134. .table .column .body__head {
  1135. color: gray;
  1136. }
  1137. .table .column__first {
  1138. border-radius: 15px 0 0 15px;
  1139. }
  1140. .table .column__last {
  1141. border-radius: 0 15px 15px 0;
  1142. }
  1143. .table .column__choozmo {
  1144. border: 1px solid rgb(212, 212, 212);
  1145. box-shadow: 0 0 5px 1px rgb(197, 197, 197);
  1146. border-radius: 15px;
  1147. height: 340px;
  1148. }
  1149. .table .column div {
  1150. min-height: 65px;
  1151. }
  1152. .navbar-brand > img {
  1153. display: inline-block;
  1154. }
  1155. @media (max-width: 767px){
  1156. .visible-xs {
  1157. display: inline-block!important;
  1158. }
  1159. }
  1160. .logo {
  1161. width: 187px;
  1162. height: 48px;
  1163. }
  1164. .logo-sm {
  1165. width: 150px;
  1166. height: 40px;
  1167. }
  1168. .logo_text {
  1169. vertical-align: middle;
  1170. }
  1171. .footer_img {
  1172. height: 60px;
  1173. }
  1174. .followus {
  1175. display: flex;
  1176. align-items: center;
  1177. justify-content: flex-start;
  1178. margin-top: 1rem;
  1179. }
  1180. .followus__txt {
  1181. display: inline-block;
  1182. margin-right: 1rem;
  1183. color: white;
  1184. font-weight: 600;
  1185. }
  1186. .followus .followus__img {
  1187. margin-right: 1rem;
  1188. }
  1189. .bar.mb-0 {
  1190. margin-bottom: 0;
  1191. }
  1192. .headingvf {
  1193. margin-bottom: 1.5rem;
  1194. }
  1195. .headingvf-sub {
  1196. margin-bottom: 4rem;
  1197. }
  1198. .headingvf-sub h4 {
  1199. color: grey;
  1200. font-weight: 400;
  1201. font-size: 1.6rem;
  1202. line-height: 2.2rem;
  1203. }
  1204. .testimonial_img {
  1205. width: 200px;
  1206. border-radius: 50%;
  1207. display: block;
  1208. margin-left: auto;
  1209. margin-right: auto;
  1210. }
  1211. .testimonial-title {
  1212. font-size: 2rem;
  1213. }
  1214. .testimonial-text {
  1215. font-size: 1.6rem;
  1216. }
  1217. .testimonials__pro {
  1218. margin-bottom: 1rem;
  1219. }
  1220. .testimonials__pro p {
  1221. font-size: 1.6rem;
  1222. }
  1223. .testimonials__goto__btn a {
  1224. animation-name: move;
  1225. animation-duration: 1.5s;
  1226. animation-delay: 0;
  1227. animation-iteration-count: infinite;
  1228. animation-direction: normal;
  1229. animation-timing-function: linear;
  1230. }
  1231. @keyframes move {
  1232. 0% {
  1233. box-shadow: 0 0 0 transparent;
  1234. }
  1235. 50% {
  1236. box-shadow: 5px 5px 4px #887e74;
  1237. }
  1238. 100% {
  1239. box-shadow: 0 0 0 transparent;
  1240. }
  1241. }
  1242. .row__rank {
  1243. height: min-content;
  1244. }
  1245. .rank__box {
  1246. min-height: min-content;
  1247. }
  1248. .rank .rank__word {
  1249. display: inline-block;
  1250. font-weight: 500;
  1251. position: relative;
  1252. }
  1253. .rank .rank__word::after {
  1254. position: absolute;
  1255. content: " ";
  1256. width: 100%;
  1257. height: 2px;
  1258. left: 20%;
  1259. top: 90%;
  1260. background-color: #499aa8af;
  1261. }
  1262. .rank__num {
  1263. display: inline-block;
  1264. font-size: 3.5rem;
  1265. color: #38a7bb;
  1266. font-style: italic;
  1267. font-weight: 600;
  1268. }
  1269. .video__steps {
  1270. margin-top: 6rem;
  1271. }
  1272. .btn-video {
  1273. text-align: center;
  1274. display: block;
  1275. width: 18rem;
  1276. margin: 1rem auto;
  1277. }
  1278. @media (max-width: 992px) {
  1279. .video__steps {
  1280. margin-top: 1rem;
  1281. }
  1282. }
  1283. .video-steps {
  1284. display: flex;
  1285. text-align: center;
  1286. }
  1287. .steps__box {
  1288. flex: 20%;
  1289. position: relative;
  1290. }
  1291. .steps__icon {
  1292. font-size: 5rem;
  1293. color: #38a7bb;
  1294. }
  1295. .steps__name {
  1296. font-size: 1.8rem;
  1297. color: rgb(68, 67, 67);
  1298. margin-bottom: 1rem;
  1299. }
  1300. .steps__num {
  1301. position: absolute;
  1302. left: 15%;
  1303. top: -2.5rem;
  1304. font-size: 4rem;
  1305. color: #72969c;
  1306. font-weight: 500;
  1307. }