styles-contact.css 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. .navbar .navbar-collapse {
  2. flex-grow: 0;
  3. }
  4. .header {
  5. margin-top: 77px;
  6. padding-top: 6.5rem;
  7. height: 75vh;
  8. position: relative;
  9. padding-bottom: 3rem;
  10. }
  11. * {
  12. margin: 0;
  13. padding: 0;
  14. box-sizing: border-box;
  15. }
  16. .Contact_Us {
  17. position: relative;
  18. }
  19. .Contact_Us .banner {
  20. width: 100%;
  21. height: 300px;
  22. position: relative;
  23. z-index: -1;
  24. margin-top: -19vw;
  25. }
  26. .Contact_Us .banner h2 {
  27. position: absolute;
  28. color: #fff;
  29. top: 7vw;
  30. left: 50%;
  31. transform: translate(-50%, -50%);
  32. text-transform: uppercase;
  33. letter-spacing: 2px;
  34. text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  35. font-size: 3vw;
  36. }
  37. .Contact_Us .slick-next::before {
  38. content: "";
  39. }
  40. .Contact_Us .slick-prev::before {
  41. content: "";
  42. }
  43. .Contact_Us .slick-dots li {
  44. border-radius: 50%;
  45. }
  46. .Contact_Us .slick-dots li button::before {
  47. font-size: 10px;
  48. }
  49. .Contact_Us .slick-dots li.slick-active button:before {
  50. color: #EA5413;
  51. opacity: 1;
  52. border-radius: 50%;
  53. border: 1px solid #EA5413;
  54. }
  55. .Contact_Us .text-title {
  56. margin-top: -90px;
  57. }
  58. @media screen and (max-width: 576px) {
  59. .Contact_Us .text-title {
  60. margin-top: -45px;
  61. }
  62. }
  63. .Contact_Us h1 {
  64. font-weight: 600;
  65. font-size: 32px;
  66. text-align: center;
  67. }
  68. .Contact_Us hr {
  69. width: 5vw;
  70. margin: 0 auto;
  71. height: 6px;
  72. opacity: 1 !important;
  73. background: #000;
  74. }
  75. @media screen and (max-width: 576px) {
  76. .Contact_Us hr {
  77. width: 15vw;
  78. }
  79. }
  80. .Contact_Us p {
  81. margin-top: 15px;
  82. text-align: center;
  83. color: #888888;
  84. }
  85. .Contact_Us .contact_us_title {
  86. width: 80vw;
  87. margin: 0 auto;
  88. text-align: center;
  89. }
  90. @media screen and (max-width: 576px) {
  91. .Contact_Us .contact_us_title {
  92. width: 100vw;
  93. }
  94. }
  95. .Contact_Us .service_info {
  96. padding-top: 100px;
  97. background-color: #FFEBE2;
  98. position: relative;
  99. }
  100. .Contact_Us .service_info .circle-orange {
  101. bottom: 10px;
  102. right: 80px;
  103. width: 180px;
  104. }
  105. .Contact_Us .service_info .content-service {
  106. margin-top: 50px;
  107. }
  108. .Contact_Us .service_info .content-service h2 {
  109. font-weight: 600;
  110. color: #EA5413;
  111. font-size: 28px;
  112. }
  113. .Contact_Us .service_info .content-service ul {
  114. margin-top: 15px;
  115. color: #888888;
  116. padding-left: 1rem;
  117. }
  118. .Contact_Us .service_info .LearnMore {
  119. margin-top: 50px;
  120. padding: 5px 15px;
  121. border: 1px solid #EA5413;
  122. border-radius: 30px;
  123. background: #EA5413;
  124. color: #fff;
  125. transition: 0.3s;
  126. }
  127. .Contact_Us .service_info .LearnMore:hover {
  128. color: #EA5413;
  129. background: #fff;
  130. }
  131. @media screen and (max-width: 576px) {
  132. .Contact_Us .service_info .LearnMore {
  133. margin-top: 15px;
  134. }
  135. }
  136. .Contact_Us .service_info .service_slider_Box-m {
  137. width: 80vw;
  138. margin: 0 auto;
  139. }
  140. .Contact_Us .service_info .service_slider_Box-m .slick-dots {
  141. bottom: 270px;
  142. left: 50px;
  143. }
  144. .Contact_Us .service_info .service_slider_Box-m .slick-prev {
  145. position: absolute;
  146. left: -20px;
  147. z-index: 100;
  148. top: 130px;
  149. }
  150. .Contact_Us .service_info .service_slider_Box-m .slick-next {
  151. position: absolute;
  152. right: -10px;
  153. z-index: 100;
  154. top: 130px;
  155. }
  156. .Contact_Us .service_info .service_slider_Box {
  157. width: 85vw;
  158. margin: 0 auto;
  159. height: 400px;
  160. }
  161. .Contact_Us .service_info .service_slider_Box .slick-dots {
  162. bottom: 40px;
  163. width: 20%;
  164. left: 90px !important;
  165. }
  166. .Contact_Us .service_info .service_slider_Box .service_slider {
  167. height: 450px;
  168. position: relative;
  169. }
  170. .Contact_Us .service_info .service_slider_Box .slick-prev {
  171. position: absolute;
  172. left: 5px;
  173. top: 350px;
  174. z-index: 100;
  175. width: 60px;
  176. height: 60px;
  177. }
  178. .Contact_Us .service_info .service_slider_Box .slick-next {
  179. position: absolute;
  180. left: 350px;
  181. top: 350px;
  182. z-index: 100;
  183. width: 60px;
  184. height: 60px;
  185. }
  186. .Contact_Us .service_info .service_slider_Box .service_Img_Box {
  187. position: relative;
  188. margin-top: 50px;
  189. }
  190. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_seo {
  191. width: 280px;
  192. position: absolute;
  193. left: -180px;
  194. bottom: 180px;
  195. -o-object-fit: cover;
  196. object-fit: cover;
  197. }
  198. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_video {
  199. position: absolute;
  200. width: 360px;
  201. left: -250px;
  202. bottom: 50px;
  203. -o-object-fit: cover;
  204. object-fit: cover;
  205. }
  206. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_developmentimg {
  207. position: absolute;
  208. bottom: 100px;
  209. left: -180px;
  210. width: 280px;
  211. -o-object-fit: cover;
  212. object-fit: cover;
  213. }
  214. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_spiderimg {
  215. position: absolute;
  216. bottom: 80px;
  217. left: -180px;
  218. width: 280px;
  219. -o-object-fit: cover;
  220. object-fit: cover;
  221. }
  222. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_bigdataimg {
  223. position: absolute;
  224. bottom: -10px;
  225. width: 400px;
  226. left: -200px;
  227. -o-object-fit: cover;
  228. object-fit: cover;
  229. }
  230. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_googleads {
  231. position: absolute;
  232. bottom: 10px;
  233. left: -150px;
  234. width: 280px;
  235. -o-object-fit: cover;
  236. object-fit: cover;
  237. }
  238. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img6 {
  239. position: relative;
  240. bottom: 50px;
  241. }
  242. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img1 {
  243. position: relative;
  244. left: 15px;
  245. bottom: 120px;
  246. -o-object-fit: cover;
  247. object-fit: cover;
  248. }
  249. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img2 {
  250. position: relative;
  251. bottom: 50px;
  252. -o-object-fit: cover;
  253. object-fit: cover;
  254. }
  255. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img3 {
  256. position: relative;
  257. left: 15px;
  258. bottom: 100px;
  259. -o-object-fit: cover;
  260. object-fit: cover;
  261. }
  262. .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img4 {
  263. position: relative;
  264. bottom: 80px;
  265. -o-object-fit: cover;
  266. object-fit: cover;
  267. }
  268. .Contact_Us #contact_box {
  269. overflow: hidden;
  270. background: #fff;
  271. }
  272. .Contact_Us .Contact_Information {
  273. width: 90vw;
  274. margin: 0 auto;
  275. position: relative;
  276. padding-bottom: 130px;
  277. }
  278. @media screen and (max-width: 576px) {
  279. .Contact_Us .Contact_Information {
  280. width: 100vw;
  281. }
  282. }
  283. .Contact_Us .Contact_Information .Contact_Information_title {
  284. text-align: center;
  285. }
  286. .Contact_Us .Contact_Information .Contact_Information_title .choozmo {
  287. width: 640px;
  288. }
  289. @media screen and (max-width: 576px) {
  290. .Contact_Us .Contact_Information .Contact_Information_title .choozmo {
  291. width: 90vw;
  292. }
  293. }
  294. .Contact_Us .Contact_Information .Contact_Information_title .text-title {
  295. margin-top: -100px;
  296. }
  297. @media screen and (max-width: 576px) {
  298. .Contact_Us .Contact_Information .Contact_Information_title .text-title {
  299. margin-top: -60px;
  300. }
  301. }
  302. .Contact_Us .Contact_Information .Contact_Information_title .qrcode {
  303. width: 350px;
  304. }
  305. .Contact_Us .Contact_Information .contact-text {
  306. margin-top: -50px;
  307. }
  308. .Contact_Us .circle {
  309. position: absolute;
  310. bottom: -300px;
  311. left: -350px;
  312. }
  313. @-webkit-keyframes drift {
  314. 0% {
  315. transform: rotate(0deg);
  316. }
  317. 100% {
  318. transform: rotate(360deg);
  319. }
  320. }
  321. @keyframes drift {
  322. 0% {
  323. transform: rotate(0deg);
  324. }
  325. 100% {
  326. transform: rotate(360deg);
  327. }
  328. }/*# sourceMappingURL=styles-contact.css.map */