@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');















:root {
    
    --primary: #333333ff;
    --secondary: #685688ff;

    --global-primary-color: #333333ff;
    --global-secondary-color: #685688ff;
    --global-highlight-color: #EB8207FF;
    --global-alert-color: #A40000FF;

    
    --heading-font: 'Open Sans', Arial, sans-serif;
    --general-font: 'Open Sans', Arial, sans-serif;

    
    --button-font: 'Open Sans', Arial, sans-serif;

    
    --global-font-alignment: center;

    
    --accodian-icon-primary: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333ff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --select-dropdown-icon-primary: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333333ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --checkbox-arrow-primary-color: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23333333ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --radio-circle-primary-color: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23333333ff'/%3e%3c/svg%3e");
    --radio-circle-secondary-color: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23685688ff'/%3e%3c/svg%3e");
    --modal-close-btn-primary-color: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333ff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");

    
    --primary-color-01-opacity:  #3333331a ;
    --secondary-color-01-opacity:  #6856881a ;
    --primary-color-02-opacity:  #33333333 ;
    --secondary-color-02-opacity:  #68568833 ;
    --primary-color-04-opacity:  #33333366 ;
    --secondary-color-04-opacity:  #68568866 ;
    --primary-color-06-opacity:  #33333399 ;
    --secondary-color-06-opacity:  #68568899 ;

    --primary-color-0-04-opacity:  #3333330a ;
    --secondary-color-0-04-opacity:  #6856880a ;
    --primary-color-12-opacity:  #3333331f ;
    --secondary-color-12-opacity:  #6856881f ;

    --border-radius: 0 !important ;
}

h1, h2, h3, h4, h5, h6,
.h1-theme-bold, .h2-theme-bold, .h3-theme-bold {
    font-family: var(--heading-font);
    color: var(--global-primary-color);
    
    
    
}

p{
    font-family: var(--general-font);
    color: var(--global-primary-color);
}


li{
    font-family: var(--general-font);
    color: var(--global-primary-color);
}


.disabled-block {
    pointer-events: none;
}

a, a:hover, a:focus, a:active{
    color: var(--global-secondary-color);
}


.theme-primary-btn,
.theme-secondary-btn,
.F1, .F2, .F3, .F4,
.O1, .O2, .O3, .O4{
    font-family: var(--button-font);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0.03em;
    padding: 10px 16px;
    text-decoration: None;
    text-align: center;
    white-space: normal;
}

.theme-btn-small{
    font-size: 14px !important;
    padding: 8px 2px;
    text-wrap: nowrap;
}

/* Media query for small screens */
@media (max-width: 767px) {
    .theme-btn-small{
        font-size: 14px !important;
    }
}


    .theme-primary-btn:disabled,
    .theme-secondary-btn:disabled
    {
        opacity: 0.6;
        pointer-events: none;
    }

    .pet-status{
        padding: 4px 12px;
        gap: 4px;
        position: absolute;
        left: 10px;
        top: 10px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(2px);
        color: var(--global-primary-color);
        font-family: var(--general-font);
    }

    .pet-image-slider-item-text{
        padding: 4px 12px;
        gap: 4px;
        position: absolute;
        right: 12px;
        bottom: 20px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(2px);
        color: var(--global-secondary-color); 
    }

    
    
        .theme-primary-btn,
        .theme-primary-btn:disabled:hover,
        .theme-primary-btn:disabled:focus
        {
            background-color: var(--global-secondary-color);
            color: white;
            border: 2px solid var(--global-secondary-color);
        }

        .theme-primary-btn:hover, .theme-primary-btn:focus 
        {
            border: 2px solid var(--global-secondary-color);
            background-color: white;
            color: var(--global-secondary-color);
        }
        .svg-primary{
            fill: white; 
        }
        .theme-primary-btn:hover .svg-primary{
            fill: var(--global-secondary-color);
        }
    

    
    
        .theme-secondary-btn,
        .theme-secondary-btn:disabled:hover,
        .theme-secondary-btn:disabled:focus
        {
            background-color: white;
            color: var(--global-secondary-color);
            border: 2px solid var(--global-secondary-color);
        }

        .theme-secondary-btn:hover, .theme-secondary-btn:focus
        {
            background-color: var(--global-secondary-color);
            color: white;
        }
        .svg-secondary{
            fill: var(--global-secondary-color); 
        }
        .theme-secondary-btn:hover .svg-secondary{
            fill: white;
        }
    



.F1{
    background-color: var(--global-primary-color) !important;
    color: white !important;
    border: 2px solid var(--global-primary-color) !important;
}
.F2{
    background-color: var(--global-secondary-color) !important;
    color: white !important;
    border: 2px solid var(--global-secondary-color) !important;
}
.F3{
    background-color: white !important;
    color: var(--global-primary-color) !important;
    border: 2px solid white !important;
    box-shadow: 0px 1px 4px rgba(0, 63, 90, 0.06), 0px 2px 12px rgba(0, 63, 90, 0.15);
    backdrop-filter: blur(2px);
}
.F4{
    background-color: white !important;
    color: var(--global-secondary-color) !important;
    border: 2px solid white !important;
    box-shadow: 0px 1px 4px rgba(0, 63, 90, 0.06), 0px 2px 12px rgba(0, 63, 90, 0.15);
    backdrop-filter: blur(2px);
}

.F1:hover{
    background-color: white !important;
    color: var(--global-primary-color) !important;
}
.F2:hover{
    background-color: white !important; 
    color: var(--global-secondary-color) !important;
}
.F3:hover{
    background-color: var(--global-primary-color) !important;
    color: white !important;
}
.F4:hover{
    background-color: var(--global-secondary-color) !important;
    color: white !important;
}

.O1{
    background-color: white !important;
    color: var(--global-primary-color) !important;
    border: 2px solid var(--global-primary-color) !important;
}
.O2{
    background-color: white !important;
    color: var(--global-secondary-color) !important;
    border: 2px solid var(--global-secondary-color) !important;
}
.O3{
    background-color: white !important;
    color: black !important;
    border: 2px solid black !important;
}
.O4{
    background-color: rgba(0, 63, 90, 0.05) !important;
    color: white !important;
    border: 2px solid rgba(0, 63, 90, 0.05) !important;
    box-shadow: 0px 1px 4px rgba(0, 63, 90, 0.06), 0px 2px 12px rgba(0, 63, 90, 0.15);
    backdrop-filter: blur(2px);    
}

.O1:hover{
    background-color: var(--global-primary-color) !important;
    color: white !important;
}
.O2:hover{
    background-color: var(--global-secondary-color) !important; 
    color: white !important;
}
.O3:hover{
    background-color: black !important;
    color: white !important;
}
.O4:hover{
    background-color: white !important;
    color: rgba(0, 63, 90, 0.05) !important;
}



    
    .theme-primary-btn,
    .theme-secondary-btn,
    .F1, .F2, .F3, .F4,
    .O1, .O2, .O3, .O4,
    .co-note-btn,
    .co-note-btn-secondary
    {
        border-radius:  0  !important;
    }

    .video-shape,
    .card-shape,
    .image-shape
    {
        border-radius: 0px  !important;
    }

    .carousel-item-box-desc-title{
        border-radius:   0px 0px 0px 0px ;
    }

    .carousel-item-box-desc-sub-title{
        border-radius:   0px ;
    }

    .card-img-top{
        border-top-left-radius:  0px  !important;
        border-top-right-radius:  0px  !important;
    }

    .card-img-bottom{
        border-bottom-left-radius:  0px  !important;
        border-bottom-right-radius:  0px  !important;
    }

    .pet-price{
        border-radius: 0px  0px   0px 15px;
    }

    .pet-traits-bar .progress,
    .breed-traits-bar .progress
    {
        border-radius:  0px  ;
    }

    
    .breed-list-name-outer{
        border-radius: 8px;
    }

    
    .pet-image-slider-item-text,
    .pet-status,
    .filter-dropdown .dropdown-menu.show,
    .filter-dropdown button{
        border-radius:  0px  ;
    }

    
    .theme-form input,
    .theme-form textarea,
    .theme-form select{
        border-radius:  0px   !important;
    }

    
    .theme-form input[type="checkbox"]
    {
        border-radius:  0px   !important;
    }