/*
 Theme Name:   Confab Child
 Theme URI:    http://example.com/example-child/
 Description:  Confab Child Theme
 Author:       RayoflightThemes
 Author URI:   http://rayoflightthemes.com
 Template:     confab
 Version:      1.0.0
 Tags: gray, white, light, right-sidebar, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-menu, featured-images, post-formats, sticky-post, translation-ready
, page-builder
 Text Domain:  confab-child
 Theme Name: RT Confab Child
Template: rt-confab
*/




/* Use a more specific path to force the override of the logo in the top menu

html body nav.navbar .navbar-brand img,
body .navbar-brand img {
    max-width: 80px !important;
    
    
    body { outline: 5px solid red !important; }
 
}*/

/*********************
change the colors of the menu as requested by client
**********************/

/* Hover Background Only */
html body #menu-culture-club-menu li.menu-item a:hover {
    background-color: #262d5b !important; /* Change to your hover Hex color */
    color:white;
}



/* Target only the active page background color */
html body #menu-culture-club-menu li.current-menu-item a,
html body #menu-culture-club-menu li.current-page-ancestor > a {
    background-color: #262d5b !important; 
    color: #ffffff !important;           
}


/**********************
change the colors of the dynamic ribbon on home page as requested by client*******************/


/* use brute force to Force background on the inner container  for above*/
html body .scroll-text1-container {
    background-color: #262d5b !important;
  
}

/* Text Color and Font Styles for above*/
html body #scrollText div {
    color: #ffffff !important;          
}

/* make the border on top and bottom white insted of black- for above*/
.scroll-text2-container {
    border-top-color: #ffffff !important;    /* top border white */
    border-bottom-color: #ffffff !important; /* bottom border white */
}

/* remove the icon alltogether on the  i.e scroll text on the home page for above*/


.scroll-text2-img {
    visibility: hidden !important;      /* keeps element invisible but in layout */
    display: inline-block !important;   /* ensures it takes space */
    margin-left: 20px !important;       /* space on the left */
    margin-right: 20px !important;      /* space on the right */
}


/* change the footer background */
.footer1-wrapper,
.footer1-wrapper-bg {
  background: #121735 !important;
}

/* ccccc*/

.tec-events-elementor-event-widget__navigation--subnav {
    display: block !important;
}

.tec-events-elementor-event-widget__navigation--subnav li {
    display: block !important;
}


/**********************
change the colors of the dynamic ribbon on on other pages it was calendar ic*******************/

#scrollText i.fa-solid.fa-calendar {
    display: none !important; /* hides the icon completely */
}


/**********************
change button in the top menu to blue as per branding guidelines. the class was called "third-color" before now I changed it to "blue-menu"*******************/


button.custom-button1.button-medium.blue-menu,
a.custom-button1.button-medium.blue-menu:link,
a.custom-button1.button-medium.blue-menu:visited {
  color: #262d5b !important;
  border: 1px solid #262d5b !important;
 background-color: white !important;
}


/*reverse colors on hover*/
button.custom-button1.button-medium.blue-menu:hover,
a.custom-button1.button-medium.blue-menu:hover {
  color: white !important;
  background-color: #262d5b !important;
}



/**********************
change button "third color" to blue as per branding guidelines t*******************/


button.custom-button1.wide,
a.custom-button1.wide:link,
a.custom-button1.wide:visited {
  background-color: #262d5b !important;
  color: #ffffff !important;
}

button.custom-button1.wide:hover,
a.custom-button1.wide:hover {
 color: #e91a44 !important;
}

body .list1.list1-grey h3,
body .list1.list1-grey .list1a {
  font-weight: normal !important;
}



/**********************
reverse boldness on the portfolio boxes highlight text
*******************/

.list1 h3 {
    
    font-weight: 900!important;
    
}


.list1 .list1a  h3{
    
    font-weight: 900!important;
   font-size: 40px!important;
    
}

.list1 h4{
    
    font-weight: normal !important;
    
    
}


/***********************
change the colors of the social media icons in the menu
*******************/

 .social-icon-blue i {
  color: #262d5b !important;
 
}

 .social-icon-blue a {
  border: 1px solid #262d5b !important;  /* blue border */
       /* circular */
}
 
/* reverse colors of the above on hover*/
 .social-icon-blue:hover i {
  color: #fff !important;
}

.social-icon-blue:hover a {
  background-color: #262d5b !important;
  border: 1px solid #fff !important;
} 




/* Hide the raw text node “Free” after the span xxxxxxxxxxxxxFREE still struggling*/

/* Hide any text inside the parent except the span this is to hide "price"*/

.event-one-right-price {
    content: "" !important;
    display: none !important;
}

.event-one-right-price::after {
    content: "Free" !important;     /* add text to pseudo-element */
    color: #262d5b !important;      /* font color blue */
    display: inline !important;     /* make it visible */
    margin-left: 4px;               /* optional spacing */
}




/**********************
force the footer not to stack things under each other but just minimize on smaller screens
*******************/

/* trying to add some margins on right and left to the whole site content is too close to the edges -it is working but the site looks bad

body{
    margin-right:100px;
    margin-left:100px;
}
 */