responsive.css 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. /*=====================================================
  2. Media Queried
  3. ======================================================*/
  4. /* Large devices (desktops plus, less than 1695px) */
  5. @media (max-width: 1398px) {
  6. .container-fluid {
  7. width: 95%;
  8. }
  9. .call-btn-wrap.text-center {
  10. transform: none;
  11. }
  12. }
  13. /* Large devices (desktops, less than 1200px) */
  14. @media (max-width: 1199.98px) {
  15. .container-fluid {
  16. width: 95%;
  17. }
  18. .call-to-action-title .call-btn-wrap {
  19. top: 0;
  20. transform: none;
  21. margin-top: 10px;
  22. }
  23. .testimon-detail {
  24. background: linear-gradient(98deg, #10B765 19%, transparent 17%, #fff 10%);
  25. }
  26. .testimon-icon {
  27. min-width: 80px;
  28. }
  29. .product__item-img .product-face {
  30. max-height: 153px;
  31. }
  32. .footer-logo {
  33. max-width: 205px;
  34. }
  35. }
  36. /* Medium devices (tablets, less than 992px) */
  37. @media (max-width: 991.98px) {
  38. .container-fluid {
  39. width: 95%;
  40. }
  41. .header-intro-1 .header-intro-wrap .header-intro-title h3 {
  42. font-size: 50px;
  43. }
  44. .header-intro-1 .header-intro-wrap .header-intro-tag {
  45. font-size: 25px;
  46. margin-bottom: 50px;
  47. }
  48. .call-to-action-wrap {
  49. text-align: center;
  50. }
  51. .highlight-section-wrap .highlight-section-title h3 {
  52. font-size: 50px;
  53. }
  54. .about-image img, .why-choose-image img {
  55. max-width: 300px;
  56. margin-top: 30px;
  57. margin-bottom: 30px;
  58. }
  59. .client-content-wrap img {
  60. max-height: 53px;
  61. }
  62. }
  63. /* Small devices (landscape phones, less than 768px) */
  64. @media (max-width: 767.98px) {
  65. .container-fluid {
  66. width: 95%;
  67. }
  68. .header-intro-1 {
  69. padding: 50px 0 100px;
  70. min-height: 550px;
  71. }
  72. .header-intro-1 .header-intro-wrap .header-intro-title h3 {
  73. font-size: 39px;
  74. }
  75. .header-intro-1 .header-intro-wrap .header-intro-tag {
  76. font-size: 21px;
  77. }
  78. .header-intro-2 .header-intro-wrap .header-intro-title h3 {
  79. font-size: 30px;
  80. padding: 0 20px;
  81. }
  82. .call-to-action-title h3 {
  83. font-size: 24px;
  84. }
  85. .highlight-section-wrap .highlight-section-title h3 {
  86. font-size: 35px;
  87. line-height: 1.5;
  88. }
  89. .highlight-section-wrap .highlight-section-tag {
  90. font-size: 20px;
  91. }
  92. .testimon-detail {
  93. background: linear-gradient(98deg, #10B765 21%, transparent 17%, #fff 10%);
  94. }
  95. .testimonial .client-content-wrap {
  96. padding-top: 50px;
  97. }
  98. .client-content-wrap img {
  99. max-height: 48px;
  100. }
  101. .default-menu.navbar-light .navbar-nav.mr-auto > li:not(:first-child) > a {
  102. padding-right: 0;
  103. padding-left: 0;
  104. }
  105. .default-menu.navbar-light .navbar-nav.ml-auto > li:not(:last-child) > a {
  106. padding-right: 0;
  107. padding-left: 0;
  108. }
  109. .blog-page-1 .blog-post .blog-details {
  110. padding: 25px 20px 35px;
  111. }
  112. }
  113. /* Extra small devices (portrait phones, less than 576px) */
  114. @media (max-width: 575.98px) {
  115. .container-fluid {
  116. width: 95%;
  117. }
  118. .small-menu .info-link > li span.hidden-xs {
  119. visibility: hidden;
  120. display: none;
  121. }
  122. .header-intro-1 .header-intro-wrap .header-intro-title h3 {
  123. font-size: 25px;
  124. line-height: 1.6;
  125. }
  126. .header-intro-1 .header-intro-wrap .header-intro-tag {
  127. font-size: 20px;
  128. line-height: 1.5;
  129. }
  130. .header-intro-1 .header-intro-wrap .btn.main-btn {
  131. min-width: 195px;
  132. padding: 12px 25px;
  133. margin-bottom: 15px;
  134. }
  135. .highlight-section-wrap .list-inline-item:not(:last-child),
  136. .header-intro-wrap .list-inline-item:not(:last-child) {
  137. margin-right: 0;
  138. }
  139. .header-intro-2 .header-intro-wrap .header-intro-tag {
  140. font-size: 20px;
  141. }
  142. .header-intro-2 .header-intro-wrap .header-intro-title h3 {
  143. font-size: 25px;
  144. }
  145. .highlight-section-wrap .btn.main-btn,
  146. .header-intro-2 .header-intro-wrap .btn.main-btn {
  147. min-width: 195px;
  148. padding: 12px 25px;
  149. margin-bottom: 15px;
  150. }
  151. .header-intro-2 {
  152. max-height: 600px;
  153. padding-top: 70px;
  154. }
  155. .call-to-action-title h3 {
  156. font-size: 18px;
  157. margin-top: 0;
  158. }
  159. .highlight-section-wrap .highlight-section-title h3 {
  160. font-size: 25px;
  161. line-height: 1.6;
  162. font-weight: 200;
  163. }
  164. .highlight-section-wrap .highlight-section-tag {
  165. font-size: 18px;
  166. line-height: 1.5;
  167. margin-bottom: 30px;
  168. }
  169. .highlight-section {
  170. padding: 75px 0;
  171. }
  172. .newsletter-wrap .newsletter-title h3 {
  173. font-weight: 300;
  174. font-size: 25px;
  175. }
  176. .newsletter-wrap p {
  177. font-size: 17px;
  178. margin-bottom: 15px;
  179. line-height: 1.7;
  180. margin-top: 20px;
  181. }
  182. .testimon-detail {
  183. background: #fff;
  184. }
  185. .testimon-icon i {
  186. font-size: 60px;
  187. color: #ddd;
  188. }
  189. .testimon-icon {
  190. float: none;
  191. margin-right: 0;
  192. height: auto;
  193. margin-bottom: 26px;
  194. }
  195. .client-content-wrap img {
  196. max-height: 35px;
  197. }
  198. .testimonial {
  199. padding: 60px 0;
  200. }
  201. .call-to-action-2 .call-to-action-title h3 {
  202. font-size: 18px;
  203. }
  204. .call-to-action-2 {
  205. padding: 100px 0 50px;
  206. }
  207. .applications li a img {
  208. border-radius: 4px;
  209. margin-top: 10px;
  210. }
  211. .product__item-img .product-face {
  212. max-height: 180px;
  213. }
  214. .footer {
  215. text-align: center;
  216. }
  217. .list-inline.footer-menu {
  218. text-align: center;
  219. margin-top: 10px;
  220. }
  221. .product-details .nav-tabs .nav-item.nav-link {
  222. font-size: 10px;
  223. font-weight: 600;
  224. padding: 14px 10px;
  225. letter-spacing: 0.5px;
  226. }
  227. .product-tab .nav-tabs .nav-link {
  228. font-size: 11px;
  229. font-weight: 600;
  230. }
  231. .single-product-action-btn > a {
  232. font-size: 14px;
  233. font-weight: 500;
  234. letter-spacing: 0.5px;
  235. }
  236. .single-product-sidebar-wrap {
  237. margin-top: 30px;
  238. }
  239. .item-attributes th {
  240. font-size: 11px;
  241. letter-spacing: 0.5px;
  242. font-weight: 600;
  243. padding-right: 5px;
  244. }
  245. .item-attributes td {
  246. font-size: 11px;
  247. font-weight: 600;
  248. padding-left: 5px;
  249. }
  250. .header-social-icon {
  251. display: none;
  252. opacity: 0;
  253. visibility: hidden;
  254. }
  255. }