/*
Theme Name: Learning nuggets
Theme URI: http://intside.com/themes/espacecocreation/
Author: Intside
Author URI: http://intside.com/
Description: Learning nuggets is official WordPress theme based on Bootstrap
Version: 0.1
Tags: blue, black, white, light, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: Espace de Cocreation 0.1
*/


/**
 * Table of Contents:
 *
 * 1.0 - Basic Structure
 * 2.0 - Media Queries
 * ----------------------------------------------------------------------------
 */

html :where(.wp-block) {
  max-width: 100% !important;
}

.site-content>*:not(div) {
  margin-left: auto;
  margin-right: auto;
}


html {
  font-size: 16px;
}

:root {
  --color-primary: #00204E;
  --color-text: #2A2A2A;  
}

/**
 * 1.0 Basic Structure
 * ----------------------------------------------------------------------------
*/

body {
  background-color: #FFF;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
} 

img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Prompt', sans-serif;
}

h1, h4  {
  font-weight: 600; 
}
h2, .data {
  font-weight: 700;
}
h5 {
  font-weight: 400;
}
h1, h2 { 
  margin: 0 0 1.5rem;
}
h1, h2 { 
  font-size: 2rem;
}
h3 {
  font-size: 1.375rem;
  font-weight: 900;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 1rem;
}
p {
  margin: 0 0 1rem;
}

.primary_text {
  color: var(--color-primary);
}
.black {
  color: var(--color-text);
}
a {
  display: inline-block;
}
a, a:hover {
  text-decoration: none;
  color: var(--color-primary);
}

ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style-type: none;
}  


#custom-form .gform-body  {
  width: 100%;
}
#custom-form .form-control {
  background-color: #FFF;
  height: 3rem;
  border-color: var(--color-primary);
  border-radius: 12px;
}  
#custom-form .form-control::placeholder {
  color: rgba(42, 42, 42, 0.5);
}  
#custom-form .form-control:focus {
  color: var(--color-text) ;
} 


.btn-primary,
#custom-form  input[type=submit] {
  padding: .75rem 1.5rem;
  border-radius: 12px;
}
#custom-form input[type=submit]{
  height: 3rem;
}
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
#custom-form  input[type=submit]   {
  background-color: #FFF;
  border-color: #FFF;
  color: var(--color-primary);
} 
.btn:hover, 
.btn:focus-visible, 
.btn-check:focus+.btn, 
.btn:focus, 
.btn:first-child:active,
:not(.btn-check)+.btn:active, 
.btn:first-child:active:focus-visible, 
:not(.btn-check)+.btn:active:focus-visible {
  box-shadow: none;
  transition: .5s ease-in-out;
}
.btn:hover.btn-primary, 
.btn:focus-visible.btn-primary, 
.btn-check:focus+.btn.btn-primary, 
.btn:focus.btn-primary, 
.btn:first-child:active.btn-primary, 
:not(.btn-check)+.btn:active.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFF;
}


.site-header {
  position: relative;
  z-index: 20;
}

.site-header::before, 
.banner::before  {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
}

.navbar-nav .menu-item {
  margin: 0;
  padding: .5rem 0;
}


.logo {
  max-width: 190;
  max-height: 64px;
  width: auto;
  height: auto;
}


nav .menu-item a {
  color: #2A2A2A;
}
nav .menu-item a:hover {
  color: var(--color-primary);
}
.navbar-toggler {
  background-color: var(--color-primary);
  font-size: 2rem;
  border-radius: 6px;
  color: #FFF;
}
.navbar-toggler:focus {
  box-shadow: none;
}


.banner {
  padding: 2rem 0;
}
.banner, 
.banner-play, 
.banner-content, 
.banner-img {
  position: relative;
  z-index: 1;
}
.banner::before   {
  background-color: rgba(0, 32, 78, 0.1);
  background-size: cover;
  z-index: -2;
}
.banner_text h1,
.banner_text h2,
.banner_text h3 {
	font-weight: 600;
	line-height: 1.125;
}
.banner_text h1 strong,
.banner_text h2 strong,
.banner_text h3 strong {
	font-weight: 700;
	background: -webkit-linear-gradient(#ffa924, #e65d0f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.banner-img::before,
.banner-img::after {
  content: '';
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  padding: 1.5rem;
  border-radius: 12px;
  z-index: 1;
}
.banner-img::before {
  background-image: url("assets/images/learning.svg"), linear-gradient(135.26deg, #0146A9 -8.78%, #00204E 100%);
  top: 62px;
  left: 42px;
  transform: rotate(-20deg);
}
.banner-img::after {
  background-image: url("assets/images/verified.svg"), linear-gradient(135.26deg, #0146A9 -8.78%, #00204E 100%);
  right: 16px;
  bottom: -16px;
  transform: rotate(20deg);
}


.avatar_content {
  display: none;
} 
.avatar {
  display: inline-block;
  background-color: #FFF;
  padding: .5rem;
  border-radius: 100px;
 }
.avatar_group {
  display: flex;
  align-items: center;
} 
.avatar_group > li:not(:last-child) {
  margin-right: -20px;
}
.avatar_group li:last-child {
  margin-left: 30px;
}


.partnership {
  background-color: #fff;
  color: #000;
}
.partnership img {
	max-width: 100%;
	max-height: 60px;
	width: auto;
	height: auto;
}
 

.stats h6 {
  text-transform: uppercase;
  color: var(--color-primary);
}
.stats .data {
  position: relative;
  font-size: 3rem;
  z-index: 1;
}
.stats .data::before {
  background-color: var(--color-primary);
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2rem;
  height: 3px;
  z-index: 1;
}


.about img {
  border-radius: 24px;
}


.section-options li {
  position: relative;
  margin-bottom: .5rem;
  padding-left: 1.5rem;
  z-index: 1;
}
.section-options li::before{
  background-image: url(assets/images/yes-icon.svg);
  background-repeat: no-repeat;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.section-content {
  position: relative;
}

.services {
  background-image: url(assets/images/services_bg.svg);
  background-repeat: no-repeat;
  background-size: cover;
}
.services h5, .testimonial h5 {
  position: relative;
  text-transform: uppercase;
  padding: 0 0 0 3.5rem;
  z-index: 1;
}
.services h5::after, .testimonial h5::after {
 background-color: var(--color-primary);
 content: " ";
 position: absolute;
 top: 9px;
 left: 0;
 width: 3rem;
 height: 2px;
 z-index: 1;
}

/* Slick */
.slick-prev, .slick-next {
  position: relative !important;
  top: 0 !important;
  width: 2rem !important;
  height: 2rem !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: 50px;
  transform: none !important;
  z-index: 1;
}
.slick-prev {
  left: 0 !important;
}
.slick-next {
  right: 0 !important;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
  background-color: var(--color-primary) !important;
}
.slick-prev:before, .slick-next:before {
  content: '' !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat !important;
  font-family: none !important;
  font-size: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
  color: transparent !important;
  opacity: 1 !important;
  z-index: 1;
}
.slick-prev:before {
  background-image: url(assets/images/arrow-left.svg);
}
.slick-next:before {
  background-image: url(assets/images/arrow-right.svg);
}
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(144deg) brightness(103%) contrast(103%);
}

/* Video */
.video {
  background-image: url(assets/images/video_bg.svg), linear-gradient(110.61deg, #0146AA 23.79%, #00204E 74.9%);
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0;
  padding: 3rem 0;
  color: #FFF;
}
.video iframe {
  width: 100%;
  height: 22rem;
}

/* Testimonial */
.testimonial {
  background-color: #FEF6EF;
}
.testimonial .citation {
  background-color: #FFF;
  background-image: url(assets/images/citation_icon.svg);
  background-repeat: no-repeat;
  background-position: 24px 24px;
  padding: 3.375rem 2rem;
  border-left: 5px solid var(--color-primary);
  border-radius: 12px;
}

/* Newsletter */
.newsletter {
  background: var(--color-primary);
  color: #FFF;
}

.newsletter #custom-form .gform_validation_errors {
  background-color: #FFF;
}
.newsletter #custom-form .validation_message {
  color: #FFF;
}

.newsletter #custom-form .form-control {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #E4E4E7;
}  
.newsletter #custom-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}  
.newsletter #custom-form .form-control:focus {
  color: #FFF;
} 

/* Footer */
footer, 
footer section a,
footer section a:hover {
  color: #FFF;
}

footer section:first-child h4,
footer section:first-child h4 + div ul li,
footer section:first-child h4 + div ul li a {
  position: relative;
  z-index: 20;
}
footer section:first-child h4 {
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}

footer section:first-child h4::before {
  background-color: var(--color-primary);
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 50px;
  height: 2px;
  z-index: 1;
}
footer section:first-child h4 + div ul li:not(:last-child) {
  margin-bottom: 1rem;
} 
footer section:first-child h4 + div ul li {
  padding-left: 1.5rem;
}
footer section:first-child h4 + div  ul li::before {
  content: '';
  background-image: url(assets/images/list_icon.svg);
  background-repeat: no-repeat;
  position: absolute;
  top: 3px;
  left: 0;
  width: 1.125rem;
  height: 1.125rem;
  z-index: 1;
}
footer section:first-child h4 + div ul li a:hover footer section:first-child h4 + div  ul li::before  {
  fill: var(--color-primary);
}
footer section:first-child {
  background-color: #181818;
}

footer section:last-child {
  background-color: var(--color-primary);
  padding: .75rem 0;
}

/**
 * 2.0 Media Queries
 * ----------------------------------------------------------------------------
 */

/* WordPress Media Queries */
@media (max-width: 600.98px) {
}
@media (min-width: 601px) and (max-width: 782.98px) {
}
@media (min-width: 783px) {
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	.site-content > *:not(div) {
		max-width: calc(100% - 24px);
	}
}

@media (min-width: 576px) {
  .site-content > *:not(div) {
		max-width: 540px;
	}

  .banner {
    padding-bottom: 5rem;
  }

  .avatar {
    position: absolute;
    left: 50%;
    bottom: -48px;
    padding: 1rem;
    transform: translateX(-50%);
    z-index: 2;
  }
}

/* Small devices (landscape phones, 576px, up to 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
}

@media (min-width: 576px) and (max-width: 991.98px) {
}

@media (min-width: 768px) {

  .site-content > *:not(div) {
		max-width: 720px;
	}
  
  .banner {
    padding-top: 2rem;
  }
  .banner-play::before {
    content: " ";
    position: absolute;
    top: -32px;
    right: -64px;
    background-image: url(assets/images/play_before.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 3.875rem;
    height: 3.875rem;
    z-index: 1;
  }
  .banner-img::before,
  .banner-img::after {
    padding: 2rem;
  }


  .section-content::before {
    content: '';
    position: absolute;
    background-color: #2A2A2A;
    top: 50%;
    right: -16px;
    bottom: -16px;
    left: 16px;
    z-index: -1;
    border-radius: 12px;
  }
 

  .newsletter {
    background: linear-gradient(90deg, #00204E 40.44%, rgba(0, 32, 78, 0.3) 100%), url(assets/images/newsletter_bg.png) no-repeat;
    background-size: contain;
    background-position: center right ;
  }

}

/* Medium devices (tablets, 768px, up to 992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
}

@media (max-width: 991.98px) {
}

@media (min-width: 992px) {

  .site-content > *:not(div) {
		max-width: 960px;
	}

  h2 {
    font-size: 2.625rem;
  }
  h5 {
    font-size: 1.125rem;
  }

 
  .home .site-header::before  {
    background-color: rgba(0, 32, 78, 0.1);
    background-size: cover;
    z-index: -2;
  }
  .navbar-nav .menu-item {
    margin-right: 2rem ;
    padding: 0;
  }
  .navbar-nav .menu-item a {
    padding: 0;
  }

 
  .about_image {
    background: url(assets/images/about_bg.svg);
    background-repeat: no-repeat;
    background-size: contain; 
    background-position: center bottom;
    padding: 0 0 5rem;
  }

 
  .video {
    margin: 0 0 20rem;
    padding: 5rem 0 21.25rem;
  }
  .video .content_video  {
    position: absolute;
    top: 0;
    z-index: 2;
  }
  .video iframe {
    width: 982px;
    height: 552px;
  }

 
  .newsletter #custom-form form {
    display: flex;
    gap: .5rem;
  }
  .newsletter  #custom-form .gform-footer {
    margin: 0;
  }

 
  footer section:last-child ul li + li {
    position: relative;
    padding-left: 1.5rem;
    z-index: 20;
  } 

  footer section:last-child ul li + li::before {
    content: '-';  
    position: absolute;
    top: 0;
    left: 8px;
    z-index: 1;
  }

}

/* Large devices (desktops, 992px, up to 1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
}

@media (min-width: 1200px) {
  .site-content > *:not(div) {
		max-width: 1140px;
	}

 	h1 {
    font-size: 3.375rem;
  }
}

/* X-Large devices (large desktops, 1200px, up to 1400px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .site-content>*:not(div) {
    max-width: 1320px;
  }
}