@import url('assets/css/fonts.css');

@media screen and (max-width: 600px) {
	.menu-toggle,
	.main-navigation.toggled .nav-menu {
		display: block;
	}

	.main-navigation ul {
		display: none;
	}
}

/*--------------------------------------------------------------
7.0 Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}

/*--------------------------------------------------------------
8.0 Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}


.widget {
	margin: 0 0 1.5em;
}

/* Make sure select elements fit in widgets */
.widget select {
	max-width: 100%;
}

/* Search widget */
.widget_search .search-submit {
	display: none;
}


.sticky {
	display: block;
}

.hentry {
	margin: 0 0 1.5em;
}

.byline,
.updated:not(.published) {
	display: none;
}

.single .byline,
.group-blog .byline {
	display: inline;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
10.2 Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

/*--------------------------------------------------------------
10.3 Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/*--------------------------------------------------------------
11.0 Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
12.0 Media
--------------------------------------------------------------*/
.page-content img.wp-smiley,
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}

/*--------------------------------------------------------------
12.1 Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
}

.wp-caption-text {
	text-align: center;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

/*--------------------------------------------------------------
12.2 Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}


/* Custom Css */

:root {
    --primary-clr:#15456C;
    --clr-secondary: #fff200;
}

html {
overflow-x : hidden !important;
}

body{
    margin: 0 !important;
    background-color: #F7F3E8 !important;
    font-family:'Tw cen MT' !important;
    font-size: 22px !important;
    height: 100% !important;
}
h1{
    font-family: 'Founders Groteski';
    font-weight: 300;
    font-size: 60px;
}
h5{
    font-weight: 700;
    font-family:'Founders Groteski';
    margin: 0;
    font-size: 1.3em;
}

h3{
    font-family:'Founders Groteski';
    font-weight: 300;
    font-size: 32px; 
}

.custom-h1{
color: var(--primary-clr);

}

/* Navbar Section */

li{
    display: inline;
    padding-inline: 20px;
}
.nav-item {
    display: flex;
    align-items: center;
  }
  .nav-item a{
    color: white !important;
  }
  .nav-item a:hover{
    text-decoration: none !important;
  }

 


  .navbar a {
    text-decoration: none;
    color: #15456C;
    font-size: 20px;
    font-weight: 100;
    font-family: 'Tw cen MT';
    position: relative;
}


  


.navbar a:hover::after {
     background-color: hsl(207, 67%, 40%);
     text-decoration:underline;
}



 #login a{
    color: white;
    display: flex;
    justify-items: center;
   
} 

/* Navbar End */


  .hero h1{
    padding-top: 20%;
  }

  .hero img{
    margin-top: 23%;
  }
  .hero-text{
    margin-top: 35%;
    color: white;
    font-size: 50px;
    font-family: 'Founders Groteski';
  }
.join-section {
    background-color:var(--primary-clr);
  }
  .join-text{
    font-size: 63px;
  }

  /* making mwalimu bora section */

 .about-hero h3{
    color: var(--primary-clr);
    font-size:2em;
 } 
 /* internship page */

 .internship-hero {
    background-repeat: no-repeat;
    background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url('/wp-content/themes/mwalimu2wordpress/images/internship-hero.png');
    background-position: center;
    background-size: cover;
    height:90vh;
  }
  .internship-hero h1{
    font-size: 53px;
    padding-top: 17%;
  }

  .lorem-title{
    font-family:'Tw cen MT';
    font-size: 25px;
    font-weight: bold;
  }

/* chalk-conference Hero section */

.chalk-text{
    padding-top: 26%;
}
.sign-up-text{
    margin-top: 30%;
}
.back-btn{
    color: var(--primary-clr);
}

.blue-btn {
    white-space: nowrap;        
    display: inline-block;      
    text-align: center;       
    vertical-align: middle;    
}



.article-hero{
background-color: var(--primary-clr);

}
.article-text{
    padding-top: 10%;
    color: white;
    padding-left: 8%;
}
 
.video-hero-section{

    background-color: var(--primary-clr);
    height: 90vh;
}

.video2-hero-section{

    background-color: var(--primary-clr);
}
.inner-container{
    background-image: url('../images/article-hero.png');
    background-size: cover;
    height: 90vh;
    margin-top: -20px;
}
.custom-audio {
    width: 100%;
    height: 30px;
    background: none;
    border: none;
}

.custom-audio::-webkit-media-controls-panel {
    background: none;
}

.custom-audio::-webkit-media-controls-play-button,
.custom-audio::-webkit-media-controls-pause-button,
.custom-audio::-webkit-media-controls-mute-button,
.custom-audio::-webkit-media-controls-volume-slider {
    color: #ff0000; /* YouTube red color */
}

.custom-audio::-webkit-media-controls-timeline {
    background: none;
    height: 2px;
}

.custom-audio::-webkit-media-controls-current-time,
.custom-audio::-webkit-media-controls-time-remaining {
    color: #000; /* Black color for text */
}


.span{
    color: #fff200;
    font-family: 'chalk Duster';
}

/* chalk-section- num */
.chalk-num{
    color: var(--primary-clr);
}

.accordion-button{
    background-color: var(--primary-clr) !important;
}
.accordion-button::after{
    color:white;
}
.accordion-button:not(.collapsed){ 
  background-color: var(--primary-clr);
}
.accordion-button::after{
    color: white;
}

  /* testimonials section */
.carousel-item{
    margin-right:0;
}
  .internship-section{
    background-color: var(--primary-clr);
  }

  .internship-section h1{
    font-size: 45px;
  }

.mwalimu-section{
 background-color:var(--primary-clr);
}
.mwalimu-section p{
    color: white;
}

.mwalimu-section h3{
    color: var(--clr-secondary);
}

/* join content */
.join-content{
    padding-top: 3em;
    padding-bottom: 3em;
}
.hero-content button{
    background-color: #15456C;
    color: white;
    border: 0;
    border-radius: 3px;
}

/* Join-section */
.join-section{
    background-color: #15456C;
    text-align: center;
    color: white;
    font-size: 21px;
}
.card-body{
    padding: 26px;
    font-size: 20px;
}

.fa-facebook-official{
    color:var(--primary-clr);
}

.fa-google{
    color: #4285F4;
}
.sign-up{
    color: var(--primary-clr);
}
/* Resources section */

.resources-text h1{
    font-size: 50px;
}


/*Get Equipped section */
.get-equipped h1{
    font-size: 60px;
}
.get-equiped-section{
    background-color: #F5F5F5;
}

/* Buttons section */
.yellow-btn{
    background-color:var(--clr-secondary);
    color:var(--primary-clr);
    border: 0;
    border-radius: 3px;
    text-decoration: none;
}
.blue-btn{
    background-color: var(--primary-clr);
    color: white;
    font-size: 16.5px;
    border: 0;
    border-radius: 3px;
}





.card-title a { 
      text-decoration: none; 
      color: inherit;
      font-weight: bold; 
    }
    
    .card-title a:hover {
         color: hsl(207, 67%, 40%); 
          text-decoration: underline; 
    }

.card-link a{
    color: var(--primary-clr);
    text-decoration: none;
}    
.card-link a:hover{
    color: var(--primary-clr);
    text-decoration: underline;
}
 .wiz-b-text-link-arrow {
    filter: invert(19%) sepia(24%) saturate(3465%) hue-rotate(181deg) brightness(95%) contrast(88%);
    } 
 .card-img {
        height: 100%; 
    }
    
    .position-absolute {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
button a{
    color: var(--primary-clr);
    text-decoration: none;
}  
.button a:hover{
    color: var(--primary-clr);
}

.nav-item button a{
    color: white;
    text-decoration: none;
}
.nav-item button a:hover{
    color: white;
    text-decoration: none;
}
/* Testimonials Section */
.testimonials{
    margin-top: 5%;
}
.cycle-slideshow {
    position: relative;
    overflow: hidden;
}

.cycle-slide {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.cycle2 .card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}



.cycle2 .card-img-start {
    max-width: 100%;
    height: auto;
}

.cycle2 .card-body {
    padding: 20px;
}

/* Navigation buttons */
.cycle-prev, .cycle-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-clr);
    padding: 10px;
    cursor: pointer;
    z-index: 1000;
}

.cycle-prev {
    left: -5px;
    color: #15456C;
    background-color: transparent;
    height: 25px;
}

.cycle-next {
    right: -1px;
    height: 25%;
    width: 25px;
}

/* Center pager indicators */
.cycle-pager {
    text-align: center;
    font-size: 50px;

}

/* Style individual pager buttons */
.cycle-pager span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    color: var(--primary-clr);
    border-radius: 50%;
    cursor: pointer;
}

/* Style for active pager button */
.cycle-pager .cycle-pager-active {
    color:var(--clr-secondary);
    font-size: 50px;

}

/* footer section */

footer .row  {
    color: white;
    
}

footer .row  a{
    color: white;
    text-decoration: none;
  
}

footer .row  ul li a:hover {
   text-decoration: underline;
   cursor: pointer;
   line-height: 30%;
   color: var(--clr-secondary);
}
footer h2{
    font-family: 'Founders Groteski';
    font-weight: 300;
    font-size: 25px;
}

.george{
    color: var(--clr-secondary);
}
.options{
    background-color: var(--primary-clr);
    color:white;
}
.down-nav{
    font-size: 12px;
}

.footer-section{
    background-color: var(--primary-clr);
   
}
hr{
    color: var(--clr-secondary) !important;
    width: 16em;

}

.socials{
    padding: 0;
}

.socials a:hover{
    color:var(--clr-secondary);   
}
.card-img-start{
    height: 50px;
}

/* === BLOG === */

ul.wp-block-latest-posts__list.wp-block-latest-posts{
    text-decoration:none;
}
    /* Style the "Read More" link */
    div.wp-block-post-excerpt a {
      font-weight: bold; /* Make link text bold */
      text-decoration: none; /* Remove underline */
      color: #333; /* Set link text color */
      background-color: #fff; /* Set link background color */
      padding: 5px 10px; /* Add some padding to the link */
      border-radius: 5px; /* Round the corners */
    }




.post, .widget, #comments {
	position: relative;
	border: solid 1px #ddd;
	background: white;
	margin: 0 0 40px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.post header,
.post .post-excerpt,
.post .post-body,
#comments .comments-wrap {
	padding: 20px;
	color: var(--primary-clr) !important;
}

.post header h4,
.post header h4 {
	margin: 0 0 15px;
	padding: 0 0 15px;
	border-bottom: solid 1px #ddd;
	color: var(--primary-clr) !important;
}


.entry-header{
    color: var(--primary-clr) !important;
}

/* blog header and title styling*/

.entry-title a{
    color: var(--primary-clr) !important;
    text-decoration:none;
}

.wp-block-latest-posts__post-title{
     color: var(--primary-clr) !important; 
     text-decoration:none;
}

.wp-block-latest-posts__post-title a:hover{
    text-decoration:underline;
}


/*uncategorized widget styling*/

.cat-item a{
     color: var(--primary-clr) !important; 
     text-decoration:none;
}

/*Archived widget styling*/
.wp-block-archives-list li a{
    color: var(--primary-clr) !important;
     text-decoration:none;
}

/*nav previous on blog styling*/

.nav-previous a{
       color: var(--primary-clr) !important;
     text-decoration:none;
}

/*nav next on blog styling*/
.nav-next a{
      color: var(--primary-clr) !important;
     text-decoration:none;
}


.post header h4 {
	font-size: 24px;
}

.post-image img {
	height: auto;
	width:auto;
}

.post-details {
	font-size: 12px;
	width: 90%;
}

.post-details i.fa {
	padding-left: 10px;
}

.post-details i.fa:first-child {
	padding: 0;
}

/* === WIDGETS === */

.widget {
	padding: 20px;
}

.widget h4 {
	margin: 0 0 10px;
	padding: 0 0 10px;
	border-bottom: solid 1px #ddd;
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget ul li {
	margin: 0 0 5px;
}

.widget ul li:hover {
	position: relative;
	left: 1px;
}

/* === COMMENTS === */

.post-comments-badge {
	height: 70px;
	width: 70px;
	position: absolute;
	top: 25px;
	right: 20px;
	border: none;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	background: #79b044;
	text-align: center;
	display: table;
}

.centered-post {
    max-width: 800px;     /* Controls width */
    margin: 0 auto;       /* Centers the block horizontally */
    padding: 20px;
    text-align: center;   /* Centers text and inline content */
}

.centered-post img {
    display: block;
    margin: 20px auto;    /* Ensures images are centered too */
}

.centered-post .post-details {
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #666;
}

.feature-image {
    
}

.post-comments-badge a {
	display: table-cell;
	vertical-align: middle;
	color: white;
	font-size: 20px;
	line-height: 20px;
}

.post-comments-badge i.fa {
	display: block;
	font-size: 15px;
	padding: 0;
	margin-bottom: 4px;
}

.post-comments-badge:hover {
	background-color: #8bc653;
}

#comments h3 {
	text-align: center;
}

#comments h4 {
	font-size: 1.3em;
}

#comments ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

#comments ol li {
	background: rgba(0,0,0,0.02);
	padding: 10px 20px;
	margin: 10px 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: solid 1px rgba(0,0,0,0,0.03);
}

#comments ol li ol.children {
	padding: 0;
	list-style: none;
	font-size: 0.96em;
}

#leave-comment {
	margin: 40px 0 0;
	padding: 20px 0 0;
	border-top: solid 1px #eee;
}

/* specific WordPress comment styles */
#comments footer {
	background: none;
	color: inherit;
}

#comments footer a {
	color: inherit;
}

#comments .comment-metadata {
	margin: 10px 0 0;
}


/*Search_button styling*/

.wp-block-search__button,
.wp-block-search__button:focus,
.wp-block-search__button:hover {
    color: blue !important;
}


/*blog join button styling*/

Success!
.custom-subscribe-btn {
    color: var(--primary-clr) !important;       /* text color */
    background-color: white !important;         /* background */
    border: 2px solid var(--primary-clr) !important;
    transition: all 0.3s ease;
}

.custom-subscribe-btn:hover {
    background-color: hsl(207, 67%, 30%) !important;
    color: white !important;
}


.custom-subscribe-btn{
    background-color: var(--primary-clr) !important;
    color:white;
}


/*RESOURSES BACK BUTTON*/

/* Back Button */
.btn-back {
    background-color: #15456C;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: 500;
    border-radius: 5px;
    transition: all 0.3s ease;
}
.btn-back:hover {
    background-color: #15456C !important; /* Same color */
    color: #ffffff;
    transform: scale(1.02);
}

/* Share Buttons */
.share-btns a {
    margin-right: 10px;
    text-decoration: none;
    font-size: 1.2rem;
    color: #15456C;
    transition: 0.3s ease;
}

.share-btns a:hover {
    color: #0e2f4d;
}

/* Back Button */
.back-button {
  display: inline-block;
  background-color: #15456C;
  color: #fff;
  padding: 10px 18px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.back-button:hover {
  background-color: #15456C; /* Same on hover */
  opacity: 0.9;
}

/* Share Section */
.share-section {
  display: flex;
  align-items: center;
  gap: 12px; /* Space between icons */
  margin-top: 20px;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  transition: transform 0.2s ease;
}

.social-icon:hover {
  transform: scale(1.1);
}

/* Brand Colors */
.social-icon.facebook {
  background-color:  #15456C /* Facebook blue */
}

.social-icon.twitter {
  background-color:  #15456C; /* Twitter (X) black */
}

.social-icon.whatsapp {
  background-color:  #15456C !important; /* WhatsApp green */
}

.social-icon.linkedin {
  background-color:  #15456C; /* LinkedIn blue */
}

 .error-page-container {
        text-align: center;
        padding: 80px 20px;
        color: #15456C;
    }

    .error-page-container h1 {
        font-size: 4rem;
        font-weight: 700;
        color: #15456C;
    }

    .error-page-container p {
        font-size: 1.2rem;
        margin-top: 10px;
        color: #555;
    }

    .error-actions {
        margin-top: 30px;
    }

    .error-btn {
        background-color: #15456C;
        color: #fff;
        padding: 12px 30px;
        margin: 10px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 1.1rem;
        transition: 0.3s ease;
        display: inline-block;
    }

    .error-btn:hover {
        background-color: #10364f;
        color: #fff;
    }

    /* Search styling */
    .error-search {
        margin: 30px auto;
        max-width: 500px;
    }

    .error-search input {
        padding: 12px;
        font-size: 1.1rem;
    }

/*Mailchimp hiding css*/ 
.mc-field-group input,
#mc-embedded-subscribe {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}
#mc-embedded-subscribe {
    background-color: #15456C;
    color: white;
}

/* ✅ Cleaned — No duplicates or clipping */
.card-link {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    background: transparent !important;
    padding: 0 !important;
    margin: 0;
    border: none !important;
    overflow: visible !important; /* ← IMPORTANT: Let arrow move outside naturally */
}

/* Arrow animation only */
.card-link i {
    margin-left: 5px;
    display: inline-block;
    animation: arrowSlide 1.5s infinite ease-in-out;
    background: transparent !important;
}

/* Keyframes for smooth left-to-right idle animation */
@keyframes arrowSlide {
    0% { transform: translateX(0); }
    50% { transform: translateX(6px); }
    100% { transform: translateX(0); }
}

/* Remove white background in card body if it exists */
.card .card-body {
    background: transparent !important;
}