@font-face {
	font-family: 'Mulish'; font-style: normal; font-weight: 500; /* Medium weight */
	src: url('/fonts/Mulish-Medium.ttf') format('truetype');
	font-display: swap; /* Ensures text is visible during font loading */
}
@font-face {
	font-family: 'Mulish'; font-style: normal; font-weight: 900; /* Black weight */
	src: url('/fonts/Mulish-Black.ttf') format('truetype');
	font-display: swap; /* Ensures text is visible during font loading */
}
@font-face {
	font-family: 'Crimson Pro'; font-style: normal; font-weight: 400; /* Regular weight */
	src: url('/fonts/CrimsonPro-Regular.ttf') format('truetype');
	font-display: swap; /* Ensures text is visible during font loading */
}
@font-face {
	font-family: 'Crimson Pro'; font-style: normal; font-weight: 600; /* SemiBold weight */
	src: url('/fonts/CrimsonPro-SemiBold.ttf') format('truetype');
	font-display: swap; /* Ensures text is visible during font loading */
}

/* FUNCTION ******************************************************************************************************/

.clear { clear: both; }

html { font-size:100%; box-sizing:border-box; }*,*:before,*:after { box-sizing:inherit; }
html { -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; }
body { margin: 0; padding: 0; overflow-y: scroll; }

#to-the-top {
	width: 40px; height: 40px; display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; font-size: 24px;
	border: none; outline: none; background-color: #000055; color: white; cursor: pointer; border-radius: 4px;
}

/* BANNER ******************************************************************************************************/

/* Banner Styling (Initially at the top of the page) */

#top-banner {
  position: fixed; display: flex;
  top: 0; left: 0; right: 0;
  color: #333; background: #fff;
  padding: 0.625rem 1.25rem;   /* 10px 20px */
  width: 100%; height: 7rem; /* was 6.8rem */
  margin-bottom: 2rem;
  text-align: center;
  z-index: 1000;
  transform: translateY(0); transition: transform 0.5s ease-out;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 4px 8px */
}

/* When the banner is hidden (slides up) and leaving the bottom 10px visible */
#top-banner.hidden { transform: translateY(-100%); }

.banner-logo { height: auto; width: 19rem; }
.logo { height: auto; width: 19rem; }
.banner-logo-titles { text-align:center; font-family: 'Mulish', sans-serif; letter-spacing: 0.06rem; font-size: 0.9rem; color: #DDD; text-decoration:not() }

.banner-social { display: flex; height: 2rem; width: 8rem; margin: 1rem 1rem 0 10rem; }
.social-youtube { width: 2rem; height: 2rem; margin: 0 0.5rem 0 0; }
.social-youtube-logo { width: 2rem; height: 2rem; color: blue; } /* adding darkblue or any color you want */
.social-facebook { width: 2rem; height: 2rem; margin: 0 0.5rem 0 0.5rem; }
.social-facebook-logo { width: 2rem; height: 2rem; }
.social-tiktok { width: 2rem; height: 2rem; margin: 0 5rem 0 0.5rem; }
.social-tiktok-logo { width: 2rem; height: 2rem; }

/* Down arrow positioning for controlling the banner */
#down-arrow { position: fixed;  bottom: -25px; left: 50%; transform: translateX(-50%); display: block; opacity: 1; cursor: pointer; }

/* Styling for the down arrow (64x24 pixel SVG image) */
#down-arrow img { width: 64px; height: 24px; }

/* Hover effect for the arrow */
#down-arrow:hover img { opacity: 0.8; }

/* MENU ***************************************************************************************************/

nav { display: flex; justify-content: space-between; align-items: center; background-color: #fff; margin: 1.5rem 0 0 9rem; }
nav ul { list-style: none; display: flex; padding: 0 0 7px 0; }
nav ul li { margin: 0; padding: 0; width: 100%; box-sizing: border-box; }
nav ul li a { color: white; text-decoration: none; font-size: 18px; display: block; height: 35px; padding: 0 20px 0 20px; line-height: 1.75; font-family: Arial Black; color: #DDDDFF; }

/* Style for the hamburger menu icon */
.menu-icon { display: none; font-size: 28px; color: blueviolet; cursor: pointer; }

/* Default state (pale blue) */
#menu li a{ color:#CCCCCC; text-decoration:none; transition:color .25s ease; }

/* Hover + click */
#menu li a:hover,
#menu li a:active{ color:#000066; }

/* Current page */
#menu li a.active{ color:#000066; font-weight:bold; /* optional */ }

/* ANIMATED BKG *************************************************************************/

.animated-bkg {
  position: fixed;          /* Make the background fixed */
  top: 0;
  left: 0;
  width: 100%;              /* Full width */
  height: 100vh;            /* Full height of the viewport */
  
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;   /* Ensure the background image covers the full div */
  
  filter: brightness(0.6) contrast(1.5); /* Apply the filter only to the background */
  transition: background-image 12s ease-in-out;
  	
  z-index: -1;              /* Place the background behind other content */
}

/* HOME PAGE *************************************************************************/

.home-under-banner { width: 100%; display: flex; flex-direction: row; }
.home-under-banner-left { width: 50%; margin: 0.6rem 1rem 0 1rem; }
.home-under-banner-right { width: 50%; margin: 0.6rem 1rem 0 1rem; }

.home-content { width: 100%; display: flex; flex-direction: row; }
.home-content-left { width: 50%; height: auto; padding: 1.5rem 1rem 1rem 1rem; }
.home-content-right { display: flex; flex-direction: column; width: 50%; padding: 1.5rem 1rem 1rem 1rem; }

.home-content-left-advertising-book { width: 34rem; height: auto; margin: auto; }

/* NEW ADVERTISING START *************************************************************************/

.home-advertising{
  width: 100%;
  aspect-ratio: 1417 / 3189;   /* fixes the box height from its width */
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2rem;
  background-image: url("images/plr-advertising-bkg.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;  /* makes background match the box exactly */
  overflow: hidden; /* important if JS moves items up/down */
}

/* Make all inner images responsive by default */
.home-advertising img{ display: block; height: auto; }

.home-advertising-title-a { width: 70%; }
.home-advertising-title-b { width: 60%; }
.home-advertising-title-c { width: 60%; }
.home-advertising-book { width: 50%; }
.home-advertising-description-a { width: 70%; }
.home-advertising-description-b { width: 65%; }
.home-advertising-description-c { width: 50%; }


.spacing-item { /*position: relative;*/ width: 100%; height: 1%; }
.spacing-item-1, .spacing-item-2, .spacing-item-3, .spacing-item-4, .spacing-item-5, .spacing-item-6, .spacing-item-7 { /*position: relative;*/ width: 100%; height: 1%; transition: height 0.2s ease; }

/* NEW ADVERTISING END  *************************************************************************/

.banner-read { width: 100%;}
.banner-read img { width: 100%;}

.banner-blog { width: 100%;}
.banner-blog img { width: 100%;}

/* BLOG FEED / ARTICLES PREVIEW  *************************************************************************/

.article-wrapper { display: flex; flex-direction: row; }
.article-image-wrapper { width: 16rem; height: 16rem; display: flex; align-items: flex-start; }
.article-image { width: 16rem; height: 16rem; object-fit: cover; }

.article-titre-and-extract-wrapper { display: flex; flex-direction: column; justify-content: flex-start;	background-color: rgba(0, 0, 125, 0.8); }
.article-titre-wrapper { height: 1.5rem; margin: 1.5rem 1.5rem 1.5rem 1.5rem; }
.article-titre { font-family: 'Mulish', sans-serif; letter-spacing: 0.06rem; font-size: 3rem; margin: 0;	text-align:justify; font-family: 'Mulish', sans-serif; font-style: bold; font-size: 1.2rem; color: #fff; text-decoration: none; }
.article-extract-wrapper { height: 9rem; margin: 0 3rem 0 1.5rem; }
.article-extract { font-family: 'Mulish', sans-serif; font-size: 0.8rem; line-height: 1.6rem; text-align:justify; font-family: 'Mulish', sans-serif; font-style: bold; font-size: 1.2rem; color: #fff; text-decoration: none; }
.continue-link-wrapper { height: 1.5rem; display:block; margin: 0 3rem 0 0.5rem; }
.article-link { font-family: 'Mulish', sans-serif; letter-spacing: 0.06rem; font-size: 1rem; color: #00ffff; display: block; bottom: 0; padding: 0 0 0.5rem 1rem; }

.articles-separator { width: 100%; height:4px; background-color: rgba(255,255,255,0.3); margin: 1.3rem 0 1.3rem 0; }

/* COPYRIGHT ******************************************************************************************************/

.copyright { width:100%; height:auto; background-color:rgba(0,0,62,0.7); text-align: center; padding: 0.3rem 0 0.3rem 0; font-size: 0.8rem; color: rgba(255,255,255,0.9); }