themeStyle.css 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
  2. @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
  3. @import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@300;400;500;600;700;800;900&display=swap");
  4. * {
  5. list-style: none;
  6. text-decoration: none;
  7. }
  8. a {
  9. opacity: 1;
  10. }
  11. body {
  12. background: rgb(255, 255, 255);
  13. color: rgb(0, 0, 0);
  14. font-family: "Inter", sans-serif;
  15. }
  16. main {
  17. padding-top: 4rem;
  18. padding-bottom: 0 !important;
  19. }
  20. section {
  21. padding: 5rem 0;
  22. margin: unset;
  23. }
  24. h1, h2, h3, h4, h5, h6, p {
  25. color: inherit;
  26. font-family: inherit;
  27. margin: unset;
  28. text-shadow: unset;
  29. }
  30. .row {
  31. margin-top: unset;
  32. }
  33. @media screen and (min-width: 1400px) {
  34. .container {
  35. max-width: 1360px;
  36. }
  37. }
  38. .section-title {
  39. font-weight: 600;
  40. color: rgb(0, 0, 0);
  41. text-align: center;
  42. margin-bottom: 1rem;
  43. font-size: 2.2rem;
  44. }
  45. .section-sub-title {
  46. color: rgba(0, 0, 0, 0.6);
  47. text-align: center;
  48. font-size: 1.4rem;
  49. margin-bottom: 2rem;
  50. }
  51. .img-container {
  52. overflow: hidden;
  53. }
  54. .img-container img {
  55. height: 100%;
  56. width: 100%;
  57. -o-object-fit: cover;
  58. object-fit: cover;
  59. -o-object-position: center;
  60. object-position: center;
  61. }
  62. .link-btn {
  63. margin: 0;
  64. padding: 0.45rem 1.2rem !important;
  65. background: rgb(0, 38, 136);
  66. border-color: rgb(0, 38, 136);
  67. border-width: 2px;
  68. font-size: 0.9rem;
  69. font-weight: 600;
  70. box-shadow: none;
  71. opacity: unset;
  72. display: block;
  73. height: unset;
  74. width: -moz-fit-content;
  75. width: fit-content;
  76. }
  77. .link-btn:hover {
  78. background: rgb(255, 255, 255);
  79. color: rgb(0, 38, 136);
  80. }
  81. .link-btn-outline {
  82. margin: 0;
  83. padding: 0.45rem 1.2rem !important;
  84. color: rgb(0, 38, 136);
  85. border-color: rgb(0, 38, 136);
  86. background: rgb(255, 255, 255);
  87. border-width: 2px;
  88. font-size: 0.9rem;
  89. font-weight: 600;
  90. box-shadow: none;
  91. opacity: unset;
  92. height: unset;
  93. }
  94. .link-btn-outline:hover {
  95. background: rgb(0, 38, 136);
  96. color: rgb(255, 255, 255);
  97. }
  98. .single-course {
  99. box-shadow: 1px 2px 5px rgba(0, 46, 116, 0.25);
  100. font-family: "Inter", sans-serif;
  101. }
  102. .single-course .top-part {
  103. height: 200px;
  104. position: relative;
  105. overflow: hidden;
  106. }
  107. .single-course .top-part .img-container {
  108. height: 100%;
  109. width: 100%;
  110. }
  111. .single-course .top-part .tag {
  112. position: absolute;
  113. left: 4%;
  114. bottom: 4%;
  115. padding: 0.1rem 1rem;
  116. background: rgb(203, 236, 71);
  117. font-size: 0.75rem;
  118. font-weight: 700;
  119. border-radius: 15px;
  120. }
  121. .single-course .details {
  122. height: calc(100% - 180px);
  123. padding: 1rem;
  124. display: flex;
  125. flex-direction: column;
  126. gap: 0.75rem;
  127. font-family: "Inter", sans-serif;
  128. line-height: 1.2;
  129. background: rgb(255, 255, 255);
  130. }
  131. .single-course .details .level {
  132. font-size: 0.75rem;
  133. font-weight: 500;
  134. color: rgb(0, 38, 136);
  135. }
  136. .single-course .details .title {
  137. font-size: 0.9rem;
  138. font-weight: 600;
  139. text-decoration: none;
  140. color: rgb(0, 0, 0);
  141. cursor: pointer;
  142. }
  143. .single-course .details .stats {
  144. font-size: 0.7rem;
  145. color: rgba(0, 0, 0, 0.6);
  146. }
  147. .single-course .details .price {
  148. color: rgb(0, 38, 136);
  149. font-weight: 600;
  150. font-size: 1rem;
  151. text-align: right;
  152. }
  153. #navbar {
  154. position: fixed;
  155. top: 0;
  156. left: 0;
  157. width: 100%;
  158. padding: 0.75rem 0;
  159. font-family: "Poppins", sans-serif;
  160. background: rgb(255, 255, 255);
  161. z-index: 999;
  162. }
  163. #navbar .container-fluid {
  164. display: flex;
  165. justify-content: space-between;
  166. align-items: center;
  167. }
  168. @media screen and (max-width: 768px) {
  169. #navbar .container-fluid {
  170. flex-direction: column;
  171. }
  172. }
  173. #navbar .nav-icons {
  174. display: flex;
  175. align-items: center;
  176. }
  177. @media screen and (max-width: 768px) {
  178. #navbar .nav-icons {
  179. position: fixed;
  180. top: 0;
  181. left: 0;
  182. right: 0;
  183. justify-content: space-between;
  184. width: 100%;
  185. padding: 0 1rem;
  186. background: rgb(255, 255, 255);
  187. height: 4rem;
  188. }
  189. }
  190. #navbar .navbar-brand {
  191. height: 3.5rem;
  192. }
  193. #navbar .navbar-brand img {
  194. height: 100%;
  195. }
  196. #navbar .res-btn {
  197. font-size: 1.2rem;
  198. padding: 0.25rem;
  199. background: unset;
  200. color: rgb(0, 0, 0);
  201. border: none;
  202. margin: 0;
  203. width: unset;
  204. height: -moz-fit-content;
  205. height: fit-content;
  206. width: -moz-fit-content;
  207. width: fit-content;
  208. display: none;
  209. }
  210. #navbar .res-btn:focus {
  211. box-shadow: none;
  212. }
  213. @media screen and (max-width: 768px) {
  214. #navbar .res-btn {
  215. display: block;
  216. }
  217. }
  218. #navbar .nav-links {
  219. display: flex;
  220. justify-content: center;
  221. align-items: center;
  222. gap: 1rem;
  223. }
  224. @media screen and (max-width: 768px) {
  225. #navbar .nav-links {
  226. background: rgb(255, 255, 255);
  227. display: block;
  228. position: fixed;
  229. top: 4rem;
  230. left: 0;
  231. right: 0;
  232. min-height: calc(100vh - 4rem);
  233. padding: 1rem;
  234. overflow-y: auto;
  235. transform: translateX(-200vw);
  236. transition: 0.75s;
  237. }
  238. #navbar .nav-links li {
  239. display: block;
  240. color: #fff;
  241. margin-top: 1rem !important;
  242. }
  243. }
  244. #navbar .nav-links li {
  245. margin: unset;
  246. padding: unset;
  247. }
  248. #navbar .link-item {
  249. padding: 0.25rem 0.5rem;
  250. margin: unset;
  251. color: rgba(0, 0, 0, 0.8);
  252. font-size: 0.9rem;
  253. font-weight: 600;
  254. background: transparent;
  255. }
  256. #navbar .link-item:hover {
  257. color: rgb(0, 38, 136);
  258. }
  259. #navbar .link-item.active {
  260. color: rgb(0, 38, 136);
  261. }
  262. #navbar .link-btn {
  263. padding: 0.25rem 0.75rem !important;
  264. }
  265. @media screen and (max-width: 768px) {
  266. body.show-mobile-menu #navbar .nav-links {
  267. transform: translateX(0px);
  268. }
  269. body.show-mobile-menu main {
  270. overflow-y: none;
  271. }
  272. }
  273. #footer {
  274. background: #151E37;
  275. padding: 2rem 0;
  276. font-family: "Inter", sans-serif;
  277. }
  278. #footer .top-part {
  279. padding-bottom: 2rem;
  280. border-bottom: 2px solid rgb(255, 255, 255);
  281. }
  282. #footer .top-part ul {
  283. display: flex;
  284. justify-content: space-around;
  285. align-items: flex-end;
  286. flex-direction: row;
  287. list-style: none;
  288. }
  289. #footer .top-part ul li {
  290. list-style: none;
  291. }
  292. #footer .top-part ul .short-icon {
  293. width: 4rem;
  294. }
  295. #footer .top-part ul a {
  296. font-size: 1.2rem;
  297. color: rgb(255, 255, 255);
  298. }
  299. @media screen and (max-width: 767px) {
  300. #footer .top-part ul a {
  301. font-size: 0.85rem;
  302. }
  303. }
  304. #footer .top-part ul a.active {
  305. color: #ADBCFF;
  306. }
  307. #footer .address {
  308. display: flex;
  309. flex-direction: column;
  310. gap: 0.5rem;
  311. color: rgb(255, 255, 255);
  312. }
  313. #footer .address li {
  314. list-style: none;
  315. display: flex;
  316. align-items: center;
  317. gap: 0.75rem;
  318. font-size: 1rem;
  319. font-weight: 300;
  320. }
  321. #footer .other-link {
  322. color: rgb(255, 255, 255);
  323. display: flex;
  324. justify-content: center;
  325. align-items: center;
  326. flex-direction: column;
  327. gap: 1rem;
  328. }
  329. #footer .social-link {
  330. display: flex;
  331. gap: 0.5rem;
  332. }
  333. #footer .social-link img {
  334. height: 100%;
  335. width: 100%;
  336. }
  337. #footer .privacy-links {
  338. display: flex;
  339. gap: 0.25rem;
  340. }
  341. #footer .privacy-links a {
  342. padding: 0.1rem 0.5rem;
  343. font-size: 0.7rem;
  344. color: rgb(255, 255, 255);
  345. border-right: 2px solid rgb(255, 255, 255);
  346. }
  347. #footer .privacy-links a:last-child {
  348. border-right: none;
  349. }
  350. #footer .app-download {
  351. margin-top: 0.5rem;
  352. display: flex;
  353. gap: 1.5rem;
  354. }
  355. #footer .app-download a {
  356. height: 2.2rem;
  357. text-decoration: none;
  358. }
  359. #footer .app-download a img {
  360. height: 100%;
  361. }/*# sourceMappingURL=themeStyle.css.map */