page-sobe-home.css 44 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366
  1. body.home main {
  2. margin-top: 100vh;
  3. position: relative;
  4. }
  5. img {
  6. border-radius: 10px;
  7. }
  8. * {
  9. font-family: "Open Sans", sans-serif;
  10. margin: 0px;
  11. padding: 0px;
  12. }
  13. section:last-child {
  14. margin-bottom: 0px !important;
  15. }
  16. p {
  17. font-size: 0.8rem !important;
  18. line-height: 1.7;
  19. color: #4e4e4e !important;
  20. max-width: 800px;
  21. margin: 0 auto;
  22. }
  23. .grid {
  24. gap: 30px;
  25. }
  26. body {
  27. overflow-y: scroll;
  28. }
  29. section {
  30. margin: 0 auto;
  31. padding: unset;
  32. }
  33. main {
  34. margin-top: 100vh;
  35. position: relative;
  36. padding: 0px !important;
  37. background-color: #fff;
  38. }
  39. h1 {
  40. font-size: 40px !important;
  41. letter-spacing: unset !important;
  42. line-height: 100%;
  43. }
  44. h1, h2, h3, h4 {
  45. font-weight: normal;
  46. margin-bottom: 0px !important;
  47. }
  48. button {
  49. margin: 40px auto;
  50. margin-bottom: 30px;
  51. max-width: 300px;
  52. font-size: 20px;
  53. border-radius: 10px;
  54. border: none;
  55. background: #5ca6c7;
  56. }
  57. button:hover {
  58. background: #F68B1F;
  59. }
  60. .grid {
  61. justify-content: center;
  62. padding: 0px 5px;
  63. }
  64. #search-close {
  65. width: 100px;
  66. border-radius: 40px;
  67. background-color: #F68B1F;
  68. margin-top: 30px;
  69. margin-right: 30px;
  70. }
  71. .overlay-content {
  72. overflow: hidden;
  73. }
  74. .overlay-content label {
  75. display: inline-block;
  76. }
  77. .overlay-content h4 {
  78. display: inline-block;
  79. margin: 0px 20px;
  80. }
  81. .overlay-content div a {
  82. display: inline-block;
  83. text-decoration: underline;
  84. }
  85. .overlay-content div h6 {
  86. display: inline-block;
  87. }
  88. #search-bar {
  89. width: 60%;
  90. display: inline-block;
  91. }
  92. #search-button {
  93. width: 300px;
  94. display: inline-block;
  95. border-radius: 30px;
  96. margin-left: 20px;
  97. background: #485680;
  98. }
  99. #search-modal {
  100. overflow: hidden;
  101. }
  102. #search-button:hover {
  103. background-color: #F68B1F;
  104. }
  105. #top-search {
  106. width: 140px;
  107. border-radius: 0;
  108. height: 30px;
  109. }
  110. .banner-wraper {
  111. height: 100vh;
  112. position: relative;
  113. }
  114. #banner {
  115. position: fixed;
  116. top: 0;
  117. height: 100vh !important;
  118. width: 100%;
  119. margin: 0px !important;
  120. padding: 0px !important;
  121. background-position: center;
  122. background-size: cover;
  123. }
  124. #search {
  125. height: 80px;
  126. display: flex;
  127. flex-direction: row;
  128. background: #160c0c;
  129. margin: 0 auto;
  130. }
  131. #search input {
  132. border-radius: 0px;
  133. border: none;
  134. margin: 10px 0px 10px 30px;
  135. max-width: 60%;
  136. height: 60px;
  137. background-color: #ColorThree;
  138. }
  139. .white-bg {
  140. z-index: 10;
  141. width: 100%;
  142. padding: 3rem 0;
  143. background: #fff;
  144. text-align: center;
  145. color: #160c0c;
  146. }
  147. @media screen and (max-width: 768px) {
  148. .white-bg {
  149. padding: 1rem;
  150. }
  151. }
  152. .white-bg h1 {
  153. font-size: 100px;
  154. font-family: "Open Sans", sans-serif;
  155. color: #160c0c;
  156. font-size: 35px;
  157. margin: 0px;
  158. padding: 20px 5px 10px 5px;
  159. line-height: 130%;
  160. letter-spacing: unset;
  161. }
  162. .white-bg p {
  163. color: #160c0c;
  164. font-family: "Open Sans", sans-serif;
  165. }
  166. .white-bg #us-hero-text {
  167. padding-top: 30px;
  168. text-align: center;
  169. }
  170. .white-bg p {
  171. font-family: "Open Sans", sans-serif;
  172. font-size: 20px;
  173. text-align: center;
  174. color: #160c0c;
  175. width: 90%;
  176. margin: 0 auto;
  177. margin-top: 20px;
  178. margin-bottom: 20px;
  179. }
  180. .white-bg h2, .white-bg h1, .white-bg h3 {
  181. font-family: "Open Sans", sans-serif;
  182. font-weight: bold;
  183. color: #160c0c;
  184. text-shadow: 1px 1px rgba(0, 0, 0, 0.4078431373);
  185. }
  186. .white-bg h2 {
  187. font-family: "Open Sans", sans-serif;
  188. font-size: 60px;
  189. margin: 0px;
  190. line-height: 90%;
  191. }
  192. .white-bg h3 {
  193. font-size: 25px;
  194. margin: 0px;
  195. padding: 0px;
  196. line-height: 80%;
  197. letter-spacing: unset;
  198. }
  199. .white-bg h3 span {
  200. color: #F68B1F;
  201. font-family: "Open Sans", sans-serif;
  202. font-weight: bold;
  203. }
  204. #us-imgs {
  205. width: 100%;
  206. min-height: 400px;
  207. padding-top: 40px;
  208. font: "Open Sans", sans-serif;
  209. justify-content: space-around;
  210. gap: 30px;
  211. text-align: center;
  212. margin: 0px auto;
  213. }
  214. #us-imgs div {
  215. margin: 0px auto;
  216. }
  217. .img-container {
  218. position: relative;
  219. overflow: hidden;
  220. width: 100%;
  221. height: 100%;
  222. box-shadow: 4px 4px 4px #333;
  223. }
  224. .img-container .small {
  225. width: 300px;
  226. height: 300px;
  227. }
  228. #us-imgs img {
  229. filter: grayscale(20%);
  230. height: 100%;
  231. -o-object-fit: cover;
  232. object-fit: cover;
  233. -o-object-position: center;
  234. object-position: center;
  235. transition-duration: 1s;
  236. }
  237. #us-imgs img:hover {
  238. scale: 1.05;
  239. filter: contrast(120%) grayscale(0%);
  240. }
  241. .img-container:hover .overlay {
  242. height: 200px;
  243. }
  244. #us-imgs > div {
  245. background: #fff;
  246. max-width: 600px;
  247. }
  248. #us-imgs > div > div {
  249. font-family: "Open Sans", sans-serif;
  250. font-size: 18px;
  251. line-height: 100%;
  252. text-align: left;
  253. height: 200px;
  254. }
  255. #us-imgs > div > div p {
  256. margin-top: 20px;
  257. font-family: "Open Sans", sans-serif;
  258. font-weight: normal;
  259. font-size: 12px;
  260. letter-spacing: 1px;
  261. line-height: 110%;
  262. color: #fff;
  263. }
  264. #us-imgs > div > div h2 {
  265. margin-top: 10px;
  266. margin-bottom: 10px;
  267. font-family: "Open Sans", sans-serif;
  268. text-transform: uppercase;
  269. color: #160c0c;
  270. font-size: 20px;
  271. text-align: left;
  272. }
  273. #us-imgs > div > div p {
  274. color: #000;
  275. font-size: 14px !important;
  276. text-align: justify !important;
  277. line-height: 16px !important;
  278. font-weight: normal;
  279. font-family: "Open Sans", sans-serif;
  280. text-align: left;
  281. letter-spacing: normal;
  282. margin: 5px !important;
  283. padding: 0px !important;
  284. line-height: 1.4rem;
  285. }
  286. #us-imgs > div > div a {
  287. margin-left: 5px;
  288. font-weight: 600;
  289. }
  290. .img-cont {
  291. overflow: hidden;
  292. text-align: center;
  293. height: 400px;
  294. margin: 0px 50px;
  295. border: none;
  296. }
  297. @media (max-width: 990px) {
  298. .img-cont {
  299. margin: 2rem 0px 2rem;
  300. height: 300px;
  301. }
  302. }
  303. @media (max-width: 768px) {
  304. .img-cont {
  305. margin: 1rem 0px;
  306. height: 250px;
  307. }
  308. }
  309. .img-cont img {
  310. width: 100%;
  311. height: 100%;
  312. -o-object-fit: cover;
  313. object-fit: cover;
  314. -o-object-position: center;
  315. object-position: center;
  316. transition-duration: 0.5s;
  317. }
  318. .img-cont img:hover {
  319. scale: 1.05;
  320. }
  321. #research-pointers {
  322. margin: 60px 0px;
  323. padding: 50px 0px;
  324. border-top: 1px solid #000;
  325. border-bottom: 1px solid #000;
  326. }
  327. #research-pointers p {
  328. margin: 20px 0px;
  329. }
  330. #stats-midroll {
  331. background-image: url("../img/campus_01.jpg");
  332. }
  333. #stats-midroll .stat {
  334. margin-top: 5px;
  335. text-align: center;
  336. border-right: 1px solid #fff;
  337. }
  338. @media (max-width: 600px) {
  339. #stats-midroll .stat {
  340. border: none;
  341. padding-bottom: 10px !important;
  342. }
  343. }
  344. #stats-midroll .stat:last-child {
  345. border: none !important;
  346. }
  347. #stats-midroll .stat:nth-child(1) {
  348. border-top: none;
  349. }
  350. #faculty-midroll {
  351. background-image: url("../img/campus_07.jpg");
  352. text-align: center;
  353. }
  354. #faculty-midroll h1 {
  355. font-family: "Open Sans", sans-serif;
  356. letter-spacing: 3px;
  357. }
  358. #faculty-midroll p {
  359. font-size: 16px;
  360. }
  361. .mid-roll {
  362. max-height: 500px;
  363. width: 100%;
  364. background-size: cover;
  365. background-position: center;
  366. background-attachment: fixed;
  367. padding: 0;
  368. overflow: hidden;
  369. }
  370. .bg-tint {
  371. width: 100%;
  372. height: 100%;
  373. min-height: 600px;
  374. background-color: rgba(0, 0, 0, 0.5215686275);
  375. }
  376. .bg-tint .container {
  377. min-height: 500px;
  378. display: flex;
  379. flex-direction: column;
  380. justify-content: center;
  381. gap: 30px;
  382. margin: 0 auto;
  383. padding: 50px 30px 20px 30px;
  384. }
  385. .bg-tint .container h2 {
  386. font-family: "Open Sans", sans-serif;
  387. font-weight: normal;
  388. font-size: 30px;
  389. letter-spacing: 2px;
  390. margin-bottom: 50px;
  391. line-height: 100%;
  392. }
  393. .bg-tint .container p {
  394. font-family: "Open Sans", sans-serif;
  395. font-size: 14px;
  396. font-weight: normal;
  397. letter-spacing: 2px;
  398. margin-bottom: 35px;
  399. color: #fff !important;
  400. }
  401. .bg-tint .container .img-cont {
  402. height: 350px;
  403. max-width: 400px;
  404. overflow: hidden;
  405. border: 2px solid #fff;
  406. margin-bottom: 30px;
  407. }
  408. .bg-tint .container .img-cont img {
  409. transition-duration: 0.5s;
  410. }
  411. .bg-tint .container .img-cont img:hover {
  412. scale: 1.05;
  413. }
  414. .news-big-img-holder {
  415. height: 400px;
  416. overflow: hidden;
  417. width: auto;
  418. filter: brightness(40%);
  419. transition-duration: 0.6s;
  420. box-shadow: 3px 3px 8px rgba(51, 51, 51, 0.4823529412);
  421. }
  422. .news-big-img-holder img {
  423. height: 400px;
  424. width: 100%;
  425. }
  426. .news-big-img-holder:hover {
  427. filter: brightness(70%);
  428. }
  429. .news-big-img-text {
  430. text-align: left;
  431. margin-left: 20px;
  432. transform: translateY(-100px);
  433. }
  434. .news-big-img-text h4 {
  435. color: #fff;
  436. font-size: 14px;
  437. margin: 0px !important;
  438. padding: 0px;
  439. z-index: 2;
  440. }
  441. .news-big-img-text h4 a {
  442. text-decoration: none;
  443. color: #fff;
  444. }
  445. .news-big-img-text h5 {
  446. font-size: 12px;
  447. margin: 0px;
  448. padding: 0px;
  449. }
  450. .news-big-img-text a p {
  451. font-size: 16px;
  452. color: #fff;
  453. text-align: left;
  454. margin: 10px 0px;
  455. padding: 0px;
  456. line-height: 18px;
  457. }
  458. .news-small-img {
  459. background-color: #fff;
  460. box-shadow: 3px 3px 8px rgba(51, 51, 51, 0.4823529412);
  461. margin-bottom: 20px;
  462. max-height: 400px;
  463. }
  464. .news-sm-img-holder {
  465. height: 260px;
  466. overflow: hidden;
  467. filter: brightness(70%);
  468. transition-duration: 0.6s;
  469. }
  470. .news-sm-img-holder img {
  471. height: 100%;
  472. width: 100%;
  473. -o-object-fit: cover;
  474. object-fit: cover;
  475. }
  476. .news-sm-img-holder:hover {
  477. filter: brightness(90%);
  478. }
  479. .news-sm-img-text {
  480. text-align: left;
  481. margin-left: 20px;
  482. }
  483. .news-sm-img-text h4 {
  484. color: #000;
  485. font-size: 14px;
  486. margin: 0px !important;
  487. padding: 0px;
  488. z-index: 10;
  489. }
  490. .news-sm-img-text h4 a {
  491. text-decoration: none;
  492. color: #000;
  493. }
  494. .news-sm-img-text h5 {
  495. color: #000;
  496. font-size: 12px;
  497. margin: 5px 0px;
  498. padding: 0px;
  499. }
  500. .news-sm-img-text a p {
  501. font-size: 16px;
  502. color: #000;
  503. text-align: left;
  504. margin: 10px 0px;
  505. padding: 0px;
  506. line-height: 18px;
  507. }
  508. .faculty-individual {
  509. background-color: #fff;
  510. margin: 50px 10px;
  511. padding: 10px;
  512. box-shadow: 4px 4px 8px rgba(51, 51, 51, 0.1764705882);
  513. }
  514. .faculty-individual .faculty-img-holder {
  515. width: 100%;
  516. height: 400px;
  517. overflow: hidden;
  518. }
  519. .faculty-individual .faculty-img-holder img {
  520. width: 100%;
  521. height: 400px;
  522. -o-object-fit: cover;
  523. object-fit: cover;
  524. transition-duration: 0.5s;
  525. }
  526. .faculty-individual .faculty-img-holder img:hover {
  527. scale: 1.05;
  528. }
  529. .faculty-individual .faculty-details {
  530. margin-left: 10px;
  531. }
  532. .faculty-individual .faculty-details h2 {
  533. height: 50px;
  534. margin: 20px 0px;
  535. font-family: "Open Sans", sans-serif;
  536. font-size: 18px;
  537. }
  538. .faculty-individual .faculty-details h4 {
  539. font-family: "Open Sans", sans-serif;
  540. font-size: 12px;
  541. margin: 5px 0px;
  542. color: #000;
  543. }
  544. .faculty-individual .faculty-details h3 {
  545. font-family: "Open Sans", sans-serif;
  546. color: #000 !important;
  547. font-size: 12px;
  548. letter-spacing: 1px;
  549. }
  550. .faculty-individual .faculty-details button {
  551. max-width: 250px !important;
  552. margin: 20px auto;
  553. }
  554. #faculty-img {
  555. height: 600px;
  556. max-height: 600px;
  557. margin: 0 auto;
  558. overflow: hidden;
  559. }
  560. @media screen and (max-width: 768px) {
  561. #faculty-img {
  562. height: 250px;
  563. }
  564. }
  565. #faculty-img img {
  566. height: 100%;
  567. width: 100%;
  568. -o-object-fit: cover;
  569. object-fit: cover;
  570. -o-object-position: center;
  571. object-position: center;
  572. }
  573. #success {
  574. padding-bottom: 60px;
  575. }
  576. #success > .grid > div {
  577. background: #160c0c;
  578. border: 2px solid #2F4858;
  579. text-align: center;
  580. }
  581. #success > .grid > div img {
  582. height: 400px;
  583. width: auto;
  584. -o-object-fit: cover;
  585. object-fit: cover;
  586. }
  587. #success > .grid > div p {
  588. color: #fff;
  589. letter-spacing: 1px;
  590. text-align: left;
  591. font-weight: normal;
  592. font-size: 16px;
  593. min-height: 100px;
  594. margin-top: 10px;
  595. }
  596. #success > .grid > div h2 {
  597. font-family: "Open Sans", sans-serif;
  598. font-size: 40px;
  599. color: #fff;
  600. padding-top: 30px;
  601. padding-bottom: 10px;
  602. margin-bottom: 10px;
  603. }
  604. #events {
  605. min-height: 800px;
  606. text-align: center;
  607. background: #F1FBFF;
  608. padding: 4rem 0;
  609. }
  610. #events h1 {
  611. color: #000;
  612. margin: 0 auto 3rem !important;
  613. font-weight: 700 !important;
  614. }
  615. #events .bg-tint {
  616. min-height: 800px;
  617. padding: 50px 0px;
  618. background: #626262;
  619. }
  620. .event-holder {
  621. border-radius: 10px !important;
  622. min-height: 500px;
  623. background: #fff;
  624. box-shadow: 0px 3px 5px 0px rgba(51, 51, 51, 0.2862745098);
  625. overflow: hidden;
  626. }
  627. .event-holder .event-date {
  628. position: relative;
  629. margin-left: 20px;
  630. margin-top: -35px;
  631. height: 70px;
  632. width: 70px;
  633. background-color: #5ca6c7;
  634. display: flex;
  635. flex-direction: column;
  636. justify-content: center;
  637. }
  638. .event-holder .event-date h3 {
  639. margin: 0px auto;
  640. margin-bottom: unset !important;
  641. text-align: center;
  642. color: #fff;
  643. font-size: 20px;
  644. line-height: 22px;
  645. font-family: "Open Sans", sans-serif;
  646. font-weight: bolder;
  647. }
  648. .event-holder .event-details {
  649. text-align: left;
  650. margin: 10px;
  651. }
  652. .event-holder .event-details h2 {
  653. color: #000;
  654. font-size: 22px;
  655. font-weight: 500;
  656. margin: 0px auto;
  657. text-transform: capitalize;
  658. }
  659. .event-holder .event-details h3 {
  660. color: rgba(0, 0, 0, 0.6039215686);
  661. font-size: 16px;
  662. margin: 10px 0px;
  663. }
  664. .event-holder .event-details a:hover h2 {
  665. color: rgba(0, 0, 0, 0.7333333333);
  666. }
  667. .event-img-holder {
  668. overflow: hidden;
  669. height: 300px;
  670. background: #333;
  671. }
  672. .event-img-holder img {
  673. height: 300px;
  674. width: 100%;
  675. -o-object-fit: cover;
  676. object-fit: cover;
  677. transition-duration: 0.5s;
  678. }
  679. .event-img-holder img:hover {
  680. scale: 1.05;
  681. }
  682. #stats > div > div > div {
  683. padding: 20px 0px;
  684. text-align: center;
  685. margin: 20px auto;
  686. padding-right: 20px;
  687. color: #fff;
  688. border-right: 1px solid #fff;
  689. }
  690. #stats > div > div > div h1 {
  691. color: #fff;
  692. margin-bottom: 20px;
  693. }
  694. #stats > div > div > div:last-child {
  695. border-right: none;
  696. }
  697. #admissions {
  698. padding: 50px 0px 0px 0px !important;
  699. }
  700. #admissions img {
  701. height: 400px;
  702. -o-object-fit: cover;
  703. object-fit: cover;
  704. }
  705. #admissions p {
  706. font-family: "Open Sans", sans-serif;
  707. font-size: 20px;
  708. text-align: center;
  709. color: #160c0c;
  710. width: 90%;
  711. margin: 0 auto;
  712. margin-top: 50px;
  713. margin-bottom: 30px;
  714. }
  715. #testimonial-text {
  716. background: #2F4858;
  717. height: 150px;
  718. max-width: 450px;
  719. text-align: center;
  720. position: relative;
  721. top: -75px;
  722. margin: 0 auto;
  723. padding-top: 10px;
  724. box-shadow: 2px 2px 6px #333;
  725. }
  726. #testimonial-text blockquote {
  727. padding: 5px 0px;
  728. margin: 0px 20px;
  729. color: white;
  730. font-family: "Open Sans", sans-serif;
  731. font-weight: normal;
  732. font-size: 14px;
  733. }
  734. #stu_id {
  735. padding: 10px 30px;
  736. }
  737. #stu_id h2 {
  738. padding: 5px;
  739. font-size: 20px;
  740. color: #fff;
  741. margin: 0px 0px;
  742. font-weight: normal;
  743. text-decoration: none;
  744. text-align: right;
  745. }
  746. #stu_id h3 {
  747. font-size: 18px;
  748. color: white;
  749. margin: 0px auto;
  750. text-align: center;
  751. font-weight: lighter;
  752. text-align: right;
  753. }
  754. .research-block {
  755. padding-block: 20px;
  756. }
  757. #research > div > div > div > div.research-img {
  758. height: 300px;
  759. width: 100%;
  760. overflow: hidden;
  761. border: 1px solid #F68B1F;
  762. border-bottom: 10px solid #F68B1F;
  763. }
  764. #research > div > div > div > div.research-img > img {
  765. transition-duration: 0.5s;
  766. height: 300px;
  767. width: 100%;
  768. -o-object-fit: cover;
  769. object-fit: cover;
  770. -o-object-position: center;
  771. object-position: center;
  772. margin: 0px;
  773. padding: 0px;
  774. }
  775. #research > div > div > div > div.research-img > img:hover {
  776. scale: 1.05;
  777. }
  778. #research > div > div > div > div.research-text > h2 {
  779. font-family: "Open Sans", sans-serif;
  780. font-size: 20px;
  781. font-weight: normal;
  782. color: #160c0c;
  783. padding: 10px 5px;
  784. margin: 10px 0px;
  785. text-align: center;
  786. }
  787. .research-text {
  788. text-align: left;
  789. }
  790. .research-text p {
  791. text-align: left;
  792. font-size: 18px;
  793. margin: 5px 0px;
  794. padding: 5px 5px;
  795. }
  796. .research-text a {
  797. color: #333;
  798. text-decoration: underline;
  799. }
  800. .research-text a:hover {
  801. color: #2F4858;
  802. }
  803. .research-text h2 {
  804. font-family: "Open Sans", sans-serif;
  805. font-size: 18px;
  806. color: #fff !important;
  807. background: #160c0c;
  808. }
  809. #testimonial-block > h1 {
  810. padding: 0px;
  811. margin: 10px 0px;
  812. font-size: 35px;
  813. letter-spacing: 3px;
  814. }
  815. #testimonial-block > h1 > a {
  816. font-family: "Open Sans", sans-serif;
  817. color: #fff;
  818. padding: 0px;
  819. }
  820. #campus-banner {
  821. height: 500px;
  822. width: 100%;
  823. background: url("../img/campus_02.jpg") no-repeat;
  824. background-size: cover;
  825. background-position: center;
  826. }
  827. #campus-life {
  828. background: #f1fbff;
  829. padding: 3rem 0 5rem !important;
  830. }
  831. #campus-life .campus-hero {
  832. padding-top: 2rem;
  833. }
  834. #campus-life .image-container {
  835. width: 100%;
  836. }
  837. #campus-life .image-container img {
  838. width: 100%;
  839. border-radius: 3px;
  840. }
  841. #campus-life .analytics {
  842. margin: 3.8rem 0 1rem;
  843. padding: 1.2rem 2rem 0.5rem;
  844. border-top: 2px solid #333;
  845. border-bottom: 2px solid #333;
  846. text-align: center;
  847. display: flex;
  848. justify-content: space-around;
  849. align-items: center;
  850. }
  851. @media screen and (max-width: 768px) {
  852. #campus-life .analytics {
  853. flex-direction: column;
  854. }
  855. }
  856. #campus-life .analytics .item {
  857. margin-bottom: 1rem;
  858. }
  859. #campus-life .analytics .count {
  860. font-weight: 700;
  861. margin-bottom: 0.5rem !important;
  862. font-size: 2rem;
  863. }
  864. #campus-life .analytics .desc {
  865. font-weight: 500;
  866. margin-bottom: unset;
  867. }
  868. #us-imgs > div > div > h2 {
  869. text-transform: capitalize;
  870. line-height: 20px;
  871. letter-spacing: 1px;
  872. font-family: "Open Sans", sans-serif;
  873. font-size: 14px !important;
  874. font-weight: 900;
  875. padding: 10px 5px;
  876. text-align: left;
  877. color: #000;
  878. text-shadow: none;
  879. }
  880. #socials h1 {
  881. color: #160c0c;
  882. margin: 0px auto;
  883. text-align: center;
  884. }
  885. #socials ul {
  886. margin-bottom: 0px;
  887. }
  888. #socials ul > li {
  889. display: inline;
  890. }
  891. #socials ul > li > a > img {
  892. width: 60px;
  893. margin-right: 10px;
  894. }
  895. footer {
  896. position: relative;
  897. z-index: 30 !important;
  898. }
  899. #footer1 {
  900. z-index: 10;
  901. height: 400px;
  902. background: url("../img/footer2.png") no-repeat;
  903. background-size: cover;
  904. background-position: top;
  905. }
  906. footer.container-fluid {
  907. border-top: 10px solid #C85688;
  908. overflow: hidden;
  909. text-align: left;
  910. margin: 0px;
  911. padding: 0px !important;
  912. background: #160c0c;
  913. min-height: 350px;
  914. }
  915. footer.container-fluid h3 {
  916. margin: 10px auto;
  917. margin: 30px 0px;
  918. font-family: "Open Sans", sans-serif;
  919. font-size: 20px;
  920. color: #fff;
  921. font-weight: normal;
  922. text-decoration: underline;
  923. }
  924. footer.container-fluid ul {
  925. padding: 0px;
  926. }
  927. footer.container-fluid ul > li {
  928. list-style: none;
  929. margin: 0px;
  930. padding: 0px;
  931. line-height: 110%;
  932. }
  933. footer.container-fluid ul > li a {
  934. text-decoration: none;
  935. color: #fff;
  936. font-size: 12px;
  937. letter-spacing: 2px;
  938. font-weight: normal;
  939. font-family: "Open Sans", sans-serif;
  940. text-transform: uppercase;
  941. }
  942. footer.container-fluid ul > li a:hover {
  943. color: #F68B1F;
  944. text-decoration: underline;
  945. }
  946. #fine-print {
  947. text-align: center;
  948. margin: 10px auto;
  949. height: 50px;
  950. border-top: 1px solid #F68B1F;
  951. }
  952. #fine-print p {
  953. font-size: 12px;
  954. display: inline-flex;
  955. }
  956. #fine-print ul {
  957. display: inline;
  958. }
  959. #fine-print ul > li {
  960. display: inline;
  961. padding: 10px;
  962. font-size: 12px;
  963. letter-spacing: 1px;
  964. }
  965. #menu-bars {
  966. display: none;
  967. margin: 0px auto;
  968. padding-top: 13px;
  969. font-size: 45px;
  970. }
  971. #myNav > div > div > a {
  972. margin: 0 auto;
  973. }
  974. .accredition {
  975. min-height: 100px;
  976. }
  977. .accredition #accredition-img {
  978. height: 100px;
  979. width: auto;
  980. -o-object-fit: contain;
  981. object-fit: contain;
  982. margin: 50px 0px;
  983. }
  984. #accr h2 {
  985. padding: 30px 0px 0px 0px;
  986. font-size: 40px;
  987. }
  988. @media (max-width: 1100px) {
  989. #first-nav > ul {
  990. position: relative;
  991. width: 100%;
  992. left: 0px;
  993. }
  994. #first-nav > ul > img {
  995. width: 350px;
  996. -o-object-fit: contain;
  997. object-fit: contain;
  998. margin-right: auto;
  999. }
  1000. #first-nav > ul > li {
  1001. display: none;
  1002. }
  1003. #first-nav > ul > li:last-child {
  1004. display: inline-block;
  1005. margin-right: auto;
  1006. width: 40px;
  1007. }
  1008. #top-search {
  1009. display: none;
  1010. }
  1011. #menu-bars {
  1012. display: inline-block;
  1013. }
  1014. }
  1015. @media (max-width: 576px) {
  1016. #first-nav > ul > img {
  1017. width: 170px;
  1018. }
  1019. #search > button.filled {
  1020. display: none;
  1021. }
  1022. body > main > section:nth-child(2) > div > h1 {
  1023. font-size: 60px;
  1024. }
  1025. #video-text > h1 {
  1026. margin-top: 30%;
  1027. font-size: 50px;
  1028. }
  1029. #cta {
  1030. display: flex;
  1031. flex-direction: column;
  1032. }
  1033. #cta > button:nth-child(2) {
  1034. display: none;
  1035. }
  1036. #success > h1 {
  1037. font-size: 40px;
  1038. }
  1039. .event-details {
  1040. margin: 10px !important;
  1041. padding: 0px !important;
  1042. }
  1043. #events > div > div > div.event-content > h2 {
  1044. font-size: 12px;
  1045. }
  1046. #events > div > div > div.event-content > h2 {
  1047. font-size: 10px;
  1048. }
  1049. #events > div > div > div.event-content {
  1050. width: 100%;
  1051. }
  1052. #events > div > h1 {
  1053. font-size: 25px;
  1054. }
  1055. #campus-life > h1 {
  1056. font-size: 60px;
  1057. }
  1058. .white-bg h1 {
  1059. font-size: 2rem !important;
  1060. }
  1061. .white-bg h2 {
  1062. font-size: 1.5rem;
  1063. }
  1064. #second-nav-section {
  1065. display: none !important;
  1066. }
  1067. .banner-overlay {
  1068. margin: 0 auto;
  1069. }
  1070. .banner-overlay h1 {
  1071. text-align: center;
  1072. width: 300px !important;
  1073. font-size: 30px !important;
  1074. margin: 0px auto;
  1075. }
  1076. }
  1077. .slider-single-div {
  1078. width: 100%;
  1079. height: 100%;
  1080. }
  1081. a {
  1082. color: #F3615F;
  1083. font-weight: bold;
  1084. font-size: 16px;
  1085. text-align: left;
  1086. text-transform: uppercase;
  1087. font-size: 14px;
  1088. font-weight: lighter;
  1089. text-decoration: none !important;
  1090. }
  1091. a:hover {
  1092. color: #160c0c;
  1093. text-decoration: underline;
  1094. }
  1095. .carousel {
  1096. z-index: -6;
  1097. width: 100vw;
  1098. height: 100vh;
  1099. position: relative;
  1100. }
  1101. .carousel ul {
  1102. margin: 0;
  1103. padding: 0;
  1104. list-style: none;
  1105. }
  1106. .slide {
  1107. position: absolute;
  1108. inset: 0;
  1109. opacity: 0;
  1110. transition: 200ms opacity ease-in-out;
  1111. transition-delay: 600ms;
  1112. }
  1113. .slide img {
  1114. display: block;
  1115. width: 100%;
  1116. height: 100%;
  1117. -o-object-fit: cover;
  1118. object-fit: cover;
  1119. -o-object-position: center;
  1120. object-position: center;
  1121. }
  1122. .slide[data-active] {
  1123. opacity: 1;
  1124. z-index: 1;
  1125. transition-delay: 0ms;
  1126. }
  1127. .carousel-button {
  1128. position: absolute;
  1129. z-index: 3;
  1130. background: none;
  1131. border: none;
  1132. font-size: 8rem;
  1133. top: 50%;
  1134. transform: translateY(-50%);
  1135. color: rgba(255, 255, 255, 0.7058823529);
  1136. cursor: pointer;
  1137. border-radius: 0.25rem;
  1138. padding: 0 0.5rem;
  1139. outline: none;
  1140. }
  1141. @media (max-width: 576px) {
  1142. .carousel-button {
  1143. display: none;
  1144. }
  1145. }
  1146. .carousel-button:hover,
  1147. .carousel-button:focus {
  1148. color: white;
  1149. background-color: transparent;
  1150. border: none;
  1151. outline: none;
  1152. }
  1153. .carousel-button:focus {
  1154. border: none;
  1155. outline: none;
  1156. }
  1157. .carousel-button.prev {
  1158. left: 1rem;
  1159. }
  1160. .carousel-button.next {
  1161. right: 1rem;
  1162. }
  1163. .banner-overlay {
  1164. position: absolute;
  1165. top: 0;
  1166. z-index: 5;
  1167. height: 100%;
  1168. width: 100%;
  1169. background-color: rgba(0, 26, 7, 0.6039215686);
  1170. }
  1171. .banner-overlay h1 {
  1172. font-family: "Open Sans", sans-serif;
  1173. font-size: 70px !important;
  1174. line-height: 100%;
  1175. text-align: center;
  1176. width: 750px;
  1177. margin: 0px auto;
  1178. position: relative;
  1179. top: 50%;
  1180. transform: translateY(-50%);
  1181. }
  1182. .banner-overlay h4 {
  1183. margin: 10px auto;
  1184. width: 100%;
  1185. text-align: center;
  1186. position: relative;
  1187. top: 50%;
  1188. transform: translateY(-200%);
  1189. font-family: "Open Sans", sans-serif;
  1190. font-size: 16px;
  1191. letter-spacing: 5px;
  1192. font-weight: lighter;
  1193. margin-bottom: 70px !important;
  1194. }
  1195. .banner-overlay h3 {
  1196. margin: 10px auto;
  1197. width: 100%;
  1198. text-align: center;
  1199. position: relative;
  1200. top: 50%;
  1201. transform: translateY(-250%);
  1202. font-family: "Open Sans", sans-serif;
  1203. font-size: 20px;
  1204. letter-spacing: 5px;
  1205. font-weight: lighter;
  1206. margin-bottom: 70px !important;
  1207. }
  1208. @media (max-width: 600px) {
  1209. .banner-overlay h3 {
  1210. transform: translateY(-50%);
  1211. }
  1212. }
  1213. .banner-overlay h4:nth-child(1) {
  1214. margin: -80px auto 80px auto;
  1215. }
  1216. @media (max-width: 1100px) {
  1217. .banner-overlay {
  1218. margin: 0 auto;
  1219. }
  1220. .banner-overlay h1 {
  1221. text-align: center;
  1222. width: 300px !important;
  1223. font-size: 30px !important;
  1224. margin: 0px auto;
  1225. }
  1226. .banner-overlay h4 {
  1227. font-size: 12px;
  1228. letter-spacing: 5px;
  1229. }
  1230. .banner-overlay h4:nth-child(1) {
  1231. margin: -10px auto 10px auto;
  1232. }
  1233. }
  1234. button:focus {
  1235. border: none !important;
  1236. outline: none !important;
  1237. box-shadow: none !important;
  1238. }
  1239. .program {
  1240. margin: 3rem auto;
  1241. }
  1242. @media screen and (max-width: 768px) {
  1243. .program {
  1244. margin: 1rem auto;
  1245. }
  1246. }
  1247. .program div {
  1248. margin: 2rem auto;
  1249. }
  1250. @media screen and (max-width: 768px) {
  1251. .program div {
  1252. margin: 1rem auto;
  1253. }
  1254. }
  1255. .program div h2 {
  1256. letter-spacing: 3px;
  1257. font-size: 30px;
  1258. }
  1259. .program div p {
  1260. color: #464646;
  1261. }
  1262. #faculty-section .container > h4 {
  1263. font-size: 16px;
  1264. margin-top: 50px;
  1265. color: #919191 !important;
  1266. }
  1267. #faculty-section h4 {
  1268. color: #919191 !important;
  1269. }
  1270. #faculty-section h1 {
  1271. margin-bottom: 40px I !important;
  1272. }
  1273. #faculty-section h3 {
  1274. color: #000 !important;
  1275. }
  1276. #news h4 {
  1277. color: #9d9999 !important;
  1278. }
  1279. .material-symbols-outlined {
  1280. font-size: 50px !important;
  1281. font-weight: 400 !important;
  1282. }
  1283. .profile-carousel {
  1284. text-align: center;
  1285. margin: 10px auto;
  1286. height: 350px;
  1287. width: 100%;
  1288. white-space: nowrap;
  1289. position: absolute;
  1290. left: 0;
  1291. transition: 1.5s;
  1292. }
  1293. .car-img-holder {
  1294. margin: 20px auto;
  1295. width: 250px;
  1296. height: 250px;
  1297. overflow: hidden;
  1298. border-radius: 10px;
  1299. }
  1300. .car-img-holder img {
  1301. width: 100%;
  1302. height: 100%;
  1303. -o-object-position: center;
  1304. object-position: center;
  1305. -o-object-fit: cover;
  1306. object-fit: cover;
  1307. }
  1308. .car-item {
  1309. margin: 10px 10px;
  1310. padding: 10px;
  1311. width: 320px;
  1312. display: inline-block;
  1313. border-radius: 10px;
  1314. box-shadow: 1px 1px 5px rgba(51, 51, 51, 0.4823529412);
  1315. }
  1316. .car-item-holder .faculty-details {
  1317. min-height: 70px;
  1318. width: 300px;
  1319. overflow: hidden;
  1320. overflow-wrap: break-word;
  1321. }
  1322. .car-item-holder .faculty-details h2 {
  1323. position: relative;
  1324. margin: 20px 0px 0px 0px;
  1325. font-family: "Open Sans", sans-serif;
  1326. font-size: 18px;
  1327. margin: 10px 0px;
  1328. min-height: 30px;
  1329. color: #000;
  1330. overflow-wrap: break-word;
  1331. }
  1332. .car-item-holder .faculty-details h2 .degree {
  1333. font-weight: normal;
  1334. font-size: 12px;
  1335. }
  1336. .car-item-holder .faculty-details h4 {
  1337. font-family: "Open Sans", sans-serif;
  1338. font-size: 12px;
  1339. margin: 5px 0px;
  1340. color: #000;
  1341. overflow-wrap: break-word;
  1342. }
  1343. .car-item-holder .faculty-details h3 {
  1344. font-family: "Open Sans", sans-serif;
  1345. font-size: 12px;
  1346. letter-spacing: 1px;
  1347. color: #000;
  1348. overflow-wrap: break-word;
  1349. margin-bottom: 10px !important;
  1350. }
  1351. .car-item-holder .faculty-details button {
  1352. max-width: 250px !important;
  1353. margin: 10px auto;
  1354. margin-bottom: 0px;
  1355. }
  1356. .car-control {
  1357. width: 5px;
  1358. display: inline-block;
  1359. margin: 10px;
  1360. }
  1361. #prev-car {
  1362. transform: rotate(180deg);
  1363. }
  1364. .car {
  1365. position: relative;
  1366. min-height: 650px;
  1367. overflow: hidden;
  1368. }
  1369. .car-buttons {
  1370. width: 100%;
  1371. display: flex;
  1372. flex-direction: row;
  1373. justify-content: space-between;
  1374. position: absolute;
  1375. top: 20%;
  1376. transform: translateY(50%);
  1377. z-index: 1000;
  1378. }
  1379. #admit .container > h4 {
  1380. font-size: 16px;
  1381. margin-top: 4rem;
  1382. color: #919191 !important;
  1383. }
  1384. #admit h4 {
  1385. color: #919191 !important;
  1386. }
  1387. #admit h1 {
  1388. margin-bottom: 40px I !important;
  1389. }
  1390. #admit h3 {
  1391. color: #000 !important;
  1392. }
  1393. #widget-menu {
  1394. margin-top: 30px;
  1395. margin-left: 30px;
  1396. margin-right: 30px;
  1397. width: 200px;
  1398. min-height: 300px;
  1399. align-content: center;
  1400. text-align: center;
  1401. float: left;
  1402. }
  1403. @media (max-width: 900px) {
  1404. #widget-menu {
  1405. display: none;
  1406. }
  1407. }
  1408. #widget-menu h3 {
  1409. color: #a2a1a1;
  1410. font-weight: 200 !important;
  1411. font-size: 40px !important;
  1412. text-shadow: 2px 1px #5ca6c7;
  1413. margin-bottom: 20px !important;
  1414. border-bottom: 2px solid #333;
  1415. }
  1416. #widget-menu ul {
  1417. border-radius: 5px;
  1418. background: #5ca6c7;
  1419. padding: 10px 5px;
  1420. }
  1421. #widget-menu ul li {
  1422. list-style: none;
  1423. margin: 5px 0px;
  1424. padding: 5px 10px;
  1425. text-align: left;
  1426. transition-duration: 0.6s;
  1427. }
  1428. #widget-menu ul li a {
  1429. font-size: 12px;
  1430. color: #fff;
  1431. text-transform: capitalize;
  1432. }
  1433. #widget-menu ul li:hover {
  1434. background: #485680;
  1435. }
  1436. #widget-menu ul li:hover a {
  1437. color: #cfcfcf;
  1438. }
  1439. .notices-events .container > h4 {
  1440. font-size: 16px;
  1441. margin-top: 100px;
  1442. color: #919191 !important;
  1443. }
  1444. .notices-events div h4 {
  1445. width: 100%;
  1446. text-align: center;
  1447. }
  1448. .notices-events div h1 {
  1449. width: 100%;
  1450. color: #111;
  1451. text-align: center;
  1452. font-family: "Open Sans", sans-serif;
  1453. font-weight: 800;
  1454. }
  1455. .all-news, .all-notices {
  1456. border-radius: 4px;
  1457. background-color: rgba(0, 128, 128, 0.15);
  1458. margin-top: 30px;
  1459. padding: 20px;
  1460. box-shadow: 1px 1px 15px rgba(158, 158, 158, 0.337254902);
  1461. }
  1462. .all-news h2, .all-notices h2 {
  1463. font-weight: 400 !important;
  1464. font-family: "Open Sans", sans-serif !important;
  1465. margin-top: 30px;
  1466. margin-bottom: 30px !important;
  1467. color: #5ca6c7;
  1468. }
  1469. .all-news h3, .all-notices h3 {
  1470. line-height: 18px;
  1471. margin: 0px auto !important;
  1472. }
  1473. .all-news h3 a, .all-notices h3 a {
  1474. font-weight: 600;
  1475. font-size: 16px;
  1476. color: #5ca6c7;
  1477. }
  1478. .all-news h3 a:hover, .all-notices h3 a:hover {
  1479. text-decoration: underline !important;
  1480. }
  1481. .all-news p, .all-notices p {
  1482. font-size: 14px !important;
  1483. margin: 10px auto !important;
  1484. line-height: 18px;
  1485. text-align: justify;
  1486. width: 100%;
  1487. }
  1488. .all-news .notice-dates, .all-notices .notice-dates {
  1489. line-height: 16px;
  1490. font-size: 14px;
  1491. color: #a8a8a8;
  1492. }
  1493. .notice-item {
  1494. margin: 30px auto !important;
  1495. border-bottom: 1px solid rgba(92, 166, 199, 0.5);
  1496. }
  1497. .fac .container > h4 {
  1498. font-size: 0.8rem;
  1499. margin-top: 5rem;
  1500. color: #919191 !important;
  1501. }
  1502. .car-control {
  1503. width: 5px;
  1504. display: inline-block;
  1505. margin: 10px;
  1506. }
  1507. #prev-car {
  1508. transform: rotate(180deg);
  1509. }
  1510. .car {
  1511. position: relative;
  1512. overflow: hidden;
  1513. }
  1514. .car-buttons {
  1515. width: 100%;
  1516. display: flex;
  1517. flex-direction: row;
  1518. justify-content: space-between;
  1519. position: absolute;
  1520. top: 20%;
  1521. transform: translateY(50%);
  1522. z-index: 1000;
  1523. }
  1524. .banner-overlay {
  1525. background-color: rgba(0, 0, 0, 0.2);
  1526. }
  1527. .student-stories h2 {
  1528. font-size: 18px !important;
  1529. text-transform: capitalize !important;
  1530. margin-bottom: 0 !important;
  1531. }
  1532. .student-stories h5 {
  1533. color: brown !important;
  1534. font-size: 14px !important;
  1535. padding: 0 5px;
  1536. margin-bottom: 20px;
  1537. }
  1538. #faculty-carousel .car-item {
  1539. padding: 0;
  1540. box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  1541. }
  1542. #faculty-carousel .car-img-holder {
  1543. width: auto;
  1544. height: 300px;
  1545. margin: 0;
  1546. margin-bottom: 20px;
  1547. border-bottom-left-radius: 0;
  1548. border-bottom-right-radius: 0;
  1549. }
  1550. #faculty-carousel .car-img-holder img {
  1551. border-radius: 0;
  1552. -o-object-position: top;
  1553. object-position: top;
  1554. }
  1555. #faculty-carousel .faculty-details {
  1556. padding: 0 10px 10px;
  1557. width: 100%;
  1558. }
  1559. #faculty-carousel .faculty-details h2 {
  1560. margin-bottom: 5px;
  1561. }
  1562. #faculty-carousel .faculty-details h3 {
  1563. letter-spacing: 0px;
  1564. font-weight: 700;
  1565. color: #5ca6c7 !important;
  1566. font-size: 14px !important;
  1567. }
  1568. #research-pointers {
  1569. border-bottom: none !important;
  1570. margin-bottom: -30px !important;
  1571. }
  1572. .primary-c {
  1573. margin: 40px auto;
  1574. margin-bottom: 30px;
  1575. max-width: 300px;
  1576. font-size: 20px;
  1577. border-radius: 10px;
  1578. border: none;
  1579. background: #a95f15;
  1580. }
  1581. .link-btn {
  1582. display: block;
  1583. width: -moz-fit-content;
  1584. width: fit-content;
  1585. text-align: center;
  1586. background: #5ca6c7;
  1587. padding-left: 1.8rem;
  1588. padding-right: 1.8rem;
  1589. margin: 2rem auto;
  1590. font-size: 1rem;
  1591. border-radius: 4px;
  1592. border: none;
  1593. color: #fff;
  1594. font-family: "Open Sans", sans-serif;
  1595. font-weight: 500;
  1596. text-transform: capitalize;
  1597. }
  1598. @media screen and (max-width: 700px) {
  1599. .link-btn {
  1600. font-size: 1rem;
  1601. }
  1602. }
  1603. .link-btn:hover {
  1604. background: #f68b1f;
  1605. color: #fff;
  1606. }
  1607. #dept-notices {
  1608. padding: 5rem 0 3rem;
  1609. background-size: cover;
  1610. background-position: center;
  1611. background-repeat: no-repeat;
  1612. position: relative;
  1613. }
  1614. #dept-notices::after {
  1615. content: "";
  1616. position: absolute;
  1617. top: 0;
  1618. left: 0;
  1619. right: 0;
  1620. bottom: 0;
  1621. background: rgba(0, 0, 0, 0.6);
  1622. z-index: 1;
  1623. }
  1624. #dept-notices .link-btn {
  1625. z-index: 10;
  1626. }
  1627. #dept-notices .notice-main {
  1628. margin: 0 auto;
  1629. display: flex;
  1630. flex-direction: column;
  1631. }
  1632. #dept-notices .notice-main .section-title {
  1633. display: block;
  1634. margin-bottom: 3rem !important;
  1635. color: #fff;
  1636. text-align: center;
  1637. font-size: 2.5rem;
  1638. font-weight: 600;
  1639. z-index: 5;
  1640. }
  1641. #dept-notices .notice-main .notice-container {
  1642. padding: 1rem;
  1643. border-bottom: 1px solid rgba(255, 255, 255, 0.431372549);
  1644. position: relative;
  1645. width: 100%;
  1646. display: flex;
  1647. flex-direction: row;
  1648. overflow: hidden;
  1649. z-index: 5;
  1650. background: #294652;
  1651. transition: 0.25s;
  1652. }
  1653. #dept-notices .notice-main .notice-container:hover {
  1654. background: #000;
  1655. }
  1656. #dept-notices .notice-main .notice-container .notice-date {
  1657. background: #5ca6c7;
  1658. color: #F68B1F;
  1659. padding: 0.75rem;
  1660. margin-right: 20px;
  1661. display: flex;
  1662. flex-direction: column;
  1663. justify-content: center;
  1664. align-items: center;
  1665. height: -moz-fit-content;
  1666. height: fit-content;
  1667. }
  1668. #dept-notices .notice-main .notice-container .notice-date h3 {
  1669. font-weight: 400;
  1670. font-size: 1.5rem;
  1671. margin-bottom: unset !important;
  1672. padding: unset;
  1673. color: #fff;
  1674. font-family: "DM Serif Text", serif;
  1675. text-transform: capitalize;
  1676. }
  1677. #dept-notices .notice-main .notice-container .notice-date .strong {
  1678. font-weight: 700;
  1679. }
  1680. #dept-notices .notice-main .notice-container .notice-details {
  1681. display: flex;
  1682. flex-direction: column;
  1683. align-items: flex-start !important;
  1684. justify-content: start !important;
  1685. gap: 0.5rem;
  1686. text-align: start;
  1687. color: #F68B1F;
  1688. }
  1689. #dept-notices .notice-main .notice-container .notice-details .title {
  1690. text-align: start;
  1691. margin-bottom: unset !important;
  1692. }
  1693. #dept-notices .notice-main .notice-container .notice-details .subtitle {
  1694. font-size: 0.7rem;
  1695. text-align: left;
  1696. margin-bottom: unset !important;
  1697. }
  1698. #dept-notices .notice-main .notice-container .notice-details p {
  1699. font-size: 14px !important;
  1700. text-align: left;
  1701. padding: 0px;
  1702. margin-bottom: unset;
  1703. color: #aaa !important;
  1704. }
  1705. #dept-notices .notice-main .notice-container:hover {
  1706. text-decoration: none;
  1707. }
  1708. @media (max-width: 600px) {
  1709. #dept-notices .notice-main .notice-container:hover {
  1710. max-width: 100%;
  1711. }
  1712. }
  1713. #dept-news {
  1714. padding: 4rem 0 3rem;
  1715. }
  1716. #dept-news .info-cont .section-title {
  1717. display: block;
  1718. margin-bottom: 1.5rem !important;
  1719. color: #000;
  1720. text-align: left;
  1721. font-size: 2.3rem !important;
  1722. font-weight: 700;
  1723. z-index: 5;
  1724. }
  1725. #dept-news .info-cont .section-subtitle {
  1726. font-size: 1rem;
  1727. color: #999;
  1728. line-height: 1.7;
  1729. }
  1730. #dept-news .info-cont .link-btn {
  1731. display: block;
  1732. width: -moz-fit-content;
  1733. width: fit-content;
  1734. padding-left: 1.5rem;
  1735. padding-right: 1.5rem;
  1736. margin-right: auto !important;
  1737. margin-left: unset !important;
  1738. margin-bottom: unset;
  1739. text-align: center;
  1740. border-radius: 4px;
  1741. }
  1742. #dept-news .departmentalNews {
  1743. max-height: 400px;
  1744. overflow: hidden;
  1745. }
  1746. #dept-news .departmentalNews .single-news {
  1747. border-radius: 10px;
  1748. overflow: hidden;
  1749. position: relative;
  1750. }
  1751. #dept-news .departmentalNews .single-news:hover .news-img-container::after {
  1752. background: rgba(0, 0, 0, 0.2);
  1753. }
  1754. #dept-news .departmentalNews .news-img-container {
  1755. height: 300px;
  1756. width: 100%;
  1757. position: relative;
  1758. }
  1759. @media screen and (max-width: 576px) {
  1760. #dept-news .departmentalNews .news-img-container {
  1761. height: 250px;
  1762. }
  1763. }
  1764. #dept-news .departmentalNews .news-img-container::after {
  1765. content: "";
  1766. position: absolute;
  1767. top: 0;
  1768. left: 0;
  1769. right: 0;
  1770. bottom: 0;
  1771. background: rgba(0, 0, 0, 0.4);
  1772. transition: all 0.5s;
  1773. }
  1774. #dept-news .departmentalNews .news-img-container img {
  1775. height: 100%;
  1776. width: 100%;
  1777. -o-object-fit: cover;
  1778. object-fit: cover;
  1779. -o-object-position: center;
  1780. object-position: center;
  1781. border-radius: unset;
  1782. }
  1783. #dept-news .departmentalNews .news-text {
  1784. position: absolute;
  1785. bottom: 0;
  1786. left: 0;
  1787. right: 0;
  1788. padding: 1rem;
  1789. color: #fff;
  1790. display: flex;
  1791. flex-direction: column;
  1792. justify-content: center;
  1793. align-items: center;
  1794. gap: 0.5rem;
  1795. text-shadow: 2px 2px 3px #000;
  1796. }
  1797. #dept-news .departmentalNews .news-text .news-date {
  1798. color: #fff;
  1799. z-index: 5;
  1800. margin-bottom: unset !important;
  1801. }
  1802. #dept-news .departmentalNews .news-text .news-cat {
  1803. color: #2ab3b3;
  1804. font-weight: 700;
  1805. font-size: 0.8rem;
  1806. letter-spacing: 2px;
  1807. z-index: 5;
  1808. }
  1809. #dept-news .departmentalNews .news-text .news-cat:hover {
  1810. color: #C85688;
  1811. }
  1812. #dept-news .departmentalNews .news-text .news-title {
  1813. color: #eee;
  1814. font-weight: 400;
  1815. font-size: 0.8rem;
  1816. text-align: center;
  1817. z-index: 5;
  1818. }
  1819. #dept-news .departmentalNews .news-text .news-title:hover {
  1820. color: #fff;
  1821. }
  1822. #dept-news .nav-btn {
  1823. position: relative;
  1824. display: flex;
  1825. gap: 1rem;
  1826. }
  1827. #dept-news .nav-btn .swiper-button-next, #dept-news .nav-btn .swiper-button-prev {
  1828. position: static !important;
  1829. margin-top: 1rem;
  1830. }
  1831. .swiper-button-next, .swiper-button-prev {
  1832. background: #2ab3b3;
  1833. color: #fff !important;
  1834. padding: 1rem;
  1835. display: flex !important;
  1836. justify-content: center;
  1837. align-items: center;
  1838. }
  1839. .swiper-button-next:focus, .swiper-button-prev:focus {
  1840. box-shadow: none;
  1841. }
  1842. .swiper-button-next::after, .swiper-button-prev::after {
  1843. font-size: 1rem !important;
  1844. font-weight: 700;
  1845. }
  1846. #faculty-members {
  1847. font-family: "Open Sans", sans-serif;
  1848. }
  1849. #faculty-members .facultyMembersSlider {
  1850. padding: 2rem 0.5rem;
  1851. }
  1852. #faculty-members .facultyMembersSlider .single-slider {
  1853. border-radius: 10px;
  1854. overflow: hidden;
  1855. box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
  1856. display: flex;
  1857. }
  1858. #faculty-members .facultyMembersSlider .slider-image-container {
  1859. height: 200px;
  1860. }
  1861. #faculty-members .facultyMembersSlider .slider-image-container img {
  1862. width: 100%;
  1863. height: 100%;
  1864. border-radius: unset;
  1865. -o-object-fit: cover;
  1866. object-fit: cover;
  1867. -o-object-position: center;
  1868. object-position: center;
  1869. }
  1870. #faculty-members .facultyMembersSlider .faculty-details {
  1871. padding: 1rem 0.5rem;
  1872. text-shadow: none !important;
  1873. font-family: "Open Sans", sans-serif !important;
  1874. line-height: 1.4;
  1875. height: 155px;
  1876. letter-spacing: 0.5px;
  1877. text-align: left;
  1878. }
  1879. #faculty-members .facultyMembersSlider .faculty-details h2 {
  1880. font-size: 0.8rem;
  1881. font-weight: 700;
  1882. color: #000;
  1883. text-shadow: none;
  1884. line-height: 1.4;
  1885. letter-spacing: 0 !important;
  1886. font-family: "Open Sans", sans-serif;
  1887. text-transform: capitalize;
  1888. }
  1889. #faculty-members .facultyMembersSlider .faculty-details h2 .degree {
  1890. display: block;
  1891. font-size: 0.6rem;
  1892. font-weight: 600;
  1893. }
  1894. #faculty-members .facultyMembersSlider .faculty-details h3 {
  1895. font-size: 0.7rem;
  1896. text-shadow: none !important;
  1897. line-height: 1.2;
  1898. font-weight: 700;
  1899. }
  1900. #faculty-members .facultyMembersSlider .faculty-details .deg {
  1901. margin-top: 0.5rem;
  1902. /* color: #a95f15 */
  1903. font-size: 12px;
  1904. color: #234f63 !important;
  1905. font-weight: 500;
  1906. font-style: italic;
  1907. }
  1908. #statistics {
  1909. background-image: url("../img/campus_07.jpg");
  1910. background-position: center;
  1911. background-repeat: no-repeat;
  1912. background-size: cover;
  1913. position: relative;
  1914. padding: 4rem 0;
  1915. margin-top: 3rem;
  1916. }
  1917. #statistics::after {
  1918. content: "";
  1919. position: absolute;
  1920. top: 0;
  1921. right: 0;
  1922. left: 0;
  1923. bottom: 0;
  1924. background-color: rgba(0, 0, 0, 0.4);
  1925. }
  1926. #statistics .all-statistics {
  1927. z-index: 10;
  1928. }
  1929. #statistics .single-statistics {
  1930. display: flex;
  1931. flex-direction: column;
  1932. justify-content: center;
  1933. align-items: center;
  1934. font-family: "Open Sans", sans-serif !important;
  1935. }
  1936. #statistics .single-statistics .statistics-icon {
  1937. height: 3rem;
  1938. z-index: 2;
  1939. }
  1940. #statistics .single-statistics .statistics-icon img {
  1941. height: 100%;
  1942. width: auto;
  1943. }
  1944. #statistics .single-statistics .count {
  1945. font-size: 3rem;
  1946. color: #fff;
  1947. letter-spacing: 5px;
  1948. z-index: 2;
  1949. font-family: "Open Sans", sans-serif;
  1950. font-weight: 700;
  1951. }
  1952. #statistics .single-statistics .title {
  1953. font-size: 0.9rem;
  1954. color: #ccc;
  1955. font-weight: 600;
  1956. z-index: 2;
  1957. }
  1958. #programs {
  1959. padding: 3.5rem 0;
  1960. background: #F1FBFF;
  1961. font-family: "Open Sans", sans-serif;
  1962. }
  1963. #programs .header {
  1964. display: flex;
  1965. justify-content: space-between;
  1966. align-items: center;
  1967. gap: 1rem;
  1968. flex-wrap: wrap;
  1969. }
  1970. #programs .header .section-title {
  1971. font-size: 2rem;
  1972. font-weight: 700;
  1973. color: #000;
  1974. }
  1975. #programs .header .section-subtitle {
  1976. max-width: 650px;
  1977. color: #333;
  1978. font-size: 1rem;
  1979. font-weight: 500;
  1980. margin-bottom: 1rem;
  1981. }
  1982. #programs .programs-container {
  1983. padding: 2rem 0;
  1984. }
  1985. #programs .programs-container .title {
  1986. font-size: 1.5rem;
  1987. color: #000;
  1988. font-weight: 700;
  1989. text-align: right;
  1990. text-transform: capitalize;
  1991. }
  1992. #programs .programs-container .programs .program-item {
  1993. position: relative;
  1994. height: 100%;
  1995. padding: 2.5rem;
  1996. background: #fff;
  1997. color: #000;
  1998. border-radius: 3px;
  1999. display: flex;
  2000. justify-content: center;
  2001. align-items: center;
  2002. overflow: hidden;
  2003. cursor: pointer;
  2004. }
  2005. #programs .programs-container .programs .program-item:hover .program-overlay {
  2006. height: 100%;
  2007. }
  2008. #programs .programs-container .programs .program-item:hover .text {
  2009. color: white;
  2010. text-shadow: 1px 1px 5px #000;
  2011. }
  2012. #programs .programs-container .programs .program-item .text {
  2013. font-size: 1rem;
  2014. font-weight: 700;
  2015. text-align: center;
  2016. color: #000;
  2017. line-height: 1;
  2018. z-index: 5;
  2019. transition: 0.6s;
  2020. }
  2021. #programs .programs-container .programs .program-item .program-overlay {
  2022. position: absolute;
  2023. bottom: 0;
  2024. height: 6px;
  2025. width: 100%;
  2026. transition: 0.5s;
  2027. }
  2028. #hero {
  2029. margin-top: 2rem;
  2030. position: fixed;
  2031. top: 0;
  2032. height: 100vh;
  2033. width: 100vw;
  2034. z-index: -20;
  2035. font-family: "Open Sans", sans-serif;
  2036. }
  2037. #hero .swiper-slide {
  2038. position: relative;
  2039. height: 100vh;
  2040. width: 100vw;
  2041. }
  2042. #hero .swiper-slide .slide-overlay {
  2043. position: absolute;
  2044. top: 0;
  2045. bottom: 0;
  2046. left: 0;
  2047. right: 0;
  2048. background: #000;
  2049. opacity: 0.4;
  2050. }
  2051. #hero .swiper-slide .slide-image {
  2052. height: 100%;
  2053. width: 100%;
  2054. }
  2055. #hero .swiper-slide .slide-image img {
  2056. height: 100% !important;
  2057. width: 100%;
  2058. -o-object-fit: cover;
  2059. object-fit: cover;
  2060. -o-object-position: center;
  2061. object-position: center;
  2062. z-index: -2;
  2063. }
  2064. #hero .swiper-button-next, #hero .swiper-button-prev {
  2065. background: unset !important;
  2066. border: unset !important;
  2067. }
  2068. #hero .swiper-button-next:active, #hero .swiper-button-prev:active {
  2069. background: unset !important;
  2070. border: unset !important;
  2071. }
  2072. #hero .swiper-button-next:focus, #hero .swiper-button-prev:focus {
  2073. background: unset !important;
  2074. border: unset !important;
  2075. box-shadow: unset;
  2076. }
  2077. #hero .swiper-button-next::after, #hero .swiper-button-prev::after {
  2078. color: #fff;
  2079. }
  2080. #hero .swiper-button-next {
  2081. right: 2rem;
  2082. }
  2083. #hero .swiper-button-prev {
  2084. left: 2rem;
  2085. }
  2086. #hero .hero-text-container {
  2087. padding: 2.5rem 0;
  2088. position: absolute;
  2089. top: 0;
  2090. left: 0;
  2091. right: 0;
  2092. bottom: 0;
  2093. display: flex;
  2094. flex-direction: column;
  2095. justify-content: center;
  2096. align-items: center;
  2097. gap: 1rem;
  2098. text-align: center;
  2099. z-index: 10;
  2100. color: #fff;
  2101. text-shadow: 2px 2px 5px #000;
  2102. line-height: 1.2;
  2103. }
  2104. #hero .hero-text-container .heading {
  2105. font-size: 3rem;
  2106. font-weight: 700;
  2107. max-width: 800px;
  2108. }
  2109. #hero .hero-text-container .sub-heading {
  2110. font-size: 1rem;
  2111. max-width: 800px;
  2112. font-weight: 500;
  2113. color: #f3f3f3;
  2114. }
  2115. #hero .hero-text-container .text-content {
  2116. font-size: 1.2rem;
  2117. max-width: 800px;
  2118. font-weight: 400;
  2119. color: #f3f3f3;
  2120. }
  2121. #hero .hero-text-container .link-btn {
  2122. display: inline-block;
  2123. margin: 0.5rem 0 0;
  2124. padding-left: 1.5rem;
  2125. padding-right: 1.5rem;
  2126. width: -moz-fit-content;
  2127. width: fit-content;
  2128. color: #fff;
  2129. background: #f68b1f;
  2130. font-size: 0.9rem;
  2131. font-weight: 500;
  2132. text-align: center;
  2133. text-shadow: none;
  2134. text-decoration: none;
  2135. border-radius: 4px;
  2136. box-shadow: 2px 2px 5px rgba(21, 21, 21, 0.6470588235);
  2137. transition: all 0.25s;
  2138. }
  2139. #hero .hero-text-container .link-btn:hover {
  2140. background: #5ca6c7;
  2141. }
  2142. #alumni {
  2143. padding: 5rem 0;
  2144. font-family: "Open Sans", sans-serif;
  2145. background: #F1FBFF;
  2146. }
  2147. #alumni .alumni-title {
  2148. text-align: left;
  2149. margin-bottom: 3rem;
  2150. color: #000;
  2151. }
  2152. #alumni .title {
  2153. margin-top: 1rem;
  2154. font-weight: 700;
  2155. color: #000;
  2156. letter-spacing: unset !important;
  2157. }
  2158. #alumni .underline {
  2159. height: 4px;
  2160. width: 60px;
  2161. background-color: #F68B1F;
  2162. margin: 0.5rem 0;
  2163. }
  2164. #alumni .alumni-desc {
  2165. display: flex;
  2166. flex-direction: column;
  2167. justify-content: center;
  2168. gap: 2rem;
  2169. }
  2170. #alumni .alumni-desc p {
  2171. font-size: 0.95rem !important;
  2172. }
  2173. #alumni .alumni-btn {
  2174. border: none;
  2175. color: #fff;
  2176. border-radius: 4px;
  2177. padding-left: 1.8rem;
  2178. padding-right: 1.8rem;
  2179. width: -moz-fit-content;
  2180. width: fit-content;
  2181. background: #5ca6c7;
  2182. }
  2183. #alumni .alumni-btn:hover {
  2184. background: #f68b1f;
  2185. }
  2186. #alumni .image-container {
  2187. border-radius: 4px;
  2188. overflow: hidden;
  2189. }
  2190. #alumni .image-container img {
  2191. border-radius: 5px;
  2192. width: 100%;
  2193. -o-object-position: center;
  2194. object-position: center;
  2195. }
  2196. #program-2 {
  2197. padding: 4rem 0;
  2198. background: #F1FBFF;
  2199. font-family: "Open Sans", sans-serif;
  2200. }
  2201. #program-2 .title {
  2202. color: #000;
  2203. font-weight: 700;
  2204. margin-bottom: 2rem !important;
  2205. text-align: center;
  2206. text-transform: capitalize;
  2207. }
  2208. #program-2 .sub-title {
  2209. text-align: center;
  2210. font-size: 1rem !important;
  2211. }
  2212. #program-2 img {
  2213. border-radius: 3px;
  2214. border-bottom: 5px solid #F68B1F;
  2215. }
  2216. #program-2 .single-program {
  2217. margin-top: 1.5rem;
  2218. }
  2219. @media screen and (max-width: 768px) {
  2220. #program-2 .single-program .img-holder {
  2221. order: 0;
  2222. }
  2223. #program-2 .single-program .info-container {
  2224. order: 1;
  2225. }
  2226. }
  2227. #program-2 .single-program .prog-title {
  2228. text-align: left;
  2229. color: #000;
  2230. font-weight: 700;
  2231. margin-bottom: 1.5rem !important;
  2232. text-transform: capitalize;
  2233. }
  2234. #program-2 .single-program p {
  2235. font-size: 1.2rem;
  2236. }
  2237. #program-2 .single-program .link-btn {
  2238. margin-left: 0;
  2239. }/*# sourceMappingURL=sobe.css.map */