_service.scss 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. .service_area{
  2. padding-top: 100px;
  3. padding-bottom: 70px;
  4. &.minus_padding{
  5. padding-bottom: 0;
  6. }
  7. .single_service{
  8. padding: 30px;
  9. border: 1px solid #E8E8E8;
  10. @include transition(.3s);
  11. margin-bottom: 30px;
  12. .service_icon{
  13. line-height: 94px;
  14. text-align: center;
  15. width: 98px;
  16. height: 98px;
  17. margin: auto;
  18. @include border-radius(50%);
  19. /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0181f5+0,5db2ff+100 */
  20. background: rgb(1,129,245); /* Old browsers */
  21. background: -moz-linear-gradient(top, rgba(1,129,245,1) 0%, rgba(93,178,255,1) 100%); /* FF3.6-15 */
  22. background: -webkit-linear-gradient(top, rgba(1,129,245,1) 0%,rgba(93,178,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
  23. background: linear-gradient(to bottom, rgba(1,129,245,1) 0%,rgba(93,178,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  24. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0181f5', endColorstr='#5db2ff',GradientType=0 ); /* IE6-9 */
  25. }
  26. h3{
  27. font-size: 22px;
  28. color: #001D38;
  29. font-weight: 300;
  30. margin-top: 35px;
  31. margin-bottom: 23px;
  32. }
  33. p{
  34. font-size: 15px;
  35. font-weight: 400;
  36. color: #727272;
  37. line-height: 28px;
  38. margin-bottom: 6px;
  39. }
  40. a.learn_more{
  41. color: #5DB2FF;
  42. font-weight: 400;
  43. font-size: 15px;
  44. }
  45. &:hover{
  46. box-shadow: 0 10px 20px rgba(0,0,0,.04);
  47. border-color: transparent;
  48. }
  49. }
  50. .col-xl-4:nth-child(2) .single_service .service_icon{
  51. /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00d363+0,37ef8d+100 */
  52. background: rgb(0,211,99); /* Old browsers */
  53. background: -moz-linear-gradient(top, rgba(0,211,99,1) 0%, rgba(55,239,141,1) 100%); /* FF3.6-15 */
  54. background: -webkit-linear-gradient(top, rgba(0,211,99,1) 0%,rgba(55,239,141,1) 100%); /* Chrome10-25,Safari5.1-6 */
  55. background: linear-gradient(to bottom, rgba(0,211,99,1) 0%,rgba(55,239,141,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  56. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d363', endColorstr='#37ef8d',GradientType=0 ); /* IE6-9 */
  57. }
  58. .col-xl-4:nth-child(3) .single_service .service_icon{
  59. /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fd8e5e+0,fd8e5e+100 */
  60. background: rgb(253,142,94); /* Old browsers */
  61. background: -moz-linear-gradient(top, rgba(253,142,94,1) 0%, rgba(253,142,94,1) 100%); /* FF3.6-15 */
  62. background: -webkit-linear-gradient(top, rgba(253,142,94,1) 0%,rgba(253,142,94,1) 100%); /* Chrome10-25,Safari5.1-6 */
  63. background: linear-gradient(to bottom, rgba(253,142,94,1) 0%,rgba(253,142,94,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  64. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd8e5e', endColorstr='#fd8e5e',GradientType=0 ); /* IE6-9 */
  65. }
  66. .col-xl-4:nth-child(4) .single_service .service_icon{
  67. /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#615cfd+0,d465ef+100 */
  68. background: rgb(97,92,253); /* Old browsers */
  69. background: -moz-linear-gradient(top, rgba(97,92,253,1) 0%, rgba(212,101,239,1) 100%); /* FF3.6-15 */
  70. background: -webkit-linear-gradient(top, rgba(97,92,253,1) 0%,rgba(212,101,239,1) 100%); /* Chrome10-25,Safari5.1-6 */
  71. background: linear-gradient(to bottom, rgba(97,92,253,1) 0%,rgba(212,101,239,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  72. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#615cfd', endColorstr='#d465ef',GradientType=0 ); /* IE6-9 */
  73. }
  74. .col-xl-4:nth-child(2) .single_service .service_icon{
  75. }
  76. .col-xl-4:nth-child(6) .single_service .service_icon{
  77. /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a64eee+0,3c35ce+100 */
  78. background: rgb(166,78,238); /* Old browsers */
  79. background: -moz-linear-gradient(top, rgba(166,78,238,1) 0%, rgba(60,53,206,1) 100%); /* FF3.6-15 */
  80. background: -webkit-linear-gradient(top, rgba(166,78,238,1) 0%,rgba(60,53,206,1) 100%); /* Chrome10-25,Safari5.1-6 */
  81. background: linear-gradient(to bottom, rgba(166,78,238,1) 0%,rgba(60,53,206,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  82. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a64eee', endColorstr='#3c35ce',GradientType=0 ); /* IE6-9 */
  83. }
  84. }