No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

front-page.css 6.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. .section-py {
  2. padding: 5rem 0;
  3. }
  4. @media (max-width: 1199.98px) {
  5. .section-py {
  6. padding: 4rem 0;
  7. }
  8. }
  9. @media (max-width: 767.98px) {
  10. .section-py {
  11. padding: 3rem 0;
  12. }
  13. }
  14. .first-section-pt {
  15. padding-top: 8.84rem;
  16. }
  17. @media (max-width: 1199.98px) {
  18. .first-section-pt {
  19. padding-top: 7.5rem;
  20. }
  21. }
  22. .card[class*=card-hover-border-] {
  23. transition: all 0.2s ease-in-out;
  24. }
  25. .banner-bg-img {
  26. position: absolute;
  27. top: 0;
  28. left: 0;
  29. height: 100%;
  30. width: 100%;
  31. object-fit: cover;
  32. object-position: left;
  33. }
  34. .section-title-img {
  35. height: 100%;
  36. width: 120%;
  37. inset-inline-start: -12%;
  38. top: 10px;
  39. }
  40. .light-style body {
  41. background-color: #fff;
  42. }
  43. .dark-style body {
  44. background-color: #2f3349;
  45. }
  46. nav.layout-navbar {
  47. backdrop-filter: unset !important;
  48. height: auto !important;
  49. z-index: 999 !important;
  50. }
  51. nav.layout-navbar::after {
  52. content: "";
  53. position: absolute;
  54. display: block;
  55. height: 100%;
  56. width: 100%;
  57. top: 0;
  58. left: 0;
  59. }
  60. nav.layout-navbar.navbar-active::after {
  61. backdrop-filter: saturate(100%) blur(6px);
  62. -webkit-backdrop-filter: saturate(100%) blur(6px);
  63. }
  64. .navbar.landing-navbar {
  65. box-shadow: none;
  66. transition: all 0.2s ease-in-out;
  67. transform: unset !important;
  68. padding-top: 0.75rem;
  69. padding-bottom: 0.75rem;
  70. margin-top: 1rem;
  71. border-width: 2px;
  72. border-style: solid;
  73. border-radius: 0.5rem;
  74. }
  75. .navbar.landing-navbar .navbar-nav .nav-link {
  76. padding: 0.5rem 0.9375rem;
  77. }
  78. @media (max-width: 1199.98px) {
  79. .navbar.landing-navbar .navbar-nav .nav-link {
  80. padding-left: 0.5rem;
  81. padding-right: 0.5rem;
  82. }
  83. }
  84. @media (min-width: 992px) {
  85. .navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown > .dropdown-menu {
  86. max-width: 1300px;
  87. inset-inline-start: 50% !important;
  88. transform: translateX(-50%);
  89. top: 100%;
  90. }
  91. }
  92. @media (max-width: 991.98px) {
  93. .navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown > .dropdown-menu {
  94. background: transparent;
  95. box-shadow: none;
  96. border: none;
  97. }
  98. }
  99. .navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown > .dropdown-menu .mega-dropdown-link {
  100. padding-left: 0;
  101. padding-right: 0;
  102. }
  103. .navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown > .dropdown-menu .mega-dropdown-link i {
  104. font-size: 0.625rem;
  105. }
  106. .navbar.landing-navbar .navbar-nav .nav-item .nav-img-col,
  107. .navbar.landing-navbar .navbar-nav .nav-item .nav-img-col img {
  108. border-radius: 0.625rem;
  109. }
  110. @media (max-width: 991.98px) {
  111. .navbar.landing-navbar .landing-menu-overlay {
  112. position: fixed;
  113. display: none;
  114. top: 0;
  115. left: 0;
  116. width: 100%;
  117. height: 100%;
  118. background-color: rgba(75, 70, 92, 0.78);
  119. transition: all 0.2s ease-in-out;
  120. z-index: 9998;
  121. }
  122. .navbar.landing-navbar .landing-nav-menu {
  123. position: fixed;
  124. display: block !important;
  125. height: 100%;
  126. max-width: 300px;
  127. width: 80%;
  128. padding: 1rem;
  129. inset-inline-start: -100%;
  130. top: 0;
  131. overflow-y: auto;
  132. transition: all 0.3s ease-in-out;
  133. z-index: 9999;
  134. }
  135. .navbar.landing-navbar .landing-nav-menu.show {
  136. inset-inline-start: 0;
  137. }
  138. .navbar.landing-navbar .landing-nav-menu.show ~ .landing-menu-overlay {
  139. display: block;
  140. }
  141. }
  142. .light-style .layout-navbar .navbar.landing-navbar {
  143. border-color: rgba(255, 255, 255, 0.68);
  144. background: rgba(255, 255, 255, 0.38);
  145. }
  146. .light-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link {
  147. color: #5d596c;
  148. }
  149. .light-style .layout-navbar .navbar.landing-navbar .navbar-nav .show > .nav-link,
  150. .light-style .layout-navbar .navbar.landing-navbar .navbar-nav .active > .nav-link,
  151. .light-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.show,
  152. .light-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.active {
  153. color: #7367f0 !important;
  154. }
  155. @media (max-width: 991.98px) {
  156. .light-style .layout-navbar .navbar.landing-navbar .landing-nav-menu {
  157. background-color: #fff;
  158. }
  159. }
  160. .light-style .layout-navbar.navbar-active .navbar.landing-navbar {
  161. background: #fff;
  162. box-shadow: 0 0.125rem 0.25rem rgba(165, 163, 174, 0.3);
  163. }
  164. .light-style .layout-navbar .menu-text {
  165. color: #5d596c;
  166. }
  167. .dark-style .layout-navbar .navbar.landing-navbar {
  168. border-color: rgba(255, 255, 255, 0.08);
  169. background-color: rgba(255, 255, 255, 0.04);
  170. }
  171. .dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link {
  172. color: #cfd3ec;
  173. }
  174. .dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .show > .nav-link,
  175. .dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .active > .nav-link,
  176. .dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.show,
  177. .dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.active {
  178. color: #7367f0 !important;
  179. }
  180. @media (max-width: 991.98px) {
  181. .dark-style .layout-navbar .navbar.landing-navbar .landing-nav-menu {
  182. background-color: #2f3349;
  183. }
  184. }
  185. .dark-style .layout-navbar .navbar .menu-text {
  186. color: #cfd3ec;
  187. }
  188. .dark-style .layout-navbar.navbar-active .navbar.landing-navbar {
  189. background: #2f3349;
  190. border-color: #2f3349;
  191. box-shadow: 0 0.125rem 0.25rem rgba(15, 20, 34, 0.4);
  192. }
  193. @media (min-width: 992px) {
  194. [dir=rtl] .navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown > .dropdown-menu {
  195. transform: translateX(50%);
  196. }
  197. }
  198. .landing-footer .footer-link {
  199. transition: all 0.2s ease-in-out;
  200. }
  201. .landing-footer .footer-link:hover {
  202. opacity: 0.8;
  203. }
  204. .landing-footer .footer-top {
  205. padding: 3.5rem 0;
  206. border-top-left-radius: 3.75rem;
  207. border-top-right-radius: 3.75rem;
  208. }
  209. @media (max-width: 767.98px) {
  210. .landing-footer .footer-top {
  211. padding: 3rem 0;
  212. }
  213. }
  214. .landing-footer .footer-top .footer-bg {
  215. object-position: center;
  216. }
  217. @media (min-width: 992px) {
  218. .landing-footer .footer-logo-description {
  219. max-width: 322px;
  220. }
  221. }
  222. .landing-footer .footer-form {
  223. max-width: 22.25rem;
  224. }
  225. .landing-footer .footer-form input {
  226. background-color: #25293c;
  227. border-color: #434968;
  228. color: #d3d4dc;
  229. }
  230. .landing-footer .footer-form input:hover:not([disabled]):not([focus]) {
  231. border-color: #434968;
  232. }
  233. .landing-footer .footer-form input::placeholder {
  234. color: rgba(211, 212, 220, 0.5);
  235. }
  236. .landing-footer .footer-form label {
  237. color: rgba(211, 212, 220, 0.5);
  238. }
  239. .light-style .landing-footer .footer-link,
  240. .light-style .landing-footer .footer-text {
  241. color: #d3d4dc;
  242. }
  243. .light-style .landing-footer .footer-title {
  244. color: #fff;
  245. }
  246. .light-style .landing-footer .footer-bottom {
  247. background-color: #282c3e;
  248. }
  249. .dark-style .landing-footer .footer-link,
  250. .dark-style .landing-footer .footer-text {
  251. color: #b6bee3;
  252. }
  253. .dark-style .landing-footer .footer-title {
  254. color: #cfd3ec;
  255. }
  256. .dark-style .landing-footer .footer-bottom {
  257. background-color: #171925;
  258. }