Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

10034 linhas
231 KiB

  1. /*
  2. @File: StartP Template Styles
  3. * This file contains the styling for the actual template, this
  4. is the file you need to edit to change the look of the
  5. template.
  6. This files table contents are outlined below>>>>>
  7. *******************************************
  8. *******************************************
  9. ==== INDEX PAGE CSS
  10. ** - Default CSS
  11. ** - Preloader CSS
  12. ** - Navbar CSS
  13. ** - Main Banner CSS
  14. ** - Boxes CSS
  15. ** - About CSS
  16. ** - Why Choose Us CSS
  17. ** - Services CSS
  18. ** - Services Details CSS
  19. ** - Features CSS
  20. ** - Features Details CSS
  21. ** - Team CSS
  22. ** - Works CSS
  23. ** - Fun Facts CSS
  24. ** - Pricing CSS
  25. ** - Domain Search CSS
  26. ** - Feedback CSS
  27. ** - Ready To Talk CSS
  28. ** - Partner CSS
  29. ** - Blog CSS
  30. ** - Shop CSS
  31. ** - Shop Details CSS
  32. ** - Cart CSS
  33. ** - Checkout CSS
  34. ** - Page Title CSS
  35. ** - FAQ CSS
  36. ** - Pagination CSS
  37. ** - Blog Details CSS
  38. ** - Sidebar Widget CSS
  39. ** - Project Details CSS
  40. ** - Contact CSS
  41. ** - Coming Soon CSS
  42. ** - 404 Error CSS
  43. ** - CTA CSS
  44. ** - Repair Main Banner CSS
  45. ** - Repair Partner CSS
  46. ** - Repair About CSS
  47. ** - Repair Services CSS
  48. ** - Repair CTA CSS
  49. ** - Repair Team CSS
  50. ** - Repair Why Choose Us CSS
  51. ** - Repair Feedback CSS
  52. ** - IoT Main Banner CSS
  53. ** - IoT Partner CSS
  54. ** - Iot Services CSS
  55. ** - IoT CTA CSS
  56. ** - IoT Features CSS
  57. ** - IoT Team CSS
  58. ** - IoT Why Choose Us CSS
  59. ** - ML Main Banner CSS
  60. ** - ML Partner CSS
  61. ** - Our Solutions CSS
  62. ** - ML About CSS
  63. ** - ML Services CSS
  64. ** - ML Feedback CSS
  65. ** - Free Trial CSS
  66. ** - ML Projects CSS
  67. ** - Agency Main Banner CSS
  68. ** - Our Solutions CSS
  69. ** - Agency About CSS
  70. ** - Agency Services CSS
  71. ** - Testimonials CSS
  72. ** - Agency CTA CSS
  73. ** - Agency Portfolio Main Banner CSS
  74. ** - Our Latest Projects CSS
  75. ** - Agency Portfolio About CSS
  76. ** - Agency Portfolio Partner CSS
  77. ** - Creative Area CSS
  78. ** - Footer CSS
  79. ** - Auth Form CSS
  80. ** - Go Top CSS
  81. */
  82. /*================================================
  83. Default CSS
  84. =================================================*/
  85. @import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
  86. $font-family: 'Poppins', sans-serif;
  87. $light-green-color: #44ce6f;
  88. $white-color: #ffffff;
  89. $black-color: #0e314c;
  90. $navlink-color: #4a6f8a;
  91. $paragraph-color: #6084a4;
  92. $purple-color: #c679e3;
  93. $bg-color: #f7fafd;
  94. $bg-color2: #f9f6f6;
  95. $hosting-main-color: #032b8d;
  96. $gradient-color: linear-gradient(135deg, #23bdb8 0%, #43e794 100%);
  97. $gradient-color2: linear-gradient(to right bottom, #1fa2ff, #00c0ff, #00d9f2, #53eedd, #a6ffcb);
  98. $transition: .5s;
  99. $font-size: 14px;
  100. body {
  101. font-family: $font-family;
  102. padding: 0;
  103. margin: 0;
  104. font-size: $font-size;
  105. }
  106. :root {
  107. scroll-behavior: inherit;
  108. }
  109. img {
  110. max-width: 100%;
  111. }
  112. a {
  113. color: $black-color;
  114. display: inline-block;
  115. transition: $transition;
  116. text-decoration: none;
  117. outline: 0 !important;
  118. &:hover, &:focus {
  119. color: $light-green-color;
  120. text-decoration: none;
  121. }
  122. }
  123. .d-table {
  124. width: 100%;
  125. height: 100%;
  126. &-cell {
  127. vertical-align: middle;
  128. }
  129. }
  130. p {
  131. color: $paragraph-color;
  132. line-height: 1.8;
  133. &:last-child {
  134. margin-bottom: 0;
  135. }
  136. }
  137. .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  138. color: $black-color;
  139. font-weight: 500;
  140. }
  141. .text-right {
  142. text-align: end;
  143. }
  144. :focus {
  145. outline: 0 !important;
  146. }
  147. .ptb-80 {
  148. padding: {
  149. top: 80px;
  150. bottom: 80px;
  151. }
  152. }
  153. .pt-80 {
  154. padding-top: 80px;
  155. }
  156. .pb-50 {
  157. padding-bottom: 50px;
  158. }
  159. .bg-f7fafd {
  160. background-color: $bg-color;
  161. }
  162. .bg-f9f6f6 {
  163. background-color: $bg-color2;
  164. }
  165. .bg-f9fafb {
  166. background-color: #f9fafb;
  167. }
  168. .bg-0f054b {
  169. background-color: #0f054b;
  170. }
  171. .bg-eef6fd {
  172. background-color: #eef6fd;
  173. }
  174. .pb-80 {
  175. padding-bottom: 80px;
  176. }
  177. textarea.form-control {
  178. height: auto !important;
  179. }
  180. /* owl carousel btn */
  181. .owl-theme-style {
  182. &.owl-theme {
  183. .owl-nav {
  184. margin-top: 0;
  185. &.disabled + .owl-dots {
  186. margin-top: 10px;
  187. line-height: 0.01;
  188. }
  189. }
  190. .owl-dots {
  191. margin-top: 20px;
  192. line-height: 0.01;
  193. .owl-dot {
  194. span {
  195. width: 15px;
  196. height: 15px;
  197. margin: 0 5px;
  198. background: #D6D6D6;
  199. transition: .4s;
  200. border-radius: 50%;
  201. }
  202. &:hover, &.active {
  203. span {
  204. background: $light-green-color;
  205. }
  206. }
  207. }
  208. }
  209. }
  210. }
  211. /* btn btn-primary */
  212. .btn-primary {
  213. color: $white-color;
  214. background-color: $light-green-color;
  215. box-shadow: 0 13px 27px 0 rgba(68, 206, 111, .25);
  216. &:hover, &:focus, &:active {
  217. color: $white-color;
  218. background: $black-color;
  219. transform: translateY(-5px);
  220. box-shadow: 0 13px 27px 0 rgba(198, 121, 227, .25);
  221. }
  222. &.focus, &:focus {
  223. box-shadow: unset;
  224. }
  225. &:not(:disabled):not(.disabled).active:focus, &:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
  226. box-shadow: unset;
  227. }
  228. &:not(:disabled):not(.disabled).active, &:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  229. color: $white-color;
  230. background: $black-color;
  231. transform: translateY(-5px);
  232. box-shadow: 0 13px 27px 0 rgba(198, 121, 227, .25);
  233. }
  234. &.disabled, &:disabled {
  235. color: $white-color;
  236. background-color: $light-green-color;
  237. box-shadow: 0 13px 27px 0 rgba(68, 206, 111, .25);
  238. opacity: 1;
  239. &:hover, &:focus {
  240. background: $black-color;
  241. box-shadow: 0 13px 27px 0 rgba(198, 121, 227, .25);
  242. }
  243. }
  244. }
  245. .btn {
  246. font: {
  247. weight: 600;
  248. size: 14px;
  249. }
  250. border: none;
  251. padding: 15px 40px;
  252. position: relative;
  253. border-radius: 4px;
  254. z-index: 1;
  255. text-transform: uppercase;
  256. transition: $transition;
  257. &::after, &::before {
  258. content: '';
  259. position: absolute;
  260. top: 0;
  261. height: 100%;
  262. width: 0;
  263. transition: $transition;
  264. background: $purple-color;
  265. z-index: -1;
  266. }
  267. &::after {
  268. left: 0;
  269. border-radius: 4px 0 0 4px;
  270. }
  271. &::before {
  272. right: 0;
  273. border-radius: 0 4px 4px 0;
  274. }
  275. &:hover {
  276. &::after, &::before {
  277. width: 50%;
  278. }
  279. }
  280. }
  281. /* btn-secondary */
  282. .btn {
  283. &.btn-secondary {
  284. text-transform: capitalize;
  285. border-radius: 0;
  286. background-color: $light-green-color;
  287. padding: 13px 30px;
  288. box-shadow: 5px 5px 5px #a6f5be;
  289. margin: {
  290. right: 5px;
  291. bottom: 5px;
  292. };
  293. font: {
  294. size: 14px;
  295. weight: 500;
  296. };
  297. &::before {
  298. border-radius: 0;
  299. background: $purple-color;
  300. }
  301. &::after {
  302. border-radius: 0;
  303. background: $purple-color;
  304. }
  305. &:not(:disabled):not(.disabled).active, &:not(:disabled):not(.disabled):active, .show>&.dropdown-toggle {
  306. color: $white-color;
  307. background-color: $light-green-color;
  308. border-color: $light-green-color;
  309. }
  310. &:not(:disabled):not(.disabled).active:focus, &:not(:disabled):not(.disabled):active:focus, .show>&.dropdown-toggle:focus {
  311. box-shadow: 5px 5px 5px #e9caf5;
  312. }
  313. &:focus {
  314. color: $white-color;
  315. }
  316. &:hover, &:focus {
  317. box-shadow: 5px 5px 5px #e9caf5;
  318. }
  319. }
  320. }
  321. /* Form control */
  322. .form-group {
  323. margin-bottom: 18px;
  324. }
  325. label {
  326. color: $black-color;
  327. font: {
  328. size: 15px;
  329. weight: 500;
  330. }
  331. margin-bottom: 10px;
  332. }
  333. .form-control {
  334. height: 45px;
  335. padding: 10px;
  336. font-size: 14px;
  337. color: $black-color;
  338. border: 1px solid #eeeeee;
  339. border-radius: 0;
  340. background: #eeeeee;
  341. transition: $transition;
  342. &:focus {
  343. outline: 0;
  344. background: $white-color;
  345. box-shadow: unset;
  346. border-color: $light-green-color;
  347. }
  348. }
  349. /* Section Title */
  350. .section-title {
  351. text-align: center;
  352. margin-bottom: 50px;
  353. h2 {
  354. margin-bottom: 0;
  355. text-transform: capitalize;
  356. font: {
  357. size: 30px;
  358. weight: 600;
  359. }
  360. }
  361. p {
  362. max-width: 520px;
  363. margin: 0 auto;
  364. }
  365. .bar {
  366. height: 5px;
  367. width: 90px;
  368. background: #cdf1d8;
  369. margin: 20px auto;
  370. position: relative;
  371. border-radius: 30px;
  372. &::before {
  373. content: '';
  374. position: absolute;
  375. left: 0;
  376. top: -2.7px;
  377. height: 10px;
  378. width: 10px;
  379. border-radius: 50%;
  380. background: $light-green-color;
  381. animation-duration: 3s;
  382. animation-timing-function: linear;
  383. animation-iteration-count: infinite;
  384. animation-name: MOVE-BG;
  385. }
  386. }
  387. .sub-title {
  388. display: inline-block;
  389. color: $purple-color;
  390. background-color: #f5dffd;
  391. margin-bottom: 18px;
  392. border-radius: 30px;
  393. padding: 5px 20px 4px;
  394. font-size: 13px;
  395. }
  396. &.text-left {
  397. text-align: left;
  398. h2 {
  399. font-weight: 500;
  400. span {
  401. display: inline-block;
  402. font-weight: 700;
  403. }
  404. }
  405. p {
  406. margin: {
  407. left: 0;
  408. right: 0;
  409. top: 10px;
  410. };
  411. }
  412. }
  413. }
  414. @keyframes MOVE-BG {
  415. from {
  416. transform: translateX(0);
  417. }
  418. to {
  419. transform: translateX(88px);
  420. }
  421. }
  422. /*================================================
  423. Preloader CSS
  424. =================================================*/
  425. .preloader {
  426. position: fixed;
  427. left: 0;
  428. top: 0;
  429. width: 100%;
  430. height: 100%;
  431. z-index: 9999999;
  432. background: $light-green-color;
  433. .spinner {
  434. width: 60px;
  435. height: 60px;
  436. background-color: $white-color;
  437. margin: 0 auto;
  438. animation: sk-rotateplane 1.2s infinite ease-in-out;
  439. position: absolute;
  440. right: 0;
  441. left: 0;
  442. box-shadow: 0 0 70px 0 rgba(0, 0, 0, 0.4);
  443. top: 50%;
  444. margin-top: -75px;
  445. }
  446. }
  447. @keyframes sk-rotateplane {
  448. 0% {
  449. transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  450. } 50% {
  451. transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  452. } 100% {
  453. transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  454. }
  455. }
  456. /*================================================
  457. Navbar CSS
  458. =================================================*/
  459. .startp-responsive-nav {
  460. display: none;
  461. }
  462. #header {
  463. &.headroom {
  464. position: fixed;
  465. width: 100%;
  466. z-index: 9999;
  467. top: 0;
  468. left: 0;
  469. background-color: transparent;
  470. transition: .3s;
  471. padding-top: 15px;
  472. &.is-sticky {
  473. box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  474. background-color: $white-color !important;
  475. padding: {
  476. top: 15px;
  477. bottom: 15px;
  478. };
  479. }
  480. &.navbar-style-two {
  481. background-color: $white-color;
  482. padding: {
  483. top: 15px;
  484. bottom: 15px;
  485. };
  486. }
  487. }
  488. &.headroom--pinned {
  489. transform: translateY(0%);
  490. }
  491. &.headroom--unpinned {
  492. transform: translateY(-100%);
  493. opacity: 0;
  494. visibility: hidden;
  495. }
  496. }
  497. .startp-nav {
  498. background: transparent;
  499. nav {
  500. padding: 0;
  501. ul {
  502. padding: 0;
  503. margin: 0;
  504. list-style-type: none;
  505. }
  506. .navbar-nav {
  507. .nav-item {
  508. position: relative;
  509. padding: 15px 0;
  510. a {
  511. font: {
  512. weight: 500;
  513. size: 15px;
  514. }
  515. color: $navlink-color;
  516. padding: {
  517. left: 0;
  518. right: 0;
  519. top: 0;
  520. bottom: 0;
  521. }
  522. margin: {
  523. left: 14px;
  524. right: 14px;
  525. }
  526. &:hover, &:focus, &.active {
  527. color: $light-green-color;
  528. }
  529. svg {
  530. width: 14px;
  531. }
  532. }
  533. .dropdown-menu {
  534. box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
  535. background: $white-color;
  536. position: absolute;
  537. border: none;
  538. top: 80px;
  539. left: 0;
  540. width: 250px;
  541. display: block;
  542. z-index: 99;
  543. padding: {
  544. top: 15px;
  545. left: 5px;
  546. right: 5px;
  547. bottom: 15px;
  548. }
  549. opacity: 0;
  550. border-radius: 5px;
  551. visibility: hidden;
  552. transition: all 0.3s ease-in-out;
  553. li {
  554. position: relative;
  555. padding: 0;
  556. a {
  557. font: {
  558. size: 14px;
  559. weight: 500;
  560. }
  561. padding: 8px 15px;
  562. margin: 0;
  563. display: block;
  564. color: $navlink-color;
  565. &:hover, &:focus, &.active {
  566. color: $light-green-color;
  567. }
  568. svg, i {
  569. float: right;
  570. }
  571. }
  572. .dropdown-menu {
  573. position: absolute;
  574. left: 100%;
  575. top: 0;
  576. opacity: 0 !important;
  577. visibility: hidden !important;
  578. li {
  579. a {
  580. color: $navlink-color;
  581. &:hover, &:focus, &.active {
  582. color: $light-green-color;
  583. }
  584. }
  585. }
  586. }
  587. &:hover {
  588. .dropdown-menu {
  589. opacity: 1 !important;
  590. visibility: visible !important;
  591. top: -10px !important;
  592. }
  593. a {
  594. color: $light-green-color;
  595. }
  596. }
  597. }
  598. }
  599. &:hover {
  600. ul {
  601. opacity: 1;
  602. visibility: visible;
  603. top: 100%;
  604. }
  605. }
  606. }
  607. }
  608. .others-option {
  609. margin-left: 20px;
  610. .cart-wrapper-btn {
  611. position: relative;
  612. margin-right: 30px;
  613. svg {
  614. width: 15px;
  615. }
  616. i {
  617. font-size: 20px;
  618. }
  619. span {
  620. background-color: red;
  621. color: #ffffff;
  622. font-size: 9px;
  623. width: 13px;
  624. height: 13px;
  625. text-align: center;
  626. line-height: 14px;
  627. border-radius: 50%;
  628. position: absolute;
  629. top: -2px;
  630. right: -9px;
  631. }
  632. }
  633. .btn {
  634. &.btn-light {
  635. background: transparent;
  636. border: 2px dashed #cdf1d8;
  637. padding: 12px 33px;
  638. margin: {
  639. right: 10px;
  640. }
  641. &:focus {
  642. color: $black-color !important
  643. }
  644. &:hover, &:focus {
  645. color: $white-color;
  646. border-color: $light-green-color;
  647. }
  648. &::after, &::before {
  649. background: $light-green-color;
  650. }
  651. }
  652. &.btn-primary {
  653. background: $purple-color;
  654. box-shadow: 0 13px 27px 0 rgba(198, 121, 227, 0.25);
  655. &::after, &::before {
  656. background: $light-green-color;
  657. box-shadow: 0 13px 27px 0 rgba(68, 206, 111, 0.25);
  658. }
  659. }
  660. }
  661. }
  662. }
  663. }
  664. .navbar-style-three {
  665. .startp-nav {
  666. padding: {
  667. left: 25px;
  668. right: 25px;
  669. };
  670. }
  671. }
  672. .navbar-color-white {
  673. .startp-nav {
  674. nav {
  675. .navbar-nav {
  676. .nav-item {
  677. a {
  678. color: $white-color;
  679. &:hover, &:focus, &.active {
  680. color: $light-green-color;
  681. }
  682. }
  683. }
  684. }
  685. .others-option {
  686. .cart-wrapper-btn {
  687. color: $white-color;
  688. }
  689. .btn {
  690. &.btn-primary {
  691. background: $purple-color;
  692. box-shadow: 0 13px 27px 0 rgba(198, 121, 227, 0.25);
  693. &::after, &::before {
  694. background: $light-green-color;
  695. box-shadow: 0 13px 27px 0 rgba(68, 206, 111, 0.25);
  696. }
  697. }
  698. }
  699. }
  700. }
  701. }
  702. &#header.headroom.is-sticky {
  703. background-color: $black-color !important;
  704. }
  705. }
  706. /* Navbar toggler */
  707. .navbar-toggler {
  708. border: none;
  709. border-radius: 0;
  710. padding: 0;
  711. &:focus {
  712. outline: 0 !important;
  713. box-shadow: none;
  714. }
  715. .icon-bar {
  716. width: 35px;
  717. transition: all 0.3s;
  718. background: #221638;
  719. height: 4px;
  720. display: block;
  721. border-radius: 3px;
  722. }
  723. .top-bar {
  724. transform: rotate(45deg);
  725. transform-origin: 10% 10%;
  726. left: 4px;
  727. position: relative;
  728. }
  729. .middle-bar {
  730. opacity: 0;
  731. margin: 5px 0;
  732. }
  733. .bottom-bar {
  734. transform: rotate(-45deg);
  735. transform-origin: 10% 90%;
  736. left: 4px;
  737. position: relative;
  738. }
  739. &.collapsed {
  740. .top-bar {
  741. transform: rotate(0);
  742. left: 0;
  743. }
  744. .middle-bar {
  745. opacity: 1;
  746. }
  747. .bottom-bar {
  748. transform: rotate(0);
  749. left: 0;
  750. }
  751. }
  752. }
  753. // Mobile and iPad Navbar
  754. @media only screen and (max-width: 991px) {
  755. #header {
  756. padding: {
  757. top: 15px;
  758. bottom: 15px;
  759. };
  760. &.headroom {
  761. border-bottom: 1px solid #eeeeee;
  762. &.is-sticky {
  763. border-bottom: none;
  764. }
  765. }
  766. }
  767. }
  768. /*================================================
  769. Main Banner CSS
  770. =================================================*/
  771. .main-banner {
  772. position: relative;
  773. height: 910px;
  774. z-index: 1;
  775. background: transparent url(/images/banner-bg1.jpg) right top no-repeat;
  776. .hero-content {
  777. h1 {
  778. font: {
  779. size: 45px;
  780. weight: 500;
  781. }
  782. margin-bottom: 20px;
  783. }
  784. p {
  785. margin-bottom: 30px;
  786. }
  787. }
  788. .banner-form {
  789. background: $white-color;
  790. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  791. padding: 50px 30px;
  792. border-radius: 5px;
  793. form {
  794. .form-control {
  795. padding-left: 15px;
  796. }
  797. .btn {
  798. display: block;
  799. width: 100%;
  800. transform: unset;
  801. margin-top: 25px;
  802. }
  803. }
  804. }
  805. .banner-image {
  806. position: relative;
  807. img {
  808. position: absolute;
  809. &:nth-child(1) {
  810. z-index: 3;
  811. top: -130px;
  812. left: -45px;
  813. }
  814. &:nth-child(2) {
  815. right: 145px;
  816. top: -287px;
  817. }
  818. &:nth-child(3) {
  819. left: 25px;
  820. top: -20px;
  821. }
  822. &:nth-child(4) {
  823. right: 12%;
  824. top: 118px;
  825. z-index: 1;
  826. }
  827. &:nth-child(5) {
  828. left: 28%;
  829. top: -120px;
  830. z-index: 2;
  831. }
  832. &:nth-child(6) {
  833. right: 35%;
  834. z-index: 1;
  835. top: -150px;
  836. }
  837. &:nth-child(7) {
  838. right: 20px;
  839. top: -110px;
  840. }
  841. &:nth-child(8) {
  842. right: 25px;
  843. top: -140px;
  844. }
  845. &:nth-child(9) {
  846. right: 30%;
  847. z-index: 1;
  848. top: -35px;
  849. }
  850. &:nth-child(10) {
  851. left: 37%;
  852. top: -28px;
  853. z-index: 1;
  854. }
  855. &:nth-child(11) {
  856. left: 37%;
  857. top: -160px;
  858. z-index: 1;
  859. }
  860. &:nth-child(12) {
  861. left: 90px;
  862. top: -110px;
  863. }
  864. &:nth-child(13) {
  865. left: 56%;
  866. top: -25px;
  867. z-index: 2;
  868. }
  869. &:nth-child(14) {
  870. right: 105px;
  871. top: -28px;
  872. }
  873. &:last-child {
  874. display: none;
  875. }
  876. }
  877. &.single-banner-image {
  878. img {
  879. display: block;
  880. position: relative;
  881. top: 0;
  882. left: 0;
  883. right: 0;
  884. bottom: 0;
  885. }
  886. }
  887. }
  888. }
  889. .hosting-main-banner {
  890. position: relative;
  891. z-index: 1;
  892. background-color: $hosting-main-color;
  893. padding: {
  894. top: 250px;
  895. bottom: 190px;
  896. };
  897. .hosting-banner-content {
  898. h1 {
  899. font: {
  900. size: 45px;
  901. weight: 500;
  902. }
  903. color: $white-color;
  904. margin-bottom: 25px;
  905. }
  906. ul {
  907. padding: 0;
  908. margin: 0;
  909. list-style-type: none;
  910. li {
  911. margin-bottom: 12px;
  912. color: $white-color;
  913. position: relative;
  914. padding-left: 30px;
  915. &::before {
  916. position: absolute;
  917. left: 0;
  918. top: 50%;
  919. transform: translateY(-50%);
  920. width: 20px;
  921. height: 2px;
  922. background: $light-green-color;
  923. content: '';
  924. }
  925. &:last-child {
  926. margin-bottom: 0;
  927. }
  928. }
  929. }
  930. p {
  931. color: $white-color;
  932. font-size: 18px;
  933. margin: {
  934. bottom: 30px;
  935. top: 25px;
  936. }
  937. span {
  938. text-decoration: line-through;
  939. }
  940. }
  941. }
  942. .hosting-banner-image {
  943. position: relative;
  944. img {
  945. position: absolute;
  946. &:nth-child(1) {
  947. top: -175px;
  948. left: 0;
  949. right: 0;
  950. margin: 0 auto;
  951. }
  952. &:nth-child(2) {
  953. top: 184px;
  954. left: 21%;
  955. }
  956. &:nth-child(3) {
  957. top: 177px;
  958. right: 38px;
  959. }
  960. &:nth-child(4) {
  961. left: 29%;
  962. right: 0;
  963. top: -15px;
  964. margin: 0 auto;
  965. }
  966. &:nth-child(5) {
  967. right: 8px;
  968. top: -107px;
  969. }
  970. &:nth-child(6) {
  971. left: 18%;
  972. top: -175px;
  973. z-index: -1;
  974. }
  975. &:nth-child(7) {
  976. top: -235px;
  977. left: 0;
  978. right: 0;
  979. margin: 0 auto;
  980. }
  981. &:nth-child(8) {
  982. left: 27%;
  983. top: -200px;
  984. }
  985. &:nth-child(9) {
  986. z-index: -2;
  987. top: 40px;
  988. left: 80px;
  989. right: 0;
  990. margin: 0 auto;
  991. }
  992. &:nth-child(10) {
  993. display: none;
  994. }
  995. }
  996. &.single-hosting-banner-image {
  997. img {
  998. display: block;
  999. position: relative;
  1000. top: 0 !important;
  1001. left: 0;
  1002. right: 0;
  1003. bottom: 0;
  1004. }
  1005. }
  1006. }
  1007. }
  1008. .shape1 {
  1009. position: absolute;
  1010. top: 20%;
  1011. z-index: -1;
  1012. left: 30px;
  1013. animation: rotate3d 4s linear infinite;
  1014. opacity: .4;
  1015. }
  1016. .shape2 {
  1017. position: absolute;
  1018. z-index: -1;
  1019. top: 60%;
  1020. left: 15%;
  1021. }
  1022. .shape3 {
  1023. position: absolute;
  1024. left: 25%;
  1025. bottom: 15%;
  1026. z-index: -1;
  1027. animation: animationFramesOne 15s infinite linear;
  1028. }
  1029. .shape4 {
  1030. position: absolute;
  1031. right: 25%;
  1032. bottom: 15%;
  1033. z-index: -1;
  1034. animation: animationFramesOne 20s infinite linear;
  1035. }
  1036. .shape5 {
  1037. position: absolute;
  1038. right: 5%;
  1039. top: 10%;
  1040. z-index: -1;
  1041. animation: movebounce 5s linear infinite;
  1042. opacity: .2;
  1043. }
  1044. .shape6 {
  1045. position: absolute;
  1046. z-index: -1;
  1047. top: 40%;
  1048. right: 10%;
  1049. }
  1050. .shape7 {
  1051. position: absolute;
  1052. left: 25%;
  1053. top: 15%;
  1054. z-index: -1;
  1055. animation: animationFramesOne 20s infinite linear;
  1056. }
  1057. .shape8 {
  1058. position: absolute;
  1059. z-index: -1;
  1060. top: 15%;
  1061. right: 10%;
  1062. }
  1063. @keyframes movebounce {
  1064. 0% {
  1065. transform: translateY(0px);
  1066. }
  1067. 50% {
  1068. transform: translateY(20px);
  1069. }
  1070. 100% {
  1071. transform: translateY(0px);
  1072. }
  1073. }
  1074. @keyframes moveleftbounce {
  1075. 0% {
  1076. transform: translateX(0px);
  1077. }
  1078. 50% {
  1079. transform: translateX(20px);
  1080. }
  1081. 100% {
  1082. transform: translateX(0px);
  1083. }
  1084. }
  1085. .rotateme {
  1086. animation-name: rotateme;
  1087. animation-duration: 20s;
  1088. animation-iteration-count: infinite;
  1089. animation-timing-function: linear;
  1090. }
  1091. @keyframes rotateme {
  1092. from {
  1093. transform: rotate(0deg);
  1094. }
  1095. to {
  1096. transform: rotate(360deg);
  1097. }
  1098. }
  1099. @keyframes rotate3d {
  1100. 0% {
  1101. -webkit-transform: rotateY(0deg);
  1102. transform: rotateY(0deg);
  1103. }
  1104. 100% {
  1105. -webkit-transform: rotateY(360deg);
  1106. transform: rotateY(360deg);
  1107. }
  1108. }
  1109. @keyframes animationFramesOne {
  1110. 0% {
  1111. -webkit-transform: translate(0px,0px) rotate(0deg);
  1112. }
  1113. 20% {
  1114. -webkit-transform: translate(73px,-1px) rotate(36deg);
  1115. }
  1116. 40% {
  1117. -webkit-transform: translate(141px,72px) rotate(72deg);
  1118. }
  1119. 60% {
  1120. -webkit-transform: translate(83px,122px) rotate(108deg);
  1121. }
  1122. 80% {
  1123. -webkit-transform: translate(-40px,72px) rotate(144deg);
  1124. }
  1125. 100% {
  1126. -webkit-transform: translate(0px,0px) rotate(0deg);
  1127. }
  1128. }
  1129. /*================================================
  1130. Boxes CSS
  1131. =================================================*/
  1132. .boxes-area {
  1133. position: relative;
  1134. padding-bottom: 80px;
  1135. margin-top: -130px;
  1136. z-index: 1;
  1137. }
  1138. .hosting-boxes-area {
  1139. background-color: $hosting-main-color;
  1140. margin-top: 0;
  1141. .single-box {
  1142. padding: {
  1143. left: 15px;
  1144. right: 15px;
  1145. }
  1146. }
  1147. }
  1148. .single-box {
  1149. border: 1px dashed #cdf1d8;
  1150. padding: 30px 20px;
  1151. position: relative;
  1152. z-index: 1;
  1153. border-radius: 5px;
  1154. background: $white-color;
  1155. box-shadow: 0 0 10px rgba(72, 69, 224, 0.1);
  1156. transition: $transition;
  1157. .icon {
  1158. display: inline-block;
  1159. text-align: center;
  1160. width: 55px;
  1161. height: 55px;
  1162. line-height: 55px;
  1163. background: #cdf1d8;
  1164. border-radius: 50%;
  1165. color: $light-green-color;
  1166. transition: $transition;
  1167. }
  1168. h3 {
  1169. font-size: 18px;
  1170. margin: {
  1171. top: 25px;
  1172. bottom: 15px;
  1173. }
  1174. transition: $transition;
  1175. a {
  1176. &:hover {
  1177. text-decoration: underline;
  1178. }
  1179. }
  1180. }
  1181. &::before {
  1182. content: '';
  1183. position: absolute;
  1184. left: 0;
  1185. top: 0;
  1186. width: 100%;
  1187. border-radius: 5px;
  1188. height: 100%;
  1189. background: $gradient-color;
  1190. z-index: -1;
  1191. opacity: 0;
  1192. visibility: hidden;
  1193. transition: $transition;
  1194. }
  1195. p {
  1196. transition: $transition;
  1197. }
  1198. &.bg-f78acb {
  1199. border-color: rgba(247, 138, 203, .3);
  1200. .icon {
  1201. color: #f78acb;
  1202. background: rgba(247, 138, 203, .3);
  1203. }
  1204. }
  1205. &.bg-c679e3 {
  1206. border-color: #edc3fc;
  1207. .icon {
  1208. color: $purple-color;
  1209. background: #edc3fc;
  1210. }
  1211. }
  1212. &.bg-eb6b3d {
  1213. border-color: rgba(235, 107, 61, .3);
  1214. .icon {
  1215. color: #eb6b3d;
  1216. background: rgba(235, 107, 61, .3);
  1217. }
  1218. }
  1219. &:hover {
  1220. transform: translateY(-9px);
  1221. border-color: transparent;
  1222. &::before {
  1223. opacity: 1;
  1224. visibility: visible;
  1225. }
  1226. .icon {
  1227. background: $white-color;
  1228. color: $light-green-color;
  1229. }
  1230. h3, p, a {
  1231. color: $white-color;
  1232. }
  1233. &.bg-f78acb {
  1234. .icon {
  1235. color: #f78acb;
  1236. }
  1237. }
  1238. &.bg-c679e3 {
  1239. .icon {
  1240. color: $purple-color;
  1241. }
  1242. }
  1243. &.bg-eb6b3d {
  1244. .icon {
  1245. color: #eb6b3d;
  1246. }
  1247. }
  1248. }
  1249. }
  1250. /*================================================
  1251. About CSS
  1252. =================================================*/
  1253. .about-content {
  1254. .section-title {
  1255. text-align: left;
  1256. margin-bottom: 18px;
  1257. .bar {
  1258. margin: {
  1259. right: 0;
  1260. left: 0;
  1261. }
  1262. }
  1263. p {
  1264. margin: 0;
  1265. }
  1266. }
  1267. }
  1268. .about-inner-area {
  1269. margin-top: 60px;
  1270. .about-text {
  1271. h3 {
  1272. font-size: 18px;
  1273. margin-bottom: 15px;
  1274. }
  1275. }
  1276. }
  1277. /*================================================
  1278. Why Choose US CSS
  1279. =================================================*/
  1280. .why-choose-us {
  1281. background: transparent url(/images/banner-bg1.jpg) right top no-repeat;
  1282. position: relative;
  1283. z-index: 1;
  1284. .section-title {
  1285. text-align: left;
  1286. .bar {
  1287. margin: {
  1288. left: 0;
  1289. right: 0;
  1290. }
  1291. }
  1292. p {
  1293. margin: {
  1294. left: 0;
  1295. right: 0;
  1296. }
  1297. }
  1298. }
  1299. }
  1300. .why-choose-us-image {
  1301. position: relative;
  1302. text-align: center;
  1303. .main-pic {
  1304. display: none;
  1305. }
  1306. img {
  1307. &:nth-child(1) {
  1308. position: relative;
  1309. left: -20px;
  1310. }
  1311. &:nth-child(3) {
  1312. position: absolute;
  1313. top: -55px;
  1314. right: 0;
  1315. left: 0;
  1316. margin: 0 auto;
  1317. z-index: -1;
  1318. }
  1319. }
  1320. &.single-why-choose-us-image {
  1321. img {
  1322. display: block;
  1323. position: relative;
  1324. left: 0;
  1325. right: 0;
  1326. bottom: 0;
  1327. }
  1328. }
  1329. }
  1330. .col-lg-6 {
  1331. .col-lg-6 {
  1332. &:nth-child(1) {
  1333. .single-why-choose-us {
  1334. margin-top: 60px;
  1335. }
  1336. }
  1337. &:nth-child(2) {
  1338. .single-why-choose-us {
  1339. margin-top: 0;
  1340. }
  1341. }
  1342. &:nth-child(4) {
  1343. .single-why-choose-us {
  1344. margin-top: -30px;
  1345. }
  1346. }
  1347. }
  1348. }
  1349. .single-why-choose-us {
  1350. padding: 30px 15px;
  1351. border-radius: 5px;
  1352. text-align: center;
  1353. background: $white-color;
  1354. box-shadow: 0 0 30px rgba(56, 46, 46, 0.1);
  1355. transition: $transition;
  1356. margin-top: 30px;
  1357. .icon {
  1358. color: $light-green-color;
  1359. transition: $transition;
  1360. i {
  1361. &::before {
  1362. font-size: 45px;
  1363. }
  1364. }
  1365. }
  1366. h3 {
  1367. font-size: 18px;
  1368. margin: {
  1369. top: 15px;
  1370. bottom: 15px;
  1371. }
  1372. transition: $transition;
  1373. }
  1374. &::before {
  1375. content: '';
  1376. position: absolute;
  1377. left: 0;
  1378. top: 0;
  1379. width: 100%;
  1380. border-radius: 5px;
  1381. height: 100%;
  1382. background: $gradient-color;
  1383. z-index: -1;
  1384. opacity: 0;
  1385. visibility: hidden;
  1386. transition: $transition;
  1387. }
  1388. p {
  1389. transition: $transition;
  1390. }
  1391. &:hover {
  1392. transform: translateY(-9px);
  1393. border-color: transparent;
  1394. &::before {
  1395. opacity: 1;
  1396. visibility: visible;
  1397. }
  1398. .icon {
  1399. color: $white-color;
  1400. }
  1401. h3, p {
  1402. color: $white-color;
  1403. }
  1404. }
  1405. }
  1406. /*================================================
  1407. Services CSS
  1408. =================================================*/
  1409. .services-area {
  1410. overflow: hidden;
  1411. }
  1412. .services-content {
  1413. .section-title {
  1414. text-align: left;
  1415. margin-bottom: 20px;
  1416. .bar {
  1417. margin: {
  1418. left: 0;
  1419. right: 0;
  1420. }
  1421. }
  1422. p {
  1423. margin: 0;
  1424. }
  1425. }
  1426. .row {
  1427. margin: {
  1428. left: -8px;
  1429. right: -8px;
  1430. }
  1431. .col-lg-6 {
  1432. padding: {
  1433. left: 8px;
  1434. right: 8px;
  1435. }
  1436. }
  1437. }
  1438. .box {
  1439. position: relative;
  1440. z-index: 1;
  1441. display: block;
  1442. padding: 15px 12px 15px 45px;
  1443. color: #6084a4;
  1444. font-weight: 500;
  1445. border-radius: 3px;
  1446. background-color: $white-color;
  1447. transition: $transition;
  1448. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  1449. margin: {
  1450. top: 20px;
  1451. }
  1452. &::before {
  1453. content: '';
  1454. left: 0;
  1455. top: 0;
  1456. height: 100%;
  1457. width: 100%;
  1458. background: $gradient-color;
  1459. opacity: 0;
  1460. visibility: hidden;
  1461. position: absolute;
  1462. border-radius: 3px;
  1463. z-index: -1;
  1464. transition: $transition;
  1465. }
  1466. svg {
  1467. margin-right: 5px;
  1468. display: inline-block;
  1469. color: $light-green-color;
  1470. transition: $transition;
  1471. width: 18px;
  1472. position: absolute;
  1473. left: 15px;
  1474. top: 12px;
  1475. }
  1476. &:hover {
  1477. color: $white-color;
  1478. transform: translateY(-5px);
  1479. &::before {
  1480. opacity: 1;
  1481. visibility: visible;
  1482. }
  1483. svg {
  1484. color: $white-color;
  1485. }
  1486. }
  1487. }
  1488. }
  1489. .services-right-image {
  1490. position: relative;
  1491. img {
  1492. position: absolute;
  1493. &:nth-child(1) {
  1494. left: 22%;
  1495. top: -85px;
  1496. z-index: 1;
  1497. }
  1498. &:nth-child(2) {
  1499. left: 0;
  1500. right: 0;
  1501. text-align: center;
  1502. margin: 0 auto;
  1503. top: -52px;
  1504. }
  1505. &:nth-child(3) {
  1506. left: 44%;
  1507. top: -33px;
  1508. z-index: 1;
  1509. }
  1510. &:nth-child(4) {
  1511. right: 38%;
  1512. z-index: 1;
  1513. top: -220px;
  1514. }
  1515. &:nth-child(5) {
  1516. z-index: 1;
  1517. right: 24%;
  1518. top: 8px;
  1519. }
  1520. &:nth-child(6) {
  1521. left: 29%;
  1522. top: 0;
  1523. z-index: 1;
  1524. }
  1525. &:nth-child(7) {
  1526. right: 44%;
  1527. top: -78px;
  1528. z-index: 1;
  1529. }
  1530. &:nth-child(8) {
  1531. right: 30%;
  1532. top: -134px;
  1533. z-index: 1;
  1534. }
  1535. &:nth-child(9) {
  1536. right: 31%;
  1537. top: -21px;
  1538. z-index: 1;
  1539. }
  1540. &:nth-child(10) {
  1541. right: 24%;
  1542. top: -80px;
  1543. }
  1544. &:nth-child(11) {
  1545. left: 27%;
  1546. top: -60px;
  1547. z-index: 2;
  1548. }
  1549. &:nth-child(12) {
  1550. right: 28%;
  1551. z-index: 1;
  1552. top: -54px;
  1553. }
  1554. &:nth-child(13) {
  1555. left: 31%;
  1556. top: -105px;
  1557. z-index: 1;
  1558. }
  1559. &.bg-image {
  1560. top: -262px;
  1561. left: 0;
  1562. right: 0;
  1563. margin: 0 auto;
  1564. text-align: center;
  1565. }
  1566. &:last-child {
  1567. display: none;
  1568. }
  1569. }
  1570. &.single-right-image {
  1571. img {
  1572. display: block;
  1573. &:first-child {
  1574. top: -60px;
  1575. }
  1576. &:last-child {
  1577. position: relative;
  1578. left: 0;
  1579. top: 0;
  1580. }
  1581. }
  1582. }
  1583. }
  1584. .services-left-image {
  1585. position: relative;
  1586. img {
  1587. position: absolute;
  1588. &:nth-child(1) {
  1589. left: 15%;
  1590. top: -98px;
  1591. }
  1592. &:nth-child(2) {
  1593. left: 0;
  1594. top: -200px;
  1595. right: 0;
  1596. text-align: center;
  1597. margin: 0 auto;
  1598. }
  1599. &:nth-child(3) {
  1600. left: 36%;
  1601. z-index: 12;
  1602. top: -55px;
  1603. }
  1604. &:nth-child(4) {
  1605. left: 55px;
  1606. top: -38px;
  1607. z-index: 1;
  1608. }
  1609. &:nth-child(5) {
  1610. z-index: 3;
  1611. right: 26%;
  1612. top: -66px;
  1613. }
  1614. &:nth-child(6) {
  1615. right: 19%;
  1616. top: -41px;
  1617. z-index: 2;
  1618. }
  1619. &:nth-child(7) {
  1620. right: 97px;
  1621. top: 40px;
  1622. z-index: 1;
  1623. }
  1624. &:nth-child(8) {
  1625. right: 23%;
  1626. top: -175px;
  1627. z-index: 2;
  1628. }
  1629. &.bg-image {
  1630. top: -262px;
  1631. left: 0;
  1632. right: 0;
  1633. margin: 0 auto;
  1634. text-align: center;
  1635. }
  1636. &:last-child {
  1637. display: none;
  1638. }
  1639. }
  1640. &.single-left-image {
  1641. img {
  1642. display: block;
  1643. &:first-child {
  1644. top: -60px;
  1645. }
  1646. &:last-child {
  1647. position: relative;
  1648. left: 0;
  1649. top: 0;
  1650. }
  1651. }
  1652. }
  1653. }
  1654. .single-services-box {
  1655. position: relative;
  1656. background: $white-color;
  1657. padding: {
  1658. left: 25px;
  1659. top: 30px;
  1660. right: 25px;
  1661. bottom: 30px;
  1662. }
  1663. margin-bottom: 30px;
  1664. border-radius: 5px;
  1665. transition: $transition;
  1666. h3 {
  1667. font-size: 18px;
  1668. margin: {
  1669. top: 25px;
  1670. bottom: 15px;
  1671. }
  1672. }
  1673. .icon {
  1674. text-align: center;
  1675. width: 55px;
  1676. height: 55px;
  1677. line-height: 55px;
  1678. background: #cdf1d8;
  1679. border-radius: 50%;
  1680. color: $light-green-color;
  1681. transition: $transition;
  1682. &.bg-c679e3 {
  1683. color: $purple-color;
  1684. background: #edc3fc;
  1685. }
  1686. &.bg-eb6b3d {
  1687. color: #eb6b3d;
  1688. background: rgba(235, 107, 61, .3);
  1689. }
  1690. }
  1691. &::before, &::after {
  1692. content: '';
  1693. position: absolute;
  1694. width: 0;
  1695. height: 4px;
  1696. background: $light-green-color;
  1697. opacity: 0;
  1698. visibility: hidden;
  1699. bottom: 0;
  1700. transition: $transition;
  1701. }
  1702. &::before {
  1703. left: 0;
  1704. }
  1705. &::after {
  1706. right: 0;
  1707. }
  1708. &:hover {
  1709. transform: translateY(-10px);
  1710. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  1711. .icon {
  1712. background: $light-green-color;
  1713. color: $white-color;
  1714. &.bg-c679e3 {
  1715. background: $purple-color;
  1716. }
  1717. &.bg-eb6b3d {
  1718. background: #eb6b3d;
  1719. }
  1720. }
  1721. &::after, &::before {
  1722. opacity: 1;
  1723. visibility: visible;
  1724. width: 50%;
  1725. }
  1726. }
  1727. }
  1728. /*=============================
  1729. Bigdata Services CSS
  1730. ===============================*/
  1731. .single-services-box-item {
  1732. background-color: $white-color;
  1733. position: relative;
  1734. z-index: 1;
  1735. overflow: hidden;
  1736. transition: $transition;
  1737. padding: 90px 35px 70px;
  1738. -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0% 100%);
  1739. clip-path: polygon(0 10%, 100% 0, 100% 90%, 0% 100%);
  1740. .icon {
  1741. width: 90px;
  1742. height: 90px;
  1743. text-align: center;
  1744. position: relative;
  1745. background-color: #80c54d;
  1746. border-radius: 5px;
  1747. text-align: center;
  1748. margin-bottom: 25px;
  1749. img {
  1750. position: absolute;
  1751. left: 0;
  1752. right: 0;
  1753. top: 50%;
  1754. transform: translateY(-50%);
  1755. margin: auto;
  1756. }
  1757. }
  1758. h3 {
  1759. margin-bottom: 12px;
  1760. font: {
  1761. size: 20px;
  1762. weight: 600;
  1763. };
  1764. a {
  1765. display: inline-block;
  1766. }
  1767. }
  1768. .shape {
  1769. position: absolute;
  1770. right: 0;
  1771. top: -15px;
  1772. z-index: -1;
  1773. }
  1774. .learn-more-btn {
  1775. color: $light-green-color;
  1776. font-weight: 500;
  1777. display: inline-block;
  1778. margin-top: 5px;
  1779. position: relative;
  1780. padding-left: 28px;
  1781. svg {
  1782. position: absolute;
  1783. left: 0;
  1784. top: -2px;
  1785. transition: $transition;
  1786. }
  1787. &:hover {
  1788. color: $black-color;
  1789. padding: {
  1790. left: 0;
  1791. right: 5px;
  1792. };
  1793. svg {
  1794. left: 100%;
  1795. color: $light-green-color;
  1796. }
  1797. }
  1798. }
  1799. &:hover {
  1800. transform: translateY(-10px);
  1801. }
  1802. }
  1803. .col-lg-4 {
  1804. &:nth-child(2) {
  1805. .single-services-box-item {
  1806. .icon {
  1807. background-color: #4267d1;
  1808. }
  1809. }
  1810. }
  1811. &:nth-child(3) {
  1812. .single-services-box-item {
  1813. .icon {
  1814. background-color: #ca8220;
  1815. }
  1816. }
  1817. }
  1818. &:nth-child(4) {
  1819. .single-services-box-item {
  1820. .icon {
  1821. background-color: #b92fb1;
  1822. }
  1823. }
  1824. }
  1825. &:nth-child(5) {
  1826. .single-services-box-item {
  1827. .icon {
  1828. background-color: #de6742;
  1829. }
  1830. }
  1831. }
  1832. &:nth-child(6) {
  1833. .single-services-box-item {
  1834. .icon {
  1835. background-color: #59eed0;
  1836. }
  1837. }
  1838. }
  1839. }
  1840. /*================================================
  1841. Services Details CSS
  1842. =================================================*/
  1843. .services-details-desc {
  1844. h3 {
  1845. font-size: 22px;
  1846. margin-bottom: 15px;
  1847. }
  1848. .services-details-accordion {
  1849. .accordion {
  1850. list-style-type: none;
  1851. padding: 0;
  1852. margin: 25px 0 0;
  1853. border: none;
  1854. .accordion__item {
  1855. box-shadow: 0 0 1.25rem rgba(108, 118, 134, 0.1);
  1856. background: $white-color;
  1857. margin-bottom: 10px;
  1858. border: none;
  1859. &:last-child {
  1860. margin-bottom: 0;
  1861. }
  1862. }
  1863. .accordion__button {
  1864. display: block;
  1865. padding: 15px 20px;
  1866. text-decoration: none;
  1867. color: $black-color;
  1868. position: relative;
  1869. background-color: #fff;
  1870. font: {
  1871. size: 15px;
  1872. weight: 500;
  1873. }
  1874. i {
  1875. position: absolute;
  1876. left: 0;
  1877. top: 0;
  1878. width: 40px;
  1879. text-align: center;
  1880. height: 100%;
  1881. background: $light-green-color;
  1882. color: $white-color;
  1883. &::before {
  1884. position: absolute;
  1885. left: 0;
  1886. top: 50%;
  1887. right: 0;
  1888. transform: translateY(-50%);
  1889. font-size: 15px;
  1890. }
  1891. }
  1892. &.active {
  1893. border-bottom-color: #e1e1e1;
  1894. i {
  1895. &::before {
  1896. content: "\f10f";
  1897. }
  1898. }
  1899. }
  1900. }
  1901. .accordion__panel {
  1902. padding: 15px 15px;
  1903. border-top: 1px solid #e1e1e1;
  1904. }
  1905. }
  1906. }
  1907. }
  1908. .services-details-area {
  1909. .separate {
  1910. margin-top: 80px;
  1911. }
  1912. }
  1913. .services-details-image {
  1914. text-align: center;
  1915. }
  1916. /*================================================
  1917. Features CSS
  1918. =================================================*/
  1919. .features-area-two {
  1920. overflow: hidden;
  1921. }
  1922. .single-features {
  1923. position: relative;
  1924. background: $white-color;
  1925. padding: {
  1926. left: 95px;
  1927. top: 30px;
  1928. right: 20px;
  1929. bottom: 30px;
  1930. }
  1931. margin-bottom: 30px;
  1932. border-radius: 5px;
  1933. transition: $transition;
  1934. h3 {
  1935. font-size: 18px;
  1936. margin-bottom: 10px;
  1937. }
  1938. .icon {
  1939. position: absolute;
  1940. text-align: center;
  1941. width: 55px;
  1942. height: 55px;
  1943. line-height: 55px;
  1944. background: #cdf1d8;
  1945. border-radius: 50%;
  1946. color: $light-green-color;
  1947. left: 20px;
  1948. top: 30px;
  1949. transition: $transition;
  1950. &.bg-c679e3 {
  1951. color: $purple-color;
  1952. background: #edc3fc;
  1953. }
  1954. &.bg-eb6b3d {
  1955. color: #eb6b3d;
  1956. background: rgba(235, 107, 61, .3);
  1957. }
  1958. }
  1959. &:hover {
  1960. transform: translateY(-10px);
  1961. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  1962. .icon {
  1963. background: $light-green-color;
  1964. color: $white-color;
  1965. &.bg-c679e3 {
  1966. background: $purple-color;
  1967. }
  1968. &.bg-eb6b3d {
  1969. background: #eb6b3d;
  1970. }
  1971. }
  1972. }
  1973. }
  1974. .single-hosting-features {
  1975. position: relative;
  1976. background: $white-color;
  1977. text-align: center;
  1978. padding: {
  1979. left: 20px;
  1980. top: 30px;
  1981. right: 20px;
  1982. bottom: 30px;
  1983. }
  1984. margin-bottom: 30px;
  1985. border-radius: 5px;
  1986. transition: $transition;
  1987. h3 {
  1988. font-size: 18px;
  1989. margin: {
  1990. top: 25px;
  1991. bottom: 15px;
  1992. }
  1993. }
  1994. .icon {
  1995. text-align: center;
  1996. width: 55px;
  1997. height: 55px;
  1998. line-height: 55px;
  1999. background: #cdf1d8;
  2000. display: inline-block;
  2001. border-radius: 50%;
  2002. color: $light-green-color;
  2003. transition: $transition;
  2004. &.bg-c679e3 {
  2005. color: $purple-color;
  2006. background: #edc3fc;
  2007. }
  2008. &.bg-eb6b3d {
  2009. color: #eb6b3d;
  2010. background: rgba(235, 107, 61, .3);
  2011. }
  2012. }
  2013. &::before, &::after {
  2014. content: '';
  2015. position: absolute;
  2016. width: 0;
  2017. height: 4px;
  2018. background: $light-green-color;
  2019. opacity: 0;
  2020. visibility: hidden;
  2021. bottom: 0;
  2022. transition: $transition;
  2023. }
  2024. &::before {
  2025. left: 0;
  2026. }
  2027. &::after {
  2028. right: 0;
  2029. }
  2030. &:hover {
  2031. transform: translateY(-10px);
  2032. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  2033. .icon {
  2034. background: $light-green-color;
  2035. color: $white-color;
  2036. &.bg-c679e3 {
  2037. background: $purple-color;
  2038. }
  2039. &.bg-eb6b3d {
  2040. background: #eb6b3d;
  2041. }
  2042. }
  2043. &::after, &::before {
  2044. opacity: 1;
  2045. visibility: visible;
  2046. width: 50%;
  2047. }
  2048. }
  2049. }
  2050. /*================================================
  2051. Features Details CSS
  2052. =================================================*/
  2053. .features-details-desc {
  2054. h3 {
  2055. font-size: 22px;
  2056. margin-bottom: 13px;
  2057. }
  2058. .features-details-list {
  2059. padding: 0;
  2060. margin: 20px 0 0;
  2061. list-style-type: none;
  2062. li {
  2063. margin-bottom: 12px;
  2064. color: $paragraph-color;
  2065. position: relative;
  2066. padding-left: 15px;
  2067. &::before {
  2068. background: $light-green-color;
  2069. width: 8px;
  2070. height: 8px;
  2071. left: 0;
  2072. top: 6px;
  2073. position: absolute;
  2074. content: '';
  2075. }
  2076. &:last-child {
  2077. margin-bottom: 0;
  2078. }
  2079. }
  2080. }
  2081. .features-details-accordion {
  2082. .accordion {
  2083. list-style-type: none;
  2084. padding: 0;
  2085. margin: 25px 0 0;
  2086. border: none;
  2087. .accordion__item {
  2088. box-shadow: 0 0 1.25rem rgba(108, 118, 134, 0.1);
  2089. background: $white-color;
  2090. margin-bottom: 10px;
  2091. border: none;
  2092. &:last-child {
  2093. margin-bottom: 0;
  2094. }
  2095. }
  2096. .accordion__button {
  2097. display: block;
  2098. padding: 15px 20px;
  2099. text-decoration: none;
  2100. color: $black-color;
  2101. position: relative;
  2102. background-color: #fff;
  2103. font: {
  2104. size: 15px;
  2105. weight: 500;
  2106. }
  2107. i {
  2108. position: absolute;
  2109. left: 0;
  2110. top: 0;
  2111. width: 40px;
  2112. text-align: center;
  2113. height: 100%;
  2114. background: $light-green-color;
  2115. color: $white-color;
  2116. &::before {
  2117. position: absolute;
  2118. left: 0;
  2119. top: 50%;
  2120. right: 0;
  2121. transform: translateY(-50%);
  2122. font-size: 15px;
  2123. }
  2124. }
  2125. &.active {
  2126. border-bottom-color: #e1e1e1;
  2127. i {
  2128. &::before {
  2129. content: "\f10f";
  2130. }
  2131. }
  2132. }
  2133. }
  2134. .accordion__panel {
  2135. padding: 15px 15px;
  2136. border-top: 1px solid #e1e1e1;
  2137. }
  2138. }
  2139. }
  2140. }
  2141. .features-details-area {
  2142. .separate {
  2143. margin-top: 80px;
  2144. }
  2145. }
  2146. .features-details-image {
  2147. text-align: center;
  2148. }
  2149. /*================================================
  2150. Team CSS
  2151. =================================================*/
  2152. .single-team {
  2153. background: $white-color;
  2154. padding: {
  2155. top: 35px;
  2156. bottom: 35px;
  2157. }
  2158. margin-bottom: 30px;
  2159. transition: $transition;
  2160. z-index: 1;
  2161. text-align: center;
  2162. .team-image {
  2163. position: relative;
  2164. z-index: 1;
  2165. padding: {
  2166. left: 35px;
  2167. right: 35px;
  2168. }
  2169. img {
  2170. border: 3px solid #cdf1d8;
  2171. width: auto !important;
  2172. border-radius: 50%;
  2173. display: inline-block !important;
  2174. transition: $transition;
  2175. }
  2176. &::before {
  2177. content: '';
  2178. position: absolute;
  2179. left: 0;
  2180. top: 50%;
  2181. background: $bg-color2;
  2182. height: 10px;
  2183. width: 100%;
  2184. z-index: -1;
  2185. transition: $transition;
  2186. }
  2187. }
  2188. .team-content {
  2189. padding: {
  2190. left: 35px;
  2191. right: 35px;
  2192. }
  2193. ul {
  2194. padding: 0;
  2195. margin: 0;
  2196. list-style-type: none;
  2197. li {
  2198. display: inline-block;
  2199. margin: 0 5px;
  2200. a {
  2201. color: $purple-color;
  2202. &:hover {
  2203. transform: translateY(-5px);
  2204. color: $light-green-color;
  2205. }
  2206. svg {
  2207. width: 19px;
  2208. }
  2209. }
  2210. }
  2211. }
  2212. p {
  2213. margin: {
  2214. top: 15px;
  2215. bottom: 0;
  2216. }
  2217. }
  2218. }
  2219. .team-info {
  2220. background: $gradient-color;
  2221. padding: 10px 15px;
  2222. border-radius: 75px;
  2223. margin: {
  2224. bottom: 25px;
  2225. left: 10px;
  2226. right: 10px;
  2227. top: 25px;
  2228. }
  2229. transition: $transition;
  2230. h3 {
  2231. font-size: 18px;
  2232. margin-bottom: 5px;
  2233. color: $white-color;
  2234. }
  2235. span {
  2236. color: $white-color;
  2237. font-size: 13px;
  2238. }
  2239. }
  2240. &:hover {
  2241. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  2242. .team-image {
  2243. &::before {
  2244. height: 0;
  2245. }
  2246. img {
  2247. border-color: $light-green-color;
  2248. }
  2249. }
  2250. .team-info {
  2251. margin: {
  2252. left: 0;
  2253. right: 0;
  2254. }
  2255. border-radius: 0;
  2256. }
  2257. }
  2258. }
  2259. /*================================================
  2260. Works CSS
  2261. =================================================*/
  2262. .works-area {
  2263. position: relative;
  2264. z-index: 1;
  2265. }
  2266. .single-works {
  2267. position: relative;
  2268. margin-bottom: 30px;
  2269. &::before {
  2270. content: '';
  2271. position: absolute;
  2272. left: 0;
  2273. top: 0;
  2274. width: 100%;
  2275. height: 100%;
  2276. background: $gradient-color;
  2277. transition: $transition;
  2278. opacity: 0;
  2279. visibility: hidden;
  2280. }
  2281. .icon {
  2282. position: absolute;
  2283. border-radius: 50%;
  2284. top: 0;
  2285. right: 25px;
  2286. background: $white-color;
  2287. width: 45px;
  2288. text-align: center;
  2289. height: 45px;
  2290. line-height: 42px;
  2291. opacity: 0;
  2292. transition: $transition;
  2293. visibility: hidden;
  2294. svg {
  2295. width: 19px;
  2296. }
  2297. &:hover {
  2298. background: $black-color;
  2299. color: $white-color;
  2300. }
  2301. }
  2302. .works-content {
  2303. position: absolute;
  2304. bottom: -60px;
  2305. left: 0;
  2306. padding: 20px;
  2307. transition: $transition;
  2308. opacity: 0;
  2309. visibility: hidden;
  2310. h3 {
  2311. font-size: 18px;
  2312. margin-bottom: 15px;
  2313. a {
  2314. color: $white-color;
  2315. &:hover {
  2316. text-decoration: underline;
  2317. }
  2318. }
  2319. }
  2320. p {
  2321. color: $white-color;
  2322. }
  2323. }
  2324. &:hover {
  2325. &::before {
  2326. opacity: .9;
  2327. visibility: visible;
  2328. z-index: 1;
  2329. }
  2330. .icon {
  2331. opacity: 1;
  2332. visibility: visible;
  2333. top: 25px;
  2334. z-index: 5;
  2335. }
  2336. .works-content {
  2337. opacity: 1;
  2338. visibility: visible;
  2339. bottom: 0;
  2340. z-index: 5;
  2341. }
  2342. }
  2343. }
  2344. /*================================================
  2345. Fun Facts CSS
  2346. =================================================*/
  2347. .funfacts-area {
  2348. position: relative;
  2349. z-index: 1;
  2350. .section-title {
  2351. h2 {
  2352. max-width: 570px;
  2353. margin: 0 auto;
  2354. line-height: 37px;
  2355. }
  2356. }
  2357. .map-bg {
  2358. position: absolute;
  2359. z-index: -1;
  2360. top: 120px;
  2361. left: 0;
  2362. right: 0;
  2363. text-align: center;
  2364. margin: 0 auto;
  2365. }
  2366. }
  2367. .funfact {
  2368. text-align: center;
  2369. h3 {
  2370. color: $light-green-color;
  2371. font-size: 32px;
  2372. margin-bottom: 7px;
  2373. }
  2374. p {
  2375. line-height: initial;
  2376. }
  2377. }
  2378. .contact-cta-box {
  2379. margin: 80px auto 0;
  2380. max-width: 700px;
  2381. border: 1px dashed #ebebeb;
  2382. padding: 30px 210px 30px 30px;
  2383. border-radius: 5px;
  2384. position: relative;
  2385. h3 {
  2386. font-size: 20px;
  2387. margin-bottom: 6px;
  2388. }
  2389. p {
  2390. margin-bottom: 0;
  2391. }
  2392. .btn {
  2393. position: absolute;
  2394. right: 30px;
  2395. top: 50%;
  2396. margin-top: -27px;
  2397. &::before, &::after {
  2398. background: $light-green-color;
  2399. }
  2400. }
  2401. .btn-primary {
  2402. background: $purple-color;
  2403. box-shadow: 0 13px 27px 0 rgba(198, 121, 227, 0.25);
  2404. &:hover, &:focus {
  2405. box-shadow: 0 13px 27px 0 rgba(68, 206, 111, 0.25);
  2406. }
  2407. }
  2408. }
  2409. .funfacts-area {
  2410. &.bg-image {
  2411. position: relative;
  2412. z-index: 1;
  2413. background: {
  2414. image: url(/images/bigdata-analytics/funfacts-bg.jpg);
  2415. position: center center;
  2416. size: cover;
  2417. repeat: no-repeat;
  2418. };
  2419. &::before {
  2420. content: '';
  2421. position: absolute;
  2422. left: 0;
  2423. right: 0;
  2424. top: 0;
  2425. bottom: 0;
  2426. z-index: -1;
  2427. background-color: #011f43;
  2428. opacity: 0.86;
  2429. }
  2430. .section-title {
  2431. h2 {
  2432. color: $white-color;
  2433. }
  2434. p {
  2435. color: $white-color;
  2436. }
  2437. }
  2438. .contact-cta-box {
  2439. border-color: #406883;
  2440. h3 {
  2441. color: $white-color;
  2442. }
  2443. p {
  2444. color: $white-color;
  2445. }
  2446. }
  2447. }
  2448. }
  2449. .single-funfact {
  2450. text-align: center;
  2451. background-color: rgba(0, 0, 0, .20);
  2452. padding: 30px;
  2453. border-radius: 5px;
  2454. h3 {
  2455. color: $light-green-color;
  2456. font-size: 32px;
  2457. margin-bottom: 7px;
  2458. }
  2459. p {
  2460. line-height: initial;
  2461. color: $white-color;
  2462. }
  2463. }
  2464. /*==========================================
  2465. Pricing CSS
  2466. ===========================================*/
  2467. .pricing-area {
  2468. position: relative;
  2469. z-index: 1;
  2470. }
  2471. .pricing-table {
  2472. text-align: center;
  2473. background: $white-color;
  2474. box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.06);
  2475. border-radius: 5px;
  2476. padding-bottom: 35px;
  2477. transition: $transition;
  2478. margin-bottom: 30px;
  2479. .pricing-header {
  2480. background: $white-color;
  2481. position: relative;
  2482. padding: 30px 20px;
  2483. border: {
  2484. radius: 5px 5px 0 0;
  2485. bottom: 1px solid #eeeeee;
  2486. }
  2487. transition: $transition;
  2488. margin-bottom: 30px;
  2489. z-index: 1;
  2490. &::before {
  2491. content: '';
  2492. position: absolute;
  2493. left: 0;
  2494. top: 0;
  2495. width: 100%;
  2496. height: 100%;
  2497. border-radius: 5px 5px 0 0;
  2498. background: $gradient-color;
  2499. opacity: 0;
  2500. visibility: hidden;
  2501. transition: $transition;
  2502. z-index: -1;
  2503. }
  2504. h3 {
  2505. font-size: 18px;
  2506. text-transform: uppercase;
  2507. transition: $transition;
  2508. margin-bottom: 0;
  2509. }
  2510. }
  2511. .price {
  2512. margin-bottom: 15px;
  2513. span {
  2514. color: $light-green-color;
  2515. font: {
  2516. size: 30px;
  2517. weight: 600;
  2518. }
  2519. sup {
  2520. font: {
  2521. weight: 500;
  2522. }
  2523. }
  2524. span {
  2525. font: {
  2526. size: 14px;
  2527. weight: 500;
  2528. }
  2529. }
  2530. }
  2531. }
  2532. .pricing-features {
  2533. ul {
  2534. padding: 0;
  2535. list-style-type: none;
  2536. margin-bottom: 30px;
  2537. li {
  2538. color: #b5b5b5;
  2539. margin-bottom: 12px;
  2540. text-decoration: line-through;
  2541. &:last-child {
  2542. margin-bottom: 0;
  2543. }
  2544. &.active {
  2545. color: $paragraph-color;
  2546. text-decoration: none;
  2547. }
  2548. }
  2549. }
  2550. }
  2551. &:hover {
  2552. transform: translateY(-10px);
  2553. .pricing-header {
  2554. &::before {
  2555. opacity: 1;
  2556. visibility: visible;
  2557. }
  2558. h3 {
  2559. color: $white-color;
  2560. }
  2561. }
  2562. }
  2563. &.active-plan {
  2564. .pricing-header {
  2565. &::before {
  2566. opacity: 1;
  2567. visibility: visible;
  2568. }
  2569. h3 {
  2570. color: $white-color;
  2571. }
  2572. }
  2573. .btn-primary {
  2574. background: $purple-color;
  2575. box-shadow: 0 13px 27px 0 rgba(198, 121, 227, 0.25);
  2576. &::after, &::before {
  2577. background: $light-green-color;
  2578. box-shadow: 0 13px 27px 0 rgba(68, 206, 111, 0.25);
  2579. }
  2580. }
  2581. }
  2582. }
  2583. .single-pricing-table {
  2584. text-align: center;
  2585. background: $white-color;
  2586. box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.06);
  2587. border-radius: 5px;
  2588. padding: 35px;
  2589. transition: $transition;
  2590. margin-bottom: 30px;
  2591. .pricing-header {
  2592. i {
  2593. transition: $transition;
  2594. &::before {
  2595. font-size: 45px;
  2596. }
  2597. }
  2598. h3 {
  2599. font: {
  2600. size: 18px;
  2601. weight: 500;
  2602. }
  2603. text-transform: uppercase;
  2604. margin: 15px 0 20px;
  2605. }
  2606. }
  2607. .price {
  2608. margin-bottom: 20px;
  2609. span {
  2610. color: $light-green-color;
  2611. font: {
  2612. size: 30px;
  2613. weight: 600;
  2614. }
  2615. sup {
  2616. font: {
  2617. weight: 500;
  2618. }
  2619. }
  2620. span {
  2621. font: {
  2622. size: 14px;
  2623. weight: 500;
  2624. }
  2625. }
  2626. }
  2627. }
  2628. .pricing-features {
  2629. ul {
  2630. padding: 0;
  2631. margin: 0 0 30px;
  2632. list-style-type: none;
  2633. li {
  2634. color: $paragraph-color;
  2635. margin-bottom: 12px;
  2636. &:last-child {
  2637. margin-bottom: 0;
  2638. }
  2639. svg {
  2640. width: 15px;
  2641. }
  2642. }
  2643. }
  2644. }
  2645. &.active-plan {
  2646. .btn-primary {
  2647. background: $purple-color;
  2648. box-shadow: 0 13px 27px 0 rgba(198, 121, 227, 0.25);
  2649. &::after, &::before {
  2650. background: $light-green-color;
  2651. box-shadow: 0 13px 27px 0 rgba(68, 206, 111, 0.25);
  2652. }
  2653. }
  2654. }
  2655. }
  2656. .tab {
  2657. .tabs_item {
  2658. display: none;
  2659. &:first-child {
  2660. display: block;
  2661. }
  2662. &:nth-child(2) {
  2663. .pricing-box {
  2664. background: linear-gradient(to right top, #fffcff, #fbfaff, #effbff, #e0fdff, #d5fefd);
  2665. }
  2666. }
  2667. }
  2668. }
  2669. .pricing-tab {
  2670. .tabs {
  2671. padding-left: 0;
  2672. margin-bottom: 45px;
  2673. list-style-type: none;
  2674. text-align: center;
  2675. li {
  2676. display: inline-block;
  2677. background: linear-gradient(to left bottom, #fffcff, #fbfaff, #effbff, #e0fdff, #d5fefd);
  2678. padding: 10px 30px 9.5px;
  2679. cursor: pointer;
  2680. margin: {
  2681. left: -2px;
  2682. right: -2px;
  2683. };
  2684. font: {
  2685. weight: 500;
  2686. size: 15px;
  2687. };
  2688. &:hover {
  2689. color: $black-color;
  2690. background: linear-gradient(to left bottom, #fffcff, #fbfaff, #effbff, #e0fdff, #d5fefd);
  2691. }
  2692. &.current {
  2693. color: $white-color;
  2694. background: $black-color;
  2695. }
  2696. &:nth-child(1) {
  2697. border-radius: 5px 0 0 5px;
  2698. &::before {
  2699. border-radius: 5px 0 0 5px;
  2700. }
  2701. }
  2702. &:nth-child(2) {
  2703. border-radius: 0 5px 5px 0;
  2704. &::before {
  2705. border-radius: 0 5px 5px 0;
  2706. }
  2707. }
  2708. }
  2709. }
  2710. }
  2711. .pricing-box {
  2712. background: linear-gradient(to left bottom, #fffcff, #fbfaff, #effbff, #e0fdff, #d5fefd);
  2713. text-align: center;
  2714. padding: 30px;
  2715. transition: $transition;
  2716. border-radius: 5px;
  2717. margin-bottom: 30px;
  2718. .pricing-header {
  2719. h3 {
  2720. margin-bottom: 0;
  2721. font: {
  2722. size: 20px;
  2723. }
  2724. }
  2725. p {
  2726. transition: $transition;
  2727. line-height: 1.6;
  2728. margin: {
  2729. top: 10px;
  2730. bottom: 0;
  2731. }
  2732. }
  2733. }
  2734. .price {
  2735. font: {
  2736. size: 35px;
  2737. weight: 600;
  2738. }
  2739. margin: {
  2740. bottom: 15px;
  2741. top: 20px;
  2742. }
  2743. span {
  2744. display: inline-block;
  2745. margin-left: -7px;
  2746. font: {
  2747. size: 20px;
  2748. weight: 600;
  2749. }
  2750. }
  2751. }
  2752. .buy-btn {
  2753. margin-bottom: 30px;
  2754. .btn {
  2755. box-shadow: unset !important;
  2756. transform: unset !important;
  2757. }
  2758. .btn-primary {
  2759. border-radius: 30px;
  2760. background: linear-gradient(to right top, #a3a3a3, #9a9a9a, #909090, #878787, #7e7e7e);
  2761. text-transform: capitalize;
  2762. padding: 11px 30px;
  2763. font: {
  2764. weight: 500;
  2765. };
  2766. &::after {
  2767. border-radius: 30px;
  2768. background: $light-green-color;
  2769. width: 100%;
  2770. opacity: 1;
  2771. visibility: visible;
  2772. }
  2773. &::before {
  2774. display: none;
  2775. }
  2776. &:not(:disabled):not(.disabled).active, &:not(:disabled):not(.disabled):active, & .show > &.dropdown-toggle {
  2777. background: linear-gradient(to right top, #a3a3a3, #9a9a9a, #909090, #878787, #7e7e7e);
  2778. }
  2779. &:hover, &:focus {
  2780. &::after {
  2781. opacity: 0;
  2782. visibility: hidden;
  2783. }
  2784. }
  2785. }
  2786. }
  2787. .pricing-features {
  2788. margin-bottom: 0;
  2789. list-style-type: none;
  2790. text-align: left;
  2791. padding: {
  2792. left: 15px;
  2793. right: 15px;
  2794. };
  2795. li {
  2796. margin-bottom: 12px;
  2797. color: #495771;
  2798. position: relative;
  2799. padding-left: 27px;
  2800. &:last-child {
  2801. margin-bottom: 0;
  2802. }
  2803. svg {
  2804. color: $light-green-color;
  2805. position: absolute;
  2806. left: 0;
  2807. top: 50%;
  2808. transform: translateY(-50%);
  2809. width: 20px;
  2810. }
  2811. }
  2812. }
  2813. }
  2814. /*================================================
  2815. Domain Search CSS
  2816. =================================================*/
  2817. .domain-search-content {
  2818. text-align: center;
  2819. max-width: 750px;
  2820. margin: 0 auto;
  2821. h2 {
  2822. text-transform: capitalize;
  2823. margin-bottom: 30px;
  2824. font: {
  2825. size: 24px;
  2826. weight: 600;
  2827. }
  2828. }
  2829. form {
  2830. box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  2831. background-color: $white-color;
  2832. overflow: hidden;
  2833. border-radius: 30px;
  2834. .form-control {
  2835. background-color: $white-color;
  2836. border: none;
  2837. height: 55px;
  2838. padding-left: 20px;
  2839. float: left;
  2840. width: 63%;
  2841. }
  2842. .domain-select {
  2843. float: left;
  2844. width: 15%;
  2845. padding-right: 20px;
  2846. .form-select {
  2847. padding: 0;
  2848. float: unset;
  2849. width: 100%;
  2850. cursor: pointer;
  2851. height: 55px;
  2852. border: none;
  2853. &:focus {
  2854. box-shadow: none;
  2855. }
  2856. }
  2857. }
  2858. button {
  2859. box-shadow: unset !important;
  2860. float: left;
  2861. width: 22%;
  2862. height: 55px;
  2863. border-radius: 30px;
  2864. background-color: $light-green-color;
  2865. color: $white-color;
  2866. font: {
  2867. weight: 600;
  2868. size: 14px;
  2869. }
  2870. outline: 0;
  2871. cursor: pointer;
  2872. border: none;
  2873. padding: 15px 40px;
  2874. text-transform: uppercase;
  2875. transition: $transition;
  2876. &:hover, &:focus {
  2877. background-color: $purple-color;
  2878. }
  2879. }
  2880. }
  2881. ul {
  2882. padding: 0;
  2883. margin: 30px 0 0;
  2884. list-style-type: none;
  2885. display: -webkit-box;
  2886. display: -ms-flexbox;
  2887. display: flex;
  2888. width: 100%;
  2889. li {
  2890. display: block;
  2891. -webkit-box-flex: 1;
  2892. -ms-flex: 1;
  2893. flex: 1;
  2894. font-weight: 500;
  2895. border-left: 1px solid #eeeeee;
  2896. &:first-child {
  2897. border-left: none;
  2898. }
  2899. }
  2900. }
  2901. }
  2902. /*================================================
  2903. Feedback CSS
  2904. =================================================*/
  2905. .feedback-area {
  2906. position: relative;
  2907. z-index: 1;
  2908. }
  2909. .feedback-slides {
  2910. position: relative;
  2911. max-width: 750px;
  2912. margin: 0 auto;
  2913. .client-feedback {
  2914. position: relative;
  2915. .single-feedback {
  2916. background: $white-color;
  2917. border-radius: 5px;
  2918. padding: {
  2919. left: 170px;
  2920. right: 40px;
  2921. top: 40px;
  2922. bottom: 40px;
  2923. }
  2924. margin-bottom: 60px;
  2925. position: relative;
  2926. .client-img {
  2927. position: absolute;
  2928. left: 40px;
  2929. top: 40px;
  2930. img {
  2931. border-radius: 50%;
  2932. border: 2px solid $light-green-color;
  2933. padding: 3px;
  2934. width: auto !important;
  2935. display: inline-block !important;
  2936. width: 95px;
  2937. height: 95px;
  2938. }
  2939. }
  2940. h3 {
  2941. font-size: 19px;
  2942. margin: 0;
  2943. }
  2944. span {
  2945. display: block;
  2946. margin: {
  2947. top: 8px;
  2948. bottom: 15px;
  2949. }
  2950. color: $purple-color;
  2951. }
  2952. p {
  2953. font-size: 15px;
  2954. }
  2955. &::before {
  2956. content: '';
  2957. position: absolute;
  2958. left: 0;
  2959. bottom: -25px;
  2960. width: 50px;
  2961. height: 50px;
  2962. background: $white-color;
  2963. right: 0;
  2964. margin: 0 auto;
  2965. transform: rotate(45deg);
  2966. }
  2967. }
  2968. }
  2969. .client-thumbnails {
  2970. position: relative;
  2971. margin: 0 85px;
  2972. .item {
  2973. .img-fill {
  2974. cursor: pointer;
  2975. position: relative;
  2976. text-align: center;
  2977. img {
  2978. opacity: 0.4;
  2979. transition: $transition;
  2980. display: inline-block;
  2981. position: relative;
  2982. border: 2px solid $light-green-color;
  2983. border-radius: 50%;
  2984. padding: 3px;
  2985. width: 85px;
  2986. }
  2987. }
  2988. &:hover, &.slick-center {
  2989. .img-fill {
  2990. img {
  2991. opacity: 1;
  2992. }
  2993. }
  2994. }
  2995. }
  2996. .slick-center {
  2997. .img-fill {
  2998. img {
  2999. opacity: 1;
  3000. }
  3001. }
  3002. }
  3003. }
  3004. }
  3005. .client-thumbnails {
  3006. .next-arrow, .prev-arrow {
  3007. position: absolute;
  3008. width: 40px;
  3009. height: 40px;
  3010. cursor: pointer;
  3011. top: 50%;
  3012. transform: translateY(-50%);
  3013. background: transparent;
  3014. color: #5e5e5e;
  3015. border: 2px solid #5e5e5e;
  3016. z-index: 1;
  3017. border-radius: 50%;
  3018. line-height: 30px;
  3019. outline: 0 !important;
  3020. transition: $transition;
  3021. &::before {
  3022. content: '';
  3023. position: absolute;
  3024. left: 0;
  3025. top: 0;
  3026. width: 100%;
  3027. height: 100%;
  3028. background: $gradient-color;
  3029. opacity: 0;
  3030. visibility: hidden;
  3031. transition: $transition;
  3032. border-radius: 50%;
  3033. }
  3034. &:hover {
  3035. color: $white-color;
  3036. border-color: $light-green-color;
  3037. &::before {
  3038. opacity: 1;
  3039. visibility: visible;
  3040. }
  3041. }
  3042. svg {
  3043. width: 18px;
  3044. height: 18px;
  3045. position: relative;
  3046. }
  3047. }
  3048. .next-arrow {
  3049. right: -20px;
  3050. }
  3051. .prev-arrow {
  3052. left: -20px;
  3053. }
  3054. }
  3055. .testimonials-slides {
  3056. background-color: #f7fbfe;
  3057. max-width: 850px;
  3058. margin: 90px auto 30px;
  3059. position: relative;
  3060. z-index: 1;
  3061. &::before {
  3062. position: absolute;
  3063. left: -30px;
  3064. top: -30px;
  3065. width: 260px;
  3066. height: 260px;
  3067. content: '';
  3068. z-index: -1;
  3069. background-image: url(/images/layer.png);
  3070. }
  3071. &::after {
  3072. position: absolute;
  3073. right: -30px;
  3074. bottom: -30px;
  3075. width: 260px;
  3076. height: 260px;
  3077. content: '';
  3078. z-index: -1;
  3079. background-image: url(/images/layer.png);
  3080. }
  3081. .owl-dots {
  3082. position: absolute;
  3083. bottom: 40px;
  3084. right: 0;
  3085. left: 0;
  3086. }
  3087. &.owl-theme {
  3088. .owl-dots {
  3089. .owl-dot {
  3090. span {
  3091. width: 18px;
  3092. height: 18px;
  3093. background: transparent !important;
  3094. border: 2px solid #D6D6D6;
  3095. position: relative;
  3096. margin: 0 3px;
  3097. &::before {
  3098. background: #D6D6D6;
  3099. content: '';
  3100. position: absolute;
  3101. left: 0;
  3102. right: 0;
  3103. text-align: center;
  3104. margin: 0 auto;
  3105. width: 10px;
  3106. height: 10px;
  3107. border-radius: 50%;
  3108. top: 50%;
  3109. transform: translateY(-50%);
  3110. transition: $transition;
  3111. }
  3112. }
  3113. &:hover, &.active {
  3114. span {
  3115. border-color: $light-green-color;
  3116. &::before {
  3117. background: $light-green-color;
  3118. }
  3119. }
  3120. }
  3121. }
  3122. }
  3123. }
  3124. }
  3125. .single-feedback-item {
  3126. padding: 40px 130px 90px;
  3127. text-align: center;
  3128. background-color: #f7fbfe;
  3129. position: relative;
  3130. .client-info {
  3131. display: -webkit-box;
  3132. display: -ms-flexbox;
  3133. display: flex;
  3134. width: 100%;
  3135. text-align: left;
  3136. max-width: 280px;
  3137. margin: 0 auto 25px;
  3138. .image {
  3139. padding-right: 20px;
  3140. img {
  3141. display: inline-block !important;
  3142. width: 75px;
  3143. border-radius: 50%;
  3144. border: 3px solid $light-green-color;
  3145. }
  3146. }
  3147. .title {
  3148. h3 {
  3149. font-size: 18px;
  3150. margin: 0;
  3151. }
  3152. span {
  3153. display: block;
  3154. margin-top: 8px;
  3155. color: $purple-color;
  3156. }
  3157. }
  3158. }
  3159. p {
  3160. font-size: 16px;
  3161. font-style: italic;
  3162. }
  3163. &::before {
  3164. content: "\f11b";
  3165. color: #d9dcde;
  3166. font: {
  3167. family: Flaticon;
  3168. size: 30px;
  3169. style: normal;
  3170. size: 65px;
  3171. }
  3172. position: absolute;
  3173. top: 0;
  3174. left: 25px;
  3175. }
  3176. }
  3177. .agency-portfolio-feedback-slides {
  3178. max-width: 730px;
  3179. margin: {
  3180. left: auto;
  3181. right: auto;
  3182. };
  3183. &.owl-theme {
  3184. .owl-dots {
  3185. line-height: 1;
  3186. .owl-dot {
  3187. span {
  3188. width: 15px;
  3189. height: 15px;
  3190. margin: 0 5px;
  3191. background: #d6d6d6;
  3192. -webkit-transition: .4s;
  3193. transition: .4s;
  3194. border-radius: 50%;
  3195. }
  3196. &:hover, &.active {
  3197. span {
  3198. background: $gradient-color;
  3199. }
  3200. }
  3201. }
  3202. }
  3203. }
  3204. }
  3205. .agency-portfolio-feedback-item {
  3206. margin-bottom: 20px;
  3207. text-align: center;
  3208. img {
  3209. width: auto !important;
  3210. display: inline-block !important;
  3211. border-radius: 50%;
  3212. border: 3px solid #999999;
  3213. }
  3214. p {
  3215. font-size: 16px;
  3216. margin: {
  3217. top: 20px;
  3218. bottom: 0;
  3219. };
  3220. }
  3221. }
  3222. .bigdata-feedback-area {
  3223. background-color: #eef6fd;
  3224. }
  3225. .single-feedback-box {
  3226. position: relative;
  3227. margin: {
  3228. left: 25px;
  3229. top: 25px;
  3230. bottom: 30px;
  3231. }
  3232. .feedback-desc {
  3233. background-color: $white-color;
  3234. border-radius: 5px;
  3235. position: relative;
  3236. z-index: 1;
  3237. padding: {
  3238. left: 30px;
  3239. bottom: 30px;
  3240. right: 30px;
  3241. top: 40px;
  3242. }
  3243. p {
  3244. margin-bottom: 0;
  3245. position: relative;
  3246. color: $black-color;
  3247. &::before {
  3248. content: '"';
  3249. position: relative;
  3250. display: inline-block;
  3251. left: 0;
  3252. color: $black-color;
  3253. }
  3254. &::after {
  3255. content: '"';
  3256. position: relative;
  3257. display: inline-block;
  3258. right: 0;
  3259. color: $black-color;
  3260. }
  3261. }
  3262. &::before {
  3263. content: '';
  3264. position: absolute;
  3265. left: 35px;
  3266. bottom: -12px;
  3267. width: 25px;
  3268. height: 25px;
  3269. z-index: -1;
  3270. background: $white-color;
  3271. transform: rotate(45deg);
  3272. }
  3273. }
  3274. &::before {
  3275. transition: $transition;
  3276. content: "\f11b";
  3277. position: absolute;
  3278. left: 0;
  3279. top: -25px;
  3280. left: -25px;
  3281. color: $white-color;
  3282. background: linear-gradient(135deg, #43e794 0%, #23bdb8 100%);
  3283. width: 60px;
  3284. height: 60px;
  3285. line-height: 60px;
  3286. border-radius: 50%;
  3287. z-index: 2;
  3288. text-align: center;
  3289. font: {
  3290. family: Flaticon;
  3291. size: 30px;
  3292. }
  3293. }
  3294. .client-info {
  3295. position: relative;
  3296. padding-left: 65px;
  3297. margin: {
  3298. top: 32px;
  3299. bottom: 25px;
  3300. left: 27px;
  3301. }
  3302. img {
  3303. width: 50px !important;
  3304. height: 50px !important;
  3305. display: inline-block !important;
  3306. border-radius: 50%;
  3307. position: absolute;
  3308. left: 0;
  3309. top: 50%;
  3310. transform: translateY(-50%);
  3311. transition: $transition;
  3312. }
  3313. h3 {
  3314. margin-bottom: 0;
  3315. font: {
  3316. size: 18px;
  3317. weight: 600;
  3318. }
  3319. }
  3320. span {
  3321. display: block;
  3322. color: $paragraph-color;
  3323. margin-top: 6px;
  3324. }
  3325. }
  3326. }
  3327. /*================================================
  3328. Ready To Talk CSS
  3329. =================================================*/
  3330. .ready-to-talk {
  3331. text-align: center;
  3332. position: relative;
  3333. padding: {
  3334. top: 80px;
  3335. bottom: 160px;
  3336. }
  3337. background: $gradient-color;
  3338. h3 {
  3339. font-size: 28px;
  3340. color: $white-color;
  3341. text-transform: capitalize;
  3342. margin-bottom: 15px;
  3343. }
  3344. p {
  3345. color: $white-color;
  3346. margin-bottom: 20px;
  3347. font-size: 16px;
  3348. }
  3349. .btn {
  3350. &::before, &::after {
  3351. background: $white-color;
  3352. }
  3353. }
  3354. .btn-primary {
  3355. background: $purple-color;
  3356. box-shadow: 0 5px 20px 0 rgba(198, 121, 227, 0.25);
  3357. &:hover, &:focus {
  3358. color: $black-color;
  3359. box-shadow: 0 5px 20px 0 rgba(68, 206, 111, 0.25);
  3360. }
  3361. }
  3362. span {
  3363. a {
  3364. margin-left: 15px;
  3365. color: $white-color;
  3366. text-decoration: underline;
  3367. }
  3368. }
  3369. }
  3370. /*=============================
  3371. Big Data Analytics Banner CSS
  3372. ===============================*/
  3373. .bigdata-analytics-banner {
  3374. background: {
  3375. image: url(/images/bigdata-analytics/main-banner.jpg);
  3376. position: center center;
  3377. size: cover;
  3378. repeat: no-repeat;
  3379. };
  3380. padding: {
  3381. top: 280px;
  3382. bottom: 25px;
  3383. };
  3384. }
  3385. .bigdata-analytics-content {
  3386. max-width: 555px;
  3387. h1 {
  3388. color: $white-color;
  3389. margin-bottom: 25px;
  3390. line-height: 1.4;
  3391. font: {
  3392. size: 50px;
  3393. weight: 700;
  3394. };
  3395. }
  3396. p {
  3397. color: #e9e9e9;
  3398. max-width: 470px;
  3399. font: {
  3400. size: 15px;
  3401. };
  3402. }
  3403. .btn {
  3404. margin-top: 18px;
  3405. }
  3406. }
  3407. .banner-boxes-area {
  3408. margin-top: 230px;
  3409. }
  3410. .single-banner-boxes {
  3411. margin-bottom: 30px;
  3412. border: 1px dashed #687b6f;
  3413. position: relative;
  3414. border-radius: 5px;
  3415. padding: 25px 25px 25px 95px;
  3416. background-color: rgba(0, 0, 0, .50);
  3417. transition: $transition;
  3418. z-index: 1;
  3419. &::before {
  3420. content: '';
  3421. position: absolute;
  3422. left: 0;
  3423. top: 0;
  3424. right: 0;
  3425. bottom: 0;
  3426. border-radius: 5px;
  3427. background: linear-gradient(135deg, #23bdb8 0%, #43e794 100%);
  3428. z-index: -1;
  3429. opacity: 0;
  3430. margin: -1px;
  3431. visibility: hidden;
  3432. transition: $transition;
  3433. }
  3434. .icon {
  3435. display: inline-block;
  3436. text-align: center;
  3437. width: 55px;
  3438. height: 55px;
  3439. position: absolute;
  3440. left: 20px;
  3441. top: 25px;
  3442. line-height: 55px;
  3443. background: #cdf1d8;
  3444. border-radius: 50%;
  3445. color: $light-green-color;
  3446. transition: $transition;
  3447. }
  3448. h3 {
  3449. color: $white-color;
  3450. margin-bottom: 12px;
  3451. font: {
  3452. size: 18px;
  3453. weight: 600;
  3454. };
  3455. }
  3456. p {
  3457. color: #dadada;
  3458. transition: $transition;
  3459. }
  3460. &:hover {
  3461. background-color: transparent;
  3462. border-color: transparent;
  3463. .icon {
  3464. color: $light-green-color;
  3465. background-color: $white-color;
  3466. }
  3467. &::before {
  3468. opacity: 1;
  3469. visibility: visible;
  3470. }
  3471. p {
  3472. color: $white-color;
  3473. }
  3474. }
  3475. }
  3476. .col-lg-4 {
  3477. &:nth-child(2) {
  3478. .single-banner-boxes {
  3479. .icon {
  3480. color: #f78acb;
  3481. background: #f9f4f7;
  3482. }
  3483. &:hover {
  3484. .icon {
  3485. background-color: $white-color;
  3486. color: #f78acb;
  3487. }
  3488. }
  3489. }
  3490. }
  3491. &:nth-child(3) {
  3492. .single-banner-boxes {
  3493. .icon {
  3494. color: $purple-color;
  3495. background: #edc3fc;
  3496. }
  3497. &:hover {
  3498. .icon {
  3499. background-color: $white-color;
  3500. color: $purple-color;
  3501. }
  3502. }
  3503. }
  3504. }
  3505. }
  3506. /*=============================
  3507. What We Do CSS
  3508. ===============================*/
  3509. .what-we-do-area {
  3510. padding-bottom: 50px;
  3511. }
  3512. .single-what-we-do-box {
  3513. margin-bottom: 30px;
  3514. position: relative;
  3515. padding-left: 88px;
  3516. .icon {
  3517. position: absolute;
  3518. left: 0;
  3519. top: 0;
  3520. width: 65px;
  3521. height: 65px;
  3522. border-radius: 5px;
  3523. color: $white-color;
  3524. text-align: center;
  3525. background: linear-gradient(135deg, #23bdb8 0%, #43e794 100%);
  3526. i {
  3527. position: absolute;
  3528. left: 0;
  3529. right: 0;
  3530. top: 40%;
  3531. transform: translateY(-40%);
  3532. &::before {
  3533. font-size: 40px;
  3534. }
  3535. }
  3536. }
  3537. h3 {
  3538. margin-bottom: 10px;
  3539. font: {
  3540. size: 20px;
  3541. weight: 600;
  3542. };
  3543. }
  3544. .link {
  3545. display: block;
  3546. font-weight: 500;
  3547. text-decoration: underline;
  3548. margin-bottom: 10px;
  3549. }
  3550. .read-more-btn {
  3551. display: inline-block;
  3552. font-weight: 600;
  3553. padding: {
  3554. top: 10px;
  3555. left: -4px;
  3556. };
  3557. svg {
  3558. margin-right: 5px;
  3559. }
  3560. }
  3561. }
  3562. /*=============================
  3563. Discover CSS
  3564. ===============================*/
  3565. .discover-area {
  3566. position: relative;
  3567. z-index: 1;
  3568. background: linear-gradient(135deg, #43e794 0%, #23bdb8 100%);
  3569. }
  3570. .discover-image {
  3571. position: relative;
  3572. padding-bottom: 100px;
  3573. margin-right: 15px;
  3574. img {
  3575. &:nth-child(2) {
  3576. position: absolute;
  3577. right: 0;
  3578. bottom: 0;
  3579. }
  3580. }
  3581. }
  3582. .discover-content {
  3583. padding-left: 15px;
  3584. h2 {
  3585. color: $white-color;
  3586. margin-bottom: 15px;
  3587. line-height: 1.5;
  3588. font: {
  3589. size: 28px;
  3590. weight: 600;
  3591. };
  3592. }
  3593. p {
  3594. color: $white-color;
  3595. }
  3596. .btn-primary {
  3597. box-shadow: unset !important;
  3598. margin-top: 15px;
  3599. background-color: $white-color;
  3600. color: $black-color;
  3601. &:hover {
  3602. color: $white-color;
  3603. }
  3604. }
  3605. }
  3606. .analytics-shape1 {
  3607. position: absolute;
  3608. left: 0;
  3609. top: 50%;
  3610. transform: translateY(-50%);
  3611. z-index: -1;
  3612. }
  3613. .analytics-shape2 {
  3614. position: absolute;
  3615. right: 0;
  3616. top: 50%;
  3617. transform: translateY(-50%);
  3618. z-index: -1;
  3619. }
  3620. /*================================================
  3621. Partner CSS
  3622. =================================================*/
  3623. .partner-section {
  3624. text-align: center;
  3625. position: relative;
  3626. margin-top: -120px;
  3627. background: transparent;
  3628. h5 {
  3629. font: {
  3630. size: 20px;
  3631. weight: 400;
  3632. }
  3633. color: $white-color;
  3634. margin-bottom: 0;
  3635. }
  3636. .partner-inner {
  3637. background: $white-color;
  3638. padding: {
  3639. top: 5px;
  3640. left: 30px;
  3641. right: 30px;
  3642. bottom: 30px;
  3643. }
  3644. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  3645. border-radius: 3px;
  3646. margin-top: 25px;
  3647. a {
  3648. display: block;
  3649. margin-top: 25px;
  3650. position: relative;
  3651. img {
  3652. &:last-child {
  3653. position: absolute;
  3654. top: 15px;
  3655. left: 0;
  3656. right: 0;
  3657. margin: 0 auto;
  3658. opacity: 0;
  3659. visibility: hidden;
  3660. transition: $transition;
  3661. }
  3662. }
  3663. &:hover {
  3664. img {
  3665. &:last-child {
  3666. opacity: 1;
  3667. top: 0;
  3668. visibility: visible;
  3669. }
  3670. }
  3671. }
  3672. }
  3673. }
  3674. }
  3675. /*================================================
  3676. Industries Serve CSS
  3677. =================================================*/
  3678. .industries-serve-area {
  3679. padding-bottom: 50px;
  3680. position: relative;
  3681. z-index: 1;
  3682. background: linear-gradient(135deg, #43e794 0%, #23bdb8 100%);
  3683. .section-title {
  3684. h2 {
  3685. color: $white-color;
  3686. }
  3687. p {
  3688. color: $white-color;
  3689. }
  3690. .bar {
  3691. &::before {
  3692. background: $white-color;
  3693. }
  3694. }
  3695. }
  3696. }
  3697. .single-industries-serve-box {
  3698. margin-bottom: 30px;
  3699. position: relative;
  3700. overflow: hidden;
  3701. color: $black-color;
  3702. border-radius: 5px;
  3703. background-color: #f4f4fb;
  3704. padding: 20px 15px 20px 50px;
  3705. transition: $transition;
  3706. z-index: 1;
  3707. font: {
  3708. size: 18px;
  3709. weight: 600;
  3710. };
  3711. .icon {
  3712. position: absolute;
  3713. left: -15px;
  3714. top: 50%;
  3715. line-height: 1;
  3716. transform: translateY(-50%);
  3717. color: #c3c3c9;
  3718. transition: $transition;
  3719. font: {
  3720. size: 55px;
  3721. weight: normal;
  3722. };
  3723. }
  3724. &::before {
  3725. border-radius: 5px;
  3726. position: absolute;
  3727. left: 0;
  3728. top: 0;
  3729. width: 0;
  3730. height: 100%;
  3731. content: '';
  3732. z-index: -1;
  3733. transition: $transition;
  3734. background-color: $black-color;
  3735. }
  3736. .link-btn {
  3737. display: block;
  3738. position: absolute;
  3739. left: 0;
  3740. right: 0;
  3741. top: 0;
  3742. bottom: 0;
  3743. border-radius: 5px;
  3744. z-index: 2;
  3745. }
  3746. &:hover {
  3747. color: $white-color;
  3748. .icon {
  3749. color: $white-color;
  3750. }
  3751. &::before {
  3752. width: 100%;
  3753. }
  3754. }
  3755. }
  3756. /*================================================
  3757. Blog CSS
  3758. =================================================*/
  3759. .blog-area {
  3760. position: relative;
  3761. z-index: 1;
  3762. }
  3763. .single-blog-post {
  3764. position: relative;
  3765. transition: $transition;
  3766. margin-bottom: 30px;
  3767. .blog-image {
  3768. position: relative;
  3769. a {
  3770. display: block;
  3771. }
  3772. .date {
  3773. position: absolute;
  3774. left: 20px;
  3775. bottom: -20px;
  3776. background: $gradient-color;
  3777. color: $white-color;
  3778. padding: 8px 16px;
  3779. font-size: 13px;
  3780. border-radius: 50px;
  3781. svg {
  3782. width: 15px;
  3783. margin-right: 3px;
  3784. }
  3785. }
  3786. }
  3787. .blog-post-content {
  3788. padding: {
  3789. top: 40px;
  3790. left: 20px;
  3791. bottom: 20px;
  3792. right: 20px;
  3793. }
  3794. background: $bg-color;
  3795. transition: $transition;
  3796. h3 {
  3797. font-size: 20px;
  3798. line-height: 30px;
  3799. margin-bottom: 0;
  3800. }
  3801. span {
  3802. display: block;
  3803. color: $black-color;
  3804. margin: 15px 0;
  3805. a {
  3806. color: $paragraph-color;
  3807. &:hover {
  3808. color: $light-green-color;
  3809. }
  3810. }
  3811. }
  3812. .read-more-btn {
  3813. color: $black-color;
  3814. svg {
  3815. transition: $transition;
  3816. width: 15px;
  3817. }
  3818. &:hover {
  3819. color: $light-green-color;
  3820. svg {
  3821. margin-left: 5px;
  3822. }
  3823. }
  3824. }
  3825. }
  3826. &:hover {
  3827. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  3828. .blog-post-content {
  3829. background: $white-color;
  3830. }
  3831. }
  3832. }
  3833. .single-blog-post-box {
  3834. margin-bottom: 30px;
  3835. transition: $transition;
  3836. border-radius: 5px;
  3837. .entry-thumbnail {
  3838. a {
  3839. display: block;
  3840. img {
  3841. border-radius: 5px 5px 0 0;
  3842. }
  3843. }
  3844. }
  3845. .entry-post-content {
  3846. background: linear-gradient(to right top, #d5fefd, #e0fdff, #effbff, #fbfaff, #fffcff);
  3847. padding: 20px;
  3848. .entry-meta {
  3849. margin-bottom: 10px;
  3850. ul {
  3851. padding-left: 0;
  3852. margin-bottom: 0;
  3853. list-style-type: none;
  3854. li {
  3855. display: inline-block;
  3856. position: relative;
  3857. margin-right: 16px;
  3858. color: $paragraph-color;
  3859. font: {
  3860. size: 14px;
  3861. }
  3862. &::before {
  3863. content: '';
  3864. position: absolute;
  3865. right: -7px;
  3866. top: 50%;
  3867. transform: rotate(14deg) translateY(-50%);
  3868. background: $paragraph-color;
  3869. width: 1px;
  3870. height: 13px;
  3871. }
  3872. a {
  3873. display: inline-block;
  3874. color: $paragraph-color;
  3875. &:hover {
  3876. color: $light-green-color;
  3877. }
  3878. }
  3879. &:last-child {
  3880. margin-right: 0;
  3881. &::before {
  3882. display: none;
  3883. }
  3884. }
  3885. }
  3886. }
  3887. }
  3888. h3 {
  3889. margin-bottom: 0;
  3890. line-height: 1.5;
  3891. font-weight: 600;
  3892. font: {
  3893. size: 18px;
  3894. }
  3895. }
  3896. p {
  3897. margin: {
  3898. top: 8px;
  3899. bottom: 0;
  3900. }
  3901. }
  3902. .learn-more-btn {
  3903. margin-top: 15px;
  3904. font-weight: 600;
  3905. svg {
  3906. width: 15px;
  3907. }
  3908. }
  3909. }
  3910. }
  3911. .single-blog-item {
  3912. margin-bottom: 30px;
  3913. .post-image {
  3914. text-align: center;
  3915. a {
  3916. display: block;
  3917. }
  3918. }
  3919. .post-content {
  3920. margin-top: 20px;
  3921. .post-meta {
  3922. padding-left: 0;
  3923. margin-bottom: 10px;
  3924. list-style-type: none;
  3925. li {
  3926. display: inline-block;
  3927. margin-right: 30px;
  3928. position: relative;
  3929. &::before {
  3930. content: '';
  3931. position: absolute;
  3932. top: 10px;
  3933. right: -20px;
  3934. width: 10px;
  3935. height: 1px;
  3936. background-color: $paragraph-color;
  3937. }
  3938. &:last-child {
  3939. margin-right: 0;
  3940. &::before {
  3941. display: none;
  3942. }
  3943. }
  3944. }
  3945. }
  3946. h3 {
  3947. line-height: 30px;
  3948. margin-bottom: 0;
  3949. font: {
  3950. weight: 600;
  3951. size: 20px;
  3952. };
  3953. }
  3954. }
  3955. }
  3956. .blog-slides {
  3957. &.owl-theme {
  3958. .owl-dots {
  3959. line-height: 1;
  3960. .owl-dot {
  3961. span {
  3962. width: 15px;
  3963. height: 15px;
  3964. margin: 0 5px;
  3965. background: #d6d6d6;
  3966. -webkit-transition: .4s;
  3967. transition: .4s;
  3968. border-radius: 50%;
  3969. }
  3970. &:hover, &.active {
  3971. span {
  3972. background: $gradient-color;
  3973. }
  3974. }
  3975. }
  3976. }
  3977. }
  3978. }
  3979. .single-blog-post-item {
  3980. margin-bottom: 30px;
  3981. .post-image {
  3982. border-radius: 5px;
  3983. overflow: hidden;
  3984. a {
  3985. display: block;
  3986. border-radius: 5px;
  3987. img {
  3988. border-radius: 5px;
  3989. }
  3990. }
  3991. }
  3992. .post-content {
  3993. transition: $transition;
  3994. background: linear-gradient(to right top, #d5fefd, #e0fdff, #effbff, #fbfaff, #fffcff);
  3995. position: relative;
  3996. border-radius: 5px;
  3997. padding: 30px 25px;
  3998. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, .05);
  3999. margin: {
  4000. left: 15px;
  4001. right: 15px;
  4002. top: -30px;
  4003. };
  4004. .post-meta {
  4005. transition: $transition;
  4006. margin-bottom: 10px;
  4007. list-style-type: none;
  4008. padding-left: 0;
  4009. li {
  4010. display: inline-block;
  4011. margin-right: 20px;
  4012. position: relative;
  4013. color: $paragraph-color;
  4014. a {
  4015. color: $paragraph-color;
  4016. &:hover {
  4017. color: $light-green-color;
  4018. }
  4019. }
  4020. &::before {
  4021. content: '';
  4022. position: absolute;
  4023. right: -10px;
  4024. top: 4px;
  4025. height: 12px;
  4026. background-color: $paragraph-color;
  4027. width: 1px;
  4028. transform: rotate(5deg);
  4029. }
  4030. &:last-child {
  4031. margin-right: 0;
  4032. &::before {
  4033. display: none;
  4034. }
  4035. }
  4036. }
  4037. }
  4038. h3 {
  4039. transition: $transition;
  4040. font-size: 20px;
  4041. line-height: 30px;
  4042. margin-bottom: 0;
  4043. }
  4044. .read-more-btn {
  4045. display: inline-block;
  4046. border-radius: 30px;
  4047. padding: 9px 25px;
  4048. border: 1px solid #e6e6e6;
  4049. background-color: $white-color;
  4050. position: absolute;
  4051. transition: $transition;
  4052. left: 25px;
  4053. bottom: -22px;
  4054. opacity: 0;
  4055. visibility: hidden;
  4056. font: {
  4057. size: 14px;
  4058. weight: 500;
  4059. };
  4060. svg {
  4061. width: 15px;
  4062. margin-left: 2px;
  4063. }
  4064. &:hover {
  4065. background-color: $light-green-color;
  4066. border-color: $light-green-color;
  4067. color: $white-color;
  4068. }
  4069. }
  4070. }
  4071. &:hover {
  4072. .post-content {
  4073. transform: translateY(-22px);
  4074. .post-meta {
  4075. transform: translateY(-12px);
  4076. }
  4077. h3 {
  4078. transform: translateY(-12px);
  4079. }
  4080. .read-more-btn {
  4081. opacity: 1;
  4082. visibility: visible;
  4083. }
  4084. }
  4085. }
  4086. }
  4087. .single-blog-post-box {
  4088. &.bg-f4faff {
  4089. .entry-post-content {
  4090. background: #f4faff;
  4091. }
  4092. }
  4093. }
  4094. /*================================================
  4095. Shop CSS
  4096. =================================================*/
  4097. .woocommerce-topbar {
  4098. background-color: #fcfbfb;
  4099. padding: 10px 40px;
  4100. margin-bottom: 30px;
  4101. .woocommerce-topbar-ordering {
  4102. .form-select {
  4103. cursor: pointer;
  4104. background-color: transparent;
  4105. border-color: #ebebeb;
  4106. border-radius: 4px;
  4107. font-size: 14px;
  4108. height: 40px;
  4109. &:focus {
  4110. box-shadow: none;
  4111. }
  4112. }
  4113. }
  4114. }
  4115. .single-products {
  4116. text-align: center;
  4117. position: relative;
  4118. margin-bottom: 30px;
  4119. .products-content {
  4120. margin-top: 20px;
  4121. h3 {
  4122. font-size: 18px;
  4123. margin-bottom: 10px;
  4124. }
  4125. ul {
  4126. padding: 0;
  4127. margin: 10px 0 12px;
  4128. list-style-type: none;
  4129. li {
  4130. display: inline-block;
  4131. color: #eac11d;
  4132. i {
  4133. margin: 0 2px;
  4134. &::before {
  4135. font-size: 15px;
  4136. }
  4137. }
  4138. }
  4139. }
  4140. .add-to-cart-btn {
  4141. display: block;
  4142. width: 100%;
  4143. color: $black-color;
  4144. border: 1px solid $black-color;
  4145. padding: 10px 15px;
  4146. text-transform: uppercase;
  4147. font-weight: 500;
  4148. }
  4149. }
  4150. .sale-btn {
  4151. position: absolute;
  4152. top: 15px;
  4153. right: 15px;
  4154. background: #ff2d2d;
  4155. color: #fff;
  4156. width: 55px;
  4157. height: 55px;
  4158. line-height: 55px;
  4159. border-radius: 50%;
  4160. z-index: 2;
  4161. }
  4162. .products-image {
  4163. overflow: hidden;
  4164. position: relative;
  4165. img {
  4166. transition: all 1.5s ease-out;
  4167. width: 100%;
  4168. }
  4169. &::before {
  4170. position: absolute;
  4171. top: 0;
  4172. left: 0;
  4173. width: 100%;
  4174. height: 100%;
  4175. background: gray;
  4176. content: '';
  4177. transition: $transition;
  4178. z-index: 1;
  4179. opacity: 0;
  4180. visibility: hidden;
  4181. }
  4182. ul {
  4183. padding: 0;
  4184. z-index: 2;
  4185. list-style-type: none;
  4186. margin: 0;
  4187. position: absolute;
  4188. left: 0;
  4189. top: 50%;
  4190. right: 0;
  4191. transform: translateY(-50%);
  4192. opacity: 0;
  4193. visibility: hidden;
  4194. transition: $transition;
  4195. li {
  4196. display: inline-block;
  4197. a {
  4198. display: block;
  4199. background: $white-color;
  4200. width: 35px;
  4201. height: 35px;
  4202. line-height: 35px;
  4203. svg {
  4204. width: 20px;
  4205. }
  4206. &:hover, &:focus {
  4207. background-color: $light-green-color;
  4208. color: $white-color;
  4209. }
  4210. &:nth-child(1) {
  4211. margin-left: -15px;
  4212. }
  4213. &:nth-child(3) {
  4214. margin-right: -15px;
  4215. }
  4216. }
  4217. }
  4218. }
  4219. }
  4220. &:hover, &:focus {
  4221. .products-content {
  4222. .add-to-cart-btn {
  4223. background-color: $black-color;
  4224. color: $white-color;
  4225. }
  4226. }
  4227. .products-image {
  4228. img {
  4229. transform: scale(1.1);
  4230. }
  4231. &::before {
  4232. opacity: .40;
  4233. visibility: visible;
  4234. }
  4235. ul {
  4236. opacity: 1;
  4237. visibility: visible;
  4238. li {
  4239. a {
  4240. &:nth-child(1) {
  4241. margin-left: 0;
  4242. }
  4243. &:nth-child(3) {
  4244. margin-right: 0;
  4245. }
  4246. }
  4247. }
  4248. }
  4249. }
  4250. }
  4251. }
  4252. #productsModalCenter {
  4253. .modal-dialog {
  4254. max-width: 900px;
  4255. }
  4256. .modal-content {
  4257. border: none;
  4258. border-radius: 0;
  4259. button.close {
  4260. position: absolute;
  4261. right: 2%;
  4262. display: inline-block;
  4263. opacity: 1;
  4264. top: 2%;
  4265. width: 35px;
  4266. height: 35px;
  4267. text-align: center;
  4268. line-height: 32px;
  4269. border: 1px solid #eeeeee;
  4270. border-radius: 50%;
  4271. outline: 0;
  4272. transition: $transition;
  4273. span {
  4274. transition: $transition;
  4275. }
  4276. &:hover, &:focus {
  4277. background-color: $light-green-color;
  4278. color: $white-color;
  4279. span {
  4280. color: $white-color;
  4281. }
  4282. }
  4283. }
  4284. .products-image {
  4285. overflow: hidden;
  4286. img {
  4287. width: 100%;
  4288. }
  4289. }
  4290. .products-content {
  4291. p {
  4292. margin-bottom: 20px;
  4293. }
  4294. h3 {
  4295. font-size: 20px;
  4296. margin-bottom: 10px;
  4297. }
  4298. .price {
  4299. margin-bottom: 15px;
  4300. span {
  4301. text-decoration: line-through;
  4302. color: $paragraph-color;
  4303. }
  4304. }
  4305. form {
  4306. .quantity {
  4307. display: inline-block;
  4308. margin-right: 8px;
  4309. .input-counter {
  4310. max-width: 110px;
  4311. min-width: 110px;
  4312. text-align: center;
  4313. display: inline-block;
  4314. position: relative;
  4315. span {
  4316. position: absolute;
  4317. top: 0;
  4318. background-color: transparent;
  4319. cursor: pointer;
  4320. color: $paragraph-color;
  4321. width: 40px;
  4322. height: 100%;
  4323. line-height: 47px;
  4324. transition: $transition;
  4325. padding: 0;
  4326. &.minus-btn {
  4327. left: 0;
  4328. }
  4329. &.plus-btn {
  4330. right: 0;
  4331. }
  4332. svg {
  4333. width: 20px;
  4334. }
  4335. &:hover {
  4336. color: $light-green-color;
  4337. }
  4338. }
  4339. input {
  4340. height: 47px;
  4341. color: $black-color;
  4342. outline: 0;
  4343. display: block;
  4344. border: none;
  4345. background-color: #f8f8f8;
  4346. text-align: center;
  4347. width: 100%;
  4348. font: {
  4349. size: 17px;
  4350. weight: 500;
  4351. }
  4352. &::placeholder {
  4353. color: $black-color;
  4354. }
  4355. }
  4356. }
  4357. }
  4358. button {
  4359. background: $light-green-color;
  4360. color: $white-color;
  4361. border: none;
  4362. height: 46px;
  4363. padding: 0 20px;
  4364. position: relative;
  4365. top: -2px;
  4366. cursor: pointer;
  4367. outline: 0;
  4368. transition: $transition;
  4369. &:hover, &:focus {
  4370. background-color: $purple-color;
  4371. color: $white-color;
  4372. }
  4373. }
  4374. }
  4375. .product-meta {
  4376. margin-top: 15px;
  4377. span {
  4378. display: inline-block;
  4379. margin-right: 8px;
  4380. }
  4381. }
  4382. }
  4383. }
  4384. }
  4385. /*================================================
  4386. Shop Details CSS
  4387. =================================================*/
  4388. .products-details-image {
  4389. img {
  4390. width: 100%;
  4391. }
  4392. &.owl-theme {
  4393. .owl-nav {
  4394. [class*='owl-'] {
  4395. color: $black-color;
  4396. font-size: 45px;
  4397. margin: 0;
  4398. transition: $transition;
  4399. opacity: 0;
  4400. visibility: hidden;
  4401. padding: 0;
  4402. background: transparent !important;
  4403. border-radius: 0;
  4404. position: absolute;
  4405. padding: 0;
  4406. left: 15px;
  4407. top: 50%;
  4408. transform: translateY(-50%);
  4409. &.owl-next {
  4410. left: auto;
  4411. right: 15px;
  4412. }
  4413. }
  4414. }
  4415. &:hover {
  4416. .owl-nav {
  4417. [class*='owl-'] {
  4418. opacity: 1;
  4419. visibility: visible;
  4420. }
  4421. }
  4422. }
  4423. }
  4424. }
  4425. .products-details {
  4426. h3 {
  4427. font-size: 20px;
  4428. margin-bottom: 8px;
  4429. }
  4430. .price {
  4431. margin-bottom: 15px;
  4432. span {
  4433. text-decoration: line-through;
  4434. color: $paragraph-color;
  4435. margin-right: 5px;
  4436. }
  4437. }
  4438. .rating {
  4439. padding: 0;
  4440. margin: 0 0 12px;
  4441. list-style-type: none;
  4442. li {
  4443. display: inline-block;
  4444. color: #eac11d;
  4445. i {
  4446. margin-right: 3px;
  4447. &::before {
  4448. font-size: 15px;
  4449. }
  4450. }
  4451. }
  4452. }
  4453. .payment-methods {
  4454. img {
  4455. margin-right: 5px;
  4456. &:last-child {
  4457. margin-right: 0;
  4458. }
  4459. }
  4460. }
  4461. .availability {
  4462. margin-bottom: 20px;
  4463. span {
  4464. color: $light-green-color;
  4465. }
  4466. }
  4467. form {
  4468. .quantity {
  4469. margin-bottom: 20px;
  4470. span {
  4471. padding-right: 10px;
  4472. }
  4473. .input-counter {
  4474. max-width: 110px;
  4475. min-width: 110px;
  4476. text-align: center;
  4477. display: inline-block;
  4478. position: relative;
  4479. span {
  4480. position: absolute;
  4481. top: 0;
  4482. background-color: transparent;
  4483. cursor: pointer;
  4484. color: $paragraph-color;
  4485. width: 40px;
  4486. height: 100%;
  4487. line-height: 47px;
  4488. transition: $transition;
  4489. padding: 0;
  4490. &.minus-btn {
  4491. left: 0;
  4492. }
  4493. &.plus-btn {
  4494. right: 0;
  4495. }
  4496. svg {
  4497. width: 20px;
  4498. }
  4499. &:hover {
  4500. color: $light-green-color;
  4501. }
  4502. }
  4503. input {
  4504. height: 47px;
  4505. color: $black-color;
  4506. outline: 0;
  4507. display: block;
  4508. border: none;
  4509. background-color: #f8f8f8;
  4510. text-align: center;
  4511. width: 100%;
  4512. font: {
  4513. size: 17px;
  4514. weight: 500;
  4515. }
  4516. &::placeholder {
  4517. color: $black-color;
  4518. }
  4519. }
  4520. }
  4521. }
  4522. button {
  4523. background: $light-green-color;
  4524. color: $white-color;
  4525. border: none;
  4526. height: 46px;
  4527. padding: 0 20px;
  4528. position: relative;
  4529. top: -3px;
  4530. cursor: pointer;
  4531. outline: 0;
  4532. transition: $transition;
  4533. &:hover, &:focus {
  4534. background-color: $purple-color;
  4535. color: $white-color;
  4536. }
  4537. }
  4538. .add-to-wishlist-btn {
  4539. margin-left: 5px;
  4540. background: transparent;
  4541. color: $black-color;
  4542. border: 1px solid #eeeeee;
  4543. position: relative;
  4544. top: -2px;
  4545. cursor: pointer;
  4546. outline: 0;
  4547. transition: $transition;
  4548. width: 45px;
  4549. height: 45px;
  4550. text-align: center;
  4551. line-height: 45px;
  4552. &:hover, &:focus {
  4553. background-color: $purple-color;
  4554. color: $white-color;
  4555. border-color: $purple-color;
  4556. }
  4557. }
  4558. .buy-btn {
  4559. margin-top: 20px;
  4560. .btn-primary {
  4561. background: $purple-color;
  4562. box-shadow: 0 13px 27px 0 rgba(198, 121, 227, 0.25);
  4563. &::after, &::before {
  4564. background: $light-green-color;
  4565. box-shadow: 0 13px 27px 0 rgba(68, 206, 111, 0.25);
  4566. }
  4567. }
  4568. }
  4569. }
  4570. .custom-payment-options {
  4571. margin-top: 20px;
  4572. span {
  4573. display: block;
  4574. margin-bottom: 10px;
  4575. }
  4576. }
  4577. .products-share-social {
  4578. margin-top: 25px;
  4579. span {
  4580. display: inline-block;
  4581. margin-right: 10px;
  4582. }
  4583. ul {
  4584. padding: 0;
  4585. margin: 0;
  4586. list-style-type: none;
  4587. display: inline-block;
  4588. li {
  4589. display: inline-block;
  4590. margin-right: 5px;
  4591. &:last-child {
  4592. margin-right: 0;
  4593. }
  4594. a {
  4595. width: 30px;
  4596. text-align: center;
  4597. line-height: 27px;
  4598. height: 30px;
  4599. border: 1px solid $light-green-color;
  4600. border-radius: 50%;
  4601. color: $light-green-color;
  4602. svg {
  4603. width: 15px;
  4604. }
  4605. &.facebook {
  4606. border-color: #4267b2;
  4607. color: #4267b2;
  4608. &:hover {
  4609. background: #4267b2;
  4610. color: $white-color;
  4611. }
  4612. }
  4613. &.twitter {
  4614. border-color: #38A1F3;
  4615. color: #38A1F3;
  4616. &:hover {
  4617. background: #38A1F3;
  4618. color: $white-color;
  4619. }
  4620. }
  4621. &.linkedin {
  4622. border-color: #0077B5;
  4623. color: #0077B5;
  4624. &:hover {
  4625. background: #0077B5;
  4626. color: $white-color;
  4627. }
  4628. }
  4629. &.instagram {
  4630. border-color: #bb58aa;
  4631. color: #bb58aa;
  4632. &:hover {
  4633. background: #bb58aa;
  4634. color: $white-color;
  4635. }
  4636. }
  4637. &.youtube {
  4638. border-color: #cf3259;
  4639. color: #cf3259;
  4640. &:hover {
  4641. background: #cf3259;
  4642. color: $white-color;
  4643. }
  4644. }
  4645. &:hover {
  4646. background: $light-green-color;
  4647. color: $white-color;
  4648. }
  4649. }
  4650. }
  4651. }
  4652. }
  4653. }
  4654. .products-details-tabs {
  4655. margin-top: 40px;
  4656. text-align: center;
  4657. .react-tabs__tab-list {
  4658. padding: 0;
  4659. margin: 0 0 30px;
  4660. list-style-type: none;
  4661. li {
  4662. display: inline-block;
  4663. padding: 12px 50px 8px;
  4664. cursor: pointer;
  4665. margin-right: -4px;
  4666. transition: $transition;
  4667. background: #eaeaea;
  4668. font: {
  4669. weight: 500;
  4670. }
  4671. &.active, &.react-tabs__tab--selected {
  4672. background-color: $white-color;
  4673. position: relative;
  4674. &::before {
  4675. content: '';
  4676. position: absolute;
  4677. width: 100%;
  4678. height: 4px;
  4679. top: 0;
  4680. left: 0;
  4681. background: $light-green-color;
  4682. }
  4683. }
  4684. &.inactive {
  4685. background-color: #eeeeee;
  4686. padding: 12px 50px;
  4687. }
  4688. }
  4689. }
  4690. .react-tabs__tab-panel {
  4691. h3 {
  4692. margin-bottom: 12px;
  4693. font: {
  4694. size: 18px;
  4695. }
  4696. }
  4697. .additional-information {
  4698. padding: 0;
  4699. margin: 25px 0 0;
  4700. list-style-type: none;
  4701. text-align: left;
  4702. li {
  4703. border: 1px solid #eeeeee;
  4704. border-bottom: none;
  4705. padding: 10px 15px;
  4706. color: $paragraph-color;
  4707. &:last-child {
  4708. border-bottom: 1px solid #eeeeee;;
  4709. }
  4710. span {
  4711. display: inline-block;
  4712. width: 45%;
  4713. }
  4714. }
  4715. }
  4716. .products-reviews {
  4717. text-align: left;
  4718. max-width: 700px;
  4719. margin: 0 auto;
  4720. p {
  4721. margin-bottom: 0;
  4722. }
  4723. .review-form {
  4724. margin-top: 20px;
  4725. max-width: 620px;
  4726. p {
  4727. margin-bottom: 0;
  4728. }
  4729. .form-control {
  4730. background: transparent;
  4731. }
  4732. }
  4733. .star-rating {
  4734. margin-bottom: 10px;
  4735. i {
  4736. color: #eac11d;
  4737. }
  4738. }
  4739. }
  4740. }
  4741. }
  4742. @keyframes scaleup {
  4743. from {
  4744. transform: scale(1.2);
  4745. }
  4746. to {
  4747. transform: scale(1);
  4748. }
  4749. }
  4750. @keyframes starred {
  4751. from {
  4752. color: #f2b01e;
  4753. }
  4754. to {
  4755. color: #f2b01e;
  4756. }
  4757. }
  4758. /*================================================
  4759. Cart CSS
  4760. =================================================*/
  4761. .cart-table {
  4762. table {
  4763. margin-bottom: 0;
  4764. thead {
  4765. tr {
  4766. th {
  4767. border-bottom-width: 0px;
  4768. vertical-align: middle;
  4769. font-weight: 500;
  4770. padding: 15px 0;
  4771. font-size: 15px;
  4772. border: none;
  4773. }
  4774. }
  4775. }
  4776. tbody {
  4777. tr {
  4778. td {
  4779. vertical-align: middle;
  4780. color: $paragraph-color;
  4781. padding: {
  4782. left: 0;
  4783. right: 0;
  4784. }
  4785. border: {
  4786. color: #eaedff;
  4787. left: none;
  4788. right: none;
  4789. }
  4790. &.product-thumbnail {
  4791. a {
  4792. display: block;
  4793. img {
  4794. width: 80px;
  4795. }
  4796. }
  4797. }
  4798. &.product-name {
  4799. a {
  4800. color: $paragraph-color;
  4801. font-weight: 500;
  4802. display: inline-block;
  4803. &:hover {
  4804. color: $light-green-color;
  4805. }
  4806. }
  4807. }
  4808. &.product-subtotal {
  4809. .remove {
  4810. color: red;
  4811. margin-left: 25px;
  4812. position: relative;
  4813. top: -1px;
  4814. float: right;
  4815. svg {
  4816. width: 19px;
  4817. }
  4818. }
  4819. }
  4820. &.product-quantity {
  4821. .input-counter {
  4822. max-width: 110px;
  4823. min-width: 110px;
  4824. text-align: center;
  4825. display: inline-block;
  4826. position: relative;
  4827. span {
  4828. position: absolute;
  4829. top: 0;
  4830. background-color: transparent;
  4831. cursor: pointer;
  4832. color: $paragraph-color;
  4833. width: 40px;
  4834. height: 100%;
  4835. line-height: 47px;
  4836. transition: $transition;
  4837. &.minus-btn {
  4838. left: 0;
  4839. }
  4840. &.plus-btn {
  4841. right: 0;
  4842. }
  4843. svg {
  4844. width: 20px;
  4845. }
  4846. &:hover {
  4847. color: $light-green-color;
  4848. }
  4849. }
  4850. input {
  4851. height: 45px;
  4852. color: $black-color;
  4853. outline: 0;
  4854. display: block;
  4855. border: none;
  4856. background-color: #f8f8f8;
  4857. text-align: center;
  4858. width: 100%;
  4859. font: {
  4860. size: 17px;
  4861. weight: 500;
  4862. }
  4863. &::placeholder {
  4864. color: $black-color;
  4865. }
  4866. }
  4867. }
  4868. }
  4869. }
  4870. }
  4871. }
  4872. }
  4873. }
  4874. .cart-buttons {
  4875. margin-top: 30px;
  4876. .btn-light {
  4877. background-color: #eaedff;
  4878. &:hover, &:focus {
  4879. color: $white-color;
  4880. &:not(:disabled):not(.disabled).active, &:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle {
  4881. color: $white-color;
  4882. }
  4883. }
  4884. &:focus {
  4885. color: $white-color;
  4886. }
  4887. }
  4888. }
  4889. .cart-totals {
  4890. background: $white-color;
  4891. padding: 40px;
  4892. max-width: 600px;
  4893. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  4894. border-radius: 5px;
  4895. margin: 45px auto 0;
  4896. h3 {
  4897. font: {
  4898. size: 18px;
  4899. }
  4900. margin-bottom: 25px;
  4901. }
  4902. ul {
  4903. padding: 0;
  4904. margin: 0 0 25px;
  4905. list-style-type: none;
  4906. li {
  4907. border: 1px solid #eaedff;
  4908. padding: 10px 15px;
  4909. color: $black-color;
  4910. overflow: hidden;
  4911. &:first-child {
  4912. border: {
  4913. bottom: none;
  4914. }
  4915. }
  4916. &:last-child {
  4917. border: {
  4918. top: none;
  4919. }
  4920. }
  4921. span {
  4922. float: right;
  4923. color: $paragraph-color;
  4924. }
  4925. }
  4926. }
  4927. }
  4928. /*================================================
  4929. Checkout CSS
  4930. =================================================*/
  4931. .user-actions {
  4932. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  4933. background: $white-color;
  4934. padding: 18px 25px 15px;
  4935. margin-bottom: 35px;
  4936. border-top: 3px solid #024273;
  4937. svg {
  4938. color: $light-green-color;
  4939. margin-right: 4px;
  4940. width: 16px;
  4941. }
  4942. span {
  4943. display: inline-block;
  4944. color: $light-green-color;
  4945. a {
  4946. font-weight: 500;
  4947. display: inline-block;
  4948. color: $black-color;
  4949. &:hover, &:focus {
  4950. color: $light-green-color;
  4951. }
  4952. }
  4953. }
  4954. }
  4955. .checkout-area {
  4956. .title {
  4957. font: {
  4958. size: 18px;
  4959. }
  4960. margin-bottom: 25px;
  4961. }
  4962. }
  4963. .billing-details {
  4964. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  4965. background: $white-color;
  4966. padding: 25px;
  4967. border-radius: 5px;
  4968. .form-check-input {
  4969. margin-top: 3px;
  4970. }
  4971. .form-group {
  4972. label {
  4973. display: block;
  4974. color: $paragraph-color;
  4975. margin-bottom: 8px;
  4976. font: {
  4977. size: 14px;
  4978. weight: 400;
  4979. }
  4980. .required {
  4981. color: red;
  4982. }
  4983. }
  4984. .form-control {
  4985. background: transparent;
  4986. }
  4987. select {
  4988. cursor: pointer;
  4989. }
  4990. }
  4991. .form-check {
  4992. margin-bottom: 15px;
  4993. .form-check-label {
  4994. color: $paragraph-color;
  4995. }
  4996. label {
  4997. font: {
  4998. size: 14px;
  4999. weight: 400;
  5000. }
  5001. }
  5002. }
  5003. .form-select {
  5004. height: 45px;
  5005. padding: 10px;
  5006. font-size: 14px;
  5007. color: #0e314c;
  5008. border: 1px solid #eeeeee;
  5009. border-radius: 0;
  5010. transition: 0.5s;
  5011. }
  5012. }
  5013. .order-details {
  5014. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  5015. background: $white-color;
  5016. padding: 25px;
  5017. border-radius: 5px;
  5018. .order-table {
  5019. table {
  5020. margin-bottom: 0;
  5021. text-align: left;
  5022. thead {
  5023. tr {
  5024. th {
  5025. border-bottom-width: 0px;
  5026. vertical-align: middle;
  5027. font: {
  5028. weight: 500;
  5029. }
  5030. border-color: #eaedff;
  5031. padding: 15px 20px;
  5032. }
  5033. }
  5034. }
  5035. tbody {
  5036. tr {
  5037. td {
  5038. vertical-align: middle;
  5039. color: $paragraph-color;
  5040. border-color: #eaedff;
  5041. font-size: 14px;
  5042. &.product-name {
  5043. a {
  5044. color: $paragraph-color;
  5045. display: inline-block;
  5046. &:hover {
  5047. color: $light-green-color;
  5048. }
  5049. }
  5050. }
  5051. &.order-subtotal, &.order-shipping , &.total-price {
  5052. span {
  5053. color: $black-color;
  5054. font-weight: 500;
  5055. }
  5056. }
  5057. }
  5058. }
  5059. }
  5060. }
  5061. }
  5062. .payment-method {
  5063. margin-top: 40px;
  5064. border-top: 1px solid #eaedff;
  5065. padding-top: 35px;
  5066. p {
  5067. font: {
  5068. size: 14px;
  5069. }
  5070. [type="radio"] {
  5071. &:checked, &:not(:checked) {
  5072. display: none;
  5073. }
  5074. }
  5075. [type="radio"] {
  5076. &:checked, &:not(:checked) {
  5077. + label {
  5078. padding-left: 27px;
  5079. cursor: pointer;
  5080. display: block;
  5081. color: $black-color;
  5082. position: relative;
  5083. margin-bottom: 8px;
  5084. font: {
  5085. weight: 500;
  5086. }
  5087. &::before {
  5088. content: '';
  5089. position: absolute;
  5090. left: 0;
  5091. top: 4px;
  5092. width: 18px;
  5093. height: 18px;
  5094. border: 1px solid #dddddd;
  5095. border-radius: 50%;
  5096. background: $white-color;
  5097. }
  5098. &::after {
  5099. content: '';
  5100. width: 12px;
  5101. height: 12px;
  5102. background: $light-green-color;
  5103. position: absolute;
  5104. top: 7px;
  5105. left: 3px;
  5106. border-radius: 50%;
  5107. transition: $transition;
  5108. }
  5109. }
  5110. }
  5111. }
  5112. [type="radio"] {
  5113. &:not(:checked) {
  5114. + label {
  5115. &::after {
  5116. opacity: 0;
  5117. visibility: hidden;
  5118. transform: scale(0);
  5119. }
  5120. }
  5121. }
  5122. }
  5123. [type="radio"] {
  5124. &:checked {
  5125. + label {
  5126. &::after {
  5127. opacity: 1;
  5128. visibility: visible;
  5129. transform: scale(1);
  5130. }
  5131. }
  5132. }
  5133. }
  5134. }
  5135. }
  5136. .btn {
  5137. &.order-btn {
  5138. display: block;
  5139. margin-top: 25px;
  5140. }
  5141. }
  5142. }
  5143. /*================================================
  5144. Page Title CSS
  5145. =================================================*/
  5146. .page-title-area {
  5147. position: relative;
  5148. z-index: 1;
  5149. background: transparent url(/images/banner-bg1.jpg) right top no-repeat;
  5150. padding: {
  5151. top: 190px;
  5152. bottom: 100px;
  5153. }
  5154. text-align: center;
  5155. h2 {
  5156. font: {
  5157. size: 28px;
  5158. weight: 700;
  5159. }
  5160. margin: 0;
  5161. }
  5162. }
  5163. /*================================================
  5164. FAQ CSS
  5165. =================================================*/
  5166. .faq-accordion {
  5167. box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.08);
  5168. padding: 60px;
  5169. background: $white-color;
  5170. border-radius: 10px;
  5171. .accordion {
  5172. list-style-type: none;
  5173. padding: 0;
  5174. margin: 0;
  5175. border: none;
  5176. .accordion__item {
  5177. box-shadow: 0 0 1.25rem rgba(108, 118, 134, 0.1);
  5178. background: $white-color;
  5179. margin-bottom: 15px;
  5180. border: none;
  5181. &:last-child {
  5182. margin-bottom: 0;
  5183. }
  5184. }
  5185. .accordion__button {
  5186. display: block;
  5187. padding: 15px 20px;
  5188. text-decoration: none;
  5189. color: $black-color;
  5190. position: relative;
  5191. background-color: #fff;
  5192. font: {
  5193. size: 15px;
  5194. weight: 500;
  5195. }
  5196. i {
  5197. position: absolute;
  5198. left: 0;
  5199. top: 0;
  5200. width: 40px;
  5201. text-align: center;
  5202. height: 100%;
  5203. background: $light-green-color;
  5204. color: $white-color;
  5205. &::before {
  5206. position: absolute;
  5207. left: 0;
  5208. top: 50%;
  5209. right: 0;
  5210. transform: translateY(-50%);
  5211. font-size: 15px;
  5212. }
  5213. }
  5214. &.active {
  5215. border-bottom-color: #e1e1e1;
  5216. i {
  5217. &::before {
  5218. content: "\f10f";
  5219. }
  5220. }
  5221. }
  5222. }
  5223. .accordion__panel {
  5224. padding: 15px 15px;
  5225. border-top: 1px solid #e1e1e1;
  5226. }
  5227. }
  5228. }
  5229. .faq-contact {
  5230. margin-top: 45px;
  5231. box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.08);
  5232. padding: 60px;
  5233. border-radius: 4px;
  5234. background: $white-color;
  5235. h3 {
  5236. font: {
  5237. size: 24px;
  5238. }
  5239. margin-bottom: 25px;
  5240. }
  5241. form {
  5242. .btn {
  5243. margin-top: 10px;
  5244. }
  5245. }
  5246. }
  5247. /*================================================
  5248. Pagination CSS
  5249. =================================================*/
  5250. .pagination-area {
  5251. text-align: center;
  5252. margin-top: 30px;
  5253. ul {
  5254. padding: 0;
  5255. margin: 0;
  5256. .page-item {
  5257. .page-link {
  5258. padding: 11px 20px;
  5259. margin: 0 -1px;
  5260. color: #6f8ba4;
  5261. background-color: $white-color;
  5262. border: none;
  5263. border-radius: 0;
  5264. box-shadow: 0 2px 10px 0 #d8dde6;
  5265. &:hover, &:focus {
  5266. color: $white-color;
  5267. background-color: $light-green-color;
  5268. box-shadow: unset;
  5269. }
  5270. svg {
  5271. width: 16px;
  5272. }
  5273. }
  5274. &.active {
  5275. .page-link {
  5276. color: $white-color;
  5277. background-color: $light-green-color;
  5278. }
  5279. }
  5280. }
  5281. }
  5282. }
  5283. /*================================================
  5284. Blog Details CSS
  5285. =================================================*/
  5286. .blog-details-desc {
  5287. .article-content {
  5288. margin-top: 30px;
  5289. .entry-meta {
  5290. margin-bottom: 10px;
  5291. ul {
  5292. padding-left: 0;
  5293. margin-bottom: 0;
  5294. list-style-type: none;
  5295. li {
  5296. position: relative;
  5297. display: inline-block;
  5298. color: $black-color;
  5299. margin-right: 20px;
  5300. a {
  5301. display: inline-block;
  5302. color: $paragraph-color;
  5303. &:hover {
  5304. color: $light-green-color;
  5305. }
  5306. }
  5307. svg {
  5308. color: $purple-color;
  5309. margin-right: 2px;
  5310. position: relative;
  5311. top: -1px;
  5312. width: 15px;
  5313. }
  5314. &::before {
  5315. content: '';
  5316. position: absolute;
  5317. top: 12px;
  5318. right: -15px;
  5319. width: 6px;
  5320. height: 1px;
  5321. background: $light-green-color;
  5322. }
  5323. &:last-child {
  5324. margin-right: 0;
  5325. &::before {
  5326. display: none;
  5327. }
  5328. }
  5329. }
  5330. }
  5331. }
  5332. h1, h2, h3, h4, h5 {
  5333. margin-bottom: 15px;
  5334. }
  5335. h1 {
  5336. font-size: 30px;
  5337. }
  5338. h2 {
  5339. font-size: 28px;
  5340. }
  5341. h3 {
  5342. font-size: 25px;
  5343. }
  5344. h4 {
  5345. font-size: 22px;
  5346. }
  5347. h5 {
  5348. font-size: 20px;
  5349. }
  5350. .block-gallery {
  5351. &.columns-3 {
  5352. padding-left: 0;
  5353. list-style-type: none;
  5354. display: -ms-flexbox;
  5355. display: flex;
  5356. -ms-flex-wrap: wrap;
  5357. flex-wrap: wrap;
  5358. margin: {
  5359. right: -10px;
  5360. left: -10px;
  5361. bottom: 30px;
  5362. top: 30px;
  5363. }
  5364. li {
  5365. -ms-flex: 0 0 33.3333%;
  5366. flex: 0 0 33.3333%;
  5367. max-width: 33.3333%;
  5368. padding: {
  5369. right: 10px;
  5370. left: 10px;
  5371. }
  5372. figure {
  5373. margin-bottom: 0;
  5374. }
  5375. }
  5376. }
  5377. }
  5378. .features-list {
  5379. padding-left: 0;
  5380. list-style-type: none;
  5381. margin: {
  5382. top: 25px;
  5383. bottom: 30px;
  5384. };
  5385. li {
  5386. margin-bottom: 15px;
  5387. position: relative;
  5388. padding-left: 25px;
  5389. color: $paragraph-color;
  5390. svg {
  5391. color: $light-green-color;
  5392. display: inline-block;
  5393. width: 20px;
  5394. position: absolute;
  5395. left: 0;
  5396. top: 0;
  5397. }
  5398. &:last-child {
  5399. margin-bottom: 0;
  5400. }
  5401. }
  5402. }
  5403. }
  5404. .article-footer {
  5405. margin: {
  5406. top: 30px;
  5407. };
  5408. .article-tags {
  5409. a {
  5410. display: inline-block;
  5411. color: $white-color;
  5412. background-color: $purple-color;
  5413. padding: 4px 12px;
  5414. border-radius: 5px;
  5415. margin-right: 3px;
  5416. font-size: 14px;
  5417. &:hover {
  5418. color: $white-color;
  5419. background-color: $light-green-color;
  5420. }
  5421. }
  5422. }
  5423. }
  5424. }
  5425. .comments-area {
  5426. margin-top: 25px;
  5427. .comments-title {
  5428. margin: {
  5429. bottom: 30px;
  5430. };
  5431. line-height: initial;
  5432. font: {
  5433. size: 20px;
  5434. };
  5435. }
  5436. ol, ul {
  5437. padding: 0;
  5438. margin: 0;
  5439. list-style-type: none;
  5440. }
  5441. .comment-list {
  5442. padding: 0;
  5443. margin: 0;
  5444. list-style-type: none;
  5445. }
  5446. .children {
  5447. margin-left: 20px;
  5448. }
  5449. .comment-body {
  5450. border-bottom: 1px solid #eeeeee;
  5451. padding-left: 65px;
  5452. color: $black-color;
  5453. font-size: 14px;
  5454. margin-bottom: 20px;
  5455. padding-bottom: 20px;
  5456. .reply {
  5457. margin-top: 15px;
  5458. a {
  5459. border: 1px solid #ded9d9;
  5460. color: $black-color;
  5461. display: inline-block;
  5462. padding: 6px 20px;
  5463. border-radius: 30px;
  5464. text-transform: uppercase;
  5465. position: relative;
  5466. z-index: 1;
  5467. font: {
  5468. size: 13px;
  5469. weight: 500;
  5470. };
  5471. &:hover {
  5472. color: $white-color;
  5473. background-color: $light-green-color;
  5474. border-color: $light-green-color;
  5475. }
  5476. }
  5477. }
  5478. }
  5479. .comment-author {
  5480. font-size: 16px;
  5481. margin-bottom: 0.2em;
  5482. position: relative;
  5483. z-index: 2;
  5484. .avatar {
  5485. height: 50px;
  5486. left: -65px;
  5487. position: absolute;
  5488. width: 50px;
  5489. }
  5490. .fn {
  5491. font: {
  5492. weight: 500;
  5493. };
  5494. }
  5495. .says {
  5496. display: none;
  5497. }
  5498. }
  5499. .comment-metadata {
  5500. margin-bottom: .8em;
  5501. color: $paragraph-color;
  5502. letter-spacing: 0.01em;
  5503. text-transform: uppercase;
  5504. font: {
  5505. size: 13px;
  5506. weight: 400;
  5507. };
  5508. a {
  5509. color: $paragraph-color;
  5510. &:hover {
  5511. color: $light-green-color;
  5512. }
  5513. }
  5514. }
  5515. .comment-respond {
  5516. margin-top: 30px;
  5517. .comment-reply-title {
  5518. margin-bottom: 0;
  5519. font: {
  5520. size: 20px;
  5521. };
  5522. #cancel-comment-reply-link {
  5523. display: inline-block;
  5524. }
  5525. }
  5526. .comment-form {
  5527. overflow: hidden;
  5528. }
  5529. .comment-notes {
  5530. margin: {
  5531. bottom: 0;
  5532. top: 10px;
  5533. };
  5534. .required {
  5535. color: red;
  5536. }
  5537. }
  5538. .comment-form-comment {
  5539. margin-top: 15px;
  5540. float: left;
  5541. width: 100%;
  5542. }
  5543. label {
  5544. display: block;
  5545. color: $black-color;
  5546. margin-bottom: 5px;
  5547. font-size: $font-size;
  5548. }
  5549. input[type="date"], input[type="time"], input[type="datetime-local"], input[type="week"], input[type="month"], input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea {
  5550. display: block;
  5551. width: 100%;
  5552. background-color: $white-color;
  5553. border: 1px solid #eeeeee;
  5554. padding: 0.625em 0.7375em;
  5555. outline: 0;
  5556. transition: $transition;
  5557. &:focus {
  5558. border-color: $light-green-color;
  5559. }
  5560. }
  5561. .comment-form-author {
  5562. float: left;
  5563. width: 50%;
  5564. padding-right: 10px;
  5565. margin-bottom: 20px;
  5566. }
  5567. .comment-form-email {
  5568. float: left;
  5569. width: 50%;
  5570. padding-left: 12px;
  5571. margin-bottom: 20px;
  5572. }
  5573. .comment-form-url {
  5574. float: left;
  5575. width: 100%;
  5576. margin-bottom: 20px;
  5577. }
  5578. .comment-form-cookies-consent {
  5579. width: 100%;
  5580. float: left;
  5581. position: relative;
  5582. padding-left: 20px;
  5583. margin-bottom: 20px;
  5584. input {
  5585. position: absolute;
  5586. left: 0;
  5587. top: 3px;
  5588. }
  5589. label {
  5590. display: inline-block;
  5591. margin: 0;
  5592. color: $paragraph-color;
  5593. font-weight: normal;
  5594. position: relative;
  5595. top: -2px;
  5596. }
  5597. }
  5598. .form-submit {
  5599. float: left;
  5600. width: 100%;
  5601. input {
  5602. background: $light-green-color;
  5603. border: none;
  5604. color: $white-color;
  5605. padding: 11px 25px 10px;
  5606. display: inline-block;
  5607. cursor: pointer;
  5608. outline: 0;
  5609. transition: $transition;
  5610. border-radius: 5px;
  5611. text-transform: uppercase;
  5612. font: {
  5613. weight: 600;
  5614. size: $font-size;
  5615. };
  5616. &:hover, &:focus {
  5617. color: $white-color;
  5618. background-color: $purple-color;
  5619. transform: translateY(-5px);
  5620. }
  5621. }
  5622. }
  5623. }
  5624. }
  5625. .startp-post-navigation {
  5626. display: -ms-flexbox;
  5627. display: flex;
  5628. -ms-flex-wrap: wrap;
  5629. flex-wrap: wrap;
  5630. margin: {
  5631. top: 30px;
  5632. };
  5633. padding: {
  5634. top: 30px;
  5635. bottom: 30px;
  5636. };
  5637. border: {
  5638. top: 1px solid #eeeeee;
  5639. bottom: 1px solid #eeeeee;
  5640. };
  5641. }
  5642. .prev-link-wrapper {
  5643. -ms-flex: 0 0 50%;
  5644. flex: 0 0 50%;
  5645. max-width: 50%;
  5646. padding: {
  5647. right: 15px;
  5648. };
  5649. a {
  5650. display: -webkit-box;
  5651. display: -webkit-flex;
  5652. display: -moz-box;
  5653. display: -ms-flexbox;
  5654. display: flex;
  5655. -webkit-box-align: center;
  5656. -webkit-align-items: center;
  5657. -moz-box-align: center;
  5658. -ms-flex-align: center;
  5659. align-items: center;
  5660. &:hover {
  5661. .image-prev {
  5662. &::after {
  5663. opacity: 1;
  5664. visibility: visible;
  5665. }
  5666. .post-nav-title {
  5667. opacity: 1;
  5668. visibility: visible;
  5669. }
  5670. }
  5671. .prev-link-info-wrapper {
  5672. color: $light-green-color;
  5673. }
  5674. }
  5675. }
  5676. .image-prev {
  5677. display: inline-block;
  5678. min-width: 100px;
  5679. width: 100px;
  5680. border-radius: 5px;
  5681. overflow: hidden;
  5682. vertical-align: top;
  5683. margin-right: 20px;
  5684. position: relative;
  5685. transition: $transition;
  5686. img {
  5687. border-radius: 5px;
  5688. }
  5689. &::after {
  5690. display: block;
  5691. content: '';
  5692. height: 100%;
  5693. width: 100%;
  5694. position: absolute;
  5695. top: 0;
  5696. left: 0;
  5697. border-radius: 5px;
  5698. opacity: 0;
  5699. background-color: $light-green-color;
  5700. visibility: hidden;
  5701. transition: $transition;
  5702. }
  5703. .post-nav-title {
  5704. position: absolute;
  5705. left: 0;
  5706. top: 50%;
  5707. transform: translateY(-50%);
  5708. right: 0;
  5709. margin: 0 auto;
  5710. text-align: center;
  5711. text-transform: uppercase;
  5712. z-index: 2;
  5713. color: $white-color;
  5714. opacity: 0;
  5715. visibility: hidden;
  5716. transition: $transition;
  5717. font: {
  5718. size: 16px;
  5719. weight: 500;
  5720. };
  5721. }
  5722. }
  5723. .prev-link-info-wrapper {
  5724. color: $black-color;
  5725. transition: $transition;
  5726. }
  5727. .prev-title {
  5728. display: inline-block;
  5729. font: {
  5730. weight: 500;
  5731. size: 17px;
  5732. };
  5733. }
  5734. .meta-wrapper {
  5735. display: block;
  5736. color: $paragraph-color;
  5737. text-transform: capitalize;
  5738. margin-top: 5px;
  5739. font: {
  5740. weight: 400;
  5741. size: 14px;
  5742. };
  5743. }
  5744. }
  5745. .next-link-wrapper {
  5746. -ms-flex: 0 0 50%;
  5747. flex: 0 0 50%;
  5748. max-width: 50%;
  5749. text-align: right;
  5750. padding: {
  5751. left: 15px;
  5752. };
  5753. a {
  5754. display: -webkit-box;
  5755. display: -webkit-flex;
  5756. display: -moz-box;
  5757. display: -ms-flexbox;
  5758. display: flex;
  5759. -webkit-box-align: center;
  5760. -webkit-align-items: center;
  5761. -moz-box-align: center;
  5762. -ms-flex-align: center;
  5763. align-items: center;
  5764. &:hover {
  5765. .image-next {
  5766. &::after {
  5767. opacity: 1;
  5768. visibility: visible;
  5769. }
  5770. .post-nav-title {
  5771. opacity: 1;
  5772. visibility: visible;
  5773. }
  5774. }
  5775. .next-link-info-wrapper {
  5776. color: $light-green-color;
  5777. }
  5778. }
  5779. }
  5780. .image-next {
  5781. display: inline-block;
  5782. min-width: 100px;
  5783. width: 100px;
  5784. border-radius: 5px;
  5785. overflow: hidden;
  5786. vertical-align: top;
  5787. margin-left: 20px;
  5788. position: relative;
  5789. transition: $transition;
  5790. img {
  5791. border-radius: 5px;
  5792. }
  5793. &::after {
  5794. display: block;
  5795. content: '';
  5796. height: 100%;
  5797. width: 100%;
  5798. position: absolute;
  5799. top: 0;
  5800. left: 0;
  5801. border-radius: 5px;
  5802. opacity: 0;
  5803. background-color: $light-green-color;
  5804. visibility: hidden;
  5805. transition: $transition;
  5806. }
  5807. .post-nav-title {
  5808. position: absolute;
  5809. left: 0;
  5810. top: 50%;
  5811. transform: translateY(-50%);
  5812. right: 0;
  5813. margin: 0 auto;
  5814. text-align: center;
  5815. text-transform: uppercase;
  5816. z-index: 2;
  5817. color: $white-color;
  5818. opacity: 0;
  5819. visibility: hidden;
  5820. transition: $transition;
  5821. font: {
  5822. size: 16px;
  5823. weight: 500;
  5824. };
  5825. }
  5826. }
  5827. .next-link-info-wrapper {
  5828. transition: $transition;
  5829. color: $black-color;
  5830. }
  5831. .next-title {
  5832. display: inline-block;
  5833. font: {
  5834. weight: 500;
  5835. size: 17px;
  5836. };
  5837. }
  5838. .meta-wrapper {
  5839. display: block;
  5840. color: $paragraph-color;
  5841. text-transform: capitalize;
  5842. margin-top: 5px;
  5843. font: {
  5844. weight: 400;
  5845. size: 14px;
  5846. };
  5847. }
  5848. }
  5849. blockquote, .blockquote {
  5850. overflow: hidden;
  5851. background-color: #fafafa;
  5852. padding: 50px !important;
  5853. position: relative;
  5854. z-index: 1;
  5855. margin: {
  5856. bottom: 20px;
  5857. top: 20px;
  5858. };
  5859. p {
  5860. color: $black-color;
  5861. line-height: 1.6;
  5862. margin-bottom: 0;
  5863. font: {
  5864. style: italic;
  5865. weight: 500;
  5866. size: 20px !important;
  5867. };
  5868. }
  5869. cite {
  5870. display: none;
  5871. }
  5872. &::after {
  5873. content: '';
  5874. position: absolute;
  5875. left: 0;
  5876. top: 0;
  5877. bottom: 0;
  5878. width: 3px;
  5879. background-color: $light-green-color;
  5880. margin: {
  5881. top: 20px;
  5882. bottom: 20px;
  5883. };
  5884. }
  5885. }
  5886. /*================================================
  5887. Sidebar Widget CSS
  5888. =================================================*/
  5889. .widget-area {
  5890. .widget {
  5891. margin-top: 35px;
  5892. &:first-child {
  5893. margin-top: 0;
  5894. }
  5895. .widget-title {
  5896. border-bottom: 1px solid #eeeeee;
  5897. padding-bottom: 10px;
  5898. margin-bottom: 25px;
  5899. position: relative;
  5900. font-weight: 600;
  5901. font: {
  5902. size: 19px;
  5903. };
  5904. &::before {
  5905. content: '';
  5906. position: absolute;
  5907. background: $light-green-color;
  5908. bottom: -1px;
  5909. left: 0;
  5910. width: 50px;
  5911. height: 1px;
  5912. }
  5913. }
  5914. }
  5915. .widget_search {
  5916. box-shadow: 0px 0px 29px 0px rgba(102, 102, 102, 0.1);
  5917. background-color: $white-color;
  5918. padding: 15px;
  5919. form {
  5920. position: relative;
  5921. label {
  5922. display: block;
  5923. margin-bottom: 0;
  5924. }
  5925. .screen-reader-text {
  5926. display: none;
  5927. }
  5928. .search-field {
  5929. background-color: transparent;
  5930. height: 50px;
  5931. padding: 6px 15px;
  5932. border: 1px solid #eeeeee;
  5933. width: 100%;
  5934. display: block;
  5935. outline: 0;
  5936. transition: $transition;
  5937. &:focus {
  5938. border-color: $light-green-color;
  5939. }
  5940. }
  5941. button {
  5942. position: absolute;
  5943. right: 0;
  5944. outline: 0;
  5945. bottom: 0;
  5946. height: 50px;
  5947. width: 50px;
  5948. z-index: 1;
  5949. border: none;
  5950. cursor: pointer;
  5951. color: $white-color;
  5952. background-color: $light-green-color;
  5953. transition: $transition;
  5954. font-size: 20px;
  5955. svg {
  5956. position: absolute;
  5957. top: 50%;
  5958. transform: translateY(-50%);
  5959. right: 0;
  5960. left: 0;
  5961. width: 20px;
  5962. margin: {
  5963. left: auto;
  5964. right: auto;
  5965. };
  5966. }
  5967. &:hover {
  5968. background-color: $purple-color;
  5969. color: $white-color;
  5970. }
  5971. }
  5972. }
  5973. }
  5974. .widget_startp_posts_thumb {
  5975. position: relative;
  5976. overflow: hidden;
  5977. .item {
  5978. overflow: hidden;
  5979. margin-bottom: 15px;
  5980. &:last-child {
  5981. margin-bottom: 0;
  5982. }
  5983. .thumb {
  5984. float: left;
  5985. height: 80px;
  5986. overflow: hidden;
  5987. position: relative;
  5988. width: 80px;
  5989. margin-right: 15px;
  5990. .fullimage {
  5991. width: 80px;
  5992. height: 80px;
  5993. display: inline-block;
  5994. background: {
  5995. size: cover !important;
  5996. repeat: no-repeat;
  5997. position: center center !important;
  5998. }
  5999. &.bg1 {
  6000. background-image: url(/images/blog-image/blog7.jpg);
  6001. }
  6002. &.bg2 {
  6003. background-image: url(/images/blog-image/blog8.jpg);
  6004. }
  6005. &.bg3 {
  6006. background-image: url(/images/blog-image/blog9.jpg);
  6007. }
  6008. }
  6009. }
  6010. .info {
  6011. overflow: hidden;
  6012. margin-top: 5px;
  6013. time {
  6014. display: block;
  6015. color: $paragraph-color;
  6016. text-transform: uppercase;
  6017. margin: {
  6018. top: 3px;
  6019. bottom: 5px;
  6020. };
  6021. font: {
  6022. size: 12px;
  6023. };
  6024. }
  6025. .title {
  6026. margin-bottom: 0;
  6027. line-height: 1.5;
  6028. font: {
  6029. size: 15px;
  6030. weight: 500;
  6031. };
  6032. a {
  6033. display: inline-block;
  6034. }
  6035. }
  6036. }
  6037. }
  6038. }
  6039. .widget_recent_entries {
  6040. ul {
  6041. padding-left: 0;
  6042. margin-bottom: 0;
  6043. list-style-type: none;
  6044. li {
  6045. position: relative;
  6046. margin-bottom: 12px;
  6047. color: $black-color;
  6048. padding-left: 14px;
  6049. line-height: 1.5;
  6050. font: {
  6051. weight: 500;
  6052. size: $font-size;
  6053. };
  6054. &:last-child {
  6055. margin-bottom: 0;
  6056. }
  6057. &::before {
  6058. background: $light-green-color;
  6059. position: absolute;
  6060. height: 7px;
  6061. width: 7px;
  6062. content: '';
  6063. left: 0;
  6064. top: 8px;
  6065. }
  6066. a {
  6067. display: inline-block;
  6068. color: $black-color;
  6069. &:hover {
  6070. color: $light-green-color;
  6071. }
  6072. }
  6073. .post-date {
  6074. display: block;
  6075. font-size: 13px;
  6076. color: $paragraph-color;
  6077. margin-top: 4px;
  6078. }
  6079. }
  6080. }
  6081. }
  6082. .widget_recent_comments {
  6083. ul {
  6084. padding-left: 0;
  6085. margin-bottom: 0;
  6086. list-style-type: none;
  6087. li {
  6088. position: relative;
  6089. margin-bottom: 12px;
  6090. color: $paragraph-color;
  6091. padding-left: 14px;
  6092. line-height: 1.5;
  6093. font: {
  6094. weight: 500;
  6095. size: $font-size;
  6096. };
  6097. &:last-child {
  6098. margin-bottom: 0;
  6099. }
  6100. &::before {
  6101. background: $light-green-color;
  6102. position: absolute;
  6103. height: 7px;
  6104. width: 7px;
  6105. content: '';
  6106. left: 0;
  6107. top: 8px;
  6108. }
  6109. a {
  6110. display: inline-block;
  6111. color: $black-color;
  6112. &:hover {
  6113. color: $light-green-color;
  6114. }
  6115. }
  6116. }
  6117. }
  6118. }
  6119. .widget_archive {
  6120. ul {
  6121. padding-left: 0;
  6122. margin-bottom: 0;
  6123. list-style-type: none;
  6124. li {
  6125. position: relative;
  6126. margin-bottom: 12px;
  6127. padding-left: 14px;
  6128. color: $black-color;
  6129. font: {
  6130. weight: 500;
  6131. size: $font-size;
  6132. };
  6133. &:last-child {
  6134. margin-bottom: 0;
  6135. }
  6136. &::before {
  6137. background: $light-green-color;
  6138. height: 7px;
  6139. width: 7px;
  6140. content: '';
  6141. left: 0;
  6142. top: 8px;
  6143. position: absolute;
  6144. }
  6145. a {
  6146. display: inline-block;
  6147. color: $black-color;
  6148. &:hover {
  6149. color: $light-green-color;
  6150. }
  6151. }
  6152. }
  6153. }
  6154. }
  6155. .widget_categories {
  6156. ul {
  6157. padding-left: 0;
  6158. margin-bottom: 0;
  6159. list-style-type: none;
  6160. li {
  6161. position: relative;
  6162. margin-bottom: 12px;
  6163. color: $paragraph-color;
  6164. padding-left: 14px;
  6165. font: {
  6166. weight: 500;
  6167. size: $font-size;
  6168. };
  6169. &:last-child {
  6170. margin-bottom: 0;
  6171. }
  6172. &::before {
  6173. background: $light-green-color;
  6174. height: 7px;
  6175. width: 7px;
  6176. content: '';
  6177. left: 0;
  6178. top: 6px;
  6179. position: absolute;
  6180. }
  6181. a {
  6182. color: $black-color;
  6183. display: block;
  6184. &:hover {
  6185. color: $light-green-color;
  6186. }
  6187. }
  6188. .post-count {
  6189. float: right;
  6190. }
  6191. }
  6192. }
  6193. }
  6194. .widget_meta {
  6195. ul {
  6196. padding-left: 0;
  6197. margin-bottom: 0;
  6198. list-style-type: none;
  6199. li {
  6200. position: relative;
  6201. margin-bottom: 12px;
  6202. color: $black-color;
  6203. padding-left: 14px;
  6204. font: {
  6205. weight: 500;
  6206. size: $font-size;
  6207. };
  6208. &:last-child {
  6209. margin-bottom: 0;
  6210. }
  6211. &::before {
  6212. background: $light-green-color;
  6213. height: 7px;
  6214. width: 7px;
  6215. content: '';
  6216. left: 0;
  6217. top: 8px;
  6218. position: absolute;
  6219. }
  6220. a {
  6221. display: inline-block;
  6222. color: $black-color;
  6223. &:hover {
  6224. color: $light-green-color;
  6225. }
  6226. }
  6227. }
  6228. }
  6229. }
  6230. .tagcloud {
  6231. a {
  6232. display: inline-block;
  6233. color: $black-color;
  6234. font: {
  6235. weight: 500;
  6236. size: 14px !important;
  6237. };
  6238. padding: 6px 13px;
  6239. border: 1px dashed #eeeeee;
  6240. margin: {
  6241. top: 8px;
  6242. right: 8px;
  6243. };
  6244. &:hover, &:focus {
  6245. color: $white-color;
  6246. background-color: $light-green-color;
  6247. border-color: $light-green-color;
  6248. }
  6249. }
  6250. }
  6251. }
  6252. /*================================================
  6253. Project Details CSS
  6254. =================================================*/
  6255. .project-details-image {
  6256. position: relative;
  6257. z-index: 1;
  6258. margin-bottom: 30px;
  6259. text-align: center;
  6260. &::before {
  6261. content: '';
  6262. position: absolute;
  6263. left: 0;
  6264. top: 0;
  6265. width: 100%;
  6266. height: 100%;
  6267. background: $black-color;
  6268. opacity: 0;
  6269. visibility: hidden;
  6270. transition: .4s;
  6271. }
  6272. a {
  6273. position: absolute;
  6274. left: 0;
  6275. right: 0;
  6276. margin: 0 auto;
  6277. top: 50%;
  6278. color: $white-color;
  6279. margin-top: 0;
  6280. opacity: 0;
  6281. visibility: hidden;
  6282. margin-top: 25px;
  6283. &:hover {
  6284. color: $light-green-color;
  6285. }
  6286. }
  6287. }
  6288. .project-details-desc {
  6289. h3 {
  6290. font: {
  6291. size: 22px;
  6292. }
  6293. margin: {
  6294. bottom: 15px;
  6295. top: 15px;
  6296. }
  6297. }
  6298. .project-details-information {
  6299. overflow: hidden;
  6300. .single-info-box {
  6301. float: left;
  6302. width: 20%;
  6303. margin-top: 30px;
  6304. h4 {
  6305. font: {
  6306. size: 18px;
  6307. }
  6308. margin-bottom: 15px;
  6309. }
  6310. p {
  6311. margin-bottom: 0;
  6312. }
  6313. ul {
  6314. padding: 0;
  6315. margin: 0;
  6316. list-style-type: none;
  6317. li {
  6318. display: inline-block;
  6319. a {
  6320. margin-right: 10px;
  6321. color: $paragraph-color;
  6322. svg {
  6323. width: 18px;
  6324. }
  6325. &:hover {
  6326. color: $light-green-color;
  6327. transform: translateY(-5px);
  6328. }
  6329. }
  6330. }
  6331. }
  6332. }
  6333. }
  6334. }
  6335. /*================================================
  6336. Contact CSS
  6337. =================================================*/
  6338. .contact-info-box {
  6339. text-align: center;
  6340. transition: .4s;
  6341. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  6342. background: $white-color;
  6343. padding: 30px;
  6344. .icon {
  6345. display: inline-block;
  6346. width: 65px;
  6347. height: 65px;
  6348. line-height: 62px;
  6349. background: $bg-color;
  6350. border-radius: 50%;
  6351. font-size: 30px;
  6352. color: $light-green-color;
  6353. transition: .4s;
  6354. }
  6355. h3 {
  6356. font: {
  6357. size: 18px;
  6358. }
  6359. margin: 25px 0 15px;
  6360. }
  6361. p {
  6362. margin-bottom: 0;
  6363. a {
  6364. color: $paragraph-color;
  6365. &:hover {
  6366. color: $light-green-color;
  6367. }
  6368. }
  6369. }
  6370. &:hover {
  6371. transform: translateY(-10px);
  6372. .icon {
  6373. color: $white-color;
  6374. background: $light-green-color;
  6375. }
  6376. }
  6377. }
  6378. #map {
  6379. height: 500px;
  6380. width: 100%;
  6381. }
  6382. #contactForm {
  6383. .help-block {
  6384. ul {
  6385. margin: 0;
  6386. li {
  6387. color: red;
  6388. }
  6389. }
  6390. }
  6391. .btn {
  6392. margin-top: 10px;
  6393. }
  6394. #msgSubmit {
  6395. &.text-danger, &.text-success {
  6396. margin: 20px 0 0;
  6397. }
  6398. }
  6399. }
  6400. /*================================================
  6401. Coming Soon CSS
  6402. =================================================*/
  6403. .coming-soon-area {
  6404. position: relative;
  6405. z-index: 1;
  6406. height: 100vh;
  6407. background: {
  6408. image: url(/images/coming-soon.jpg);
  6409. position: center center;
  6410. size: cover;
  6411. repeat: no-repeat;
  6412. }
  6413. &::before {
  6414. z-index: -1;
  6415. background: linear-gradient(-9deg, #6a82fb 0%, #6a82fb 40%, #fc5c7d 100%);
  6416. position: absolute;
  6417. left: 0;
  6418. top: 0;
  6419. width: 100%;
  6420. height: 100%;
  6421. content: '';
  6422. opacity: .8;
  6423. }
  6424. .social-list {
  6425. padding: 0;
  6426. margin: 0;
  6427. list-style-type: none;
  6428. position: absolute;
  6429. left: 0;
  6430. right: 0;
  6431. margin: 0 auto;
  6432. text-align: center;
  6433. bottom: 30px;
  6434. li {
  6435. display: inline-block;
  6436. &.list-heading {
  6437. display: block;
  6438. color: $white-color;
  6439. margin-bottom: 10px;
  6440. font: {
  6441. size: 16px;
  6442. weight: 500;
  6443. }
  6444. }
  6445. a {
  6446. width: 35px;
  6447. height: 35px;
  6448. line-height: 35px;
  6449. background: $light-green-color;
  6450. color: $white-color;
  6451. border-radius: 50%;
  6452. margin: 0 2px;
  6453. svg {
  6454. width: 15px;
  6455. }
  6456. &.facebook {
  6457. background-color: #3b5998;
  6458. }
  6459. &.twitter {
  6460. background-color: #1da1f2;
  6461. }
  6462. &.linkedin {
  6463. background-color: #0077b5;
  6464. }
  6465. &.instagram {
  6466. background-color: #c13584;
  6467. }
  6468. &:hover, &:focus {
  6469. background-color: $light-green-color;
  6470. }
  6471. }
  6472. }
  6473. }
  6474. }
  6475. .coming-soon-content {
  6476. text-align: center;
  6477. max-width: 820px;
  6478. margin: -80px auto 0;
  6479. h1 {
  6480. color: $white-color;
  6481. font: {
  6482. size: 55px;
  6483. weight: 600;
  6484. }
  6485. margin-bottom: 15px;
  6486. }
  6487. p {
  6488. color: $white-color;
  6489. font-size: 16px;
  6490. margin: 0 auto;
  6491. max-width: 620px;
  6492. }
  6493. form {
  6494. position: relative;
  6495. margin: 35px auto 55px;
  6496. max-width: 520px;
  6497. .email-input {
  6498. display: block;
  6499. width: 100%;
  6500. height: 56px;
  6501. border: none;
  6502. box-shadow: inset 0 0 1px rgba(0,0,0,.1), 0px 0px 0px 5px rgba(255,255,255,.3);
  6503. border-radius: 40px;
  6504. padding: 15px 25px;
  6505. font-size: 16px;
  6506. outline: 0 !important;
  6507. background: #F1F2F3;
  6508. }
  6509. .submit-btn {
  6510. position: absolute;
  6511. right: 3px;
  6512. top: 3px;
  6513. height: 50px;
  6514. background: $light-green-color;
  6515. color: $white-color;
  6516. border: none;
  6517. border-radius: 40px;
  6518. width: 130px;
  6519. outline: 0 !important;
  6520. cursor: pointer;
  6521. text-transform: uppercase;
  6522. transition: $transition;
  6523. font: {
  6524. size: 15px;
  6525. weight: 500;
  6526. }
  6527. &:hover, &:focus {
  6528. background-color: $purple-color;
  6529. }
  6530. }
  6531. }
  6532. #timer {
  6533. div {
  6534. background: $white-color;
  6535. display: inline-block;
  6536. border-radius: 50%;
  6537. width: 110px;
  6538. height: 110px;
  6539. color: $purple-color;
  6540. box-shadow: 0px 0px 0px 5px rgba(255,255,255,.5);
  6541. margin: 0 10px;
  6542. padding-top: 18px;
  6543. font: {
  6544. size: 35px;
  6545. weight: 500;
  6546. }
  6547. span {
  6548. display: block;
  6549. margin-top: -4px;
  6550. color: $paragraph-color;
  6551. font-size: 15px;
  6552. }
  6553. }
  6554. }
  6555. }
  6556. /*================================================
  6557. 404 Error CSS
  6558. =================================================*/
  6559. .error-area {
  6560. height: 100vh;
  6561. }
  6562. .error-content {
  6563. text-align: center;
  6564. margin-top: -70px;
  6565. .notfound-404 {
  6566. position: relative;
  6567. height: 280px;
  6568. z-index: -1;
  6569. margin-bottom: 30px;
  6570. h1 {
  6571. font: {
  6572. size: 230px;
  6573. weight: 900;
  6574. }
  6575. margin: 0;
  6576. position: absolute;
  6577. left: 50%;
  6578. transform: translateX(-50%);
  6579. background: url(/images/oops-bg.jpg) no-repeat;
  6580. -webkit-background-clip: text;
  6581. -webkit-text-fill-color: transparent;
  6582. background: {
  6583. size: cover;
  6584. position: center;
  6585. }
  6586. }
  6587. }
  6588. h3 {
  6589. font: {
  6590. weight: 600;
  6591. size: 25px;
  6592. }
  6593. margin-bottom: 15px;
  6594. }
  6595. p {
  6596. max-width: 550px;
  6597. margin: 0 auto 25px;
  6598. }
  6599. }
  6600. /*================================================
  6601. CTA CSS
  6602. =================================================*/
  6603. .cta-area {
  6604. background: $gradient-color;
  6605. .container {
  6606. max-width: 945px;
  6607. }
  6608. }
  6609. .cta-content {
  6610. h3 {
  6611. color: $white-color;
  6612. margin: 0;
  6613. font: {
  6614. size: 24px;
  6615. weight: 600;
  6616. }
  6617. }
  6618. }
  6619. .cta-right-content {
  6620. text-align: right;
  6621. .hosting-price {
  6622. display: inline-block;
  6623. span {
  6624. color: #f6fe6a;
  6625. display: block;
  6626. }
  6627. h4 {
  6628. margin: 10px 0 0;
  6629. color: $white-color;
  6630. font-size: 20px;
  6631. }
  6632. }
  6633. .buy-btn {
  6634. display: inline-block;
  6635. padding-left: 35px;
  6636. position: relative;
  6637. top: -15px;
  6638. .btn-primary {
  6639. background: $purple-color;
  6640. box-shadow: 0 13px 27px 0 rgba(198, 121, 227, 0.25);
  6641. &::after, &::before {
  6642. background: $white-color;
  6643. box-shadow: 0 13px 27px 0 rgba(68, 206, 111, 0.25);
  6644. }
  6645. &:hover, &:focus {
  6646. color: $light-green-color;
  6647. }
  6648. }
  6649. }
  6650. }
  6651. /*================================================
  6652. Repair Main Banner CSS
  6653. =================================================*/
  6654. .repair-main-banner {
  6655. overflow-x: hidden;
  6656. padding: {
  6657. top: 200px;
  6658. bottom: 140px;
  6659. }
  6660. }
  6661. .repair-banner-content {
  6662. h1 {
  6663. margin-bottom: 20px;
  6664. font: {
  6665. size: 45px;
  6666. weight: 500;
  6667. }
  6668. }
  6669. p {
  6670. margin-bottom: 30px;
  6671. }
  6672. }
  6673. .repair-banner-image {
  6674. position: relative;
  6675. text-align: center;
  6676. img {
  6677. &:nth-child(2) {
  6678. position: absolute;
  6679. left: 0;
  6680. top: -65px;
  6681. right: -30px;
  6682. margin: 0 auto;
  6683. z-index: -1;
  6684. }
  6685. &:nth-child(3) {
  6686. position: absolute;
  6687. left: 0;
  6688. right: 0;
  6689. margin: 0 auto;
  6690. top: -69px;
  6691. z-index: -2;
  6692. }
  6693. &:nth-child(4) {
  6694. position: absolute;
  6695. left: 0;
  6696. right: 0;
  6697. top: -30px;
  6698. z-index: -1;
  6699. margin: 0 auto;
  6700. }
  6701. }
  6702. }
  6703. /*================================================
  6704. Repair Partner CSS
  6705. =================================================*/
  6706. .repair-partner-area {
  6707. padding: {
  6708. top: 45px;
  6709. bottom: 45px;
  6710. }
  6711. }
  6712. .single-repair-partner {
  6713. text-align: center;
  6714. a {
  6715. display: block;
  6716. position: relative;
  6717. img {
  6718. width: auto !important;
  6719. display: inline-block !important;
  6720. &:last-child {
  6721. position: absolute;
  6722. top: 20px;
  6723. left: 0;
  6724. right: 0;
  6725. margin: 0 auto;
  6726. transition: $transition;
  6727. opacity: 0;
  6728. visibility: hidden;
  6729. }
  6730. }
  6731. &:hover, &:focus {
  6732. img {
  6733. &:last-child {
  6734. opacity: 1;
  6735. visibility: visible;
  6736. top: 0;
  6737. }
  6738. }
  6739. }
  6740. }
  6741. }
  6742. .partner-slides {
  6743. &.owl-theme {
  6744. .owl-dots {
  6745. margin-top: 0;
  6746. }
  6747. }
  6748. }
  6749. /*================================================
  6750. Repair About CSS
  6751. =================================================*/
  6752. .repair-about-content {
  6753. .sub-title {
  6754. text-transform: uppercase;
  6755. color: $light-green-color;
  6756. display: block;
  6757. font: {
  6758. size: 15px;
  6759. weight: 400;
  6760. }
  6761. }
  6762. h2 {
  6763. font: {
  6764. size: 24px;
  6765. weight: 600;
  6766. }
  6767. margin: {
  6768. top: 10px;
  6769. bottom: 10px;
  6770. }
  6771. }
  6772. ul {
  6773. padding: 0;
  6774. list-style-type: none;
  6775. display: -ms-flexbox;
  6776. display: flex;
  6777. -ms-flex-wrap: wrap;
  6778. flex-wrap: wrap;
  6779. margin: {
  6780. top: -10px;
  6781. right: -10px;
  6782. left: -10px;
  6783. }
  6784. li {
  6785. -ms-flex: 0 0 50%;
  6786. flex: 0 0 50%;
  6787. max-width: 50%;
  6788. width: 100%;
  6789. margin-top: 25px;
  6790. color: $paragraph-color;
  6791. position: relative;
  6792. padding: {
  6793. right: 10px;
  6794. left: 10px;
  6795. }
  6796. span {
  6797. display: block;
  6798. position: relative;
  6799. z-index: 1;
  6800. padding: 10px;
  6801. border-radius: 3px;
  6802. transition: $transition;
  6803. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  6804. svg {
  6805. margin-right: 5px;
  6806. display: inline-block;
  6807. color: $light-green-color;
  6808. transition: $transition;
  6809. width: 18px;
  6810. }
  6811. &::before {
  6812. content: '';
  6813. left: 0;
  6814. top: 0;
  6815. height: 100%;
  6816. width: 100%;
  6817. background: $gradient-color;
  6818. opacity: 0;
  6819. visibility: hidden;
  6820. position: absolute;
  6821. border-radius: 3px;
  6822. z-index: -1;
  6823. transition: $transition;
  6824. }
  6825. &:hover, &:focus {
  6826. color: $white-color;
  6827. transform: translateY(-5px);
  6828. &::before {
  6829. opacity: 1;
  6830. visibility: visible;
  6831. }
  6832. svg {
  6833. color: $white-color;
  6834. }
  6835. }
  6836. }
  6837. }
  6838. }
  6839. }
  6840. .repair-about-image {
  6841. position: relative;
  6842. width: 100%;
  6843. height: 100%;
  6844. img {
  6845. position: absolute;
  6846. &:nth-child(1) {
  6847. left: 0;
  6848. top: 0;
  6849. z-index: 1;
  6850. }
  6851. &:nth-child(2) {
  6852. left: 0;
  6853. top: 50%;
  6854. transform: translateY(-50%);
  6855. right: 0;
  6856. text-align: center;
  6857. z-index: 2;
  6858. margin: 0 auto;
  6859. border: 5px solid #f8fbff;
  6860. width: 350px;
  6861. }
  6862. &:nth-child(3) {
  6863. right: 0;
  6864. bottom: 0;
  6865. z-index: 1;
  6866. }
  6867. &:nth-child(4) {
  6868. right: 0;
  6869. top: 0;
  6870. }
  6871. &:nth-child(5) {
  6872. left: 0;
  6873. bottom: 0;
  6874. }
  6875. }
  6876. }
  6877. /*================================================
  6878. Repair Services CSS
  6879. =================================================*/
  6880. .repair-services-area {
  6881. padding-bottom: 50px;
  6882. }
  6883. .single-repair-services {
  6884. margin-bottom: 30px;
  6885. position: relative;
  6886. z-index: 1;
  6887. padding: 40px 30px;
  6888. text-align: center;
  6889. background: {
  6890. position: center center;
  6891. size: cover;
  6892. repeat: no-repeat;
  6893. }
  6894. &.bg1 {
  6895. background-image: url(/images/repair-services-img/repair-services-img1.jpg);
  6896. }
  6897. &.bg2 {
  6898. background-image: url(/images/repair-services-img/repair-services-img2.jpg);
  6899. }
  6900. &.bg3 {
  6901. background-image: url(/images/repair-services-img/repair-services-img3.jpg);
  6902. }
  6903. &.bg4 {
  6904. background-image: url(/images/repair-services-img/repair-services-img4.jpg);
  6905. }
  6906. &.bg5 {
  6907. background-image: url(/images/repair-services-img/repair-services-img5.jpg);
  6908. }
  6909. &.bg6 {
  6910. background-image: url(/images/repair-services-img/repair-services-img6.jpg);
  6911. }
  6912. &::before {
  6913. position: absolute;
  6914. transition: $transition;
  6915. content: '';
  6916. position: absolute;
  6917. top: 0;
  6918. left: 0;
  6919. width: 100%;
  6920. height: 100%;
  6921. background: $white-color;
  6922. z-index: -1;
  6923. border: 1px dashed #cdf1d8;
  6924. }
  6925. &::after {
  6926. position: absolute;
  6927. transition: $transition;
  6928. content: '';
  6929. position: absolute;
  6930. top: 0;
  6931. left: 0;
  6932. width: 100%;
  6933. height: 100%;
  6934. background: $gradient-color;
  6935. z-index: -1;
  6936. opacity: 0;
  6937. visibility: hidden;
  6938. border: 1px dashed #cdf1d8;
  6939. }
  6940. h3 {
  6941. font-size: 19px;
  6942. transition: $transition;
  6943. line-height: 1.4;
  6944. margin: {
  6945. top: 22px;
  6946. bottom: 12px;
  6947. }
  6948. }
  6949. .icon {
  6950. display: inline-block;
  6951. color: $light-green-color;
  6952. width: 85px;
  6953. height: 85px;
  6954. line-height: 85px;
  6955. border: 1px solid #e3f7e9;
  6956. border-radius: 50%;
  6957. transition: $transition;
  6958. i {
  6959. &::before {
  6960. font-size: 35px;
  6961. }
  6962. }
  6963. }
  6964. p {
  6965. margin-bottom: 25px;
  6966. transition: $transition;
  6967. }
  6968. a {
  6969. width: 35px;
  6970. background-color: #f9fafb;
  6971. height: 35px;
  6972. line-height: 35px;
  6973. color: $black-color;
  6974. border-radius: 50%;
  6975. svg {
  6976. width: 15px;
  6977. }
  6978. }
  6979. &:hover, &:focus {
  6980. &::before {
  6981. opacity: 0;
  6982. visibility: hidden;
  6983. }
  6984. &::after {
  6985. opacity: .85;
  6986. visibility: visible;
  6987. }
  6988. h3 {
  6989. color: $white-color;
  6990. }
  6991. p {
  6992. color: $white-color;
  6993. }
  6994. .icon {
  6995. border-color: $white-color;
  6996. color: $white-color;
  6997. }
  6998. a {
  6999. background-color: $white-color;
  7000. color: $light-green-color;
  7001. }
  7002. }
  7003. }
  7004. /*================================================
  7005. Repair CTA CSS
  7006. =================================================*/
  7007. .repair-cta-area {
  7008. overflow: hidden;
  7009. position: relative;
  7010. z-index: 1;
  7011. padding: {
  7012. top: 10px;
  7013. bottom: 10px;
  7014. }
  7015. }
  7016. .cta-repair-content {
  7017. padding: 30px 0;
  7018. h3 {
  7019. color: $white-color;
  7020. font-size: 25px;
  7021. margin-bottom: 17px;
  7022. }
  7023. p {
  7024. color: $white-color;
  7025. opacity: .95;
  7026. margin-bottom: 25px;
  7027. }
  7028. }
  7029. .cta-repair-img {
  7030. text-align: right;
  7031. }
  7032. .circle-box {
  7033. position: absolute;
  7034. top: 0;
  7035. left: 0;
  7036. z-index: -1;
  7037. }
  7038. .cta-shape {
  7039. position: absolute;
  7040. bottom: 0;
  7041. right: 0;
  7042. z-index: -1;
  7043. }
  7044. /*================================================
  7045. Repair Team CSS
  7046. =================================================*/
  7047. .repair-team-area {
  7048. .container {
  7049. max-width: 1175px;
  7050. }
  7051. .single-team {
  7052. .team-content {
  7053. padding: {
  7054. left: 25px;
  7055. right: 25px;
  7056. }
  7057. }
  7058. }
  7059. }
  7060. /*================================================
  7061. Repair Why Choose Us CSS
  7062. =================================================*/
  7063. .repair-why-choose-us {
  7064. position: relative;
  7065. z-index: 1;
  7066. background: $gradient-color;
  7067. .section-title {
  7068. h2 {
  7069. color: $white-color;
  7070. }
  7071. .bar {
  7072. &::before {
  7073. background: $white-color;
  7074. }
  7075. }
  7076. p {
  7077. color: $white-color;
  7078. opacity: .95;
  7079. }
  7080. }
  7081. &::before {
  7082. content: '';
  7083. position: absolute;
  7084. bottom: 0;
  7085. left: 0;
  7086. height: 37%;
  7087. width: 100%;
  7088. background: $white-color;
  7089. z-index: -1;
  7090. }
  7091. }
  7092. .single-repair-box {
  7093. text-align: center;
  7094. background-color: $white-color;
  7095. border: 1px dashed #cdf1d8;
  7096. padding: 30px;
  7097. position: relative;
  7098. z-index: 1;
  7099. transition: $transition;
  7100. h3 {
  7101. font-size: 18px;
  7102. margin: {
  7103. top: 22px;
  7104. bottom: 17px;
  7105. }
  7106. }
  7107. p {
  7108. margin-bottom: 25px;
  7109. }
  7110. a {
  7111. width: 40px;
  7112. background-color: #eef0f3;
  7113. height: 40px;
  7114. line-height: 40px;
  7115. color: $black-color;
  7116. border-radius: 50%;
  7117. svg {
  7118. width: 18px;
  7119. }
  7120. }
  7121. .icon {
  7122. display: inline-block;
  7123. border: 1px solid #6ee9fa;
  7124. width: 100px;
  7125. height: 100px;
  7126. line-height: 100px;
  7127. border-radius: 50%;
  7128. position: relative;
  7129. color: $white-color;
  7130. z-index: 1;
  7131. &::before {
  7132. content: '';
  7133. position: absolute;
  7134. top: 0;
  7135. left: 0;
  7136. right: 0;
  7137. z-index: -1;
  7138. bottom: 0;
  7139. background: $gradient-color2;
  7140. border-radius: 50%;
  7141. margin: 6px;
  7142. transition: $transition;
  7143. }
  7144. i {
  7145. &::before {
  7146. font-size: 35px;
  7147. }
  7148. }
  7149. }
  7150. .back-icon {
  7151. position: absolute;
  7152. top: 58%;
  7153. transform: translateY(-50%);
  7154. left: 0;
  7155. right: 0;
  7156. margin: 0 auto;
  7157. color: #4457c3;
  7158. opacity: .06;
  7159. z-index: -1;
  7160. i {
  7161. &::before {
  7162. font-size: 200px;
  7163. }
  7164. }
  7165. }
  7166. &:hover, &:focus {
  7167. border-color: $light-green-color;
  7168. a {
  7169. background-color: $light-green-color;
  7170. color: $white-color;
  7171. }
  7172. }
  7173. }
  7174. /*================================================
  7175. Repair Feedback CSS
  7176. =================================================*/
  7177. .single-repair-feedback {
  7178. background: $white-color;
  7179. border-radius: 5px;
  7180. margin-bottom: 55px;
  7181. position: relative;
  7182. text-align: center;
  7183. padding: {
  7184. left: 40px;
  7185. right: 40px;
  7186. top: 40px;
  7187. bottom: 40px;
  7188. }
  7189. .client-img {
  7190. position: relative;
  7191. text-align: left;
  7192. margin-bottom: 40px;
  7193. display: inline-block;
  7194. padding: {
  7195. left: 108px;
  7196. top: 18px;
  7197. }
  7198. img {
  7199. border-radius: 50%;
  7200. border: 2px solid $light-green-color;
  7201. padding: 3px;
  7202. display: inline-block;
  7203. position: absolute;
  7204. left: 0;
  7205. top: 0;
  7206. width: 90px;
  7207. height: 90px;
  7208. }
  7209. h3 {
  7210. font-size: 18px;
  7211. margin: 0;
  7212. }
  7213. span {
  7214. display: block;
  7215. color: $purple-color;
  7216. margin: {
  7217. top: 8px;
  7218. }
  7219. }
  7220. }
  7221. p {
  7222. font-size: 15px;
  7223. }
  7224. &::before {
  7225. content: '';
  7226. position: absolute;
  7227. left: 0;
  7228. bottom: -25px;
  7229. width: 50px;
  7230. height: 50px;
  7231. background: $white-color;
  7232. right: 0;
  7233. margin: 0 auto;
  7234. transform: rotate(45deg);
  7235. }
  7236. &::after {
  7237. content: "\f11b";
  7238. color: #d9dcde;
  7239. font: {
  7240. family: Flaticon;
  7241. size: 30px;
  7242. style: normal;
  7243. size: 65px;
  7244. }
  7245. position: absolute;
  7246. top: 0;
  7247. left: 25px;
  7248. }
  7249. }
  7250. /*================================================
  7251. IoT Main Banner CSS
  7252. =================================================*/
  7253. .iot-main-banner {
  7254. position: relative;
  7255. z-index: 1;
  7256. padding: {
  7257. top: 215px;
  7258. bottom: 150px;
  7259. }
  7260. }
  7261. .iot-banner-content {
  7262. max-width: 445px;
  7263. span {
  7264. color: $light-green-color;
  7265. font-size: 15px;
  7266. display: block;
  7267. }
  7268. h2 {
  7269. font-size: 40px;
  7270. margin: {
  7271. top: 7px;
  7272. bottom: 17px;
  7273. }
  7274. line-height: 1.3;
  7275. }
  7276. .btn {
  7277. margin-top: 10px;
  7278. }
  7279. }
  7280. .iot-banner-image {
  7281. position: absolute;
  7282. text-align: center;
  7283. right: 30px;
  7284. top: 56%;
  7285. transform: translateY(-50%);
  7286. img {
  7287. &:first-child {
  7288. max-width: 730px;
  7289. }
  7290. &:last-child {
  7291. position: absolute;
  7292. left: -118px;
  7293. right: 0;
  7294. margin: 0 auto;
  7295. top: 39px;
  7296. z-index: -1;
  7297. }
  7298. }
  7299. }
  7300. .animate-border {
  7301. span {
  7302. position: absolute;
  7303. display: block;
  7304. width: 5%;
  7305. padding-bottom: 5%;
  7306. top: 51%;
  7307. left: 67%;
  7308. opacity: 0;
  7309. transform: translate(-50%, -50%);
  7310. backface-visibility: hidden;
  7311. pointer-events: none;
  7312. border-radius: 50%;
  7313. z-index: -2;
  7314. &:nth-child(1) {
  7315. animation: 4.2s ease-out .5s infinite normal none running pulsei;
  7316. }
  7317. &:nth-child(2) {
  7318. animation: 4.2s ease-out 1.5s infinite normal none running pulsei;
  7319. }
  7320. &:nth-child(3) {
  7321. animation: 4.2s ease-out 2.5s infinite normal none running pulsei;
  7322. }
  7323. &:nth-child(4) {
  7324. animation: 4.2s ease-out 3.5s infinite normal none running pulsei;
  7325. }
  7326. }
  7327. }
  7328. @keyframes pulsei {
  7329. 0% {
  7330. transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
  7331. border: 1.5px solid #b3eaf8;
  7332. opacity: 1;
  7333. width: 5%;
  7334. padding-bottom: 5%;
  7335. }
  7336. 100% {
  7337. transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
  7338. opacity: 0;
  7339. width: 50%;
  7340. border: 1.5px solid #b3eaf8;
  7341. padding-bottom: 50%;
  7342. }
  7343. }
  7344. /*================================================
  7345. IoT Partner CSS
  7346. =================================================*/
  7347. .iot-partner-area {
  7348. padding: {
  7349. top: 45px;
  7350. bottom: 45px;
  7351. }
  7352. }
  7353. .single-iot-partner {
  7354. text-align: center;
  7355. a {
  7356. display: block;
  7357. position: relative;
  7358. img {
  7359. width: auto !important;
  7360. display: inline-block !important;
  7361. &:last-child {
  7362. position: absolute;
  7363. top: 20px;
  7364. left: 0;
  7365. right: 0;
  7366. margin: 0 auto;
  7367. transition: $transition;
  7368. opacity: 0;
  7369. visibility: hidden;
  7370. }
  7371. }
  7372. &:hover, &:focus {
  7373. img {
  7374. &:last-child {
  7375. opacity: 1;
  7376. visibility: visible;
  7377. top: 0;
  7378. }
  7379. }
  7380. }
  7381. }
  7382. }
  7383. /*================================================
  7384. Iot Services CSS
  7385. =================================================*/
  7386. .single-iot-services {
  7387. margin-bottom: 30px;
  7388. position: relative;
  7389. z-index: 1;
  7390. padding: 40px 30px;
  7391. text-align: center;
  7392. background-color: $white-color;
  7393. border: 1px dashed #cdf1d8;
  7394. &::after {
  7395. position: absolute;
  7396. transition: $transition;
  7397. content: '';
  7398. position: absolute;
  7399. top: 0;
  7400. left: 0;
  7401. width: 100%;
  7402. height: 100%;
  7403. background: $gradient-color;
  7404. z-index: -1;
  7405. opacity: 0;
  7406. visibility: hidden;
  7407. }
  7408. h3 {
  7409. font-size: 18px;
  7410. transition: $transition;
  7411. margin: {
  7412. top: 22px;
  7413. bottom: 17px;
  7414. }
  7415. line-height: 1.5;
  7416. }
  7417. .icon {
  7418. display: inline-block;
  7419. color: $light-green-color;
  7420. width: 85px;
  7421. height: 85px;
  7422. line-height: 85px;
  7423. border: 1px solid #e3f7e9;
  7424. border-radius: 50%;
  7425. transition: $transition;
  7426. i {
  7427. &::before {
  7428. font-size: 35px;
  7429. }
  7430. }
  7431. }
  7432. p {
  7433. margin-bottom: 25px;
  7434. transition: $transition;
  7435. }
  7436. a {
  7437. width: 35px;
  7438. background-color: #f9fafb;
  7439. height: 35px;
  7440. line-height: 35px;
  7441. color: $black-color;
  7442. border-radius: 50%;
  7443. svg {
  7444. width: 15px;
  7445. }
  7446. }
  7447. &:hover, &:focus {
  7448. &::after {
  7449. opacity: 1;
  7450. visibility: visible;
  7451. }
  7452. h3 {
  7453. color: $white-color;
  7454. }
  7455. p {
  7456. color: $white-color;
  7457. }
  7458. .icon {
  7459. border-color: $white-color;
  7460. color: $white-color;
  7461. }
  7462. a {
  7463. background-color: $white-color;
  7464. color: $light-green-color;
  7465. }
  7466. }
  7467. }
  7468. /*================================================
  7469. IoT CTA CSS
  7470. =================================================*/
  7471. .iot-cta-area {
  7472. overflow: hidden;
  7473. position: relative;
  7474. z-index: 1;
  7475. padding: {
  7476. top: 10px;
  7477. bottom: 10px;
  7478. }
  7479. }
  7480. .cta-iot-content {
  7481. padding-top: 30px;
  7482. padding-bottom: 30px;
  7483. h3 {
  7484. color: $white-color;
  7485. font-size: 25px;
  7486. margin-bottom: 17px;
  7487. }
  7488. p {
  7489. color: $white-color;
  7490. opacity: .95;
  7491. margin-bottom: 25px;
  7492. }
  7493. }
  7494. .cta-iot-img {
  7495. text-align: center;
  7496. }
  7497. /*================================================
  7498. IoT Features CSS
  7499. =================================================*/
  7500. .iot-features-content {
  7501. h3 {
  7502. font-size: 26px;
  7503. margin-bottom: 20px;
  7504. }
  7505. .btn {
  7506. margin-top: 15px;
  7507. }
  7508. }
  7509. .iot-features-image {
  7510. position: relative;
  7511. text-align: center;
  7512. }
  7513. /*================================================
  7514. IoT Team CSS
  7515. =================================================*/
  7516. .iot-team-area {
  7517. .container {
  7518. max-width: 1175px;
  7519. }
  7520. .single-team {
  7521. .team-content {
  7522. padding: {
  7523. left: 25px;
  7524. right: 25px;
  7525. }
  7526. }
  7527. }
  7528. }
  7529. /*================================================
  7530. IoT Why Choose Us CSS
  7531. =================================================*/
  7532. .iot-why-choose-us {
  7533. position: relative;
  7534. z-index: 1;
  7535. background: $gradient-color;
  7536. .section-title {
  7537. h2 {
  7538. color: $white-color;
  7539. }
  7540. .bar {
  7541. &::before {
  7542. background: $white-color;
  7543. }
  7544. }
  7545. p {
  7546. color: $white-color;
  7547. opacity: .95;
  7548. }
  7549. }
  7550. &::before {
  7551. content: '';
  7552. position: absolute;
  7553. bottom: 0;
  7554. left: 0;
  7555. height: 37%;
  7556. width: 100%;
  7557. background: $white-color;
  7558. z-index: -1;
  7559. }
  7560. }
  7561. .single-iot-box {
  7562. text-align: center;
  7563. background-color: $white-color;
  7564. border: 1px dashed #cdf1d8;
  7565. padding: 30px;
  7566. position: relative;
  7567. z-index: 1;
  7568. transition: $transition;
  7569. h3 {
  7570. font-size: 18px;
  7571. margin: {
  7572. top: 22px;
  7573. bottom: 17px;
  7574. }
  7575. }
  7576. p {
  7577. margin-bottom: 25px;
  7578. }
  7579. a {
  7580. width: 40px;
  7581. background-color: #eef0f3;
  7582. height: 40px;
  7583. line-height: 40px;
  7584. color: $black-color;
  7585. border-radius: 50%;
  7586. svg {
  7587. width: 18px;
  7588. }
  7589. }
  7590. .icon {
  7591. display: inline-block;
  7592. border: 1px solid #f3f8fd;
  7593. width: 100px;
  7594. height: 100px;
  7595. line-height: 96px;
  7596. border-radius: 50%;
  7597. position: relative;
  7598. z-index: 1;
  7599. &::before {
  7600. content: '';
  7601. position: absolute;
  7602. top: 0;
  7603. left: 0;
  7604. right: 0;
  7605. z-index: -1;
  7606. bottom: 0;
  7607. background: #f7fafd;
  7608. border-radius: 50%;
  7609. margin: 6px;
  7610. transition: $transition;
  7611. }
  7612. i {
  7613. &::before {
  7614. font-size: 35px;
  7615. }
  7616. }
  7617. img {
  7618. width: 45px;
  7619. }
  7620. }
  7621. &:hover, &:focus {
  7622. border-color: $light-green-color;
  7623. a {
  7624. background-color: $light-green-color;
  7625. color: $white-color;
  7626. }
  7627. }
  7628. }
  7629. /*================================================
  7630. ML Main Banner CSS
  7631. =================================================*/
  7632. .ml-main-banner {
  7633. position: relative;
  7634. z-index: 1;
  7635. padding: {
  7636. top: 130px;
  7637. bottom: 140px;
  7638. };
  7639. background: {
  7640. image: url(/images/banner-bg.jpg);
  7641. position: bottom right;
  7642. size: cover;
  7643. repeat: no-repeat;
  7644. };
  7645. .container-fluid {
  7646. padding: {
  7647. left: 70px;
  7648. right: 70px;
  7649. };
  7650. }
  7651. }
  7652. .ml-banner-content {
  7653. h1 {
  7654. margin-bottom: 15px;
  7655. line-height: 1.3;
  7656. font: {
  7657. size: 40px;
  7658. weight: 500;
  7659. };
  7660. }
  7661. p {
  7662. font-size: 15px;
  7663. max-width: 490px;
  7664. }
  7665. .btn {
  7666. margin-top: 5px;
  7667. }
  7668. }
  7669. .ml-banner-single-image {
  7670. text-align: center;
  7671. }
  7672. .ml-main-section {
  7673. position: relative;
  7674. z-index: 1;
  7675. padding: {
  7676. top: 260px;
  7677. bottom: 240px;
  7678. };
  7679. background: {
  7680. image: url(/images/banner-bg.jpg);
  7681. position: bottom right;
  7682. size: cover;
  7683. repeat: no-repeat;
  7684. };
  7685. .ml-banner-content {
  7686. h1 {
  7687. font-size: 37px;
  7688. }
  7689. p {
  7690. max-width: 100%;
  7691. }
  7692. }
  7693. }
  7694. .ml-banner-image {
  7695. position: relative;
  7696. width: 100%;
  7697. height: 100%;
  7698. top: 140px;
  7699. img {
  7700. position: absolute;
  7701. &:nth-child(1) {
  7702. left: 195px;
  7703. top: -125px;
  7704. z-index: 2;
  7705. }
  7706. &:nth-child(2) {
  7707. top: -83px;
  7708. left: 153px;
  7709. z-index: 1;
  7710. }
  7711. &:nth-child(3) {
  7712. top: 40px;
  7713. left: 90px;
  7714. }
  7715. &:nth-child(4) {
  7716. top: 0;
  7717. right: 165px;
  7718. z-index: 3;
  7719. }
  7720. &:nth-child(5) {
  7721. top: -260px;
  7722. left: 110px;
  7723. }
  7724. &:nth-child(6) {
  7725. right: 130px;
  7726. top: -240px;
  7727. }
  7728. &:nth-child(7) {
  7729. bottom: 0;
  7730. right: 0;
  7731. z-index: 2;
  7732. }
  7733. &:nth-child(8) {
  7734. right: 10px;
  7735. bottom: 205px;
  7736. z-index: 1;
  7737. }
  7738. &:nth-child(9) {
  7739. left: 15px;
  7740. top: -185px;
  7741. z-index: 1;
  7742. }
  7743. &:nth-child(10) {
  7744. left: 1px;
  7745. bottom: -2px;
  7746. z-index: 2;
  7747. }
  7748. &:nth-child(11) {
  7749. left: 0;
  7750. top: -20px;
  7751. }
  7752. &:nth-child(12) {
  7753. display: none;
  7754. }
  7755. }
  7756. }
  7757. /*================================================
  7758. ML Partner CSS
  7759. =================================================*/
  7760. .ml-partner-area {
  7761. &.mt-minus-top {
  7762. margin-top: -80px;
  7763. }
  7764. }
  7765. .single-ml-partner {
  7766. text-align: center;
  7767. a {
  7768. display: block;
  7769. position: relative;
  7770. img {
  7771. width: auto !important;
  7772. display: inline-block !important;
  7773. &:last-child {
  7774. position: absolute;
  7775. top: 20px;
  7776. left: 0;
  7777. right: 0;
  7778. margin: 0 auto;
  7779. transition: $transition;
  7780. opacity: 0;
  7781. visibility: hidden;
  7782. }
  7783. }
  7784. &:hover, &:focus {
  7785. img {
  7786. &:last-child {
  7787. opacity: 1;
  7788. visibility: visible;
  7789. top: 0;
  7790. }
  7791. }
  7792. }
  7793. }
  7794. }
  7795. /*================================================
  7796. Our Solutions CSS
  7797. =================================================*/
  7798. .solutions-area {
  7799. padding-bottom: 50px;
  7800. position: relative;
  7801. z-index: 1;
  7802. }
  7803. .single-solutions-box {
  7804. padding: 20px 15px;
  7805. text-align: center;
  7806. transition: $transition;
  7807. position: relative;
  7808. margin-bottom: 30px;
  7809. z-index: 1;
  7810. border: 1px solid #c5fffd;
  7811. border-radius: 5px;
  7812. .icon {
  7813. margin-bottom: 25px;
  7814. position: relative;
  7815. z-index: 1;
  7816. display: inline-block;
  7817. img {
  7818. transition: $transition;
  7819. }
  7820. &::before {
  7821. content: '';
  7822. position: absolute;
  7823. left: -5px;
  7824. top: 50%;
  7825. transform: translateY(-50%);
  7826. z-index: -1;
  7827. background: #f0fdfe;
  7828. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.09);
  7829. border-radius: 30% 70% 70% 30% / 40% 60% 40% 60%;
  7830. width: 60px;
  7831. height: 60px;
  7832. }
  7833. }
  7834. h3 {
  7835. font-size: 18px;
  7836. margin-bottom: 12px;
  7837. }
  7838. &::before {
  7839. content: '';
  7840. position: absolute;
  7841. left: 0;
  7842. top: 0;
  7843. z-index: -1;
  7844. width: 100%;
  7845. border-radius: 5px;
  7846. height: 100%;
  7847. background: linear-gradient(to right top, #d5fefd, #e0fdff, #effbff, #fbfaff, #fffcff);
  7848. }
  7849. .learn-more-btn {
  7850. color: #365267;
  7851. font: {
  7852. size: $font-size;
  7853. weight: 600;
  7854. };
  7855. svg {
  7856. width: 18px;
  7857. position: relative;
  7858. top: -1px;
  7859. margin-right: 3px;
  7860. }
  7861. &:hover {
  7862. color: $light-green-color;
  7863. }
  7864. }
  7865. &:hover {
  7866. transform: translateY(-10px);
  7867. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  7868. .icon {
  7869. img {
  7870. transform: rotateY(-360deg);
  7871. }
  7872. }
  7873. }
  7874. }
  7875. /*================================================
  7876. ML About CSS
  7877. =================================================*/
  7878. .about-area {
  7879. position: relative;
  7880. z-index: 1;
  7881. }
  7882. .ml-about-img {
  7883. text-align: center;
  7884. }
  7885. .ml-about-content {
  7886. max-width: 540px;
  7887. .sub-title {
  7888. display: inline-block;
  7889. color: $purple-color;
  7890. background-color: #f5dffd;
  7891. margin-bottom: 18px;
  7892. border-radius: 30px;
  7893. padding: 5px 20px 4px;
  7894. font-size: 13px;
  7895. }
  7896. h2 {
  7897. margin-bottom: 0;
  7898. line-height: 1.4;
  7899. font: {
  7900. size: 28px;
  7901. weight: 600;
  7902. }
  7903. text-transform: capitalize;
  7904. }
  7905. .bar {
  7906. height: 5px;
  7907. width: 90px;
  7908. background: #cdf1d8;
  7909. margin: 20px 0;
  7910. position: relative;
  7911. border-radius: 30px;
  7912. &::before {
  7913. content: '';
  7914. position: absolute;
  7915. left: 0;
  7916. top: -2.7px;
  7917. height: 10px;
  7918. width: 10px;
  7919. border-radius: 50%;
  7920. background: $light-green-color;
  7921. animation: {
  7922. duration: 3s;
  7923. timing-function: linear;
  7924. iteration-count: infinite;
  7925. name: MOVE-BG;
  7926. };
  7927. }
  7928. }
  7929. p {
  7930. margin-bottom: 12px;
  7931. }
  7932. .btn {
  7933. margin-top: 10px;
  7934. }
  7935. }
  7936. /*================================================
  7937. ML Services CSS
  7938. =================================================*/
  7939. .ml-services-area {
  7940. padding-bottom: 50px;
  7941. position: relative;
  7942. z-index: 1;
  7943. background: linear-gradient(to left bottom, #fffcff, #fbfaff, #effbff, #e0fdff, #d5fefd);
  7944. }
  7945. .single-ml-services-box {
  7946. position: relative;
  7947. z-index: 1;
  7948. background-color: $white-color;
  7949. text-align: center;
  7950. margin-bottom: 30px;
  7951. padding: 30px 25px;
  7952. overflow: hidden;
  7953. transition: $transition;
  7954. .image {
  7955. margin-bottom: 25px;
  7956. }
  7957. h3 {
  7958. font-size: 20px;
  7959. margin-bottom: 12px;
  7960. }
  7961. p {
  7962. margin-bottom: 0;
  7963. }
  7964. &::before {
  7965. content: '';
  7966. position: absolute;
  7967. left: -15px;
  7968. bottom: -15px;
  7969. width: 30px;
  7970. height: 30px;
  7971. transition: $transition;
  7972. transform: rotate(45deg);
  7973. background: $light-green-color;
  7974. visibility: hidden;
  7975. opacity: 0;
  7976. }
  7977. &:hover {
  7978. &::before {
  7979. opacity: 1;
  7980. visibility: visible;
  7981. }
  7982. }
  7983. }
  7984. /*================================================
  7985. ML Feedback CSS
  7986. =================================================*/
  7987. .ml-feedback-area {
  7988. background: linear-gradient(to right top, #d5fefd, #e0fdff, #effbff, #fbfaff, #fffcff);
  7989. position: relative;
  7990. z-index: 1;
  7991. }
  7992. .single-ml-feedback-item {
  7993. box-shadow: 0 0 25px 3px rgba(0, 0, 0, 0.04);
  7994. margin-bottom: 45px;
  7995. background-color: $white-color;
  7996. position: relative;
  7997. padding: 60px 70px 60px 190px;
  7998. border-radius: 5px;
  7999. .client-info {
  8000. position: absolute;
  8001. left: 60px;
  8002. top: 50%;
  8003. transform: translateY(-50%);
  8004. text-align: center;
  8005. img {
  8006. border-radius: 5px;
  8007. border: 2px solid #f4f5fe;
  8008. width: 80px !important;
  8009. height: 80px !important;
  8010. padding: 5px;
  8011. display: inline-block !important;
  8012. }
  8013. h3 {
  8014. margin: {
  8015. bottom: 0;
  8016. top: 10px;
  8017. };
  8018. font: {
  8019. size: 17px;
  8020. };
  8021. }
  8022. span {
  8023. display: block;
  8024. color: $purple-color;
  8025. margin-top: 5px;
  8026. font-size: 13px;
  8027. }
  8028. }
  8029. p {
  8030. margin-bottom: 0;
  8031. color: #4a6f8a;
  8032. }
  8033. .rating {
  8034. margin-top: 10px;
  8035. svg {
  8036. color: #ff612f;
  8037. width: 18px;
  8038. margin-right: 2px;
  8039. &:last-child {
  8040. margin-right: 0;
  8041. }
  8042. }
  8043. }
  8044. &::after {
  8045. content: '';
  8046. position: absolute;
  8047. left: 0;
  8048. right: 0;
  8049. top: 0;
  8050. border-radius: 5px;
  8051. bottom: -15px;
  8052. background-color: $white-color;
  8053. box-shadow: 0px 15px 10px -15px rgba(0, 0, 0, 0.04);
  8054. z-index: -1;
  8055. margin: {
  8056. left: 30px;
  8057. right: 30px;
  8058. };
  8059. }
  8060. }
  8061. .ml-feedback-slides {
  8062. max-width: 750px;
  8063. margin: -40px auto 0;
  8064. .single-ml-feedback-item {
  8065. margin-top: 40px;
  8066. }
  8067. .owl-item {
  8068. padding: {
  8069. left: 50px;
  8070. right: 50px;
  8071. };
  8072. }
  8073. &.owl-theme {
  8074. .owl-dots {
  8075. margin: {
  8076. top: 10px;
  8077. };
  8078. line-height: 1;
  8079. .owl-dot {
  8080. span {
  8081. width: 15px;
  8082. height: 15px;
  8083. margin: 0 3px;
  8084. background: transparent;
  8085. transition: $transition;
  8086. border: 1px solid #8d95a7;
  8087. border-radius: 50%;
  8088. position: relative;
  8089. &::before {
  8090. position: absolute;
  8091. left: 0;
  8092. right: 0;
  8093. top: 0;
  8094. bottom: 0;
  8095. background-color: $light-green-color;
  8096. margin: 2px;
  8097. content: '';
  8098. transition: $transition;
  8099. border-radius: 50%;
  8100. transform: scale(0);
  8101. }
  8102. }
  8103. &:hover, &.active {
  8104. span {
  8105. border-color: $light-green-color;
  8106. background-color: transparent;
  8107. &::before {
  8108. transform: scale(1);
  8109. }
  8110. }
  8111. }
  8112. }
  8113. }
  8114. }
  8115. }
  8116. /*================================================
  8117. Free Trial CSS
  8118. =================================================*/
  8119. .free-trial-area {
  8120. position: relative;
  8121. overflow: hidden;
  8122. z-index: 1;
  8123. &::before {
  8124. content: '';
  8125. width: 100%;
  8126. height: 100%;
  8127. z-index: -1;
  8128. position: absolute;
  8129. left: -30%;
  8130. top: 0;
  8131. background: linear-gradient(to right, #d5fefd, #e1fdff, #effdff, #fafdff, #ffffff);
  8132. }
  8133. .shape6 {
  8134. top: 75%;
  8135. }
  8136. }
  8137. .free-trial-image {
  8138. text-align: center;
  8139. }
  8140. .free-trial-content {
  8141. max-width: 540px;
  8142. h2 {
  8143. margin-bottom: 0;
  8144. font: {
  8145. size: 28px;
  8146. weight: 600;
  8147. }
  8148. }
  8149. form {
  8150. position: relative;
  8151. margin: {
  8152. top: 25px;
  8153. bottom: 10px;
  8154. };
  8155. .input-newsletter {
  8156. display: block;
  8157. width: 99%;
  8158. height: 50px;
  8159. color: $white-color;
  8160. border: none;
  8161. outline: 0;
  8162. background-color: $black-color;
  8163. border-radius: 30px;
  8164. padding: {
  8165. top: 3px;
  8166. left: 20px;
  8167. };
  8168. &::placeholder {
  8169. color: #d5d5d5;
  8170. transition: $transition;
  8171. }
  8172. &:focus {
  8173. &::placeholder {
  8174. color: transparent;
  8175. }
  8176. }
  8177. }
  8178. button {
  8179. position: absolute;
  8180. right: 0;
  8181. top: 0;
  8182. height: 50px;
  8183. cursor: pointer;
  8184. border: none;
  8185. padding: 0 30px;
  8186. line-height: 50px;
  8187. background-color: $light-green-color;
  8188. border-radius: 0 30px 30px 0;
  8189. transition: $transition;
  8190. color: $white-color;
  8191. font: {
  8192. size: 16px;
  8193. }
  8194. &:hover {
  8195. background-color: $purple-color;
  8196. color: $white-color;
  8197. }
  8198. }
  8199. }
  8200. p {
  8201. margin-bottom: 0;
  8202. }
  8203. }
  8204. /*================================================
  8205. Newsletter CSS
  8206. =================================================*/
  8207. .newsletter-area {
  8208. position: relative;
  8209. z-index: 1;
  8210. .container-fluid {
  8211. padding: {
  8212. left: 0;
  8213. right: 0;
  8214. };
  8215. .row {
  8216. margin: {
  8217. left: 0;
  8218. right: 0;
  8219. };
  8220. .col-lg-6 {
  8221. padding: {
  8222. left: 0;
  8223. right: 0;
  8224. };
  8225. }
  8226. }
  8227. }
  8228. &::before {
  8229. content: '';
  8230. position: absolute;
  8231. right: 0;
  8232. width: 65%;
  8233. height: 100%;
  8234. bottom: 0;
  8235. z-index: 1;
  8236. -webkit-clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
  8237. clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
  8238. background: linear-gradient(135deg, #43e794 0%, #23bdb8 100%);
  8239. }
  8240. }
  8241. .newsletter-image {
  8242. img {
  8243. width: 100%;
  8244. }
  8245. }
  8246. .newsletter-content {
  8247. position: relative;
  8248. z-index: 2;
  8249. max-width: 540px;
  8250. h2 {
  8251. color: $white-color;
  8252. margin-bottom: 0;
  8253. line-height: 1.5;
  8254. font: {
  8255. size: 28px;
  8256. weight: 600;
  8257. };
  8258. }
  8259. .newsletter-form {
  8260. position: relative;
  8261. padding-right: 160px;
  8262. margin: {
  8263. bottom: 15px;
  8264. top: 20px;
  8265. };
  8266. .input-newsletter {
  8267. display: block;
  8268. width: 100%;
  8269. height: 50px;
  8270. color: $white-color;
  8271. border: none;
  8272. outline: 0;
  8273. background-color: #333333;
  8274. border-radius: 30px;
  8275. padding: {
  8276. left: 20px;
  8277. top: 2px;
  8278. };
  8279. &::placeholder {
  8280. transition: $transition;
  8281. color: $white-color;
  8282. }
  8283. &:focus {
  8284. &::placeholder {
  8285. color: transparent;
  8286. }
  8287. }
  8288. }
  8289. button {
  8290. position: absolute;
  8291. right: 0;
  8292. top: 0;
  8293. height: 50px;
  8294. border: none;
  8295. padding: 0 30px;
  8296. line-height: 50px;
  8297. background-color: $white-color;
  8298. border-radius: 30px;
  8299. transition: $transition;
  8300. color: $black-color;
  8301. font: {
  8302. size: 14px;
  8303. weight: 600;
  8304. };
  8305. &:hover {
  8306. background-color: $black-color;
  8307. color: $white-color;
  8308. }
  8309. }
  8310. }
  8311. p {
  8312. color: $white-color;
  8313. max-width: 400px;
  8314. }
  8315. &::before {
  8316. content: '';
  8317. position: absolute;
  8318. left: 0;
  8319. top: 0;
  8320. right: 0;
  8321. bottom: 0;
  8322. z-index: -1;
  8323. background: $gradient-color;
  8324. display: none;
  8325. }
  8326. }
  8327. /*================================================
  8328. ML Projects CSS
  8329. =================================================*/
  8330. .ml-projects-area {
  8331. position: relative;
  8332. overflow: hidden;
  8333. z-index: 1;
  8334. padding-bottom: 50px;
  8335. .section-title {
  8336. text-align: left;
  8337. max-width: 530px;
  8338. h2 {
  8339. max-width: 470px;
  8340. line-height: 1.3;
  8341. }
  8342. .bar {
  8343. margin: {
  8344. left: 0;
  8345. right: 0;
  8346. };
  8347. }
  8348. }
  8349. .container-fluid {
  8350. position: relative;
  8351. }
  8352. }
  8353. .single-ml-projects-box {
  8354. position: relative;
  8355. border-radius: 5px;
  8356. margin-bottom: 30px;
  8357. box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.175);
  8358. background-color: $white-color;
  8359. img {
  8360. border-radius: 5px;
  8361. }
  8362. .plus-icon {
  8363. a {
  8364. background-color: $light-green-color;
  8365. width: 70px;
  8366. height: 70px;
  8367. position: absolute;
  8368. top: 20px;
  8369. right: 20px;
  8370. transform: scale(0);
  8371. transition: all .4s ease-out 0s;
  8372. overflow: hidden;
  8373. border-radius: 50%;
  8374. span {
  8375. width: 25px;
  8376. height: 25px;
  8377. position: absolute;
  8378. top: 50%;
  8379. left: 50%;
  8380. transform: translate(-50%, -50%);
  8381. &::before, &::after {
  8382. position: absolute;
  8383. content: '';
  8384. width: 2px;
  8385. height: 100%;
  8386. background-color: $white-color;
  8387. top: 0;
  8388. left: 50%;
  8389. transform: translateX(-50%);
  8390. }
  8391. &::after {
  8392. height: 2px;
  8393. width: 100%;
  8394. top: 50%;
  8395. left: 0;
  8396. transform: translateY(-50%);
  8397. }
  8398. }
  8399. &:hover {
  8400. background-color: $purple-color;
  8401. }
  8402. }
  8403. }
  8404. &:hover {
  8405. .plus-icon {
  8406. a {
  8407. transform: scale(1);
  8408. }
  8409. }
  8410. }
  8411. }
  8412. .ml-projects-slides {
  8413. &.owl-theme {
  8414. .owl-dots {
  8415. position: absolute;
  8416. right: 12.5%;
  8417. top: -100px;
  8418. z-index: 1;
  8419. margin: {
  8420. top: 0;
  8421. };
  8422. &::before {
  8423. content: '';
  8424. position: absolute;
  8425. left: -20px;
  8426. top: -30px;
  8427. background: linear-gradient(to left bottom, #dee4f3, #e7eaf6, #f0f1f9, #f8f8fc, #ffffff);
  8428. border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
  8429. width: 80px;
  8430. height: 70px;
  8431. z-index: -1;
  8432. }
  8433. .owl-dot {
  8434. span {
  8435. width: 15px;
  8436. height: 15px;
  8437. margin: 0 3px;
  8438. background: transparent;
  8439. transition: $transition;
  8440. border: 1px solid #8d95a7;
  8441. border-radius: 50%;
  8442. position: relative;
  8443. &::before {
  8444. position: absolute;
  8445. left: 0;
  8446. right: 0;
  8447. top: 0;
  8448. bottom: 0;
  8449. background-color: $light-green-color;
  8450. margin: 2px;
  8451. content: '';
  8452. transition: $transition;
  8453. border-radius: 50%;
  8454. transform: scale(0);
  8455. }
  8456. }
  8457. &:hover, &.active {
  8458. span {
  8459. border-color: $light-green-color;
  8460. background-color: transparent;
  8461. &::before {
  8462. transform: scale(1);
  8463. }
  8464. }
  8465. }
  8466. }
  8467. }
  8468. }
  8469. }
  8470. /*================================================
  8471. Agency Main Banner CSS
  8472. =================================================*/
  8473. .agency-main-banner {
  8474. position: relative;
  8475. z-index: 1;
  8476. .container-fluid {
  8477. padding: {
  8478. left: 0;
  8479. right: 0;
  8480. };
  8481. .row {
  8482. margin: {
  8483. left: 0;
  8484. right: 0;
  8485. };
  8486. .col-lg-6 {
  8487. padding: {
  8488. left: 0;
  8489. right: 0;
  8490. };
  8491. }
  8492. }
  8493. }
  8494. .shape2 {
  8495. left: 5%;
  8496. }
  8497. .shape8 {
  8498. right: 50%;
  8499. }
  8500. .shape4 {
  8501. right: 50%;
  8502. }
  8503. }
  8504. .agency-banner-content {
  8505. margin-left: auto;
  8506. max-width: 650px;
  8507. .sub-title {
  8508. text-transform: uppercase;
  8509. display: block;
  8510. font-size: 16px;
  8511. color: $paragraph-color;
  8512. margin-bottom: 8px;
  8513. }
  8514. h1 {
  8515. margin-bottom: 15px;
  8516. line-height: 1.3;
  8517. font: {
  8518. size: 50px;
  8519. weight: 500;
  8520. };
  8521. }
  8522. p {
  8523. font-size: 15px;
  8524. max-width: 450px;
  8525. }
  8526. .btn {
  8527. margin-top: 5px;
  8528. }
  8529. }
  8530. .agency-banner-image {
  8531. text-align: right;
  8532. }
  8533. /*================================================
  8534. Our Solutions CSS
  8535. =================================================*/
  8536. .solutions-area {
  8537. .shape2 {
  8538. left: 5%;
  8539. }
  8540. }
  8541. .solutions-box {
  8542. transition: $transition;
  8543. position: relative;
  8544. margin-bottom: 30px;
  8545. z-index: 1;
  8546. .icon {
  8547. color: $light-green-color;
  8548. position: relative;
  8549. z-index: 1;
  8550. margin-bottom: 30px;
  8551. padding-left: 20px;
  8552. i {
  8553. font-size: 45px;
  8554. }
  8555. img {
  8556. position: absolute;
  8557. left: 0;
  8558. z-index: -1;
  8559. top: -25px;
  8560. }
  8561. }
  8562. h3 {
  8563. font-size: 18px;
  8564. margin-bottom: 10px;
  8565. line-height: 1.3;
  8566. }
  8567. .learn-more-btn {
  8568. color: #365267;
  8569. font: {
  8570. size: $font-size;
  8571. weight: 600;
  8572. };
  8573. svg {
  8574. width: 18px;
  8575. position: relative;
  8576. top: -1px;
  8577. margin-right: 3px;
  8578. }
  8579. &:hover {
  8580. color: $light-green-color;
  8581. }
  8582. }
  8583. }
  8584. /*================================================
  8585. Agency About CSS
  8586. =================================================*/
  8587. .agency-about-area {
  8588. position: relative;
  8589. z-index: 1;
  8590. .container-fluid {
  8591. padding: {
  8592. left: 0;
  8593. right: 0;
  8594. };
  8595. .row {
  8596. margin: {
  8597. left: 0;
  8598. right: 0;
  8599. };
  8600. .col-lg-6 {
  8601. padding: {
  8602. left: 0;
  8603. right: 0;
  8604. };
  8605. }
  8606. }
  8607. }
  8608. }
  8609. .agency-about-img {
  8610. padding-right: 100px;
  8611. img {
  8612. width: 100%;
  8613. }
  8614. }
  8615. .agency-about-content {
  8616. max-width: 540px;
  8617. .sub-title {
  8618. display: inline-block;
  8619. color: $purple-color;
  8620. background-color: #f5dffd;
  8621. margin-bottom: 18px;
  8622. border-radius: 30px;
  8623. padding: 5px 20px 4px;
  8624. font-size: 13px;
  8625. }
  8626. h2 {
  8627. margin-bottom: 0;
  8628. line-height: 1.4;
  8629. font: {
  8630. size: 28px;
  8631. weight: 600;
  8632. }
  8633. text-transform: capitalize;
  8634. }
  8635. .bar {
  8636. height: 5px;
  8637. width: 90px;
  8638. background: #cdf1d8;
  8639. margin: 20px 0;
  8640. position: relative;
  8641. border-radius: 30px;
  8642. &::before {
  8643. content: '';
  8644. position: absolute;
  8645. left: 0;
  8646. top: -2.7px;
  8647. height: 10px;
  8648. width: 10px;
  8649. border-radius: 50%;
  8650. background: $light-green-color;
  8651. animation: {
  8652. duration: 3s;
  8653. timing-function: linear;
  8654. iteration-count: infinite;
  8655. name: MOVE-BG;
  8656. };
  8657. }
  8658. }
  8659. p {
  8660. margin-bottom: 12px;
  8661. }
  8662. .btn {
  8663. margin-top: 10px;
  8664. }
  8665. }
  8666. .shape10 {
  8667. position: absolute;
  8668. right: 0;
  8669. top: -40%;
  8670. z-index: -1;
  8671. }
  8672. /*================================================
  8673. Agency Services CSS
  8674. =================================================*/
  8675. .agency-services-area {
  8676. position: relative;
  8677. z-index: 1;
  8678. background: linear-gradient(to top, #d5fefd, #e1fdff, #effdff, #fafdff, #ffffff);
  8679. }
  8680. .agency-services-box {
  8681. margin-bottom: 30px;
  8682. text-align: center;
  8683. img {
  8684. border-radius: 7px;
  8685. }
  8686. .content {
  8687. transition: $transition;
  8688. background: $white-color;
  8689. position: relative;
  8690. border-radius: 7px;
  8691. padding: 25px;
  8692. box-shadow: 0 2px 48px 0 rgba(0, 0, 0, .05);
  8693. margin: {
  8694. left: 15px;
  8695. right: 15px;
  8696. top: -30px;
  8697. };
  8698. h3 {
  8699. transition: $transition;
  8700. font-size: 20px;
  8701. margin-bottom: 0;
  8702. }
  8703. .read-more-btn {
  8704. display: inline-block;
  8705. border-radius: 30px;
  8706. padding: 9px 25px;
  8707. border: 1px solid #e6e6e6;
  8708. background-color: $white-color;
  8709. position: absolute;
  8710. transition: $transition;
  8711. left: 50%;
  8712. transform: translateX(-50%);
  8713. bottom: -22px;
  8714. opacity: 0;
  8715. visibility: hidden;
  8716. font: {
  8717. size: 14px;
  8718. weight: 500;
  8719. };
  8720. svg {
  8721. width: 15px;
  8722. margin-left: 2px;
  8723. }
  8724. &:hover {
  8725. background-color: $light-green-color;
  8726. border-color: $light-green-color;
  8727. color: $white-color;
  8728. }
  8729. }
  8730. }
  8731. &:hover {
  8732. .content {
  8733. transform: translateY(-20px);
  8734. h3 {
  8735. transform: translateY(-10px);
  8736. }
  8737. .read-more-btn {
  8738. opacity: 1;
  8739. visibility: visible;
  8740. }
  8741. }
  8742. }
  8743. }
  8744. /*================================================
  8745. Testimonials CSS
  8746. =================================================*/
  8747. .single-testimonials-item {
  8748. box-shadow: 0 0 25px 3px rgba(0, 0, 0, 0.04);
  8749. margin-bottom: 45px;
  8750. background-color: $white-color;
  8751. position: relative;
  8752. padding: 110px 65px 60px;
  8753. border-radius: 5px;
  8754. text-align: center;
  8755. p {
  8756. margin-bottom: 0;
  8757. color: #4a6f8a;
  8758. font-size: 15px;
  8759. }
  8760. .client-info {
  8761. text-align: left;
  8762. position: relative;
  8763. padding-left: 95px;
  8764. margin-top: 25px;
  8765. max-width: 235px;
  8766. margin: {
  8767. left: auto;
  8768. right: auto;
  8769. };
  8770. img {
  8771. border-radius: 5px;
  8772. border: 2px solid #f4f5fe;
  8773. width: 80px !important;
  8774. height: 80px !important;
  8775. padding: 5px;
  8776. display: inline-block !important;
  8777. position: absolute;
  8778. left: 0;
  8779. top: 50%;
  8780. transform: translateY(-50%);
  8781. }
  8782. .rating {
  8783. svg {
  8784. color: #ff612f;
  8785. width: 16px;
  8786. margin-right: 3px;
  8787. &:last-child {
  8788. margin-right: 0;
  8789. }
  8790. }
  8791. }
  8792. h3 {
  8793. margin: {
  8794. bottom: 0;
  8795. top: 8px;
  8796. };
  8797. font: {
  8798. size: 17px;
  8799. };
  8800. }
  8801. span {
  8802. display: block;
  8803. color: $purple-color;
  8804. margin-top: 5px;
  8805. font-size: 13px;
  8806. }
  8807. }
  8808. &::after {
  8809. content: '';
  8810. position: absolute;
  8811. left: 0;
  8812. right: 0;
  8813. top: 0;
  8814. border-radius: 5px;
  8815. bottom: -15px;
  8816. background-color: $white-color;
  8817. box-shadow: 0px 15px 10px -15px rgba(0, 0, 0, 0.04);
  8818. z-index: -1;
  8819. margin: {
  8820. left: 30px;
  8821. right: 30px;
  8822. };
  8823. }
  8824. &::before {
  8825. content: "\f11b";
  8826. color: #d9dcde;
  8827. position: absolute;
  8828. top: 15px;
  8829. left: 0;
  8830. right: 0;
  8831. text-align: center;
  8832. font: {
  8833. family: Flaticon;
  8834. style: normal;
  8835. size: 65px;
  8836. };
  8837. }
  8838. }
  8839. .ml-feedback-slides {
  8840. .single-testimonials-item {
  8841. margin-top: 40px;
  8842. }
  8843. }
  8844. .user-shape1 {
  8845. position: absolute;
  8846. z-index: -1;
  8847. top: 12%;
  8848. left: 10%;
  8849. animation: movebounce 9s linear infinite;
  8850. }
  8851. .user-shape2 {
  8852. position: absolute;
  8853. z-index: -1;
  8854. left: 7%;
  8855. animation: moveleftbounce 7s linear infinite;
  8856. top: 47%;
  8857. }
  8858. .user-shape3 {
  8859. position: absolute;
  8860. z-index: -1;
  8861. bottom: 12%;
  8862. left: 15%;
  8863. animation: movebounce 5s linear infinite;
  8864. }
  8865. .user-shape4 {
  8866. position: absolute;
  8867. z-index: -1;
  8868. top: 12%;
  8869. right: 10%;
  8870. animation: movebounce 9s linear infinite;
  8871. }
  8872. .user-shape5 {
  8873. position: absolute;
  8874. z-index: -1;
  8875. right: 7%;
  8876. top: 45%;
  8877. animation: moveleftbounce 7s linear infinite;
  8878. }
  8879. .user-shape6 {
  8880. position: absolute;
  8881. z-index: -1;
  8882. bottom: 12%;
  8883. right: 15%;
  8884. animation: movebounce 5s linear infinite;
  8885. }
  8886. .shape9 {
  8887. position: absolute;
  8888. left: 0;
  8889. top: 0;
  8890. z-index: -1;
  8891. img {
  8892. animation: movebounce 5s linear infinite;
  8893. }
  8894. }
  8895. /*================================================
  8896. Agency CTA CSS
  8897. =================================================*/
  8898. .agency-cta-area {
  8899. position: relative;
  8900. z-index: 1;
  8901. background: {
  8902. image: url(/images/agency-image/agency-gradient-bg.jpg);
  8903. position: center center;
  8904. size: cover;
  8905. repeat: no-repeat;
  8906. };
  8907. }
  8908. .agency-cta-content {
  8909. text-align: center;
  8910. h2 {
  8911. color: $white-color;
  8912. margin-bottom: 30px;
  8913. font: {
  8914. size: 28px;
  8915. weight: 600;
  8916. };
  8917. }
  8918. }
  8919. /*btn-gradient*/
  8920. .btn-gradient {
  8921. color: $white-color;
  8922. background: linear-gradient(90deg,#ee0979 0,#ff6a00 100%);
  8923. box-shadow: unset !important;
  8924. transform: unset !important;
  8925. &::after {
  8926. display: none;
  8927. }
  8928. &::before {
  8929. opacity: 0;
  8930. visibility: hidden;
  8931. width: 100%;
  8932. background: linear-gradient(135deg,#23bdb8 0,#43e794 100%);
  8933. left: 0;
  8934. border-radius: 4px;
  8935. }
  8936. &:hover, &:focus, &:active {
  8937. color: $white-color;
  8938. background: linear-gradient(90deg,#ee0979 0,#ff6a00 100%);
  8939. box-shadow: unset !important;
  8940. &::before {
  8941. opacity: 1;
  8942. visibility: visible;
  8943. width: 100%;
  8944. }
  8945. }
  8946. &:not(:disabled):not(.disabled).active, &:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  8947. color: $white-color;
  8948. background: linear-gradient(90deg,#ee0979 0,#ff6a00 100%);
  8949. box-shadow: unset !important;
  8950. &::before {
  8951. opacity: 1;
  8952. visibility: visible;
  8953. width: 100%;
  8954. }
  8955. }
  8956. &.disabled, &:disabled {
  8957. color: $white-color;
  8958. background: linear-gradient(90deg,#ee0979 0,#ff6a00 100%);
  8959. box-shadow: unset !important;
  8960. &::before {
  8961. opacity: 1;
  8962. visibility: visible;
  8963. width: 100%;
  8964. }
  8965. }
  8966. }
  8967. /*================================================
  8968. Agency Portfolio Main Banner CSS
  8969. =================================================*/
  8970. .agency-portfolio-main-banner {
  8971. height: 100vh;
  8972. position: relative;
  8973. z-index: 1;
  8974. background: {
  8975. position: center center;
  8976. size: cover;
  8977. repeat: no-repeat;
  8978. };
  8979. &.portfolio-banner-bg1 {
  8980. background-image: url(/images/agency-portfolio-main-banner/ap-main-banner-img1.jpg);
  8981. }
  8982. &.portfolio-banner-bg2 {
  8983. background-image: url(/images/agency-portfolio-main-banner/ap-main-banner-img2.jpg);
  8984. }
  8985. &.portfolio-banner-bg3 {
  8986. background-image: url(/images/agency-portfolio-main-banner/ap-main-banner-img3.jpg);
  8987. }
  8988. }
  8989. .portfolio-banner-content {
  8990. text-align: center;
  8991. max-width: 700px;
  8992. margin: {
  8993. left: auto;
  8994. right: auto;
  8995. top: -50px;
  8996. };
  8997. .sub-title {
  8998. display: block;
  8999. font-size: 16px;
  9000. text-transform: uppercase;
  9001. letter-spacing: .5px;
  9002. color: $paragraph-color;
  9003. margin-bottom: 10px;
  9004. }
  9005. h1 {
  9006. margin-bottom: 15px;
  9007. line-height: 1.3;
  9008. font: {
  9009. size: 40px;
  9010. weight: 500;
  9011. };
  9012. }
  9013. p {
  9014. font-size: 15px;
  9015. max-width: 490px;
  9016. margin: {
  9017. left: auto;
  9018. right: auto;
  9019. };
  9020. }
  9021. .btn {
  9022. margin-top: 5px;
  9023. }
  9024. }
  9025. .agency-portfolio-home-slides {
  9026. &.owl-theme {
  9027. .owl-nav {
  9028. opacity: 0;
  9029. visibility: hidden;
  9030. margin-top: 0;
  9031. transition: $transition;
  9032. [class*='owl-'] {
  9033. margin: 0;
  9034. background-color: #e1e1e1;
  9035. color: $black-color;
  9036. width: 50px;
  9037. height: 50px;
  9038. text-align: center;
  9039. line-height: 55px;
  9040. position: absolute;
  9041. left: 40px;
  9042. top: 50%;
  9043. border-radius: 0;
  9044. transform: translateY(-50%);
  9045. transition: $transition;
  9046. font-size: 30px;
  9047. padding: 0;
  9048. &:hover {
  9049. background-color: $light-green-color;
  9050. color: $white-color;
  9051. }
  9052. &.owl-next {
  9053. left: auto;
  9054. right: 40px;
  9055. }
  9056. }
  9057. }
  9058. &:hover {
  9059. .owl-nav {
  9060. opacity: 1;
  9061. visibility: visible;
  9062. }
  9063. }
  9064. }
  9065. }
  9066. /*================================================
  9067. Our Latest Projects CSS
  9068. =================================================*/
  9069. .our-latest-projects {
  9070. padding-bottom: 50px;
  9071. position: relative;
  9072. z-index: 1;
  9073. }
  9074. .single-latest-projects {
  9075. margin-bottom: 30px;
  9076. position: relative;
  9077. img {
  9078. width: 100%;
  9079. }
  9080. .link-btn {
  9081. position: absolute;
  9082. display: block;
  9083. width: 100%;
  9084. height: 100%;
  9085. left: 0;
  9086. top: 0;
  9087. z-index: 2;
  9088. }
  9089. .content {
  9090. position: absolute;
  9091. left: -5%;
  9092. top: 60%;
  9093. transform: translateY(-60%);
  9094. z-index: 1;
  9095. opacity: 0;
  9096. visibility: hidden;
  9097. transition: $transition;
  9098. background-color: $white-color;
  9099. box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  9100. padding: 25px;
  9101. margin-top: 20px;
  9102. span {
  9103. display: block;
  9104. text-transform: uppercase;
  9105. font-weight: 500;
  9106. margin-bottom: 8px;
  9107. }
  9108. h3 {
  9109. margin-bottom: 0;
  9110. font: {
  9111. weight: 600;
  9112. size: 20px;
  9113. };
  9114. }
  9115. }
  9116. &:hover {
  9117. .content {
  9118. opacity: 1;
  9119. visibility: visible;
  9120. margin-top: 0;
  9121. }
  9122. }
  9123. }
  9124. .shorting-menu {
  9125. text-align: right;
  9126. button {
  9127. background-color: transparent;
  9128. cursor: pointer;
  9129. color: #848484;
  9130. transition: $transition;
  9131. margin-right: 15px;
  9132. padding: 0;
  9133. outline: 0;
  9134. border: none;
  9135. font: {
  9136. size: $font-size;
  9137. weight: 600;
  9138. };
  9139. &:hover, &.active {
  9140. color: $black-color;
  9141. }
  9142. &:last-child {
  9143. margin-right: 0;
  9144. }
  9145. }
  9146. }
  9147. /*================================================
  9148. Agency Portfolio About CSS
  9149. =================================================*/
  9150. .agency-portfolio-about-area {
  9151. background-color: #f4f4f4;
  9152. }
  9153. .single-text-box {
  9154. margin-bottom: 30px;
  9155. h3 {
  9156. margin: {
  9157. bottom: 12px;
  9158. top: 25px;
  9159. };
  9160. font: {
  9161. weight: 600;
  9162. size: 22px;
  9163. };
  9164. }
  9165. .learn-more-btn {
  9166. color: #365267;
  9167. font: {
  9168. size: $font-size;
  9169. weight: 600;
  9170. };
  9171. svg {
  9172. width: 18px;
  9173. position: relative;
  9174. top: -1px;
  9175. margin-right: 3px;
  9176. }
  9177. &:hover {
  9178. color: $light-green-color;
  9179. }
  9180. }
  9181. }
  9182. /*================================================
  9183. Agency Portfolio Partner CSS
  9184. =================================================*/
  9185. .agency-portfolio-partner-area {
  9186. background-color: $black-color;
  9187. }
  9188. .single-agency-portfolio-partner {
  9189. text-align: center;
  9190. a {
  9191. display: block;
  9192. img {
  9193. width: auto !important;
  9194. display: inline-block !important;
  9195. }
  9196. }
  9197. }
  9198. /*================================================
  9199. Creative Area CSS
  9200. =================================================*/
  9201. .creative-area {
  9202. height: 650px;
  9203. background: {
  9204. image: url(/images/creative-bg.jpg);
  9205. position: center center;
  9206. repeat: no-repeat;
  9207. attachment: fixed;
  9208. size: cover;
  9209. };
  9210. .container {
  9211. position: relative;
  9212. }
  9213. .d-table-cell {
  9214. vertical-align: bottom;
  9215. }
  9216. }
  9217. .creative-inner-area {
  9218. max-width: 600px;
  9219. margin-left: auto;
  9220. .single-counter {
  9221. background-color: $black-color;
  9222. padding: 60px;
  9223. h3 {
  9224. color: $white-color;
  9225. margin-bottom: 5px;
  9226. font: {
  9227. size: 32px;
  9228. weight: 700;
  9229. };
  9230. .odometer-formatting-mark {
  9231. display: none;
  9232. }
  9233. }
  9234. p {
  9235. margin-bottom: 0;
  9236. line-height: initial;
  9237. color: $white-color;
  9238. font: {
  9239. size: 15px;
  9240. weight: 600;
  9241. };
  9242. }
  9243. }
  9244. .row {
  9245. margin: {
  9246. left: 0;
  9247. right: 0;
  9248. };
  9249. }
  9250. .col-lg-6 {
  9251. padding: {
  9252. left: 0;
  9253. right: 0;
  9254. };
  9255. &:nth-child(1) {
  9256. .single-counter {
  9257. background-color: $light-green-color;
  9258. }
  9259. }
  9260. &:nth-child(2) {
  9261. .single-counter {
  9262. background-color: $black-color;
  9263. }
  9264. }
  9265. }
  9266. }
  9267. /*================================================
  9268. Footer CSS
  9269. =================================================*/
  9270. .footer-area {
  9271. padding: {
  9272. top: 80px;
  9273. }
  9274. position: relative;
  9275. z-index: 1;
  9276. .map {
  9277. position: absolute;
  9278. top: 0;
  9279. left: 0;
  9280. right: 0;
  9281. margin: 0 auto;
  9282. text-align: center;
  9283. z-index: -1;
  9284. bottom: 0;
  9285. opacity: .7;
  9286. }
  9287. }
  9288. .single-footer-widget {
  9289. .logo {
  9290. margin-bottom: 20px;
  9291. a {
  9292. display: block;
  9293. }
  9294. }
  9295. h3 {
  9296. font-size: 18px;
  9297. margin-bottom: 30px;
  9298. }
  9299. ul {
  9300. padding: 0;
  9301. margin: 0;
  9302. list-style-type: none;
  9303. &.list {
  9304. li {
  9305. margin-bottom: 10px;
  9306. a {
  9307. color: $paragraph-color;
  9308. &:hover {
  9309. color: $light-green-color;
  9310. padding-left: 7px;
  9311. }
  9312. }
  9313. &:last-child {
  9314. margin-bottom: 0;
  9315. }
  9316. }
  9317. }
  9318. &.footer-contact-info {
  9319. margin-bottom: 20px;
  9320. li {
  9321. position: relative;
  9322. color: $paragraph-color;
  9323. margin-bottom: 8px;
  9324. padding-left: 25px;
  9325. svg {
  9326. position: absolute;
  9327. left: 0;
  9328. width: 15px;
  9329. top: 0;
  9330. }
  9331. &:last-child {
  9332. margin-bottom: 0;
  9333. }
  9334. a {
  9335. color: $paragraph-color;
  9336. &:hover {
  9337. color: $light-green-color;
  9338. }
  9339. }
  9340. }
  9341. }
  9342. &.social-links {
  9343. li {
  9344. display: inline-block;
  9345. margin-right: 8px;
  9346. &:last-child {
  9347. margin-right: 0;
  9348. }
  9349. a {
  9350. width: 32px;
  9351. text-align: center;
  9352. line-height: 29px;
  9353. height: 32px;
  9354. border: 1px solid $light-green-color;
  9355. border-radius: 50%;
  9356. color: $light-green-color;
  9357. svg {
  9358. width: 15px;
  9359. }
  9360. &.facebook {
  9361. border-color: #4267b2;
  9362. color: #4267b2;
  9363. &:hover {
  9364. background: #4267b2;
  9365. color: $white-color;
  9366. }
  9367. }
  9368. &.twitter {
  9369. border-color: #38A1F3;
  9370. color: #38A1F3;
  9371. &:hover {
  9372. background: #38A1F3;
  9373. color: $white-color;
  9374. }
  9375. }
  9376. &.linkedin {
  9377. border-color: #0077B5;
  9378. color: #0077B5;
  9379. &:hover {
  9380. background: #0077B5;
  9381. color: $white-color;
  9382. }
  9383. }
  9384. &.instagram {
  9385. border-color: #231F20;
  9386. color: #231F20;
  9387. &:hover {
  9388. background: #231F20;
  9389. color: $white-color;
  9390. }
  9391. }
  9392. &:hover {
  9393. background: $light-green-color;
  9394. color: $white-color;
  9395. }
  9396. }
  9397. }
  9398. }
  9399. }
  9400. }
  9401. .copyright-area {
  9402. margin-top: 80px;
  9403. border-top: 1px solid #d8ebfd;
  9404. text-align: center;
  9405. padding: {
  9406. top: 25px;
  9407. bottom: 25px;
  9408. }
  9409. }
  9410. /*=============================
  9411. Go Top CSS
  9412. ===============================*/
  9413. .go-top {
  9414. position: fixed;
  9415. cursor: pointer;
  9416. bottom: 30px;
  9417. right: -100%;
  9418. color: $white-color;
  9419. background-color: $purple-color;
  9420. z-index: 1;
  9421. width: 45px;
  9422. text-align: center;
  9423. height: 45px;
  9424. border-radius: 10px 0 0 10px;
  9425. line-height: 46px;
  9426. transition: $transition;
  9427. z-index: 999;
  9428. &:hover {
  9429. color: $white-color;
  9430. background: $light-green-color;
  9431. }
  9432. &.active {
  9433. right: 0;
  9434. }
  9435. }
  9436. .main-text-area {
  9437. h1, h2, h3, h4, h5, h6 {
  9438. margin-bottom: 15px;
  9439. }
  9440. }
  9441. /* Auth Form */
  9442. .auth-form {
  9443. text-align: center;
  9444. max-width: 500px;
  9445. width: 100%;
  9446. box-shadow: 0px 0px 10px #eee;
  9447. margin: auto;
  9448. padding: 40px 30px;
  9449. border-radius: 10px;
  9450. border: 1px solid #edf2f9;
  9451. .auth-head {
  9452. margin-bottom: 15px;
  9453. img {
  9454. margin-bottom: 10px;
  9455. }
  9456. }
  9457. form {
  9458. .form-label {
  9459. text-align: left;
  9460. display: block;
  9461. }
  9462. .btn {
  9463. display: block;
  9464. width: 100%;
  9465. padding: 12px 15px;
  9466. margin-top: 20px;
  9467. }
  9468. }
  9469. .foot {
  9470. margin-top: 20px;
  9471. ul {
  9472. list-style-type: none;
  9473. padding: 0;
  9474. margin: 0;
  9475. li {
  9476. display: inline-block;
  9477. a {
  9478. i, svg {
  9479. border: 1px solid #edf2f9;
  9480. width: 35px;
  9481. height: 35px;
  9482. line-height: 35px;
  9483. padding: 5px;
  9484. margin: 0 10px;
  9485. }
  9486. }
  9487. }
  9488. }
  9489. }
  9490. }