/*!
Theme Name: Animal Sanctuary
Theme URI: https://www.revolutionwp.com/products/animal-sanctuary
Author: revolutionwp
Author URI: https://www.revolutionwp.com/
Description: The Animal Sanctuary is a versatile WordPress theme expertly designed for various nonprofit organizations dedicated to animal care, including shelters, rescue centers, and wildlife sanctuaries that focus on endangered species and marine life. This theme caters not only to agencies involved in pet adoption and veterinary services but also to communities engaged in animal advocacy and welfare causes. With its clean, modern design, it effectively conveys your mission, featuring retina-ready visuals and a responsive layout for smooth browsing on any device. Built on a secure Bootstrap foundation and optimized for performance, the theme ensures quick loading times and easy customization without any technical expertise. Features like a striking banner, integrated call-to-action buttons, and interactive elements encourage trust and engagement with supporters. The social media integration enhances outreach, while its translation-ready functionality expands access to global audiences. Overall, the Animal Sanctuary theme provides a user-friendly solution for any animal welfare initiative, combining aesthetic appeal with essential functionality for nonprofit organizations, making it easier to receive donations, connect volunteers, and promote environmental protection.
Version: 1.3.2
Requires at least: 5.5
Tested up to: 7.0
Requires PHP: 5.6
License: GNU General Prefer License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: animal-sanctuary
Template: forest-safari
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, grid-layout, full-width-template, wide-blocks, editor-style, custom-background, custom-colors, custom-header, custom-logo, custom-menu, sticky-post, featured-images, footer-widgets, flexible-header, post-formats, theme-options, threaded-comments, translation-ready, rtl-language-support, education, photography, entertainment

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

:root {
  --container-width: 1400px;
  --primary-color: #1e212d;
  --secondary-color: #057357;
  --body-font: 'Open Sans', sans-serif;
}
body{
    background: #fff;
}
a{
    text-decoration: none;
    color: var(--primary-color);
}
.card-item a.read-btn, .wp-block-woocommerce-cart .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button{
    border-radius: 8px;
}
.site-branding .site-title a{
     color: var(--primary-color);
}
.site-branding .site-title a:hover{
     color: var(--secondary-color);
}
.header-menu-box{
    padding: 11px 0;
}
.header-button a{
    padding: 15px 26px;
    font-size: 14px;
    border-radius: 10px;
}
.header-info-right p{
    font-weight: 700;
    font-family: 'Quicksand', sans-serif;
}
.main-navigation ul#primary-menu>li>a, .main-navigation div#primary-menu>ul>li>a,
 .main-navigation ul#primary-menu li.current-menu-item a, 
 .main-navigation #primary-menu li.current_page_item a,
 .header-button a, .nav-box-header-left p, .top-box a,
 .main-slider-content-box p,.main-slider-button a, .main-expert-button a, #main-expert-wrap .aboutus-left p,
 #main-expert-wrap .aboutus-left h5, .main-about-button a{
    font-family: 'Quicksand', sans-serif;
}
.phone-box , .mail-box{
    border-left: 1px solid #dedede;
    padding-left: 20px;
}
.nav-box-header-right{
    width: 25%;
}
.nav-box-header-left{
    width: 75%;
}
.header-info-left{
    width: 35%;
}
.header-info-right{
    width: 65%;
}
.header-info-box p{
    color: var(--primary-color);
    font-weight: 600;
}
.header-info-box p i{
    font-size: 26px;
}
.main-slider-button a, .main-expert-button a{
    border-radius: 8px;
}
.header-menu-box{
    border-top: 1px solid #dedede;;
}
.main-slider-button a, .main-expert-button a{
    padding: 12px 28px;
    font-size: 14px;
}
.main-navigation ul#primary-menu>li>a, .main-navigation div#primary-menu>ul>li>a,
.main-navigation ul#primary-menu li.current-menu-item a, .main-navigation #primary-menu li.current_page_item a{
    font-weight: 700;
    text-transform: capitalize;
    font-size: 15px;
}
.nav-box-header-left p, .top-box a{
    font-weight: 400;
    font-size: 15px;
    padding: 0;
}
.header-info-box p{
    gap: 14px;
}
.top-box a:hover{
    color: #fff;
}
.aboutus-left{
  width: 38%;
  align-self: center;
}
.aboutus-center{
  width: 35%;
  align-self: center;
}
.aboutus-right{
  width: 25%;
  align-self: center;
}
#main-expert-wrap .aboutus-left h5{
    font-size: 18px;
    color: var(--secondary-color);
}
#main-expert-wrap .aboutus-left h3 {
    margin: 10px 0 10px;
    font-weight: 700;
    font-size: 29px;
    text-transform: capitalize;
}
#main-expert-wrap .aboutus-left p {
    color: rgb(30 33 45 / 70%);
    font-size: 15px;
    font-weight: 500;
    margin-top: 0;
}
.main-about-button a{
    display: inline-block;
    font-size: 14px;
    background: var(--primary-color);
    color: #fff;
    padding: 10px 19px;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: 600;
}
.box-image img{
    height: 420px;
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
}
.main-about-button a:hover{
    background: var(--secondary-color);
    color: #fff;
}
#main-expert-wrap .progress-block {
    max-width: 420px;
    margin: 0 auto;
}
#main-expert-wrap .progress-row {
    margin-bottom: 27px;
}
#main-expert-wrap .progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #232927;
    font-weight: 700;
    margin-bottom: 6px;
    font-family: 'Quicksand', sans-serif;
}
#main-expert-wrap .progress-value {
    font-size: 15px;
    color: #000;
    letter-spacing: 0.02em;
}
#main-expert-wrap .progress-bar {
    height: 8px;
    width: 100%;
    border-radius: 100px;
    background: #eaeaea;
    position: relative;
    overflow: hidden;
}
#main-expert-wrap .progress-fill {
    height: 8px;
    border-radius: 100px;
    background: #156759;
    width: 0;
    transition: width 0.8s cubic-bezier(.98,.18,.26,.84);
}
#main-expert-wrap .progress-divider {
    border-top: 2px dashed #e1bee7;
    margin: 24px 0 18px 0;
}
#main-expert-wrap .start-yr-box {
  position: relative;
  text-align: center;
}
#main-expert-wrap .satified-box{
  height: 220px;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
  background-color: var(--primary-color);
  position: relative;
  z-index: 99;
}
#main-expert-wrap .start-yr-content {
  position: absolute;
    color: #fff;
    text-align: center;
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -50%);
}
#main-expert-wrap .year-text {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
}
#main-expert-wrap .start-yr {
  font-size: 55px;
  font-weight: 700;
  position: relative;
  z-index: 9;
  font-family: 'Quicksand', sans-serif !important;
}
#main-expert-wrap .progress-row.last-bar{
    margin-bottom: 2em;
}
@media screen and (max-width: 1000px){
  
}
@media screen and (max-width: 767px){
    .header-info-box p{
        font-size: 12px;
    }
    .phone-box, .mail-box{
        border-left: none;
    }
    #main-expert-wrap .satified-box{
        height: 200px;
    }
    #main-expert-wrap .progress-label, #main-expert-wrap .progress-value{
        font-size: 12px;
    }
    #main-expert-wrap .aboutus-left h5{
        font-size: 15px;
    }
    #main-expert-wrap .aboutus-left h3{
        font-size: 24px;
    }
    #main-expert-wrap .aboutus-left p{
        font-size: 11px;
    }
    .header-button a, .main-slider-button a, .main-about-button a{
        padding: 10px 23px;
        font-size: 10px;
        border-radius: 7px;
    }
    .box-image img{
        height: 300px;
    }
    .nav-box-header-left p, .top-box a{
        font-size: 12px;
    }
    .aboutus-left, .aboutus-center, .aboutus-right{
        width: 100%;
    }
    .main-slider-content-box h3{
        font-size: 20px;
    }
    .main-slider-inner-box img{
        height: 300px;
    }
    .main-slider-content-box p, #main-slider-wrap .owl-nav{
        display: none;
    }
    .nav-box-header-left, .nav-box-header-right{
        width: 100%;
    }
    .main-header-wrap .flex-row{
        gap: 15px;
    }
}
@media screen and (min-width: 767px) and (max-width: 999px){
    .main-slider-content-box h3{
        font-size: 28px;
    }
    .aboutus-left, .aboutus-center, .aboutus-right{
        width: 30%;
    }
    #main-expert-wrap .flex-row{
        gap: 20px;
    }
    .main-slider-content-box p{
        font-size: 12px;
    }
    .nav-box-header-left, .nav-box-header-right{
        width: 50%;
    }
    .header-info-box p{
        font-size: 12px;
    }
    .phone-box, .mail-box{
        border-left: none;
    }
    #main-expert-wrap .satified-box{
        height: 200px;
    }
    #main-expert-wrap .progress-label, #main-expert-wrap .progress-value{
        font-size: 12px;
    }
    #main-expert-wrap .aboutus-left h5{
        font-size: 15px;
    }
    #main-expert-wrap .aboutus-left h3{
        font-size: 24px;
    }
    #main-expert-wrap .aboutus-left p{
        font-size: 11px;
    }
    .header-button a, .main-slider-button a, .main-about-button a{
        padding: 10px 23px;
        font-size: 10px;
        border-radius: 7px;
    }
    .box-image img{
        height: 400px;
    }
    .nav-box-header-left p, .top-box a{
        font-size: 12px;
    }
    .main-navigation{
        text-align: center;
    }
    .nav-box-header-left, .nav-box-header-right{
        justify-content: center;
    }
}
@media screen and (min-width: 999px) and (max-width: 1024px){
    .main-navigation li.menu-item-has-children:after, .main-navigation li.page_item_has_children:after{
        font-size: 11px;
    }
    .main-navigation ul#primary-menu>li>a, .main-navigation div#primary-menu>ul>li>a, .main-navigation ul#primary-menu li.current-menu-item a, .main-navigation #primary-menu li.current_page_item a{
        font-weight: 600;
        text-transform: capitalize;
        font-size: 12px;
    }
    .main-navigation ul{
        gap: 35px !important;
    }
    .main-slider-inner-box img{
        height: 500px;
    }
    .main-slider-content-box h3{
        font-size: 28px;
    }
    .aboutus-left, .aboutus-center, .aboutus-right{
        width: 30%;
    }
    #main-expert-wrap .flex-row{
        gap: 20px;
    }
    .main-slider-content-box p{
        font-size: 12px;
    }
    .nav-box-header-left, .nav-box-header-right{
        width: 50%;
    }
    .header-info-box p{
        font-size: 12px;
    }
    .phone-box, .mail-box{
        border-left: none;
    }
    #main-expert-wrap .satified-box{
        height: 200px;
    }
    #main-expert-wrap .progress-label, #main-expert-wrap .progress-value{
        font-size: 12px;
    }
    #main-expert-wrap .aboutus-left h5{
        font-size: 15px;
    }
    #main-expert-wrap .aboutus-left h3{
        font-size: 24px;
    }
    #main-expert-wrap .aboutus-left p{
        font-size: 11px;
    }
    .header-button a, .main-slider-button a, .main-about-button a{
        padding: 10px 23px;
        font-size: 10px;
        border-radius: 7px;
    }
    .box-image img{
        height: 400px;
    }
    .nav-box-header-left p, .top-box a{
        font-size: 12px;
    }
}
@media screen and (min-width: 901px) {
    .main-navigation ul {
        gap: 50px;
    }
}