.elementor-kit-23396{--e-global-color-primary:#002D62;--e-global-color-secondary:#EDF4FF;--e-global-color-text:#6A6A6A;--e-global-color-accent:#FFFFFF;--e-global-color-7e3dd57:#000000;--e-global-color-08eca21:#7A7A7A;--e-global-color-ae63484:#2DC598;--e-global-color-f0fdae1:#414141;--e-global-color-6fedcf8:#333333;--e-global-color-ec84a4d:#9DCEE4;--e-global-color-7d2d56a:#ECECEC;--e-global-color-a2fa9f4:#40E0D0;--e-global-color-654e565:#F87060;--e-global-color-78a7dec:#FFD400;--e-global-color-040c7c9:#F4F4FF;--e-global-color-5adfbed:#FFD400;--e-global-color-1ed054f:#F4F4FF;--e-global-color-581ef34:#252835;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:500;--e-global-typography-9db7146-font-family:"Montserrat";--e-global-typography-9db7146-font-size:18px;--e-global-typography-9db7146-font-weight:700;--e-global-typography-9db7146-line-height:24px;color:var( --e-global-color-7e3dd57 );font-family:"Montserrat";}.elementor-kit-23396 button,.elementor-kit-23396 input[type="button"],.elementor-kit-23396 input[type="submit"],.elementor-kit-23396 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Montserrat";font-size:16px;font-weight:bold;line-height:20px;border-radius:4px 4px 4px 4px;padding:12.5px 32px 12.5px 32px;}.elementor-kit-23396 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1172px;}.e-con{--container-max-width:1172px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.primary {
    color: var(--e-global-color-primary);
}

/* HORIZONTALL SCROLLING CSS*/

/*INSTRUCTIONS FOR HORIZONTAL SCROLL ON POSTS BY THEAFRICANBOSS.COM
1. add the CSS class 'horizontally' to the posts element you want the effect applied to
2. if u want same post height, add CSS class'scrollingCol' to the column (not section) containing the posts
3. Add the CSS code below EITHER
- your CHILD THEME style.css file
- or add it to an HTML element you can place anywhere in your page with open style tag and closing style tag surrounding the code below
- or add it to the page custom CSS under Advanced tab in Page Settings where the posts are
*/


/* for post WIDTH on MOBILE, adjust the pixels below */

@media screen and (max-width: 726px) {
    .horizontally>div>div>article {
        max-width: 300px;
         /*width on desktop */
    }
}

/* for post WIDTH on DESKTOP, adjust the pixels below */
@media screen and (max-width: 1026px) {
    .horizontally>div>div>article {
        width: 400px;
         /*width on desktop */
    }
}


/* for SAME post HEIGHT on DESKTOP, adjust the pixels below */
@media screen and (max-width: 580px) {
   .scrollingCol .elementor-container {
         min-height: 455px;
    /* height on mobile */
    }
}

/* for your own custom swiping cursor, add a 36x36 png URL of your choosing in this format "cursor: url(https://theafricanboss.com/wp-content/uploads/2020/07/swipe-left-right-lg.png), ew-resize;" */
@media only screen and (max-width: 1026px) {
.horizontally ::after,
.horizontally ::before{
    content: '';
    width: 10px;
}
.horizontally>div {
    margin-left: -26px;
    margin-right: -16px;
    cursor: ew-resize;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.horizontally>div::-webkit-scrollbar {
    /*height: 4px;*/
}

.horizontally>div::-webkit-scrollbar-track {
    background: black;
    background: rgba(0, 0, 0, 0.1);
}

.horizontally>div::-webkit-scrollbar-thumb {
    background: black;
    background: rgba(0, 0, 0, 0.31);
}

.horizontally>div>div {
    display: flex !important;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}
}

/*////////////////////////////////////////////////*/
.numericTitle > *:not(before) {
    z-index: 2;
    position: relative;
}

.numericTitle:before {
        content: attr(data-number);
    /* background: black; */
    display: block;
    position: absolute;
    color: var(--e-global-color-primary);
    font-weight: 900;
    font-size: 50px;
    line-height: 61px;
    opacity: .3;
    top: -24px;
    left: -19px;
    z-index: 0;
}
.primary {
    color: var(--e-global-color-primary);
}

/* HORIZONTALL SCROLLING CSS*/

/*INSTRUCTIONS FOR HORIZONTAL SCROLL ON POSTS BY THEAFRICANBOSS.COM
1. add the CSS class 'horizontally' to the posts element you want the effect applied to
2. if u want same post height, add CSS class'scrollingCol' to the column (not section) containing the posts
3. Add the CSS code below EITHER
- your CHILD THEME style.css file
- or add it to an HTML element you can place anywhere in your page with open style tag and closing style tag surrounding the code below
- or add it to the page custom CSS under Advanced tab in Page Settings where the posts are
*/


/* for post WIDTH on MOBILE, adjust the pixels below */

@media screen and (max-width: 726px) {
    .horizontally>div>div>article {
        max-width: 300px;
         /*width on desktop */
    }
}

/* for post WIDTH on DESKTOP, adjust the pixels below */
@media screen and (max-width: 1026px) {
    .horizontally>div>div>article {
        width: 400px;
         /*width on desktop */
    }
}


/* for SAME post HEIGHT on DESKTOP, adjust the pixels below */
@media screen and (max-width: 580px) {
   .scrollingCol .elementor-container {
         min-height: 455px;
    /* height on mobile */
    }
}

/* for your own custom swiping cursor, add a 36x36 png URL of your choosing in this format "cursor: url(https://theafricanboss.com/wp-content/uploads/2020/07/swipe-left-right-lg.png), ew-resize;" */
@media only screen and (max-width: 1026px) {
.horizontally ::after,
.horizontally ::before{
    content: '';
    width: 10px;
}
.horizontally>div {
    margin-left: -26px;
    margin-right: -16px;
    cursor: ew-resize;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.horizontally>div::-webkit-scrollbar {
    /*height: 4px;*/
}

.horizontally>div::-webkit-scrollbar-track {
    background: black;
    background: rgba(0, 0, 0, 0.1);
}

.horizontally>div::-webkit-scrollbar-thumb {
    background: black;
    background: rgba(0, 0, 0, 0.31);
}

.horizontally>div>div {
    display: flex !important;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}
}

/*////////////////////////////////////////////////*/
.numericTitle > *:not(before) {
    z-index: 2;
    position: relative;
}

.numericTitle:before {
        content: attr(data-number);
    /* background: black; */
    display: block;
    position: absolute;
    color: var(--e-global-color-primary);
    font-weight: 900;
    font-size: 50px;
    line-height: 61px;
    opacity: .3;
    top: -24px;
    left: -19px;
    z-index: 0;
}
@media screen and (max-width: 768px) {
.mickmenu .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
overflow-x: scroll;
-webkit- -scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.elementor-nav-menu::-webkit-scrollbar {display:none;}
}/* End custom CSS */