@import url('https://fonts.googleapis.com/css?family=Arapey');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
@import url('https://fonts.googleapis.com/css2?family=Libertinus+Serif:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arapey:ital@0;1&family=Libertinus+Serif:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
.pkp_page_index .homepage_about{
text-align: justify!important;
}
body {
text-align: justify!important;
}
p {
	text-align: justify!important;

}
.f_3 {
	font-family: 'Arapey';
}
.pkp_navigation_primary>li>a {
    margin: .357rem .5em 0;
    padding: .357rem .5em calc(.714rem - 2px);
    border-bottom: 2px solid transparent;
    color: #fff !important;
    text-decoration: none;
}
.pkp_site_name .is_img img {
    max-height: 120px !important;
    padding-bottom: 4px !important;
}
.pkp_structure_head {
    background-color: #f4f4f4 !important;
	font-family: 'Arapey',;
    border-bottom: 1px solid #ddd!important;
}
.pkp_site_nav_menu {
    background: #253b80 !important;
    font-family: 'Arapey';
    padding:10px;
    border-bottom: 3px solid #feee29;
}
.pkp_navigation_primary li a {
    font-size: 13pt !important;

}
.pkp_navigation_primary>li:first-child a {
    margin-left: 1.5em!important;
	font-family: 'Arapey'!important,;

}

.pkp_navigation_primary > li:first-child a:before {
font-family: 'Material Symbols Outlined';
    font-weight: 900;
    content: "\e922";
    position: absolute;
    font-size: 25px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.pkp_block .title {
display: block;
    margin-bottom: .714rem;
    margin-top: 0;
    font-family: "Arapey" !important;
    padding: 12px;
    color: #fff;
    font-size: 18px;
    line-height: 14px;
    font-weight: normal;
    text-decoration: none;
    border-left: 3px solid #feee29;
    text-transform: uppercase;
    background: #253b80;
    }
.pkp_nav_list a {
    display: inline-block;
    padding-left: .714rem;
    padding-right: .714rem;
    text-decoration: none;
    padding-top: .357rem;
    padding-bottom: .357rem;
    font-family: "Arapey" !important;
    font-size: 16px;
}
.pkp_navigation_user > li:last-child > a {
    margin-right: -0.714rem;
    color: #253b80 !important;
}.pkp_navigation_user a {
    padding-top: .357rem;
    padding-bottom: .357rem;
    line-height: 1.43rem;
    color: #253b80 !important;
}
.pkp_navigation_search_wrapper a {
    margin: .357rem .5em 0;
    padding: .357rem .5em calc(.714rem - 2px);
    border-bottom: 2px solid transparent;
    color: #fff !important;
    text-decoration: none;
    font-family: Arapey!important;
    font-size: 16px!important;
}
h1{
	font-family: Arapey!important;
}
h2{
	font-family: Arapey!important;
}
h3{
	font-family: Arapey!important;
}
.pkp_nav_list ul a {
    display: block;
    padding-left: 3.357rem;
    border-left: .357rem solid transparent;
    color: #f4f4f4 !important;
    }

.pkp_navigation_primary > li:first-child a:before {font-family: 'Material Symbols Outlined';font-weight: 900;content: 'timeline';position: absolute;font-size: 25px;left: 0;top: 4%;transform: translateY(-50%);}
.pkp_navigation_primary .dropdown-menu a:focus, .pkp_navigation_primary .dropdown-menu a:hover{
    border-color:#253b80 !important;
}
    .pkp_navigation_primary>li>a:focus {
            background: #d84318;
        padding: 9px;
    }
a {
    color: #000000 !important;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.pkp_site_name_wrapper {
    height: 9.857rem!important;
}
}

@media only screen 
and (min-device-width : 700px) 
and (max-device-width : 800px) {
.pkp_site_name_wrapper {
    height: 9.857rem!important;
}
} 

@media only screen 
and (max-width : 320px) {
.pkp_site_name_wrapper {
    height: 9.857rem!important;
}

}
@media only screen 
and (max-width : 768px) {
.pkp_site_name_wrapper {
    height: 9.857rem!important;
}

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
.pkp_site_name_wrapper {
    height: 9.857rem!important;
}

}

.pkp_site_nav_toggle {

    background: #253b80 !important;

}

@media (max-width: 700px) {
    .pkp_site_name .is_img img {
        max-height: 120px !important;
        padding-bottom: 4px !important;
    }

    .pkp_nav_list ul a {
        display: block;
        padding-left: 3.357rem;
        border-left: .357rem solid transparent;
        color: #f4f4f4 !important;
    }

    .pkp_navigation_primary > li:first-child a:before {
        font-family: 'Material Symbols Outlined';
        font-weight: 900;
        content: 'timeline';
        position: absolute;
        font-size: 25px;
        left: 0;
        top: 4%;
    }
}
/* This targets the main content area on the journal's homepage */
.page_index_journal #main-content {
  position: relative; /* Needed for positioning the pseudo-elements */
  padding: 0; /* Remove default padding to allow the image to fill the space */
  border: none; /* Remove any default borders */
  box-shadow: none; /* Remove any default shadows */
  overflow: hidden; /* Ensures the blurred edges don't stick out */
}

/* This creates the container for the text/content on top of the banner */
.page_index_journal #main-content .page_content {
  position: relative;
  z-index: 2; /* Ensures content is on top of the background */
  background-color: rgba(0, 0, 0, 0.4); /* Dark overlay for better text readability */
  color: white;
  padding: 4em 2em;
  min-height: 400px; /* Adjust height as needed */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Base styles for the sliding backgrounds (pseudo-elements) */
.page_index_journal #main-content::before,
.page_index_journal #main-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* --- CUSTOMIZATION --- */
  filter: blur(4px);    /* Adjust the blur amount here (e.g., 2px, 8px) */
  opacity: 0;           /* Start hidden */
  transform: scale(1.1); /* Prevents hard edges from the blur effect */
  z-index: 1;           /* Place it behind the content */

  /* Animation settings */
  animation-name: fadeAnimation;
  animation-duration: 12s; /* Total duration for the full cycle */
  animation-iteration-count: infinite;
}

/* --- YOUR IMAGES ARE HERE --- */

/* Assign the first background image */
.page_index_journal #main-content::before {
  background-image: url('https://i.ibb.co/0RFHwZ3x/arrier-plan.jpg');
}

/* Assign the second background image and delay its animation */
.page_index_journal #main-content::after {
  background-image: url('https://i.ibb.co/mV6PTTnX/arriere-plan-2.jpg');
  animation-delay: 6s; /* Starts this animation halfway through the cycle */
}

/* The keyframe animation for fading in and out */
@keyframes fadeAnimation {
  0%    { opacity: 0; }
  17%   { opacity: 0.8; } /* Fade in (2s / 12s) - Adjust opacity here for how visible you want it */
  50%   { opacity: 0.8; } /* Hold visible (4s / 12s) */
  67%   { opacity: 0; } /* Fade out (2s / 12s) */
  100%  { opacity: 0; } /* Stay hidden until next cycle */
}