custom.css 22 KB

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