index.css--- 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. /*========================================
  2. INDEX PAGE STYLE
  3. =========================================*/
  4. .home-index-slider .dandik {
  5. right: 30px;
  6. }
  7. .home-index-slider .bamdik {
  8. left: 30px;
  9. }
  10. .home-index-slider .slick-dots {
  11. bottom: 50px;
  12. }
  13. .banner-part {
  14. padding: 50px 0px 60px;
  15. margin-bottom: 25px;
  16. position: relative;
  17. z-index: 1;
  18. }
  19. .banner-part::before {
  20. position: absolute;
  21. content: "";
  22. top: 0px;
  23. left: 0px;
  24. width: 100%;
  25. height: 100%;
  26. z-index: -1;
  27. opacity: 0.05;
  28. background: url(../images/banner-shape.png);
  29. background-repeat: no-repeat;
  30. background-position: center;
  31. background-size: cover;
  32. }
  33. .banner-1 {
  34. background: -webkit-gradient(linear, left top, right top, from(#45f76354), to(#ffc3d024));
  35. background: linear-gradient(to right, #45f76354, #ffc3d024);
  36. }
  37. .banner-2 {
  38. background: -webkit-gradient(linear, right top, left top, from(#45f76354), to(#ffc3d024));
  39. background: linear-gradient(to left, #45f76354, #ffc3d024);
  40. }
  41. .banner-content h1 {
  42. text-transform: capitalize;
  43. margin-bottom: 22px;
  44. }
  45. .banner-content p {
  46. font-size: 18px;
  47. line-height: 28px;
  48. margin-bottom: 50px;
  49. }
  50. .banner-btn .btn {
  51. margin-right: 15px;
  52. }
  53. .banner-img img {
  54. width: 100%;
  55. }
  56. @media (max-width: 767px) {
  57. .banner-content h1 {
  58. font-size: 38px;
  59. line-height: 48px;
  60. }
  61. .banner-img {
  62. display: none;
  63. }
  64. .banner-btn .btn {
  65. margin: 8px;
  66. }
  67. }
  68. @media (min-width: 768px) and (max-width: 991px) {
  69. .banner-content h1 {
  70. font-size: 32px;
  71. line-height: 42px;
  72. }
  73. .banner-btn .btn {
  74. padding: 14px 22px;
  75. margin-right: 10px;
  76. }
  77. }
  78. .suggest-slider li {
  79. margin: 0px 10px;
  80. }
  81. @media (max-width: 575px) {
  82. .suggest-slider li {
  83. margin: 0px 5px;
  84. }
  85. }
  86. .promo-img {
  87. width: 100%;
  88. overflow: hidden;
  89. border-radius: 8px;
  90. }
  91. .promo-img a {
  92. width: 100%;
  93. }
  94. .promo-img a img {
  95. width: 100%;
  96. border-radius: 8px;
  97. transition: all linear .3s;
  98. -webkit-transition: all linear .3s;
  99. -moz-transition: all linear .3s;
  100. -ms-transition: all linear .3s;
  101. -o-transition: all linear .3s;
  102. }
  103. .promo-img a img:hover {
  104. -webkit-transform: scale(1.05);
  105. transform: scale(1.05);
  106. }
  107. @media (max-width: 767px) {
  108. .promo-img {
  109. margin: 12px 0px;
  110. }
  111. }
  112. .new-slider li {
  113. margin: 0px 12px;
  114. }
  115. @media (max-width: 575px) {
  116. .new-slider .product-card {
  117. width: 220px;
  118. }
  119. }
  120. .testimonial-slider .slick-slide {
  121. opacity: 0.3;
  122. -webkit-transform: scale(0.75);
  123. transform: scale(0.75);
  124. transition: all linear .3s;
  125. -webkit-transition: all linear .3s;
  126. -moz-transition: all linear .3s;
  127. -ms-transition: all linear .3s;
  128. -o-transition: all linear .3s;
  129. }
  130. .testimonial-slider .slick-center {
  131. opacity: 1;
  132. -webkit-transform: scale(1);
  133. transform: scale(1);
  134. transition: all linear .3s;
  135. -webkit-transition: all linear .3s;
  136. -moz-transition: all linear .3s;
  137. -ms-transition: all linear .3s;
  138. -o-transition: all linear .3s;
  139. }
  140. .testimonial-slider .dandik,
  141. .testimonial-slider .bamdik {
  142. opacity: 1;
  143. visibility: visible;
  144. }
  145. .testimonial-slider .dandik {
  146. right: 50px;
  147. }
  148. .testimonial-slider .bamdik {
  149. left: 50px;
  150. }
  151. .brand-slider .dandik,
  152. .brand-slider .bamdik {
  153. top: 35%;
  154. }
  155. .blog-slider .blog-card {
  156. margin: 0px 15px 25px;
  157. }
  158. .blog-slider .dandik,
  159. .blog-slider .bamdik {
  160. top: 43%;
  161. }
  162. @media (max-width: 767px) {
  163. .blog-slider .blog-card {
  164. margin: 0px 10px 25px;
  165. }
  166. }