/*
Theme Name: Benevolent Pro Child
Theme URI: https://rarathemes.com/wordpress-themes/benevolent-pro/
Template: benevolent-pro
Author: Rara Theme
Author URI: https://rarathemes.com/
Description: Benevolent Pro is an easy to use, clean modern and flexible multipurpose theme. Although the theme was designed with nonprofit organizations in mind , the theme is very versatile and can be used by any business websites, digital agency, consultancy, corporate business, freelancers, and bloggers. The theme is SEO friendly with optimized codes, which make it easy for your site to rank on Google and other search engines. Benevolent Pro comes with several features to make user-friendly, interactive and visually stunning website. Such features include custom menu with Call to Action Button, advance full width slider, community section, Stats counter, Client Section, Banner with Call to Action Button (CTA), and social media. It has four footer area and a right sidebar and includes four custom widgets for the recent posts, popular posts, social media and the featured post. The theme is rigorously tested and optimized for speed and faster page load time and has a secure and clean code. The theme is also translation ready. Designed with visitor engagement in mind, Benevolent Pro helps you to easily and intuitively create professional and appealing websites. You can get free support in https://rarathemes.com/support-forum/, Documentation: https://docs.rarathemes.com/docs/benevolent-pro/ and check the demo at https://rarathemes.com/previews/?theme=benevolent-pro.
Tags: Blog,two-columns,right-sidebar,footer-widgets,education,custom-background,custom-menu,featured-image-header,featured-images,post-formats,threaded-comments,translation-ready,full-width-template,theme-options
Version: 1.4.8.1721725832
Updated: 2024-07-23 09:10:32
*/

/*
HELLLOOOOO! 
Welcome to the child theme for the OCC website.

This child theme can be renamed +  edited so that it can sit on top of any theme. 
    Just change the name next to 'Template: ' with the correct slug of 
    your new theme (you don't have to change the other fields, but it's helpful to fill them in).
    ** More on this can be found in the wordpress docs about child themes if you run into issues.

The child theme sits on top of any other css that the parent theme uses, so it can be changed.
*/

/*
    GLOBAL OCC COLORS 
    HSL = hue, saturation, lightness
*/

:root {
    --primary-color: hsl(173, 82%, 46%);
    --primary-color-reduced-saturation: hsl(173, 42%, 46%);
    --primary-color-to-off-white: hsl(173, 20%, 96%);

    --secondary-color: #494949; 
    --text-color: #a9a9a9;

    --shadow-color: hsl(220deg 60% 50%)
    /* --secondary-color: #2ecc71;
    --accent-color: #e74c3c;
    --text-color: #333333;
    --background-color: #ffffff; */
}

/*
    Custom button for posts with documents styles
*/


.scroll-button {
    font-family: Raleway; 
    font-weight: lighter;
    font-size: 1.125em;
    text-align: center;
    border-radius: 9999px;
    justify-content: center;
    position: absolute;
    left: 50%;
}


/* 
    WhatsApp chat bubble styles 
*/
.icon-container {
    position: fixed; 

    bottom: 70px; /* Distance from the bottom of the viewport */
    right: 10px; /* Distance from the right of the viewport */
    width: 60px; /* Width of the chat bubble */
    height: 60px;
    background-color: var(--primary-color-to-off-white);
    border-radius: 9999px;
    box-shadow: 0.8px 1.6px 1.6px var(--primary-color-reduced-saturation);
    z-index: 1; /* Places it on top of other elements */ 
    padding: 6px;
}
.icon-container img {
    padding: 2px; 
}