home.scss 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985
  1. @import '../app.scss';
  2. // Fonts
  3. @import '../fonts/awesome/awesome-font.css';
  4. @import '../fonts/iransans/iransans-font.css';
  5. body {
  6. font-family: iransans;
  7. }
  8. h1 {
  9. font-size: 1.5rem;
  10. }
  11. h2 {
  12. font-size: 1.4rem;
  13. }
  14. h3 {
  15. font-size: 1.3rem;
  16. }
  17. h4 {
  18. font-size: 1.2rem;
  19. }
  20. h5 {
  21. font-size: 1.1rem;
  22. }
  23. h6 {
  24. font-size: 1rem;
  25. }
  26. .fs-8 {
  27. font-size: 0.8rem;
  28. }
  29. a {
  30. transition: all 0.3s ease-in-out;
  31. text-decoration: none;
  32. &:hover {
  33. text-decoration: none;
  34. }
  35. }
  36. // ------------------------------------
  37. // navbar
  38. // ------------------------------------
  39. .navbar {
  40. min-height: 80px;
  41. .nav-link {
  42. transition: all 0.3s ease-in-out;
  43. font-weight: 600;
  44. padding: 0 0.875rem;
  45. @media screen and (max-width: 991px){
  46. padding: 0.375rem 0;
  47. font-weight: 500;
  48. border-top: 1px dashed #eee;
  49. }
  50. }
  51. .navbar-toggler{
  52. height: 64px;
  53. border: none;
  54. padding: 0;
  55. outline: none;
  56. &:focus{
  57. box-shadow: none;
  58. }
  59. .hamburger-toggle{
  60. position: relative;
  61. display: inline-block;
  62. width: 50px;
  63. height: 50px;
  64. z-index: 11;
  65. float: right;
  66. .hamburger {
  67. position: absolute;
  68. transform: translate(-50%, -50%) rotate(0deg);
  69. //left: 50%;
  70. left: 25px;
  71. top: 50%;
  72. width: 50%;
  73. height: 50%;
  74. pointer-events: none;
  75. span {
  76. width: 100%;
  77. height: 4px;
  78. position: absolute;
  79. background: $secondary;
  80. border-radius: 2px;
  81. z-index: 1;
  82. transition: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0), background 0.2s cubic-bezier(0.77,0.2,0.05,1.0), all 0.2s ease-in-out;
  83. left: 0px;
  84. &:first-child{
  85. top: 10%;
  86. transform-origin: 50% 50%;
  87. transform: translate(0% -50%) !important;
  88. }
  89. &:nth-child(2){
  90. top: 50%;
  91. transform: translate(0,-50%);
  92. }
  93. &:last-child{
  94. left: 0px;
  95. top: auto;
  96. bottom: 10%;
  97. transform-origin: 50% 50%;
  98. }
  99. }
  100. &.active{
  101. span {
  102. position: absolute;
  103. margin: 0;
  104. &:first-child{
  105. top: 45%;
  106. transform: rotate(45deg);
  107. }
  108. &:nth-child(2){
  109. left: 50%;
  110. width: 0px;
  111. }
  112. &:last-child{
  113. top: 45%;
  114. transform: rotate(-45deg);
  115. }
  116. }
  117. }
  118. }
  119. }
  120. }
  121. .navbar-nav {
  122. padding: 0 1rem;
  123. }
  124. }
  125. .navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .nav-link.active,
  126. .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  127. color: $secondary;
  128. }
  129. // ------------------------------------
  130. // footer
  131. // ------------------------------------
  132. footer {
  133. line-height: 2;
  134. text-align: justify;
  135. background-color: #212529;
  136. color: $white;
  137. padding: 2rem 0;
  138. .about {
  139. text-align: justify;
  140. line-height: 2;
  141. }
  142. hr {
  143. background-color: $white;
  144. opacity: 1;
  145. }
  146. .menu-footer_menu {
  147. list-style: none;
  148. line-height: 2;
  149. padding-right: 0;
  150. padding-left: 0;
  151. display: flex;
  152. flex-wrap: wrap;
  153. @media screen and (max-width: 991px) {
  154. justify-content: center;
  155. }
  156. .menu-item {
  157. margin-left: 1.25rem;
  158. @media screen and (max-width: 991px) {
  159. margin: 0 0.75rem;
  160. }
  161. a {
  162. color: $white;
  163. }
  164. }
  165. }
  166. .social {
  167. a {
  168. color: $white;
  169. }
  170. }
  171. .newsletter-subscription {
  172. .input-group {
  173. max-width: 300px;
  174. @media screen and (max-width: 320px) {
  175. max-width: 100%;
  176. }
  177. }
  178. .input-subscription {
  179. text-align: right;
  180. }
  181. }
  182. }
  183. // ------------------------------------
  184. // content single article page
  185. // ------------------------------------
  186. .container-article-width {
  187. @media screen and (min-width: 1400px){
  188. max-width: 1200px;
  189. }
  190. @media screen and (min-width: 1200px) and (max-width: 1399px){
  191. max-width: 750px;
  192. }
  193. @media screen and (min-width: 992px) and (max-width: 1199px){
  194. max-width: 800px;
  195. }
  196. .article-content-holder {
  197. margin: 3rem 0;
  198. .title {
  199. text-align: right;
  200. margin-bottom: 1.5rem;
  201. line-height: 2;
  202. color: $primary;
  203. }
  204. .author-published-holder {
  205. display: flex;
  206. align-items: center;
  207. margin-bottom: 1.5rem;
  208. .author-avatar {
  209. width: 3rem;
  210. height: 3rem;
  211. border-radius: 50%;
  212. }
  213. .author-published-text {
  214. margin-right: 0.75rem;
  215. .author-name {
  216. margin-bottom: 0.625rem;
  217. }
  218. .published-at {
  219. color: lighten($gray, 20);
  220. font-size: 80%;
  221. }
  222. }
  223. }
  224. .content-text {
  225. h1, h2, h3, h4,h5, h6 {
  226. margin-top: 2em;
  227. margin-bottom: 1em;
  228. &:first-child {
  229. margin-top: 0;
  230. }
  231. }
  232. div {
  233. text-align: justify;
  234. line-height: 2;
  235. margin-bottom: 0.75rem;
  236. }
  237. ul {
  238. list-style-type: none;
  239. padding-right: 1.2rem;
  240. padding-left: 1.2rem;
  241. li {
  242. line-height: 2;
  243. &:before {
  244. content: '✓';
  245. color: $primary;
  246. padding: 2px 0 2px 2px;
  247. font-weight: 600;
  248. }
  249. }
  250. }
  251. ol {
  252. counter-reset: item;
  253. padding-right: 1.2rem;
  254. padding-left: 1.2rem;
  255. li {
  256. display: block;
  257. line-height: 2;
  258. &:before {
  259. content: counter(item) ". ";
  260. counter-increment: item;
  261. color: $primary;
  262. font-weight: 600;
  263. }
  264. }
  265. }
  266. div {
  267. img {
  268. margin: 1rem 0;
  269. @media screen and (max-width: 992px){
  270. max-width: 100%;
  271. }
  272. }
  273. }
  274. video {
  275. margin: 1rem 0;
  276. width: 100%;
  277. }
  278. table {
  279. margin: 1rem 0;
  280. thead {
  281. background-color: $primary;
  282. color: $white;
  283. }
  284. }
  285. blockquote{
  286. background: #f9f9f9;
  287. border-right: 0.625rem solid lighten($secondary, 11);
  288. margin: 0.5rem 1.2rem;
  289. padding: 10px 20px;
  290. &:before {
  291. content: '\201D';
  292. line-height: 0;
  293. right: -11px;
  294. position: relative;
  295. top: 30px;
  296. color: lighten($secondary, 11);
  297. font-size: 3em;
  298. }
  299. }
  300. }
  301. }
  302. .article-button {
  303. display: flex;
  304. justify-content: space-between;
  305. align-items: center;
  306. margin-bottom: 3rem;
  307. }
  308. }
  309. // comments
  310. .comment-customers {
  311. .parent-reply-body {
  312. .reply-post {
  313. border-left: 1px solid;
  314. color: lighten($gray, 20);
  315. height: 22px;
  316. padding-left: 0.625rem;
  317. .reply-post-icon {
  318. transition: all 0.5s ease;
  319. color: lighten($secondary, 10);
  320. &:hover {
  321. cursor: pointer;
  322. }
  323. }
  324. }
  325. .reply-post-like-button {
  326. padding-right: 0.625rem;
  327. font-size: 15px;
  328. display: inline-block;
  329. color: #afb6bc;
  330. .fa {
  331. color: lighten($secondary, 10);
  332. }
  333. }
  334. .user-description {
  335. display: flex;
  336. justify-content: space-between;
  337. align-items: center;
  338. margin-bottom: 0.5rem;
  339. @media screen and (max-width: 576px){
  340. align-items: baseline;
  341. }
  342. .user-description-holder {
  343. display: flex;
  344. align-items: flex-end;
  345. @media screen and (max-width: 576px){
  346. align-items: flex-start;
  347. flex-direction: column;
  348. }
  349. }
  350. .user-name {
  351. color: $primary;
  352. font-weight: 600;
  353. padding-left: 0.625rem;
  354. @media screen and (max-width: 576px){
  355. margin-bottom: 0.5rem;
  356. }
  357. }
  358. .item-details {
  359. display: flex;
  360. align-items: baseline;
  361. color: lighten($gray, 20);
  362. font-size: 80%;
  363. .item-details-clock {
  364. color: lighten($secondary, 10);
  365. }
  366. .item-details-calendar {
  367. margin-left: 0.25rem;
  368. color: lighten($secondary, 10);
  369. }
  370. .item-details-time {
  371. border-right: 1px solid;
  372. padding-right: 0.25rem;
  373. }
  374. .item-details-date {
  375. padding-left: 0.25rem;
  376. }
  377. }
  378. }
  379. .user-comment-text {
  380. margin: 1rem 0;
  381. text-align: justify;
  382. }
  383. }
  384. .form-reply-opinion {
  385. margin: 0.5rem 0 1.5rem;
  386. }
  387. }
  388. // latest article in single bolg page
  389. .latest-article {
  390. .card {
  391. background: transparent;
  392. border: none
  393. }
  394. .card-title {
  395. line-height: 2;
  396. text-align: justify;
  397. color: $primary;
  398. }
  399. .card-text {
  400. text-align: justify;
  401. }
  402. .author-published-holder {
  403. display: flex;
  404. align-items: center;
  405. margin-bottom: 1.5rem;
  406. margin-top: 1rem
  407. }
  408. .author-avatar {
  409. width: 3rem;
  410. height: 3rem;
  411. border-radius: 50%;
  412. }
  413. .author-published-text {
  414. margin-right: 0.75rem;
  415. }
  416. .author-name {
  417. margin-bottom: 0.625rem;
  418. }
  419. .published-at {
  420. color: lighten($gray, 20);
  421. font-size: 80%;
  422. }
  423. }
  424. // ------------------------------------
  425. // pagination
  426. // ------------------------------------
  427. .pagination-holder {
  428. margin-top: 2rem;
  429. .pagination {
  430. padding-right: 0;
  431. }
  432. .page-item:first-child .page-link {
  433. border-top-left-radius: 0;
  434. border-bottom-left-radius: 0;
  435. border-top-right-radius: 0.25rem;
  436. border-bottom-right-radius: 0.25rem;
  437. }
  438. .page-item:last-child .page-link {
  439. border-top-right-radius: 0;
  440. border-bottom-right-radius: 0;
  441. border-top-left-radius: 0.25rem;
  442. border-bottom-left-radius: 0.25rem;
  443. }
  444. }
  445. // ------------------------------------
  446. // category blog page
  447. // ------------------------------------
  448. .article-category-title-holder {
  449. color: $primary;
  450. line-height: 2;
  451. }
  452. .article-category-content-holder {
  453. .article-content {
  454. position: relative;
  455. padding: 32px 32px;
  456. transition: all 0.3s ease-in-out;
  457. border-bottom: 1px solid #e8eaf1;
  458. &:hover {
  459. background-color: #e8eaf1;
  460. border-bottom: 1px solid #e8eaf1;
  461. border-radius: 0.25rem;
  462. }
  463. .sub-title {
  464. color: lighten($gray, 20);
  465. font-size: 80%;
  466. display: flex;
  467. justify-content: space-between;
  468. margin-bottom: 0.25rem;
  469. @media screen and (max-width: 576px) {
  470. flex-direction: column;
  471. }
  472. .fa {
  473. color: lighten($secondary, 10);
  474. }
  475. .published-at {
  476. margin-left: 0.625rem;
  477. }
  478. }
  479. .title {
  480. font-size: 1.1rem;
  481. font-weight: 500;
  482. line-height: 2;
  483. text-align: right;
  484. }
  485. .lead-text {
  486. margin-top: 0.625rem;
  487. color: $gray;
  488. line-height: 2;
  489. text-align: justify;
  490. }
  491. .category {
  492. margin-top: 0.75rem;
  493. }
  494. .article-footer {
  495. margin-top: 1.2rem;
  496. display: flex;
  497. align-items: center;
  498. justify-content: space-between;
  499. .author-published-holder {
  500. display: flex;
  501. align-items: center;
  502. .author-avatar {
  503. width: 3rem;
  504. height: 3rem;
  505. border-radius: 50%;
  506. }
  507. .author-name {
  508. margin-right: 0.75rem;
  509. }
  510. }
  511. /*.duration-of-study {
  512. color: lighten($gray, 20);
  513. font-size: 80%;
  514. @media screen and (max-width: 576px) {
  515. margin-top: 0.75rem;
  516. }
  517. }*/
  518. }
  519. }
  520. }
  521. // ------------------------------------
  522. // home page
  523. // ------------------------------------
  524. //banner home page
  525. .banner-holder {
  526. .banner-item {
  527. min-height: 545px;
  528. position: relative;
  529. background-size: cover !important;
  530. background-position: center center !important;
  531. display: flex;
  532. align-items: center;
  533. justify-content: center;
  534. @media screen and (max-width: 991px){
  535. display: none;
  536. }
  537. .content-holder {
  538. width: 50%;
  539. text-align: center;
  540. .content-title {
  541. font-size: 1.8rem;
  542. font-weight: 700;
  543. line-height: 3;
  544. color: $primary;
  545. }
  546. .content-sub-title {
  547. line-height: 2;
  548. color: $primary;
  549. font-weight: 500;
  550. font-size: 1.1rem;
  551. }
  552. }
  553. }
  554. .banner-item-md {
  555. @media screen and (min-width: 992px){
  556. display: none;
  557. }
  558. .img-holder {
  559. position: relative;
  560. .overlay-img {
  561. position: absolute;
  562. left: 0;
  563. right: 0;
  564. top: 0;
  565. bottom: 0;
  566. background: linear-gradient(rgba(245, 245, 245, 0.7), rgba(226, 226, 226, 0.5));
  567. }
  568. .content {
  569. position: absolute;
  570. top: 50%;
  571. left: 50%;;
  572. transform: translate(-50%,-50%);
  573. width: 95%;
  574. text-align: center;
  575. .content-title {
  576. color: $primary;
  577. font-weight: 600;
  578. font-size: 1.1rem;
  579. line-height: 2;
  580. @media screen and (max-width: 425px) {
  581. font-size: 0.9rem;
  582. font-weight: 500;
  583. }
  584. }
  585. .content-sub-title {
  586. color: $primary;
  587. font-weight: 500;
  588. line-height: 2;
  589. @media screen and (max-width: 425px) {
  590. font-size: 0.7rem;
  591. font-weight: 400;
  592. }
  593. }
  594. }
  595. }
  596. }
  597. }
  598. // services home page
  599. .services-holder {
  600. text-align: center;
  601. padding: 2.5rem 0 ;
  602. .feature-box-holder {
  603. background-color: $white;
  604. border-radius: 0.93rem;
  605. padding: 1.5rem 1.8rem;
  606. position: relative;
  607. filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.099));
  608. border-bottom-width: 4px;
  609. border-bottom-style: solid;
  610. border-bottom-color: $secondary;
  611. transition: all .4s ease;
  612. border-top-width: 4px;
  613. border-top-style: solid;
  614. border-top-color: transparent;
  615. box-sizing: border-box;
  616. @media screen and (max-width: 991px){
  617. margin-bottom: 3rem;
  618. }
  619. &:hover {
  620. border-top-width: 4px;
  621. border-top-style: solid;
  622. border-top-color: $secondary;
  623. }
  624. .featured-icon-holder {
  625. position: absolute;
  626. top: -38px;
  627. right: 25px;
  628. .featured-icon {
  629. height: 63px;
  630. width: 63px;
  631. line-height: 63px;
  632. background-color: $secondary;
  633. border-radius: 50%;
  634. display: flex;
  635. align-items: center;
  636. justify-content: center;
  637. i {
  638. color: $white;
  639. font-size: 1.2rem;
  640. }
  641. }
  642. }
  643. .feature-content {
  644. .feature-title {
  645. text-align: justify;
  646. font-size: 1.04rem;
  647. line-height: 2;
  648. font-weight: 500;
  649. margin: 0.5rem 0 0.35rem 0;
  650. }
  651. .sub-title {
  652. text-align: justify;
  653. line-height: 2;
  654. color: lighten($gray , 10);
  655. }
  656. .link-holder {
  657. font-size: 85%;
  658. text-align: justify;
  659. font-weight: 500;
  660. margin-top: 0.625rem;
  661. a {
  662. &:hover {
  663. color: $secondary;
  664. }
  665. }
  666. }
  667. }
  668. }
  669. .end-button {
  670. display: inline-block;
  671. width: 100%;
  672. position: relative;
  673. margin-top: 2.75rem;
  674. @media screen and (max-width: 991px){
  675. margin-top: 0;
  676. }
  677. &:before, &:after {
  678. position: absolute;
  679. content: "";
  680. right: auto;
  681. left: 50%;
  682. top: 20px;
  683. height: 1px;
  684. width: 30%;
  685. margin: 0 40px;
  686. background-color: lighten($gray, 40);
  687. transition: all .4s;
  688. }
  689. &:before {
  690. right: auto;
  691. left: 50%;
  692. }
  693. &:after {
  694. right: 50%;
  695. left: 0;
  696. }
  697. span {
  698. display: flex;
  699. align-items: center;
  700. justify-content: center;
  701. position: relative;
  702. height: 40px;
  703. width: 40px;
  704. line-height: 37px;
  705. font-size: 1.25rem;
  706. font-weight: 400;
  707. border-radius: 50%;
  708. border: 1px solid;
  709. margin: 0 auto;
  710. transition: all .4s;
  711. }
  712. }
  713. .end-button-text {
  714. margin-top: 0.6rem;
  715. }
  716. }
  717. // title section for home page
  718. .title {
  719. font-weight: 600;
  720. font-size: 1.5rem;
  721. line-height: 2;
  722. margin-bottom: 0.5rem;
  723. text-align: center;
  724. color: $primary;
  725. }
  726. .title-desc {
  727. width: 70%;
  728. margin: 0 auto 72px;
  729. font-size: 0.875rem;
  730. line-height: 2;
  731. color: lighten($gray , 10);
  732. @media screen and (max-width: 768px) {
  733. width: 95%;
  734. }
  735. }
  736. // customer home page
  737. .customer-holder {
  738. background-color: $white;
  739. text-align: center;
  740. padding: 2.5rem 0;
  741. .title-desc {
  742. margin-bottom: 2.5rem;
  743. }
  744. .owl-carousel {
  745. .item {
  746. img {
  747. display: block;
  748. width: 100%;
  749. opacity: 0.2;
  750. transition: ease opacity 500ms;
  751. &:hover {
  752. opacity: 1;
  753. }
  754. }
  755. }
  756. }
  757. }
  758. // contact-us home page
  759. .contact-us-holder {
  760. text-align: center;
  761. padding: 2.5rem 0;
  762. .submit-holder {
  763. text-align: right;
  764. }
  765. .contact-info-holder {
  766. .contact-info {
  767. display: flex;
  768. margin-bottom: 1rem;
  769. .fa {
  770. color: $secondary;
  771. }
  772. }
  773. .contact-info-content {
  774. text-align: right;
  775. margin-right: 0.75rem;
  776. .contact-title {
  777. color: $secondary;
  778. }
  779. }
  780. }
  781. }
  782. // ------------------------------------
  783. // Our team page
  784. // ------------------------------------
  785. .our-team-holder {
  786. padding: 2.5rem 0;
  787. .title, .title-desc {
  788. text-align: justify;
  789. }
  790. .title-desc {
  791. width: 100%;
  792. }
  793. .our-team-item {
  794. display: flex;
  795. align-items: center;
  796. margin-bottom: 72px;
  797. }
  798. .title-desc , .our-team-item {
  799. @media screen and (max-width: 576px) {
  800. margin-bottom: 2.52rem;
  801. }
  802. }
  803. .avatar-holder {
  804. img {
  805. width: 7rem;
  806. height: 7rem;
  807. border-radius: 50%;
  808. }
  809. }
  810. .teammate-name {
  811. line-height: 2;
  812. margin-bottom: 0.5rem;
  813. @media screen and (max-width: 576px) {
  814. margin-bottom: 0.25rem;
  815. font-size: 0.8rem;
  816. }
  817. }
  818. .teammate-job {
  819. color: $primary;
  820. font-weight: 500;
  821. margin-bottom: 0.5rem;
  822. }
  823. .teammate-contact {
  824. a {
  825. margin-left: 0.4rem;
  826. }
  827. .fa {
  828. color: lighten($secondary, 10);
  829. }
  830. }
  831. .teammate-description-holder {
  832. margin-right: 0.75rem;
  833. }
  834. .our-team-padding {
  835. padding: 0 20px;
  836. }
  837. }
  838. // ------------------------------------
  839. // employment page
  840. // ------------------------------------
  841. .employment-list-holder {
  842. text-align: center;
  843. padding: 2.5rem 0;
  844. .title-desc {
  845. margin-bottom: 45px;
  846. }
  847. .accordion-item {
  848. margin-bottom: 0.75rem;
  849. // border-bottom: 4px solid $secondary;
  850. // border-top: 1px solid $secondary;
  851. // border-left: 1px solid $secondary;
  852. // border-right: 1px solid $secondary;
  853. border-radius: 0.93rem;
  854. &:not(:first-of-type) {
  855. border: 1px solid rgba(0, 0, 0, 0.125);
  856. }
  857. &:last-child {
  858. margin-bottom: 0;
  859. }
  860. }
  861. .accordion-button {
  862. border-radius: 0.93rem;
  863. background: white;
  864. color: $primary;
  865. font-size: 1.2rem;
  866. font-weight: 600;
  867. &:focus {
  868. box-shadow: none;
  869. }
  870. &:after {
  871. margin-right: auto;
  872. margin-left: 0;
  873. }
  874. }
  875. .accordion-item:last-of-type .accordion-button.collapsed,
  876. .accordion-item:first-of-type .accordion-button {
  877. border-radius: 0.93rem;
  878. }
  879. .accordion-body {
  880. .title {
  881. font-size: 1.1rem;
  882. text-align: right;
  883. font-weight: 500;
  884. }
  885. ul {
  886. list-style-type: none;
  887. padding-right: 1.2rem;
  888. padding-left: 1.2rem;
  889. text-align: right;
  890. li {
  891. line-height: 2;
  892. &:before {
  893. content: '✓';
  894. color: $primary;
  895. padding: 2px 0 2px 2px;
  896. font-weight: 600;
  897. }
  898. }
  899. }
  900. }
  901. }
  902. .employment-steps-holder {
  903. text-align: center;
  904. padding: 2.5rem 0;
  905. .mb-feature {
  906. @media screen and (min-width: 992px){
  907. margin-bottom: 3rem;
  908. }
  909. }
  910. .feature-content {
  911. min-height: 75px;
  912. display: flex;
  913. align-items: center;
  914. justify-content: center;
  915. }
  916. .step-item {
  917. color: $primary;
  918. font-weight: 600;
  919. font-size: 1rem;
  920. }
  921. }
  922. .employment-target-holder {
  923. .list-item-target-holder {
  924. .sub-title {
  925. list-style-type: none;
  926. padding-right: 0rem;
  927. padding-left: 0rem;
  928. li {
  929. line-height: 2;
  930. text-align: justify;
  931. margin-bottom: 0.75rem;
  932. color: lighten($gray , 10);
  933. &:before {
  934. content: '✓';
  935. color: $primary;
  936. padding: 2px 0 2px 2px;
  937. font-weight: 600;
  938. }
  939. }
  940. }
  941. }
  942. }
  943. .employment-workspace-holder, .employment-target-holder {
  944. padding: 2.5rem 0;
  945. .title {
  946. text-align: right;
  947. }
  948. .img-holder {
  949. img {
  950. max-width: 100%;
  951. }
  952. }
  953. .title-desc {
  954. width: 100%;
  955. text-align: justify;
  956. }
  957. }
  958. //.accordion-button.collapsed::after, .accordion-button:not(.collapsed)::after {
  959. // background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='red'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  960. //}