Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

site.css 5.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  1. /*General Style*/
  2. @font-face {
  3. font-family: 'Space Grotesk';
  4. src: url('../assets/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  5. font-style: normal;
  6. }
  7. @font-face {
  8. font-family: 'Nasalization Rg';
  9. src: url('../assets/fonts/Nasalization_Rg.otf') format('truetype');
  10. font-style: normal;
  11. }
  12. *{
  13. margin: 0;
  14. font-family: 'Space Grotesk', sans-serif;
  15. color: #001F3F;
  16. }
  17. h1 {
  18. font-size: clamp(2em,5vw,6.25em);
  19. font-weight: 400;
  20. }
  21. h2 {
  22. font-size: clamp(1.5em,3.906vw,4.688em);
  23. font-weight: 400;
  24. }
  25. h4 {
  26. font-size: clamp(1em,2.6vw,3.063em);
  27. font-weight: 400;
  28. }
  29. h5 {
  30. font-size: clamp(1.83em,1.563vw,1.875em);
  31. font-weight: 400;
  32. }
  33. p{
  34. font-size: clamp(1em,1.2vw,1.6em);
  35. }
  36. .px-6 {
  37. padding-right: 7rem;
  38. padding-left: 7rem;
  39. }
  40. .btn-amics{
  41. font-size: clamp(0.8em,1vw,1.2em);
  42. background-color: rgba(255, 255, 255, 0);
  43. color: #000;
  44. border: 3px solid rgb(212, 175, 55);
  45. transition: all 0.2s ease-in-out;
  46. padding: 16px 60px;
  47. border-radius: 50px;
  48. }
  49. .btn-amics:hover{
  50. background-color: rgb(212, 175, 55);
  51. color: #FFF;
  52. }
  53. .text-primary2{
  54. color:#D4AF37
  55. }
  56. .text-secondary2{
  57. color:#909090
  58. }
  59. .navbar-custom {
  60. background: rgba(0, 0, 0, 0.4) !important;
  61. box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  62. }
  63. .navbar-custom .navbar-brand,
  64. .navbar-custom .nav-link {
  65. color: white !important;
  66. /* White text */
  67. }
  68. .navbar-custom .nav-link:hover {
  69. color: #f8d210 !important;
  70. /* Highlight color */
  71. }
  72. .navbar-custom .navbar-toggler {
  73. background: transparent !important;
  74. /* Transparent background */
  75. border: none;
  76. /* Remove border */
  77. }
  78. .navbar-custom .navbar-toggler-icon {
  79. filter: brightness(0) invert(1);
  80. /* Makes the icon white */
  81. }
  82. .card {
  83. border: none;
  84. border-radius: 25px;
  85. overflow: hidden;
  86. }
  87. .card-img-top {
  88. border-radius: 50px;
  89. }
  90. .round-btn {
  91. width: 60px;
  92. height: 60px;
  93. border-radius: 50%;
  94. display: flex;
  95. align-items: center;
  96. justify-content: center;
  97. overflow: hidden;
  98. padding: 0;
  99. }
  100. .round-btn img {
  101. width: 60%;
  102. height: auto;
  103. }
  104. /* HOME */
  105. .section {
  106. padding-top: 105px;
  107. border-radius: 150px 150px 0 0;
  108. transform: translateY(-10%);
  109. }
  110. .section2 {
  111. border-bottom: 2px solid #ddd;
  112. border-radius: 150px 150px 0 0;
  113. transform: translateY(-5%);
  114. }
  115. .section3 {
  116. padding-top: 105px;
  117. border-radius: 150px 150px 0 0;
  118. transform: translateY(-16%);
  119. }
  120. .section4 {
  121. border-bottom: 2px solid #ddd;
  122. border-radius: 150px 150px 0 0;
  123. }
  124. .section5 {
  125. padding: 70px;
  126. border-radius: 150px 150px 0 0;
  127. transform: translateY(-10%);
  128. }
  129. .video-player {
  130. width: 100vw;
  131. height: 100vh;
  132. display: flex;
  133. justify-content: center;
  134. align-items: center;
  135. background: black;
  136. }
  137. .video-player video {
  138. width: 100%;
  139. height: 100%;
  140. object-fit: cover;
  141. }
  142. /* FOOTER */
  143. .footer-text{
  144. font-family: 'Nasalization Rg', sans-serif !important;
  145. font-weight: 400;
  146. margin-bottom: 40px;
  147. font-size: clamp(2em, 4.7vw, 5.64em);
  148. }
  149. .footer-text span{
  150. font-family: 'Nasalization Rg', sans-serif !important;
  151. border-bottom: 1px solid;
  152. padding: 0;
  153. }
  154. .footer-section {
  155. border-bottom: 2px solid #ddd;
  156. border-radius: 150px 150px 0 0;
  157. background: linear-gradient(to left, #D4AF37, #001F3F);
  158. padding-top: 20px;
  159. padding-bottom: 0;
  160. }
  161. .footer-inner {
  162. padding-top: 105px;
  163. border-radius: 140px 140px 0 0;
  164. background: rgb(0,31,63);
  165. background: linear-gradient(195deg, rgba(0,31,63,1) 0%, rgba(0,41,105,1) 57%, rgba(50,47,36,1) 100%);
  166. }
  167. .footer-menu-container{
  168. padding: 0px;
  169. }
  170. .footer-column {
  171. margin-bottom: 40px;
  172. }
  173. .footer-column h5 {
  174. font-weight: 400;
  175. color: #FFF;
  176. letter-spacing: 1px;
  177. margin-bottom: 30px;
  178. }
  179. .footer-column ul {
  180. padding: 0;
  181. list-style: none;
  182. }
  183. .footer-column ul li {
  184. margin-bottom: 15px;
  185. }
  186. .footer-column ul li a {
  187. color: #FFF;
  188. text-decoration: none;
  189. transition: all 0.3s ease-in-out;
  190. }
  191. .footer-column ul li a:hover {
  192. color: #D4AF37;
  193. transform: translateX(5px);
  194. }
  195. .footer-bottom {
  196. text-align: center;
  197. padding-top: 15px;
  198. font-size: 14px;
  199. color: #ccc;
  200. }
  201. .footer-link-menu-icon{
  202. font-size: 25px;
  203. gap:35px
  204. }
  205. .footer-link-menu2{
  206. gap: 30px;
  207. list-style: none;
  208. }
  209. .footer-link-menu2 li a{
  210. color: #FFF;
  211. text-decoration: none;
  212. transition: color 0.3s ease-in-out;
  213. }
  214. .footer-link-menu2 li a:hover{
  215. color: #D4AF37;
  216. }
  217. /*BOOTSTRAP RESPONSIVE*/
  218. /* Small devices (≥576px) - sm */
  219. @media (min-width: 576px) {
  220. .footer-menu-container{
  221. padding: 0px 60px;
  222. }
  223. }
  224. /* Medium devices (≥768px) - md */
  225. @media (min-width: 768px) {
  226. .footer-menu-container{
  227. padding: 0px 15px;
  228. }
  229. }
  230. /* Large devices (≥992px) - lg */
  231. @media (min-width: 992px) {
  232. .footer-menu-container{
  233. padding: 0px 5px;
  234. }
  235. }
  236. /* Extra large devices (≥1200px) - xl */
  237. @media (min-width: 1200px) {
  238. .footer-menu-container{
  239. padding: 0px 120px;
  240. }
  241. }
  242. /* XXL devices (≥1400px) - xxl */
  243. @media (min-width: 1400px) {
  244. .footer-menu-container{
  245. padding: 0px 190px;
  246. }
  247. }