/**

 * Theme Name:     YoleAfrica

 * Author:         Ira

 * Template:       astra

 * Text Domain:	   yoleafrica

 * Description:    YoleAfrica is a child theme for Astra Theme

 **/





 /*_________________________________________________________________

             TABLE OF CONTENT
________________________________________________________________  



- CSS Reset



- BASE / CLASSES

    - VARIABLES 

    - TYPOGRAPHY

    - GLOBAL STYLE



-HEADER

    - HEADER

    - DESKTOM MENU

    - SUBMENU

    - MOBILE MENU



- HOME PAGE



- OUR WORK / PORTFOLIO

    - PORTFOLIO ARCHIV

    - SINGLE PORTFOLIO POS

    - PORTFOLIO CATEGORY ARCHIVE



- FARM



- ABOUT US



- CONTACT



- 404 PAGE



- FOOTER



*/







 /*_________________________________________________________________



             CSS Reset

____________________________________________________________________  */



 /* Use a more-intuitive box-sizing model */

*, *::before, *::after {

    box-sizing: border-box;

  }

  /*  Remove default margin */

  * {

    margin: 0;

  }

  /*  Enable keyword animations */

  @media (prefers-reduced-motion: no-preference) {

    html {

      interpolate-size: allow-keywords;

    }

  }

  body { 

    line-height: 1.5; /*  Add accessible line-height */

    -webkit-font-smoothing: antialiased; /*  Improve text rendering */

  }

  /* Improve media defaults */

  img, picture, video, canvas, svg {

    display: block;

    max-width: 100%;

  }

  /*  Inherit fonts for form controls */

  input, button, textarea, select {

    font: inherit;

  }

  /* Avoid text overflows */

  p, h1, h2, h3, h4, h5, h6 {

    overflow-wrap: break-word;

  }

  /* Improve line wrapping */

  p {

    text-wrap: pretty;

  }

  h1, h2, h3, h4, h5, h6 {

    text-wrap: balance;

  }

  /* Create a root stacking context */

  #root, #__next {

    isolation: isolate;

  }

  a, a:focus, a:focus-visible, a:active  {

    text-decoration: none;

    outline: none;

  }









  /*_________________________________________________________________



             Yole!Africa - BASE 

____________________________________________________________________  */





/*      VARIABLES 

________________________________________*/

:root {

    --red: #C80F20;

    --blue: #0085CA;

    --light-blue: #E6F7FF;

    --white: #FFFFFF;

    --dark-grey: #191717;

}





/*      CLASSES

________________________________________*/



.list-style-none {

  list-style: none;

}



.align-self-start {

  align-self: start;

}

.align-self-center {

  align-self: center;

}

.align-self-end {

  align-self: end;

}



.scale-on-hover {

  transition: transform .3s ease-in-out;



  &:hover {

    transform: scale(1.02);

  }

}







/*      GLOBAL STYLE

________________________________________*/

/* site title and subtitle */
.ast-logo-title-inline .ast-site-identity {
  padding: 0;
}

.ast-site-identity .site-title a {

  font-weight: bold;

}



.banner {

  height: 80vh;

  min-height: 630px!important;

  max-height: 680px!important;

  clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%);



  /* affects banner cta */

  @media only screen and (max-width: 381px) {

    padding-top: 5px!important;

    padding-bottom: 5px!important;

    row-gap: 0!important;

  }

  @media only screen and (max-width: 767px) {

    flex-wrap: nowrap!important;

  }

}



/* container block padding */

div.uagb-container-inner-blocks-wrap {

    @media only screen and (max-width: 976px) {

      padding-left: 10px;

      padding-right: 10px;

  }

}





  /*_________________________________________________________________



             HEADER

____________________________________________________________________  */







/*      HEADER BACKGROUND, MENU LINK, 

        ACTIVE and HOVERLINK COLOUR & TOP LINE

_________________________________________________*/





/*     DESKTOP MENU

_________________________________________________*/



/* line above current and hovered menu item on desktop menu (colour defined for each page), site title colour */

 @media (min-width: 922px) {

  .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link:before,

  .ast-theme-transparent-header .ast-builder-menu .main-header-menu li a:hover:before {

    position: absolute;

    content: '';

    width: 80%;

    transform: translateX(-50%);

    bottom: 57px;

    left: 50%;

  }

 }



/* home, about, and support */

.page-id-3501,

.page-id-3569,

.page-id-3573 {

  &.ast-theme-transparent-header .ast-builder-menu .main-header-menu li a,

  .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,

  &.ast-theme-transparent-header .ast-builder-menu .main-header-menu li a:hover {

    color: var(--white);

  }

  .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link:before,

  &.ast-theme-transparent-header .ast-builder-menu .main-header-menu li a:hover:before {

    border-bottom: 1px solid var(--white);

  }

}



/* home */

.page-id-3501 {

  &.ast-theme-transparent-header .main-header-bar {

    background: #0c0e0f80!important;

  }

}



/* our work, farm, contact, and donate */

.page-id-3567,

.page-id-3575,

.page-id-3571,
.page-id-3912 {

  &.ast-theme-transparent-header .ast-builder-menu .main-header-menu li a,

  .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,

  &.ast-theme-transparent-header .ast-builder-menu .main-header-menu li a:hover {

    color: var(--dark-grey);

  }

  .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link:before,

  &.ast-theme-transparent-header .ast-builder-menu .main-header-menu li a:hover:before {

    border-bottom: 1px solid var(--dark-grey);

  }

}



/* farm */

.page-id-3575 {

  &.ast-theme-transparent-header .main-header-bar {

    background: linear-gradient(to left, #ffffffb3 50%, #ffffff00 50%);

  }

}





/*     SUBMENU

_________________________________________________*/



/* remove hovered menu item top line  */

.ast-theme-transparent-header .ast-builder-menu .main-header-menu .sub-menu li a:hover::before {

    content: none;

}

/* remove dropdown arrow */
.menu-item .ast-icon.icon-arrow svg.ast-arrow-svg {
  display: none;
}



.main-header-menu .sub-menu {

  margin-left: -30px;

  border: none;



  .menu-link {

    text-align: center;

  }

}



 /* home, about, support */

.page-id-3501 {

  .main-header-menu .sub-menu {

    background: #0c0e0f80;

  }

}



.page-id-3501,

.page-id-3569,

.page-id-3573 {

  .main-header-menu .sub-menu {

    background: var(--dark-grey);

    box-shadow: 0 7px 10px -2px rgba(255,255,255,.7)!important;



    .menu-link:hover {

      color: var(--dark-grey)!important;

    }

    .menu-item:hover {

      background-color: var(--white);

    }

  }

}



 /* our work, donate */

.page-id-3567,
.page-id-3912 {

  .main-header-menu .sub-menu {

    .menu-link:hover {

      color: var(--white)!important;

    }

    .menu-item:hover {

      background-color: var(--dark-grey);

    }

  }

}



 /* farm */

.page-id-3575 {

  .main-header-menu .sub-menu {

    background: #ffffffb3;



    .menu-link:hover {

      color: var(--white)!important;

    }

    .menu-item:hover {

      background-color: var(--dark-grey);

    }

  }

}



 /* contact */

.page-id-3571 {

  .main-header-menu .sub-menu {

    background: var(--blue);

    box-shadow: 0 7px 10px -2px rgba(255,255,255,.5)!important;



    .menu-link:hover {

      color: var(--blue)!important;

    }

    .menu-item:hover {

      background-color: var(--light-blue);

    }

  }

}







/*      MOBILE MENU - burger, menu list, menu link, current & hover

_________________________________________________*/





@media (max-width: 921px) {



  /* burger icon */

   .ast-mobile-menu-wrap .menu-toggle {

     outline: 0;

     border: none;

     outline-style: none;

     -moz-outline-style: none;

   }



  [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {

    width: 25px;

    height: 25px;

  }



  /* burger icon border and outline */

  [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal,

  [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:active,

  [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:focus {

      color: var(--white);

      border-color: var(--white);

      border-style: solid;

      border-width: thin;

  }



  /*  burger icon border and outline - our work, farm, donate */

  .page-id-3567,

  .page-id-3575,
  .page-id-3912 {

      [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal,

      [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:active,

      [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:focus {

      color: var(--dark-grey);

      border-color: var(--dark-grey);

    }

  }

 

   /*  burger icon border and outline - contact */

  .page-id-3571 {

      [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal,

      [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:active,

      [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:focus {

      color: var(--blue);

      border-color: var(--blue);

    }

  }



  .ast-button-wrap .menu-toggle:focus {

    outline: none;

  }



  .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link {

    text-align: center;

  }





  /* burger icon & menu list - home, about, support */

  .page-id-3501,

  .page-id-3569,

  .page-id-3573 {

    .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {

      fill: var(--white)!important;

    } 

    .ast-builder-menu-mobile .main-navigation ul {

      background-color:var(--dark-grey);

    }

    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link {

        color: var(--white);

        background-color:var(--dark-grey);

    }

    .ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .menu-link,

    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item:hover > .menu-link {

      color: var(--dark-grey);

      background: var(--white);

    }

  }



  /* burger icon & menu list - contact */

  

  .page-id-3571 {

    .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {

      fill: var(--blue)!important;

    } 

    .ast-builder-menu-mobile .main-navigation ul {

      background-color:var(--blue);

    }

    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link {

        color: var(--white);

        background-color:var(--blue);

    }

    .ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .menu-link,

    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item:hover > .menu-link {

      color: var(--blue);

      background: var(--light-blue);

    }

  }



  /* burger icon & menu list - our work, farm, donate */

  .page-id-3567,

  .page-id-3575,
  .page-id-3912 {

    .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {

      fill: var(--dark-grey)!important;

    }

    .ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .menu-link,

    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item:hover > .menu-link {

      color: var(--white);

      background: var(--dark-grey);

    }

  }


}





  /*_________________________________________________________________



             HOME PAGE

____________________________________________________________________  */



/* creating art */

.nyragongo-text {

  align-self: flex-end;

}

.kivu-text {

  align-self: flex-start;

}



/* what have we accomplished */

.accomplishments {

  div p {

    width: 50%;

    background-image: url(../../../wp-content/uploads/2025/06/check-icon.png); 

    background-size: 45px 45px;

    image-rendering: -webkit-optimize-contrast;

    background-position: left top;

    background-repeat: no-repeat;

    padding-left: 60px;

    padding-top: 30px;



    @media only screen and (max-width: 976px) {

      width: 70%;

      background-image: none;

      padding: 0;

    }



      &.right-side {

        background-position: right top;

        padding-left: 0;

        padding-right: 60px;

    }

  }

}



#post-3501 .accomplishments p {

  width: 50%;

}

.large-blue-text {

  font-size: 3rem;

  color: var(--blue);

}



/* support us */

.home-support {

  li.wp-social-link.wp-social-link-instagram {

    margin-left: -105px;

  }

  li.wp-social-link.wp-social-link-facebook {

    margin-left: -35px;

  }

  li.wp-social-link.wp-social-link-linkedin {

    margin-left: 35px;

  }

  li.wp-social-link.wp-social-link-whatsapp {

    margin-left: 105px;

  }

}



/* apa-hapa / thank you text container */

@media only screen and (max-width: 435px) {

  .apa-hapa-text {

    max-width: 60%!important;

  }

}


/*      CAROUSEL

________________________________________*/

/* hovered arrow and active circle */
.swiper-button-prev i:hover,
.swiper-button-next i:hover {
  color: var(--dark-grey)!important;
}
.wpcp-swiper-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--dark-grey)!important;
}

.fancybox-button:hover {
  background: var(--dark-grey)!important;
}


  /*_________________________________________________________________



             OUR WORK / PORTFOLIO 

____________________________________________________________________  */



/*      PORTFOLIO ARCHIVE

________________________________________*/



/* category tabs on top */

.uagb-taxomony-box,

.portfolio-item {

   box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);

    transition: transform .3s ease-in-out;



  &:hover {

    transform: scale(1.02);

  }

}



.portfolio-grid {

  margin-top: 60px;

 }



.ast-single-post .entry-content a {

  text-decoration: none;

}







/*      SINGLE PORTFOLIO POST

________________________________________*/



.entry-meta {

  display: none;

}



/* our artwork slide */

.slick-slide {

      margin: 10px;

      padding-top: 10px;

      

    &.slick-active {

      box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);

      transition: transform .3s ease-in-out;

    

        &:hover {

        transform: scale(1.02);

      }

    }

}





/*      PORTFOLIO CATEGORY ARCHIVE

________________________________________*/



/* archive title */

body.archive .ast-archive-description {

  text-align: center;



  .ast-archive-title {

    font-size: 3.5rem;

    font-weight: 300;

    line-height: 1.4em;

  }

}

.ast-article-post  {

  .post-content {

    text-align: center;

  }

  .ast-taxonomy-container {

    display: none;

  }

}

.archive .ast-article-post .ast-article-inner,

.archive .ast-article-post .ast-article-inner:hover {

  border-radius: 0;

}





  /*_________________________________________________________________



             FARM

____________________________________________________________________  */



.farm-banner {



  h1 {

    font-weight: bold;

  }



  /* semi-transparent background */

  .ekolojia-banner-text {

    height: 100%;

  }



  /* overwrite container block padding set in global styles section */

  div.uagb-container-inner-blocks-wrap {

    @media only screen and (max-width: 976px) {

        padding-left: 0;

        padding-right: 0;

    }

  }

}





.farm-components p {

  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;

}







  /*_________________________________________________________________



             ABOUT US

____________________________________________________________________  */



/* the community 0*/

.about-community p:not(:first-child) {

  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;

}



/* timeline */

.uagb-timeline__center-block .uagb-timeline__day-right .uagb-timeline__arrow::after, 

.uagb-timeline__center-block .uagb-timeline__day-left .uagb-timeline__arrow::after {

    border: none;

}





.banner-about {



    @media only screen and (max-width: 767px) {

      p {

        text-align: center;

        margin: 0!important;

        padding: 0!important;

      }

    } 



    @media only screen and (max-width: 450px) {

      p {

      font-size: 2.5rem!important;

      }

      span,

      .mob-small-text {

      font-size: 1.3rem!important;

      }

    }

}





  /*_________________________________________________________________



             CONTACT

____________________________________________________________________  */



/* required asterisk */

.srfm-form-container .srfm-form .srfm-required span {

  color: var(--red);

}



.srfm-form-container .srfm-form .srfm-input-common {

  border-radius: 0!important;

}



/* submit button */

#srfm-submit-btn {

  border: 1px solid #ffffff40;

  border-radius: 0;

  padding: 8px 15px;

}



/* checkbox */

.srfm-form-container .srfm-checkbox-block .srfm-block-wrap .srfm-cbx .srfm-span-wrap:first-child {

  border-color: #ffffff40!important;

  border-radius: 0;

}



/* fields on hover */

.srfm-form-container .srfm-form .srfm-input-common:hover,

#srfm-submit-btn:hover,

.srfm-form-container .srfm-checkbox-block .srfm-block-wrap .srfm-cbx .srfm-span-wrap:first-child:hover {

  border-color: var(--white)!important;

}



/* whatsapp */

.qlwapp__button {

  margin-top: 0!important;

  margin-bottom: 0!important;

  padding:0!important;

  box-shadow: none!important;

  background-color: red!important;



  .qlwapp__text {

    padding-left: 20px;

  }

}





/* back to top button */

#ast-scroll-top {

  padding: 10px 8px 10px;

}

.ast-scroll-to-top-right {

  right: 10px;

}

.ast-icon.icon-arrow svg {

  height: 22px;

}


  /*_________________________________________________________________

             DONATION
________________________________________________________________  */

/* hide scrollbar */
.responsive-iframe-wrapper {
  position: relative;
  overflow: hidden;
}

iframe {
  width:100%; 
  height:1350px; 
  overflow:hidden;
  scrollbar-width: none; 
  border:none;

  /* extend width to hide scrollbar */
  @media (max-width: 640px) {
      height: 1700px!important;
  }
}
iframe::-webkit-scrollbar {
  display: none; 
}


  /*_________________________________________________________________

             FOOTER
________________________________________________________________  */

/* footer desktop */
@media only screen and (min-width: 921px) {
  /* logo alignment */
  .site-footer-section-1 {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .wp-block-uagb-image.footer-logo {
    justify-content: left;
  }
  /* donate button */
  .site-footer-section-2 .uagb-block-f392f939.uagb-buttons__outer-wrap .uagb-buttons__wrap {
    justify-content: right!important;
  }
}

/* footer tablet & mobile */
@media only screen and (max-width: 920px) {
      /* stack all elements */
      .ast-builder-grid-row-container.ast-builder-grid-row-mobile-full .ast-builder-grid-row {
        grid-template-columns: 1fr;
    }
}


.footer-logo img {
  @media only screen and (max-width: 920px) {
    max-width: 300px; 
  }
   @media only screen and (max-width: 767px) {
    max-width: 250px;
   }
}