/*!
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 crafted for various organizations and non-profit groups dedicated to animal care, such as shelters, rescue centers, and wildlife sanctuaries, including those focused on endangered species and marine life. This theme not only serves agencies involved in pet adoption and veterinary services but also supports communities engaged in animal advocacy and welfare. With a clean, modern design, it captures your mission with clarity, offering retina-ready visuals and a responsive layout for seamless 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 foster trust and engagement with supporters. The social media integration increases outreach, while its translation-ready functionality opens doors to global audiences. Overall, The Animal Sanctuary theme delivers an impactful, user-friendly solution for any animal welfare initiative, blending aesthetic appeal with essential functionality for non-profit organizations.
Version: 1.3
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;
    }
}