/*
Theme Name: 	BuddyBoss Child
Theme URI: 		https://www.buddyboss.com/
Description: 	A child theme of BuddyBoss Theme. To ensure easy updates, make your own edits in this theme.
Author: 		BuddyBoss.com
Author URI: 	https://www.buddyboss.com/
License: 		GNU General Public License v3 or later
License URI: 	http://www.gnu.org/licenses/gpl-3.0.html
Template: 		buddyboss-theme
Version: 		1.0.1
*/

/*

-- Stylesheet locations --

Add your own customizations into /css/custom.css in this child theme.

Parent styles are called from /buddyboss-theme/inc/theme/functions.php in the 
parent theme and are located in /buddyboss-theme/assets/css/ in the parent theme.


--- If you are editing CSS via the WordPress admin, do the following ---

1. Install the plugin WP Editor: http://wordpress.org/plugins/wp-editor/
2. Navigate to Appearance > Theme Editor in the WordPress admin.
3. Navigate into the /css/ folder of your child theme to edit custom.css.

*/
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Inter:wght@100..900&display=swap');

// <uniquifier > : Use a unique and descriptive class name
// <weight > : Use a value from 100 to 900

.inter-<uniquifier > {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings: "slnt" 0;
}


.crimson-text-regular {
    font-family: "Crimson Text", serif;
    font-weight: 400;
    font-style: normal;
}

.crimson-text-semibold {
    font-family: "Crimson Text", serif;
    font-weight: 600;
    font-style: normal;
}

.crimson-text-bold {
    font-family: "Crimson Text", serif;
    font-weight: 700;
    font-style: normal;
}

.crimson-text-regular-italic {
    font-family: "Crimson Text", serif;
    font-weight: 400;
    font-style: italic;
}

.crimson-text-semibold-italic {
    font-family: "Crimson Text", serif;
    font-weight: 600;
    font-style: italic;
}

.crimson-text-bold-italic {
    font-family: "Crimson Text", serif;
    font-weight: 700;
    font-style: italic;
}


.top-bar {
    min-height: 50px;
    background-color: #120d31;
    color: #fff;
}

.is-uppercase
{
    text-transform: uppercase!important;
}
.topbar-link{
    color: #fff!important;
    font-size: .8rem!important;
}

.topbar-link a{
    color: #fff!important;
    font-size: .8rem!important;
}

.topbar-text{
    color: #fff!important;
    font-size: .8rem!important;
}

h1, h2, h3, h4, h5 {
    font-family: "Crimson Text", serif;
    font-weight: 400!important;
    font-size: large;
}




body, p {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.title {
    font-weight: 400 !important;
}

.has-text-white{
    color:#fff!important;
}

.has-text-120d31 {
    color:#120d31!important;
}

.is-capitalized{
    text-transform: uppercase!important;
}

.border-bottom-fff {
    border-bottom: 1px solid #fff !important;
    display: inline-block;
}

.border-bottom-120d31 {
    border-bottom: 1px solid #120d31!important;
    display: inline-block;
}

.about-cariphil {
    background-color: #0780BB;
    color: #fff;
}

.headers-white-text {
    font-size: 1.8rem;
    border-bottom: 1px solid #fff;
    display: inline-block;
    line-height: 1.8rem;
}

.section-sub-text {
    color: #fff;
   
    line-height:normal;
    display:inline;
}

.project-text {
    color: #fff !important;
    font-size: 1.8rem!important;
    line-height:1.8rem;
    padding: 10px;
}

.spacer-15 {
    min-height: 15px;
}

.spacer-35 {
    min-height:35px;
}

.spacer-85 {
    min-height:85px;
}


.guiding-p {
    background: #120d31;
    color: #fff;
}


.custom-section-text {
    
    font-size:1rem;

}

.whyj {
    font-family: "Crimson Text", serif;
    font-size:1.5rem;
}




.projects-causes {
}

.projects-cause-title {
    font-size: 1.8rem !important;
    border-bottom: 1px solid #120D31 !important;
    display: inline-block;
    margin: auto;
    color: #120D31 !important;
    text-align: center;
}

/*navigation item*/
.navbar-item {
    font-size: .85rem !important;
    font-weight: bold;
}

.core-strategies {
    background-color: #120d31; /* Dark grey background */
    padding: 3rem 0;
    color: #fff !important;
}

.core-strategies-columns {
    position: relative;
}

.core-strategies-box {
    position: relative;
}

.core-strategies-box:nth-child(1) {
    border-right: 2px solid white;
    border-bottom: 2px solid white;
}

.core-strategies-box:nth-child(2) {
    border-bottom: 2px solid white;
}

.core-strategies-box:nth-child(3) {
    border-right: 2px solid white;
}

.inline-image {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px; /* Adjust the spacing between the text and image if necessary */
}

.whatwedo-tab-text{
    text-transform:uppercase!important;
     font-family: "Crimson Text", serif;
    font-weight: 400;
    font-style: normal;
}

/*button*/
.learn-more-white {
    display: inline-block;
    font-family: "Crimson Text", serif;
    font-size: .7rem;
    text-transform: uppercase;
    border-bottom: double black;
    letter-spacing: 5px;
}

a.learn-more-white{
    text-decoration:none;
    color: #fff;
}

.image.is-2by3 img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


.image.is-2by3 {
    position: relative;
    background-color: #0000FF!important; /* Blue background */
    padding: 10px; /* Space between image and background */
   
}

.areas-participation{
    text-align: center!important;
}

.ap2 {
    background-color: #f5f5f5;
    border-radius: 0px;
    box-shadow: 0px !important;
    min-height: 200px;
    padding: 35px;
    color: #120D31;
}

.ap3 {
    background-color: #f5f5f5;
    border-radius: 0px;
    box-shadow: 0px !important;
    min-height: 400px;
    padding: 35px;
    color: #120D31;
}


.ap2-icon{
    width:20%;
}

.ap3-icon{
    width: 8%;
}

.sdg-slider {
    background-color: #f5f5f5;
}

.metrics-section {
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
}

.metric-box {
    text-align: center;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 0px;
    /* border: 1px solid #4258ff;*/
    height: 230px; /* Fixed height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.metric-icon {
    margin-bottom: 10px;
    flex-shrink: 0;
}
.icon-4-metric{
    width: 35%!important;
}

.icon-3-metric {
    width: 45% !important;
}

.metric-number {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 5px;
    color: #120d31!important;

}

.projects-causes {
    
    background: #120d31!important;
    color: #fff!important;
}

.metric-text {
    font-size: .95em;
    flex-grow: 1;
    display: flex;
    align-items: center;
    color: #120d31 !important;
}

.cariphil-blue-text{
    color: #0780BB;
}

/* full width images for about Cariphill Column */
.about-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  /*  background-color: #0780BB */
  background-color: #4258ff;
    color: #fff;
}

.content-column {
    flex: 1;
   
    box-sizing: border-box;
}

.image-column {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin-right: -1rem; /* Adjust margin to push the images to the edge */
}

.image-wrapper {
    flex: 1 1 50%; /* Ensure two images side by side */
   
    box-sizing: border-box;
}

    .image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

@media (max-width: 1024px) {
    .image-column {
        position: static;
        width: 100%;
        margin-right: 0;
        order: -1;
    }

    .content-column {
        width: 100%;
        order: 1;
    }

    .image-wrapper {
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
    }

    .image-column {
        order: 1;
    }

    .content-column {
        order: 2;
    }

    .image-wrapper {
        flex: 1 1 100%;
    }
}
/*end of full width images*/

button {
    border-radius: 0 !important;
    
    padding: 2.5rem;
}

.button{
    border-radius:0px;
}

.subtitle-top.has-text-centered {
    text-align: center;
}

/* slider */

.swiper-container {
    width: 100%;
    padding: 2rem 0;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-square {
    width: 100px;
    height: 100px;
}

/* end of slider */



.custom-column-2 {
    height: 450px;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    background-size: cover !important;
    color: #fff !important;
}

    .custom-column-2 .overlay {
        background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 100%; /* Make the overlay cover the entire column */
        padding: 20px;
    }

        .custom-column-2 .overlay .content-wrapper {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
        }

            .custom-column-2 .overlay .content-wrapper h2,
            .custom-column-2 .overlay .content-wrapper p {
                margin: 0 0 15px;
            }

            .custom-column-2 .overlay .content-wrapper button {
                align-self: center;
                margin-top: auto;
            }





.why-join {
    background: url('../img/women_in_training_session_listening.png') no-repeat;
    min-height:550px;
    background-size: cover;
    background-position: center;
}

.why-join-box {
    background-color: #120d31;
    min-height: 355px;
    padding: 35px;
    color: #fff;
}


.why-join-icon {
    width: 35px;
  
    margin-right: 15px;
}

.why-join-box ul {
    list-style-type: none;
    padding: 0;
}

.why-join-box li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.why-join-box .custom-section-text {
    flex: 1;
}

.subtitle-top{
    letter-spacing: 10px;
}

/*calendar of events*/
.event-calendar {
    background-color: #4258ff;
    border: 1px solid #ddd;
}
.event-card {
    min-height: 300px !important;
    
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 10px;
    border-radius: 0px;
    margin-bottom: 20px;
    color: #fff;
}

.event-date {
    font-size: 1.2em;
    text-align: left;
    margin-bottom: 10px;
}

    .event-date .month {
        font-weight: bold;
    }

    .event-date .day {
        font-size: 2em;
        font-weight: bold;
    }

.event-name {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
}

.event-description {
    margin-bottom: 10px;
}

.event-time-location {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.event-time, .event-location {
    display: flex;
    align-items: center;
}

    .event-time i, .event-location i {
        margin-right: 5px;
    }

.more-info-btn {
    margin-top: auto;
    display: block;
    width: 100%;
    text-align: center;
}

/* footer*/
.footer {
    background-color: #120d31!important;
    color: #fff;
    padding: 2rem 1.5rem;
}

.footer-columns .column:first-child {
    flex: 2; /* Make the first column the widest */
}

.footer-columns ul {
    columns: 2; /* Split unordered list into 2 columns */
}

/* about us */
/* Basic styling for the About Us section */
.about-section {
    padding: 4rem 0;
}

.join-us-cta {
    background: url('../img/realsitc_group_of_african_american_women_collabo.png') no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 250px;
}


.kb-cta {
    background: url('../img/blue_technology_focused_background.png') no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 250px;
}





.join-us-about-cta-textbox {
    background: #fff;
    min-height: 150px;
    width: 100%;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.join-us-about-cta-text {
    font-family: "Crimson Text", serif !important;
    font-size: 1.2rem;
}


/* Style the tick list */
.tick-list {
    list-style: none; /* Remove default bullets */
    padding-left: 0; /* Remove default left padding */
}

    .tick-list li {
        position: relative; /* For positioning the tick */
        padding-left: 25px; /* Add space for the tick */
    }

        .tick-list li::before {
            content: '\2713'; /* Unicode for checkmark */
            position: absolute;
            left: 0;
            top: 0;
        }


.column-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ddd;
    padding: 20px;
    transition: transform 0.3s;
    min-height: 450px;
}

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

.title-label, .description-label {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    background: #fff;
}

.description-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(18, 13, 49, .9);
    color: white;
    transition: max-height 0.3s ease-in-out;
    overflow: hidden;
    max-height: 50px; /* Initial height of the description */
    padding: 10px;
    text-align: center;
}

.column-box:hover .description-label {
    max-height: 400px; /* Expand height on hover */
}

.clbox-1 {
    background: url('../img/convening.png') no-repeat;
    background-position: center;
    background-size: cover;
}

.clbox-2 {
    background: url('../img/harnessing.png') no-repeat;
    background-position: center;
    background-size: cover;
}

.clbox-3 {
    background: url('../img/creating.png') no-repeat;
    background-position: center;
    background-size: cover;
}

.clbox-4 {
    background: url('../img/facilitating.png') no-repeat;
    background-position: center;
    background-size: cover;
}

/*tabs*/
    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
    }


.core-1{
    
    border:2px solid #fff;
    color:#fff;
}

.core-color-1
{
    background: #120d31;
}

.core-color-2{
    background: #413d5a;
}

.core-color-3{
    background: #716e83;
}

.core-color-4{
    background: #007aff;
}

.core-color-5{
    background: #0055b3;
}

/* donut infographic */

 .donut-chart-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
    }

    .chart {
      width: 50%;
    }

    .details {
      width: 50%;
      padding: 20px;
      border-left: 2px solid #ddd;
    }

    .details h2 {
      margin-bottom: 10px;
    }

    .details p {
      margin-bottom: 0;
    }

     .arc text {
      font-size: .8rem;
      font-weight: normal;
      fill: #000;
      text-align: center;
     
  overflow-wrap: break-word;
    }

/* Staff */
   .staff-section {
      padding: 50px 0;
    }

    .staff-card {
      position: relative;
      overflow: hidden;
      border-radius: 0px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
      background-color: #f5f5f5;
    }

    .staff-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .staff-card img {
      width: 100%;
      height: auto;
      display: block;
      border-bottom: 2px solid #ddd;
    }

    .staff-card-content {
      padding: 20px; 
      position: relative;
      background:#fff;
      color: #120d31;
    }

    .staff-card-content h3 {
      font-size: 1.1rem;
    }

    .staff-card-content p {
    font-size:.85rem;
    }

    .staff-card-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: -1;
    }

    .staff-card-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .staff-card:hover .staff-card-overlay {
      opacity: 1;
    }

    .modal {
      display: none;
    }

    .modal.active {
      display: flex;
    }

    .modal-background {
      background-color: rgba(10, 10, 10, 0.86);
    }

    .modal-content {
      background: white;
      padding: 20px;
     
      max-width: 700px;
      width: 100%;
    }

    .modal-close {
      top: 20px;
      right: 20px;
      font-size: 2rem;
      cursor: pointer;
    }

#staff-details h3{
    border-bottom: 1px solid #120d31!important;
    text-transform: uppercase!important;
    font-size:1.5rem;
}

/*feature card*/

      .feature-card {
      padding: 0;
   
      border: 1px solid #ddd;
      border-radius: 0px;
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s;
      background: white;
      min-height: 430px;
    }

    .feature-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }


    .feature-title {
      background-color: #120d31;
      color: white; 
      margin:auto;
      display: flex;
      padding: 10px 20px;
      min-height: 70px;
       flex-direction: column;
   
    justify-content: center;
    }

    .feature-description {
      background-color: white;
      color: #666;
      padding: 20px;
    }

    .feature-row {
      margin-top: 2rem;
    }

    /* Animation */
    @keyframes fadeInUp {
      from {
        transform: translateY(20px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .feature-card {
      animation: fadeInUp 0.5s ease-out;
    }

    .box-why
    {
        background:#120d31!important;
        color: #fff!important;
        min-height: 200px;
        padding: 20px;
    }
    
    
    
/* Fees */
.fee-section {
            padding: 3rem 0;
            background-color: #f5f5f5;
            border-radius: 10px;
            margin-bottom: 2rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
.fee-section h1, .fee-section h2 {
    text-align: center;
}
.fee-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 1rem;
}
.fee-item {
    background-color: #fff;
    border-radius: 10px;
    padding: 1rem;
    margin: 0.5rem;
    flex: 1 1 calc(45% - 1rem);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.application-process {
    text-align: center;
    margin-top: 2rem;
}

    /* .organization-section {
            padding: 2rem 1rem;
        }*/
.organization-card {
    border-radius: 0px!important;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
   
}
.organization-card:hover {
    transform: translateY(-5px);
}
.organization-card img {
  
    object-fit: cover!important;
    max-height: 300px!important;
    object-fit: cover!important; 
    object-position:top"
    
}
.organization-content {
    padding: 1rem;
    background-color: #fff;
}
.organization-content .icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.organization-content h3 {
    margin-bottom: 0.5rem;
}
.organization-content p {
    margin-bottom: 0.5rem;
}

.cppt-col{

}

.cppt-solid-color-1 {
    background: #120d31;
    color: white;
     min-height: 275px;
 
}
.cppt-solid-color-2 {
    background-color: #413d5a;
    color: white;
 min-height: 275px;
}
.cppt-solid-color-3 {
    background-color: #007aff;
    color: white;
min-height: 275px;
}
.cppt-solid-color-4 {
    background-color: #0055b3;
    color: white;
 min-height: 275px;
}
.cppt-image-container {
  
}


.social-media-section {
background-color: #3273dc; /* Adjust as needed */
padding: 2rem 0;
text-align: center;
}
.social-media-icons a {
color: white;
margin: 0 1rem;
font-size: 2rem;
transition: color 0.3s ease;
}
.social-media-icons a:hover {
color: #ffdd57; /* Adjust as needed for hover effect */
}

.yir-col{
    min-height:250px;
}

/*
.core4-1{
   border: 2px #120D31 solid; 
   padding: 5px;
}


.core4-2{
   border: 2px #004999 solid; 
   padding: 5px;
}

.core4-3{
   border: 2px #66AFFF solid; 
   padding: 5px;
}

.core4-4{
   border: 2px #007AFF solid; 
   padding: 5px;
}

.core4-5{
   border: 2px #FFBA49 solid; 
   padding: 5px;
}*/
/* Ensure the submenu is positioned correctly */
.site-header .sub-menu {
    position: absolute; /* Make sure the submenu is positioned absolutely */
    top: 100%; /* Position the submenu directly below the main menu item */
    left: 0;
    z-index: 1000; /* Ensure the submenu has a higher z-index than the header */
}

/* Ensure the main menu items are positioned correctly */
.site-header .menu-item {
    position: relative; /* Ensure the main menu items are positioned relative to allow the submenu to be positioned absolutely */
}

/* Ensure the header has a lower z-index than the submenu */
.site-header {
    z-index: 10;
}
.navbar-link, a.navbar-item {
    background-color: hsla(221, 14%,calc(100% + 0%), 0);
    cursor: pointer;
    font-weight: 700;
}

.bb-mobile-header-wrapper
.bb-single-icon {
    display: none!important;
}