@charset "UTF-8";
/*
Theme Name: Dog Breeder
Author: TheMagnifico52
Theme URI: https://www.themagnifico.net/themes/free-dog-wordpress-theme
Author URI: https://www.themagnifico.net/
Description: Dog Breeder is the cutest, clean, fresh and modern animal care theme ever! It is suitable for pet grooming, Pet Shelter, Veterinary Clinic, animal breeding, pets for sale, cat adoption, kennels, pet sitting, pet hotel, animal husbandary, pet salon, pet resort, pet store and all other pet related services and businesses. It is packed with plenty of premade blocks for dog sale and adoption. You can also find review blocks, separate page for each particular breed or puppy and custom order or contact forms. It is quite flexible for infinite customization and full compatibility with a variety of popular plugins like: Essential Grid, WooCommerce and more. You can translate its pages into numerous languages and it also has support for RTL layout. Tons of shortcodes are available that you can add to increase the functionality of your website. It is regularly updated to always be compatible with the latest WordPress version. It is cross-browser compatible that loads smoothly without any glitches on all major search engines. Your website will rank soon on search engines as it is SEO-friendly theme. Also, it is responsive to fit well on all devices screen sizes.
Version: 0.6.1
Tested up to: 6.8
Requires PHP: 7.2
Requires at least: 5.0
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: pet-care-zone
Text Domain: dog-breeder
Tags: three-columns, four-columns, translation-ready, custom-logo, one-column, two-columns, wide-blocks, block-styles, editor-style, sticky-post, custom-background, custom-colors, custom-header, custom-menu, footer-widgets, featured-images, flexible-header, full-width-template, threaded-comments, theme-options, rtl-language-support, left-sidebar, right-sidebar, grid-layout, blog, e-commerce, education

Dog Breeder WordPress Theme has been created by TheMagnifico52(themagnifico.net), 2022.
Dog Breeder WordPress Theme is released under the terms of GNU GPL
*/

/*--------------------------------------------------------------
# Global Color
--------------------------------------------------------------*/

:root {
  --first-color: #3c78b3;
  --second-color: #f09d18;
}

.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link,button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained,button.wc-block-components-button.wp-element-button.wc-block-components-totals-coupon__button.contained,a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained,.sidebar h5, .sidebar .wp-block-search .wp-block-search__label, .sidebar .widget h2.wp-block-heading,.top-info,.comment-respond input#submit,#colophon,.sidebar h5,#button,.sidebar input[type="submit"], .sidebar button[type="submit"],.sidebar .tagcloud a:hover,.post-navigation .nav-previous a:hover, .post-navigation .nav-next a:hover, .posts-navigation .nav-previous a:hover, .posts-navigation .nav-next a:hover,.woocommerce .woocommerce-ordering select,.pro-button a, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,.woocommerce-account .woocommerce-MyAccount-navigation ul li,.toggle-nav i,span.onsale,.addtocart a:hover,.social-link i.fab.fa-linkedin-in,.woocommerce a.added_to_cart, .load hr, .navigation.pagination .nav-links a.current, .navigation.pagination .nav-links a:hover, .navigation.pagination .nav-links span.current, .navigation.pagination .nav-links span:hover{
    background: var(--first-color);
}
button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained,button.wc-block-components-button.wp-element-button.wc-block-components-totals-coupon__button.contained,a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained{
    border:0px;
    color: #ffffff;
}
.product-content h3 a:hover, .page-template-home-template .navbar-brand a:hover, .navbar-brand a:hover, .slider-inner-box h1 a:hover, h1, h2, h3, h4, h5, h6,.article-box a,.sidebar ul li a:hover,p.price, .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price{
    color: var(--first-color);
}
.btn-primary,.post-navigation .nav-previous a:hover, .post-navigation .nav-next a:hover, .posts-navigation .nav-previous a:hover, .posts-navigation .nav-next a:hover,.addtocart a:hover, .navigation.pagination .nav-links a.current, .navigation.pagination .nav-links a:hover, .navigation.pagination .nav-links span.current, .navigation.pagination .nav-links span:hover{
    border-color: var(--first-color);
}
.wp-block-quote, .wp-block-quote:not(.is-large):not(.is-style-large), .wp-block-pullquote{
    border-color: var(--first-color) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li:hover, .btn-primary,#button,.topbtn,.main-navigation .sub-menu > li > a:hover, .main-navigation .sub-menu > li > a:focus,.pro-button a:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,.woocommerce ul.products li.product .onsale, .woocommerce span.onsale,#button:hover,.woocommerce a.added_to_cart:hover{
    background: var(--second-color);
}
.sidebar section {
    padding: 10px;
}
#colophon a:hover, #colophon a:focus,a{
    color: var(--second-color);
}
.article-box a:hover{
  color: #033e4f;
}
.featured-cat a:hover{
    color: #000;
}
.page-template-home-template .main_header {
    width: 100%;
    z-index: 9999;
    background: #b2b2b2;
}
.page-template-home-template #site-navigation .menu ul li a, .page-template-home-template .main-navigation .menu > li > a,.page-template-home-template .navbar-brand a,.page-template-home-template .navbar-brand p{
    color: #fff;
}
.navigation_header .nav{
    justify-content: flex-end;
}
.main-navigation .menu > li > a:hover, #site-navigation .menu ul li a:hover{
    color: var(--first-color);
}
.main-navigation ul.sub-menu > li > a:hover, .main-navigation ul.sub-menu > li > a:focus {
    background: var(--first-color);
    color: #fff !important;
}
.social-link i.fas.fa-shopping-cart:hover {
    color: #fff;
}
.box-category {
    position: relative;
    text-align: center;
}
.box-category img {
    width: 100%;
}
.featured-cat {
    position: absolute;
    bottom: 30px;
    right: 30px;
    left: 30px;
    background: var(--first-color);
    padding: 15px;
}
.featured-cat h4{
    font-size: 20px;
}
.featured-cat a {
    color: #fff;
    font-family: 'Roboto', sans-serif;
}

.top-info p:hover a{
    color: var(--second-color);
}
.top-info p:hover i{
    color: var(--second-color);
}
.topbtn:hover{
  background-color: #ffffff;
}
.topbtn:hover a{
    color: var(--first-color);
}
.social-link i:hover {
    background: var(--first-color) !important;
}
input.search-submit.btn.btn-primary{
    background: var(--first-color);
}
.page-content input.search-submit.btn.btn-primary.mb-2 {
    background: var(--first-color);
    border-color: var(--first-color);
}
#top-slider .owl-nav i{
    background: var(--first-color);
}
@media screen and (min-width: 320px) and (max-width: 720px){
    .page-template-home-template .main_header{
        position: static;
    }
    .slider-inner-box {
        right: 15%;
    }
	
}
@media screen and (max-width: 1000px){
    .sidenav .closebtn{
        background: var(--first-color);
    }
    .main-navigation ul.sub-menu > li > a:hover, .main-navigation ul.sub-menu > li > a:focus, .main-navigation .menu > li > a:hover {
        background: transparent;
        color: var(--first-color) !important;
    }
    .product-content p, .product-content span.onsale{
        display: none;
    }
}
@media screen and (max-width: 720px){
    .slider-inner-box h1 a {
        font-size: 22px;
    }

}
@media screen and (min-width: 320px) and (max-width: 575px){
    .slider-box img{
        height: 200px;
    }
}
@media screen and (min-width: 576px) and (max-width: 768px){
    .slider-box img{
        height: 370px;
    }

    .slider-inner-box {
        right: 35%;
    }
}

#skip-content{
    max-width: 100%!important;
  }
#masthead {
  margin-bottom: 0px!important;
}
.front-header-container {
    position: relative; /* Це дозволяє тексту "прив'язатися" до рамок контейнера */
    width: 100%;
    display: block;
    margin-bottom: 3%;
}

.front-header-image {
    width: 100%;
    height: auto; /* Картинка диктує висоту всього блоку */
    display: block;
}

.header-text-overlay {
    position: absolute;
    
    /* Центрування по вертикалі */
    top: 50%;
    transform: translateY(-50%);
    
    /* Зміщення трохи ліворуч від центру */
    left: 10%; /* Регулюй цей відсоток, щоб змістити текст лівіше або правіше */
    
    width: 40%; /* Обмежуємо ширину тексту, щоб він не розповзався на всю картинку */
    color: white; /* Зміни колір під своє фото */
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5); /* Додаємо тінь, щоб текст читався на будь-якому фоні */
    pointer-events: none; /* Щоб текст не заважав клікати на картинку, якщо потрібно */
}
@media (max-width: 991px) {
    .navbar-header {
        float: none;
        display: block;
        position: relative;
        z-index: 100000;
    }
    
    button.navbar-toggle {
        z-index: 100001;
        position: relative;
    }
}
/* МАШТАБУВАННЯ ТЕКСТУ */
.header-title {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    /* vw робить шрифт залежним від ширини екрану */
    font-size: 4vw; 
    line-height: 1.1;
    font-weight: bold;
	color: #fff;
	font-family: 'Pacifico', cursive;
	transform: rotate(-6deg);
  margin-bottom: 13%;
  
}

.header-subtitle {
    margin: 2% 0 0 0;
   font-size: 3.5vw;
  font-weight: bold;
  text-align: center;
}

/* Корекція для дуже малих екранів */
@media (max-width: 480px) {
    .header-text-overlay {
        left: 5%; /* На мобільних даємо трохи більше місця */
        width: 60%;
    }
.article-box img {
  max-height: 130px;
}
}
.front-footer-image{
width: 100%;
    height: auto; /* Це робить картинку ідеально адаптивною */
    display: block;
}
.video-promo-safe-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap; /* Тримаємо в один рядок */
        align-items: center;
        width: 100%;
        background: transparent;
        padding: 1% 0;
    }

    /* Лівий блок: задаємо гнучку, але стабільну ширину */
    .side-image {
        flex: 0 0 28%; /* Не росте, не стискається більше ніж на 28% ширини */
     /*   max-width: 350px;*/
    }

    .side-image img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Правий блок: забирає все місце, що залишилося */
    .side-content {
        flex: 1; 
        display: flex;
        justify-content: center; /* Центрує вміст у просторі, що залишився */
        padding: 0 2%;
    }

    /* Додаткова обгортка для тексту, щоб він не розповзався */
    .content-centered {
        width: 100%;
        max-width: 800px;
        text-align: center;
    }

    /* Масштабований текст */
    .m_pg_des_h2 {
        margin: 1.5% 0;
        color: #4c4c4c;
        font-family: 'Roboto', sans-serif;
        font-size: 2.2vw; /* Зменшується разом з екраном */
    }

    /* Рядок іконок */
    .social-icons-row {
        display: flex;
        justify-content: center;
        gap: 3%;
        margin: 2% 0;
    }

    .m_pg_des_a {
        width: 12%; 
        max-width: 90px;
        min-width: 40px; /* Захист від занадто малих іконок */
    }

    .m_pg_des_img {
        width: 100%;
        height: auto;
    }

    /* Корекція для малих екранів (планшети/телефони) */
    @media (max-width: 768px) {
        .m_pg_des_h2 {
            font-size: 3vw; /* Трохи збільшуємо відносний розмір тексту */
        }
        .side-image {
            flex: 0 0 32%; /* Даємо трохи більше місця картинці на мобільних */
        }
    }
    
    @media (max-width: 480px) {
        .m_pg_des_h2 {
            font-size: 3.5vw;
        }
        .social-icons-row {
            gap: 1.5%;
        }
	}
	
	
	.navbar-control-trigger{
		display:none!important;
	}
	
	.spoiler-head {
  background: #edfaff;
  border: none;
  box-shadow: 1px 1px 1px #c3e5f4;
}