/*  
	https://www.abudhabianimalshelter.com/
	main.css
	Last modified - 12 09 2024
*/

@font-face {
    font-family: "Circular Std";
    src: url("../fonts/CircularStd-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Circular Std";
    src: url("../fonts/CircularSpotifyText-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Circular Std";
    src: url("../fonts/CircularStd-Book.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Circular Std";
    src: url("../fonts/CircularStd-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --ff-adas: "Circular Std";
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
    --clr-blue: #0299cd;
    --clr-dark: #000000;
    --clr-text: #1e1e1e;
    --clr-green: #008a5e;
    --clr-red: #ea4335;
    --clr-yellow: #ffbf60;
    --clr-brown: #936d35;
    --clr-orange: #fcaa41;
    --clr-bg-body: #fffef9;
    --clr-yellow-light: #ffdcbb;
    --clr-yellow-lighter: #fff5e9;
    --clr-yellow-lighter-hover: #ffecda;
    --wrapper-max-size: 1680px;
    --wrapper-half: calc(var(--wrapper-max-size) / 2);
    --wrapper-inline-padding: 120px;
    --radius-30: 30px;
    --radius-20: 20px;
    --radius-10: 10px;
    --50: 50px;
    --40: 40px;
    --30: 30px;
    --20: 20px;
    --15: 15px;
    --10: 10px;
    --title-55: 55px;
    --title-50: 50px;
    --title-45: 45px;
    --title-40: 40px;
    --title-35: 35px;
    --title-30: 30px;
    --title-25: 25px;
    --nav-sidebar-width: 350px;
}

@media (max-width: 1600px) {
    :root {
        --wrapper-inline-padding: 80px;
        --title-55: 50px;
    }
}

@media (max-width: 1400px) {
    :root {
        --wrapper-inline-padding: 50px;
        --title-55: 40px;
        --title-50: 40px;
        --title-45: 35px;
        --title-40: 30px;
        --title-35: 30px;
        --title-30: 25px;
        --title-25: 20px;
    }
}

@media (max-width: 640px) {
    :root {
        --wrapper-inline-padding: 20px;
        --radius-30: 10px;
        --radius-20: 10px;
        --radius-10: 10px;
        --title-55: 30px;
        --title-50: 30px;
        --title-45: 30px;
        --title-40: 30px;
        --nav-sidebar-width: 300px;
    }
}

*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
}
body {
    position: relative;
    min-height: 100svh;
    font-family: var(--ff-adas);
    font-weight: var(--fw-regular);
    background-color: var(--clr-bg-body);
    color: var(--clr-dark);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: no-preference) {
    body {
        scroll-behavior: smooth;
    }
}

a {
    text-decoration: none;
}

ul,
ol,
li {
    list-style: none;
    padding: 0;
}

input,
button,
textarea,
select {
    font: inherit;
}

p:empty, a:empty {
    display: none;
}

img {
    border: none;
    outline: 0;
    display: block;
}

    img.fluid {
        max-width: 100%;
        height: auto;
    }

.img--cover,
.vid--cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    position: absolute;
    left: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .animate,
    .animate-loop {
        opacity: 0;
        transition: all 1s;
        will-change: transform;
    }

    .fade-in {
        opacity: 0;
        transition: opacity ease-in 200ms;
    }

    .animate-up {
        transform: translateY(100px);
    }

    .animate-down {
        transform: translateY(-100px);
    }

    .animate-up-lg {
        transform: translateY(150px);
    }

    .animate-delay-100 {
        transition-delay: 100ms;
    }

    .animate-delay-150 {
        transition-delay: 150ms;
    }

    .animate-delay-200 {
        transition-delay: 200ms;
    }

    .animate-delay-250 {
        transition-delay: 250ms;
    }

    .animate-delay-300 {
        transition-delay: 300ms;
    }

    @media (max-width: 860px) {
        .animate-up {
            transform: translateY(40px);
        }

        .animate-up-lg {
            transform: translateY(80px);
        }

        .animate-delay-100 {
            transition-delay: 30ms;
        }

        .animate-delay-150 {
            transition-delay: 50ms;
        }

        .animate-delay-200 {
            transition-delay: 80ms;
        }

        .animate-delay-250 {
            transition-delay: 100ms;
        }

        .animate-delay-300 {
            transition-delay: 120ms;
        }
    }

    .animated,
    .animate-looped {
        opacity: 1;
        transform: translate(0);
    }

    .fade-in.animated {
        opacity: 1;
    }
}

.wrapper {
    position: relative;
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--wrapper-inline-padding);
    max-width: calc( var(--wrapper-max-size) + calc(var(--wrapper-inline-padding) * 2) );
}

.wrapper--overflow {
    padding-inline: 0;
}

@media (max-width: 860px) {
    .wrapper--overflow--mob {
        padding-inline: 0;
        overflow-x: auto;
    }
}

.d__flex {
    display: flex;
}

.flex--center {
    justify-content: center;
    align-items: center;
}

.flex--column {
    flex-direction: column;
}

.flex--justify--center {
    justify-content: center;
}

.flex--align--start {
    align-items: start;
}

.flex--align--center {
    align-items: center;
}

.flex--align--end {
    align-items: end;
}

.flex--end {
    justify-content: end;
}

.flex--between {
    justify-content: space-between;
}

.flex--wrap {
    flex-wrap: wrap;
}

.d__grid {
    display: grid;
}

.grid--center {
    place-items: center;
    place-content: center;
}

.grid--start {
    justify-items: start;
}

.grid--align-start {
    align-content: start;
}

.w--100 {
    width: 100%;
}

.h--100 {
    height: 100%;
}
/* --------------- Header --------------- */

header {
    --header-b-size: 90px;
    --logo-max-size: 220px;
    --header-inline-p: 32px;
    --header-bg: rgba(255, 255, 255, 1);
    --header-radius: 20px;
    --header-sticky-top: 15px;
    --header-aside-gap: 25px;
    --header-adfh-logo-size: 190px;
    --header-aside-b-size: 42px;   
    --filter: 16px;
    --header-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
    position: fixed;   
    z-index: 99;
    left: 0;
    right: 0;
    padding-inline: var(--wrapper-inline-padding);
    transition: all ease-in-out 300ms;
}

.search-wrap {
    --search-inline-padding: 50px;
}

header .header__sticky {
    max-width: var(--wrapper-max-size);
    height: var(--header-b-size);
    background-color: var(--header-bg);
    border-bottom-left-radius: var(--header-radius);
    border-bottom-right-radius: var(--header-radius);
    padding-inline: var(--header-inline-p);
    backdrop-filter: blur(var(--filter));
    transition: all ease-in-out 300ms;
}

    header.scrolled .header__sticky {
        box-shadow: var(--header-shadow);
    }

@media (hover: hover) {
    header {
        --header-bg: rgba(255, 255, 255, 0.8);
    }

        header:hover {
            --header-bg: rgba(255, 255, 255, 1);
            --filter: 0px;
        }
}

header.header__up {
    top: -120px;
}

header .header__logo {
    max-width: var(--logo-max-size);
}

.header__end {
    gap: var(--header-aside-gap);
}

.managed__by {
    max-width: var(--header-adfh-logo-size);
}

    .managed__by img {
        grid-area: 1/1;
    }

    .managed__by .managed__by--AR {
        display: none;
    }

.lang,
.lang__nav {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.header__end a {
    transition: all ease-in-out 250ms;
}

.header__end .lang {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    background-color: white;
    color: var(--clr-blue);
    padding: 5px 20px;
    block-size: var(--header-aside-b-size);
    border-radius: var(--radius-20);
}

    .header__end .lang:hover {
        background-color: var(--clr-blue);
        color: white;
    }

@media (max-width: 1600px) {
    header {
        --header-aside-gap: 10px;
    }
}

@media (max-width: 1400px) {
    header {
        --header-b-size: 80px;
        --logo-max-size: 200px;
        --header-inline-p: 22px;
        --header-adfh-logo-size: 180px;
        --header-aside-b-size: 38px;
        --header-aside-gap: 5px;
        --search-inline-padding: 40px;
    }
    .search-wrap {
        --search-inline-padding: 40px;
    }

}

@media (max-width: 1200px) {
    header {
        --header-sticky-top: 0px;
        --header-bg: rgba(255, 255, 255, 1);
        --filter: 0px;
        --header-shadow: none;
        --header-radius: 0px;
        --header-inline-p: var(--wrapper-inline-padding);
        position: relative;
        padding-inline: 0;
    }

        header.header__up {
            top: 0;
        }
}

@media (max-width: 640px) {
    header {
        --search-inline-padding: 20px;
        --header-aside-gap: 0px;
        --header-adfh-logo-size: 160px;
    }
    .search-wrap {
        --search-inline-padding: 20px;
    }


        header .header__sticky {
            padding-inline-end: 10px;
        }

    .header__end .lang {
        padding:0px;
    }

    .managed__by {
        position: fixed;
        left: 0;
        top: 0;
        width: var(--nav-sidebar-width);
        opacity: 0;
        pointer-events: none;
        z-index: 56;
        max-width: inherit;
        padding: 20px 30px;
        background-color: white;
    }

        .managed__by img {
            max-width: var(--header-adfh-logo-size);
        }

    .nav__open .managed__by {
        opacity: 1;
        pointer-events: all;
    }
}

/* --------------- Navigation --------------- */

.site__nav__toggle,
.nav__item .lang {
    display: none;
}

.site__nav__toggle {
    --nav-toggle-size: 48px;
    --nav-icon-width: 26px;
    --nav-icon-height: 2px;
    --nav-toggle-gap: 6px;
    width: var(--nav-toggle-size);
    height: var(--nav-toggle-size);
    color: black;
}

    .site__nav__toggle i {
        width: var(--nav-icon-width);
        height: var(--nav-icon-width);
        gap: var(--nav-toggle-gap);
        align-content: center;
    }

        .site__nav__toggle i span {
            background-color: currentColor;
            height: var(--nav-icon-height);
            width: var(--nav-icon-width);
            transform-origin: center;
            transition: all ease-in-out 200ms;
        }

    .site__nav__toggle.nav--active i span:nth-child(1) {
        transform: rotate(-45deg) translateX(-5px);
    }

    .site__nav__toggle.nav--active i span:nth-child(2) {
        transform: rotate(45deg) translateX(-5px);
    }

nav {
    --primary-nav-item-gap: 35px;
    --primary-nav-main-blocksize: var(--header-b-size);
    --primary-nav-main-font-size: 18px;
    --primary-nav-active-state: 6px;
    --submenu-minwidth: 260px;
    --submenu-block-padding: 20px;
    --submenu-inline-padding: 30px;
    --submenu-font-size: 16px;
    --submenu-item-block-padding: 12px;
    --submenu-lg-radius: 20px;
    --submenu-lg-inline-padding: 50px;
    --submenu-lg-block-padding: 30px;
}

.primary__nav {
    align-items: start;
    gap: var(--primary-nav-item-gap);
}

    .primary__nav .nav__item:not(.has--full--menu) {
        position: relative;
    }

    .primary__nav .sub__menu:not(.sub__menu__lg) {
        position: absolute;
        left: calc(var(--submenu-inline-padding) * -1);
        top: 100%;
    }

    .primary__nav .sub__menu.sub__menu__lg {
        position: static;
    }

    .primary__nav .nav__item__main {
        display: flex;
        align-items: center;
        position: relative;
        font-size: var(--primary-nav-main-font-size);
        font-weight: var(--fw-medium);
        min-height: var(--primary-nav-main-blocksize);
        color: black;
        transition: all ease-in-out 200ms;
    }

    .primary__nav .sub__menu {
        opacity: 0;
        pointer-events: none;
        padding-block-start: 4px;
        transition: all ease-in-out 200ms;
    }

        .primary__nav .sub__menu:not(.sub__menu__lg) ul {
            background-color: white;
            border-radius: var(--radius-20);
            min-width: var(--submenu-minwidth);
            padding-block: var(--submenu-block-padding) calc(var(--submenu-block-padding) + 10px);
            padding-inline: var(--submenu-inline-padding);
            box-shadow: var(--header-shadow);
        }

    .primary__nav .has--sub__menu.drop--open .sub__menu {
        opacity: 1;
        pointer-events: all;
    }

    .primary__nav .sub__menu .menu__list a {
        position: relative;
        display: block;
        padding-block: var(--submenu-item-block-padding);
        font-size: var(--submenu-font-size);
        color: black;
        font-weight: var(--fw-medium);
        transition: all ease-in-out 200ms;
    }

        .primary__nav .nav__item__main::after,
        .primary__nav .sub__menu .menu__list a::after {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            content: "";
            height: 1px;
            transition: all ease-in-out 200ms;
            background-color: black;
            opacity: 0.1;
            pointer-events: none;
        }

    .primary__nav .nav__item__main::after {
        height: var(--primary-nav-active-state);
        background-color: var(--clr-blue);
        opacity: 0;
    }

    .primary__nav .active .nav__item__main::after {
        opacity: 1;
    }

@media (hover: hover) {
    .primary__nav .sub__menu .menu__list a:hover {
        color: var(--clr-blue);
    }

        .primary__nav .sub__menu .menu__list a:hover::after {
            opacity: 1;
            background-color: var(--clr-blue);
            height: 3px;
        }

    .primary__nav .nav__item__main:hover,
    .primary__nav .nav__item:hover .nav__item__main {
        color: #0299cd;
    }
}

.primary__nav .sub__menu__lg .sub__menu__overflow--wrapper {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    background-color: white;
    border-radius: var(--submenu-lg-radius);
    padding-inline: var(--submenu-lg-inline-padding);
    padding-block: var(--submenu-lg-block-padding);
    box-shadow: var(--header-shadow);
}

    .primary__nav
    .sub__menu__lg
    .sub__menu__overflow--wrapper
    .sub__menu__container {
        display: grid;
        gap: 20px;
    }

.sub__menu__lg .menu__list {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    column-gap: var(--20);
    row-gap: var(--10);
}

@media (hover: hover) {
    .primary__nav .has--sub__menu:hover .sub__menu {
        opacity: 1;
        pointer-events: all;
    }
}

@media (max-width: 1400px) {
    nav {
        --primary-nav-item-gap: 25px;
        --primary-nav-main-font-size: 16px;
        --submenu-lg-inline-padding: 40px;
        --submenu-lg-block-padding: 20px;
    }
}

@media (max-width: 1200px) {
    .site__nav__toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-inline-start: clamp(2px, 1vw, 10px);
    }

    nav {
        --primary-nav-main-font-size: 18px;
        --submenu-font-size: 15px;
        --submenu-minwidth: 100%;
        --primary-nav-item-gap: 15px;
        --sidebar-nav-block-start-padding: 80px;
        --sidebar-nav-block-end-padding: 100px;
        --sidebar-inline-padding: 50px;
        --primary-nav-active-state: 3px;
        position: fixed;
        height: 100dvh;
        z-index: 56;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--nav-sidebar-width);
        background-color: white;
        overflow-y: auto;
        -ms-scroll-chaining: none;
        overscroll-behavior: contain;
        transform: translateX(calc(var(--nav-sidebar-width) * -1));
        transition: all ease-in-out 200ms;
        padding-block: var(--sidebar-nav-block-start-padding) var(--sidebar-nav-block-end-padding);
        padding-inline: var(--sidebar-inline-padding);
    }

    .nav__open nav {
        transform: translateX(0);
        box-shadow: 5px 0px 10px 5px rgba(0, 0, 0, 0.2);
    }

    .primary__nav {
        flex-direction: column;
        align-items: stretch;
    }

        .primary__nav .sub__menu,
        .primary__nav .sub__menu:not(.sub__menu__lg),
        .primary__nav .sub__menu__lg .sub__menu__overflow--wrapper {
            position: relative;
            top: auto;
            opacity: 1;
            left: 0;
            padding: 0;
            pointer-events: all;
            width: 100%;
        }

            .primary__nav .sub__menu.sub__menu__lg {
                position: relative;
            }

        .primary__nav .nav__item__main {
            min-height: inherit;
            padding-block: 12px;
        }

        .primary__nav .active .nav__item__main {
            color: var(--clr-blue);
        }

        .primary__nav .sub__menu .menu__list a {
            font-weight: var(--fw-regular);
        }

        .primary__nav .sub__menu:not(.sub__menu__lg) ul,
        .primary__nav .sub__menu__lg .sub__menu__overflow--wrapper {
            box-shadow: none;
            border-radius: 0;
            padding-inline: 10px;
            padding-block: 0;
        }

    .sub__menu__lg .menu__list {
        grid-template-columns: auto;
        gap: 0;
    }

    .sub__menu__container .btn {
        display: none;
    }
}

@media (max-width: 640px) {
    nav {
        --sidebar-inline-padding: 30px;
    }
}

/* --------------- Search --------------- */

.search-wrap {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background-color: hsla(203, 83%, 9%, 0.8);
    z-index: 102;
    display: grid;
    align-items: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity ease-in-out 150ms;
}
.search--open .search-wrap {
    opacity: 1;
    pointer-events: all;
}


.site__search {
    width: var(--header-aside-b-size);
    height: var(--header-aside-b-size);
    border-radius: 50%;
}

    .site__search:hover {
        background-color: var(--clr-yellow-lighter);
    }

.search {
    display: grid;
    align-items: center;
    width: 50%;
    min-width:300px; 
    border-radius: var(--header-radius);
    background-color: white;
    padding-inline:  25px;
    transition: all ease-in-out 200ms;
    border-radius: 50px;
    margin:0 auto;
}


.search .search__form {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 15px;
}

    .search .search__form input {
        border: 0;
        appearance: none;
        font-size: clamp(14px, 3vw, 18px);
        font-weight: var(--fw-medium);
        padding:20px 0;
        min-height:30px;
        outline: 0;
        background-color: transparent;
    }

.search-wrap .close__search {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: black;
    position: absolute;
    right: 20px;
    top: 20px;
    background: #fff;
}

    .search-wrap .close__search:hover {
        background-color: var(--clr-blue);
        color: white;
    }

@media (max-width: 640px) {
    .search {
        padding-inline: 15px 10px;
    }

        .search .search__form input {
            font-size: 16px;
        }
}

/* --------------- Button --------------- */

.btn {
    --btn-f-size: 16px;
    --btn-icon-size: 20px;
    --btn-block-padding: 15px;
    --btn-inline-padding: 25px;
    --btn-gap: 10px;
    --btn-round-radius: 50px;
    --btn-border-color: white;
    --btn-color: white;
    --btn-hover-bg: white;
    --btn-hover-color: black;
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--btn-color);
    font-weight: var(--fw-medium);
    font-size: var(--btn-f-size);
    border: 1px solid var(--btn-border-color);
    border-radius: var(--btn-round-radius);
    background-color: transparent;
    transition: all ease-in-out 250ms;
    padding-block: var(--btn-block-padding);
    padding-inline: var(--btn-inline-padding) calc(var(--btn-inline-padding) - 5px);
}

    .btn span,
    .btn svg {
        flex-shrink: 0;
    }

    .btn.btn--sm {
        --btn-block-padding: 8px;
        --btn-inline-padding: 15px;
        --btn-gap: 6px;
        --btn-f-size: 15px;
        --btn-icon-size: 18px;
    }

    .btn.btn--block {
        --btn-block-padding: 12px;
        text-align: center;
        justify-content: center;
    }

    .btn.--has-arrow {
        gap: var(--btn-gap);
    }

        .btn.--has-arrow svg {
            width: var(--btn-icon-size);
            height: var(--btn-icon-size);
        }

.btn--center {
    margin-inline: auto;
}

.btn:hover {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-color);
}

.btn.btn--dark {
    --btn-border-color: black;
    --btn-color: black;
    --btn-hover-bg: var(--clr-blue);
    --btn-hover-color: white;
}

.btn.btn--blue {
    --btn-border-color: var(--clr-blue);
    --btn-color: var(--clr-blue);
    --btn-hover-bg: var(--clr-blue);
    --btn-hover-color: white;
}

.btn.btn--inline {
    --btn-block-padding: 0px;
    --btn-inline-padding: 0px;
    --btn-color: #ffd89a;
    --btn-hover-bg: transparent;
    --btn-hover-color: white;
    border: 0;
}

    .btn.btn--inline:hover {
        text-decoration: underline;
        text-underline-offset: 5px;
    }

    .btn.btn--inline.btn--blue {
        --btn-color: var(--clr-blue);
        --btn-hover-color: var(--clr-dark);
    }

.btn__list {
    column-gap: var(--20);
    row-gap: var(--10);
}

@media (hover: hover) {
    .btn:hover {
        --btn-gap: 15px;
    }

    .btn.btn--sm:hover {
        --btn-gap: 10px;
    }
}

@media (max-width: 1400px) {
    .btn {
        --btn-f-size: 14px;
        --btn-icon-size: 15px;
        --btn-block-padding: 12px;
        --btn-inline-padding: 20px;
    }

        .btn.btn--sm {
            --btn-f-size: 13px;
            --btn-icon-size: 15px;
            --btn-block-padding: 5px;
            --btn-inline-padding: 10px;
        }
}

/* --------------- Banner --------------- */

.banner {
    --banner-gap: 25px;
    --banner-content-max-size: 800px;
    --banner-height: 500px;
    --page-banner-height: 550px;
    position: relative;
}

.hp__banner .banner--img {
    width: 100%;
    height: auto;
}

.banner__caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100% );
}

    .banner__caption .content {
        display: grid;
        justify-items: start;
        gap: var(--banner-gap);
        max-width: var(--banner-content-max-size);
    }

        .banner__caption .content .banner__title {
            font-size: var(--title-55);
            font-weight: var(--fw-bold);
            color: white;
            line-height: 1.1;
            text-wrap: balance;
        }

@media (max-width: 1400px) {
    .banner {
        --banner-content-max-size: 600px;
    }
}

@media (max-width: 860px) {
    .banner__slider--item {
        height: var(--banner-height) !important;
    }

        .banner__slider--item .banner--img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
}

@media (max-width: 640px) {
    .banner {
        --banner-height: 400px;
    }
}

/* --------------- swiper controls custom --------------- */

.hp__banner--controls {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 100px;
    z-index: 44;
}

.swiper__btn__wrapper {
    gap: 15px;
}

@media (max-width: 1200px) {
    .hp__banner--controls .swiper__btn__wrapper {
        display: none;
    }
}

@media (max-width: 640px) {
    .hp__banner--controls {
        bottom: 30px;
    }

        .hp__banner--controls .swiper__pagination__wrapper {
            width: 100%;
        }
}

/* --------------- page //main --------------- */

.page {
    --background-size: 1800px;
    position: relative;
    background-image: url("../images/paw-bg.png");
    background-position: top;
    background-size: var(--background-size);
}

    .page::before {
        position: absolute;
        top: 24%;
        left: 0;
        width: 600px;
        height: 760px;
        content: "";
        opacity: 0.5;
        background: url("../images/pet-paw.png") center no-repeat;
        background-size: contain;
    }

@media (max-width: 1600px) {
    .page {
        --background-size: 1600px;
    }
}

@media (max-width: 1400px) {
    .page {
        --background-size: 1400px;
    }
}

@media (max-width: 860px) {
    .page {
        --background-size: 1000px;
    }

        .page::before {
            display: none;
        }
}

/* --------------- opening hours --------------- */

.opening__time,
.breadcrumb {
    --bg: rgba(0, 0, 0, 0.3);
    --filter: 10px;
    --b-padding: 15px;
    --height: 60px;
    --breadcrumb-size: 50px;
    position: relative;
}

    .opening__time ul,
    .breadcrumb {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 2;
        background-color: var(--bg);
        backdrop-filter: blur(var(--filter));
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }

    .opening__time ul {
        grid-template-columns: repeat(3, auto);
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: clamp(10px, 3vw, 20px);
        height: var(--height);
        top: calc(var(--height) * -1);
        padding-block: var(--b-padding);
    }

    .opening__time .shelter__status {
        font-size: 12px;
        text-transform: uppercase;
        font-weight: var(--fw-bold);
        color: white;
        border-radius: 20px;
        padding: 8px 15px;
    }

        .opening__time .shelter__status.--open {
            background-color: var(--clr-green);
        }

        .opening__time .shelter__status.--closed {
            background-color: var(--clr-red);
        }

    .opening__time .shelter__time {
        color: white;
        font-size: clamp(14px, 1vw, 16px);
        font-weight: var(--fw-medium);
    }

@media (max-width: 640px) {
    .opening__time {
        --bg: var(--clr-text);
        --filter: 0px;
        --b-padding: 15px;
        --height: auto;
    }

        .opening__time ul {
            position: relative;
            top: auto;
            border: 0;
            padding-inline: var(--wrapper-inline-padding);
        }

        .opening__time .btn {
            --btn-icon-size: 22px;
        }

            .opening__time .btn span {
                display: none;
            }

        .opening__time .shelter__time {
            text-wrap: balance;
        }
}
/* --------------- Featured --------------- */

.hp__featured {
    --featured-h: 240px;
    --featured-title: 18px;
    --featured-title-highlight: 35px;
    --content-gap: 15px;
    --section-b-padding: 100px;
    --featured-grid-count: 3;
    grid-template-columns: repeat(var(--featured-grid-count), minmax(0, 1fr));
    gap: var(--20);
    padding-block: var(--section-b-padding);
}

    .hp__featured a {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--20);
        border-radius: var(--radius-20);
        height: var(--featured-h);
        overflow: hidden;
    }

        .hp__featured a .content {
            justify-items: start;
            align-content: center;
            gap: var(--content-gap);
        }

            .hp__featured a .content h2 {
                font-size: var(--featured-title);
                font-weight: var(--fw-regular);
                color: currentColor;
            }

                .hp__featured a .content h2 span {
                    display: block;
                    font-size: var(--featured-title-highlight);
                    font-weight: var(--fw-medium);
                }

            .hp__featured a .content p {
                opacity: 0.8;
                color: currentColor;
            }

            .hp__featured a .content .btn {
                background-color: white;
                color: currentColor;
            }

        .hp__featured a.adopt {
            background-color: var(--clr-blue);
            color: white;
            padding-inline-start: var(--20);
        }

        .hp__featured a.treatment {
            grid-template-columns: 1fr auto;
            background-color: var(--clr-yellow);
            color: var(--clr-text);
            padding-inline-start: var(--30);
            transition-delay: 150ms;
        }

        .hp__featured a.appointment {
            background-color: var(--clr-yellow-light);
            color: var(--clr-text);
            transition-delay: 250ms;
        }

        .hp__featured a.adopt .content .btn {
            color: var(--clr-blue);
        }

        .hp__featured a.treatment .content .btn {
            color: var(--clr-brown);
        }

@media (hover: hover) {
    .hp__featured a img {
        transition: all ease-in-out 250ms;
    }

    .hp__featured a:hover img {
        transform: scale(1.05);
    }
}

@media (max-width: 1600px) {
    .hp__featured {
        --featured-h: 200px;
        --featured-title: 16px;
        --featured-title-highlight: 30px;
        --content-gap: 10px;
        --section-b-padding: 80px;
    }

        .hp__featured a.adopt img {
            max-width: 212px;
        }

        .hp__featured a.treatment img {
            max-width: 190px;
        }

        .hp__featured a.appointment img {
            max-width: 180px;
        }

        .hp__featured a .content p {
            display: none;
        }
}

@media (max-width: 1400px) {
    .hp__featured a.appointment img {
        max-width: 160px;
    }
}

@media (max-width: 1200px) {
    .hp__featured {
        --featured-grid-count: 2;
    }
}

@media (max-width: 860px) {
    .hp__featured {
        --section-b-padding: 60px;
        --featured-grid-count: 1;
    }
}

@media (max-width: 640px) {
    .hp__featured {
        --featured-h: 160px;
        --section-b-padding: 40px;
        --featured-title-highlight: 25px;
    }

        .hp__featured a.adopt img {
            max-width: 170px;
        }

        .hp__featured a.appointment img,
        .hp__featured a.treatment img {
            max-width: 150px;
        }
}
/* --------------- Title --------------- */

.title__wrapper .title {
    gap: 15px;
}

    .title__wrapper .title span {
        font-size: clamp(14px, 3vw, 22px);
        color: var(--clr-dark);
        font-weight: var(--fw-regular);
    }

    .title__wrapper .title .title--heading {
        font-size: var(--title-40);
        font-weight: var(--fw-bold);
        color: var(--clr-blue);
        line-height: 1.1;
    }

/* --------------- Pets List --------------- */

.pets__list {
    --pets-featured-grid-count: 4;
    --pet-code-f-size: 20px;
    --pet-info-f-size: 18px;
}

.pets__featured .pets__list {
    grid-template-columns: repeat( var(--pets-featured-grid-count), minmax(0, 1fr) );
    gap: var(--20);
}

.pets__featured .title__wrapper {
    margin-block-end: clamp(20px, 3vw, 30px);
}

.pets__featured .pets__list figure:nth-child(1) {
    transition-delay: 100ms;
}

.pets__featured .pets__list figure:nth-child(2) {
    transition-delay: 150ms;
}

.pets__featured .pets__list figure:nth-child(3) {
    transition-delay: 200ms;
}

.pets__featured .pets__list figure:nth-child(4) {
    transition-delay: 250ms;
}

.pets__list figure {
    display: grid;
    background-color: var(--clr-yellow-lighter);
    border-radius: var(--radius-20);
    overflow: hidden;
}

    .pets__list figure figcaption {
        display: grid;
        gap: var(--10);
        padding-block: var(--20) var(--30);
        padding-inline: var(--30);
        color: var(--clr-dark);
        transition: all ease-in-out 200ms;
    }

        .pets__list figure figcaption p {
            font-size: var(--pet-code-f-size);
            font-weight: var(--fw-medium);
        }

        .pets__list figure figcaption .pet__info {
            display: grid;
            gap: var(--10);
            font-size: var(--pet-info-f-size);
        }
.page--content section .article-item .btn--block {
    color: var(--clr-dark);
}
.pets__list figure figcaption .btn__wrapper {
    display: flex;
    flex-wrap: wrap;
}
.socialboard iframe{ border:0px;}

.socialboard {
    --block-start-margin: 80px;
    background: #0065a4;
    padding-block-start: 2rem;
    padding-block-end: var(--block-start-margin);
}
[v-cloak] {    display: none !important;}
.sidebar__slider .sidebar-item figcaption .btn--block,
.content figcaption .btn--block,
.resources .btn--block,
.article-item .btn--block,
.pets__list figure figcaption .btn--block {
    --btn-color: var(--clr-dark);
    --btn-border-color: var(--clr-dark);
    font-weight: var(--fw-regular);
    max-width: 220px;
    margin-inline: auto;
    width: 100%;
    margin-block-start: 15px;
    color: var(--btn-border-color);
}

            .content figcaption .btn--block:hover,
            .page--content section .article-item .btn--block:hover,
            .pets__list figure figcaption .btn--block:hover {
                --btn-hover-bg: var(--clr-blue);
                --btn-hover-color: white;
                --btn-border-color: var(--clr-blue);
                color: var(--btn-hover-color);
                text-decoration: none;
            }

@media (hover: hover) {
    .pets__list figure:hover figcaption {
        background-color: var(--clr-yellow-lighter-hover);
    }
}

@media (max-width: 1400px) {
    .pets__list {
        --pet-code-f-size: 18px;
        --pet-info-f-size: 16px;
    }
}

@media (max-width: 1200px) {
    .pets__list {
        --pets-featured-grid-count: 2;
    }
}

@media (max-width: 860px) {
    .pets__list {
        --pets-featured-grid-count: 4;
        --pet-list-scrollable-width: 300px;
    }

    .pets__featured .pets__list {
        display: flex;
        overflow-x: auto;
        -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
        padding-inline: var(--wrapper-inline-padding);
        scroll-padding: var(--wrapper-inline-padding);
    }

        .pets__featured .pets__list::-webkit-scrollbar {
            display: none;
        }

        .pets__featured .pets__list figure {
            scroll-snap-align: start;
            flex-shrink: 0;
            width: var(--pet-list-scrollable-width);
            transform: none;
        }
}

@media (max-width: 640px) {
    .pets__featured {
        position: relative;
        padding-block-end: 65px;
    }

        .pets__featured .wrapper {
            position: initial;
        }

        .pets__featured .btn__wrapper {
            position: absolute;
            bottom: 0;
        }
}

/* --------------- Shelter Services/ Featured --------------- */

.services__featured {
    --section-b-padding:100px;
    --content-gap: 15px;
    --content-inline-padding: 60px;
    --content-space: 50px;
    padding-block: var(--section-b-padding);
}

    .services__featured picture,
    .services__featured figcaption {
        flex: 1;
    }

        .services__featured picture img {
            border-radius: var(--radius-20);
        }

        .services__featured figcaption .content {
            display: grid;
            align-content: center;
            gap: var(--content-gap);
            justify-items: start;
            background-color: var(--clr-yellow-lighter);
            padding-inline: var(--content-inline-padding);
        }

            .services__featured figcaption .content h3 {
                font-size: var(--title-40);
                font-weight: var(--fw-light);
                color: var(--clr-dark);
                text-decoration: underline;
                text-decoration-thickness: 2px;
                text-underline-offset: 10px;
            }

            .services__featured figcaption .content p {
                font-size: 20px;
                font-weight: var(--fw-regular);
                margin-block-end: 15px;
            }

    .services__featured figure:nth-child(1) figcaption,
    .services__featured figure:nth-child(3) figcaption {
        padding-block-start: var(--content-space);
    }

    .services__featured figure:nth-child(1) picture img,
    .services__featured figure:nth-child(3) picture img {
        border-end-end-radius: 0;
    }

    .services__featured figure:nth-child(1) figcaption .content,
    .services__featured figure:nth-child(3) figcaption .content {
        border-start-end-radius: var(--radius-20);
        border-end-end-radius: var(--radius-20);
    }

    .services__featured figure:nth-child(2) figcaption {
        padding-block-end: var(--content-space);
    }

    .services__featured figure:nth-child(2) {
        flex-direction: row-reverse;
    }

        .services__featured figure:nth-child(2) picture img {
            border-start-start-radius: 0;
        }

    .services__featured figure:nth-child(1) figcaption .content {
        background-image: url("../images/two-paws.png");
        background-position: right 20px bottom 20px;
        background-repeat: no-repeat;
    }

    .services__featured figure:nth-child(2) figcaption .content {
        border-start-start-radius: var(--radius-20);
        border-end-start-radius: var(--radius-20);
        background-image: url("../images/paws-bones.png");
        background-position: left;
        background-repeat: no-repeat;
        justify-items: end;
        text-align: end;
    }

    .services__featured figure:nth-child(3) figcaption .content {
        background-image: url("../images/paws-sm.png");
        background-position: right;
        background-repeat: no-repeat;
    }

@media (max-width: 1600px) {
    .services__featured figure,
    .services__featured figure picture {
        height: 400px;
    }

        .services__featured figure picture img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .services__featured figcaption .content h3 {
        font-size: var(--title-35);
    }

    .services__featured figcaption .content p {
        font-size: 18px;
        text-wrap: pretty;
    }
}

@media (max-width: 860px) {
    .services__featured {
        --section-b-padding: 30px;
        --content-gap: 15px;
        --content-inline-padding: 40px;
        --content-space: 0px;
        display: grid;
        gap: 30px;
    }

        .services__featured figure,
        .services__featured figure picture {
            height: auto;
        }

            .services__featured figure,
            .services__featured figure:nth-child(2) {
                flex-direction: column;
                border-radius: var(--radius-20);
                overflow: hidden;
            }

                .services__featured figure:nth-child(2) figcaption .content {
                    text-align: start;
                    justify-items: start;
                }

                .services__featured figure picture img,
                .services__featured figcaption .content {
                    border-radius: 0 !important;
                }

        .services__featured figcaption .content {
            padding-block: var(--content-inline-padding);
        }
}

@media (max-width: 640px) {
    .services__featured {
        --content-gap: 15px;
        --content-inline-padding: 30px;
        gap: 20px;
    }

        .services__featured figcaption .content p {
            font-size: 16px;
        }

        .services__featured figcaption .content h3 {
            font-size: var(--title-30);
        }
}

/* --------------- Adoption Story --------------- */

.happy__adoption {
    --section-size: 650px;
    --content-gap: 10px;
    --gradient-deg: 90deg;
}

    .happy__adoption figure {
        position: relative;
        height: var(--section-size);
        overflow: hidden;
    }

        .happy__adoption figure picture,
        .happy__adoption figure figcaption {
            grid-area: 1/1;
        }

        .happy__adoption figure figcaption {
            display: grid;
            align-content: center;
            z-index: 1;
            background: linear-gradient( var(--gradient-deg), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.4) 100% );
        }

            .happy__adoption figure figcaption .content {
                max-width: calc(var(--wrapper-half));
                margin-inline-start: 50%;
                gap: var(--content-gap);
            }

                .happy__adoption figure figcaption .content > span {
                    color: var(--clr-yellow);
                    font-size: clamp(14px, 3vw, 20px);
                    font-weight: var(--fw-medium);
                }

                .happy__adoption figure figcaption .content h4 {
                    font-size: var(--title-50);
                    font-weight: var(--fw-medium);
                    color: white;
                    letter-spacing: -1px;
                    line-height: 1.2;
                }

                .happy__adoption figure figcaption .content p {
                    font-size: clamp(14px, 3vw, 18px);
                    font-weight: var(--fw-regular);
                    color: rgba(255, 255, 255, 0.7);
                    margin-block-end: 20px;
                }

@media (max-width: 1600px) {
    .happy__adoption {
        --section-size: 550px;
    }
}

@media (max-width: 640px) {
    .happy__adoption {
        --section-size: 450px;
        --gradient-deg: 180deg;
    }

        .happy__adoption figure figcaption .content {
            margin-inline-start: 0;
            padding-inline: var(--wrapper-inline-padding);
        }

        .happy__adoption figure figcaption {
            align-content: end;
            padding-block-end: 30px;
        }

            .happy__adoption figure figcaption .content p {
                margin-block-end: 10px;
            }

            .happy__adoption figure figcaption .content h4 {
                font-size: var(--title-35);
            }
}

/* --------------- Media List --------------- */

/* tab */
.tabs {
    --tab-f-size: 16px;
    --tab-gap: 10px;
    --tab-nav-b-padding: 8px;
    --tab-nav-i-padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--tab-gap);
}

    .tabs li {
        font-size: var(--tab-f-size);
        color: #936d35;
        font-weight: var(--fw-regular);
        padding-block: var(--tab-nav-b-padding);
        padding-inline: var(--tab-nav-i-padding);
        border-radius: var(--radius-20);
        cursor: pointer;
        border: 1px solid #e5c78d;
        transition: all ease 200ms;
    }

        .tabs li.active {
            background-color: #ffd9b4;
            border-color: #ffd9b4;
        }

.tab__content {
    display: none;
    opacity: 0;
    transform: translateY(25px);
    animation: fadeIn 0.9s ease 1 forwards;
}

    .tab__content.active {
        display: block;
    }

@keyframes fadeIn {
    100% {
        opacity: 1;
        transform: none;
    }
}

.media__list .media__list__item {
    display: grid;
    align-items: start;
    align-content: start;
    gap: var(--20);
}

    .media__list .media__list__item .content {
        gap: var(--15);
        justify-items: start;
    }

        .media__list .media__list__item .content .media__tags {
            row-gap: 5px;
            column-gap: 15px;
        }

            .media__list .media__list__item .content .media__tags span {
                font-weight: var(--fw-regular);
                font-size: 14px;
                color: rgba(0, 0, 0, 0.4);
            }

                .media__list .media__list__item .content .media__tags span.--highlight {
                    color: rgba(0, 0, 0, 0.8);
                    text-transform: uppercase;
                }

        .media__list .media__list__item .content h4 {
            font-size: 20px;
            font-weight: var(--fw-light);
            text-wrap: balance;
        }

.media__list .media__list--img {
    border-radius: var(--radius-20);
}

@media (max-width: 1400px) {
    .media__list .media__list__item .content h4 {
        font-size: 18px;
    }
}

/* --------------- News --------------- */

.hp__news {
    --b-padding: 100px;
    --hp-news-list-count: 4;
    padding-block-start: var(--b-padding);
    background: url("../images/paws.png") center center no-repeat;
    background-size: contain;
}

    .hp__news .title__wrapper {
        column-gap: 40px;
        row-gap: 20px;
    }

    .hp__news .title--heading {
        font-size: var(--title-45);
        font-weight: var(--fw-medium);
        color: var(--clr-blue);
        line-height: 1.1;
    }

    .hp__news .media__list {
        display: grid;
        grid-template-columns: repeat(var(--hp-news-list-count), minmax(0, 1fr));
        gap: var(--20);
        padding-block: var(--30);
    }

@media (max-width: 1600px) {
    .hp__news {
        --b-padding: 80px;
    }
}

@media (max-width: 1200px) {
    .hp__news {
        --hp-news-list-count: 3;
    }

        .hp__news .media__list .media__list__item:nth-child(4) {
            display: none;
        }
}

@media (max-width: 860px) {
    .hp__news {
        --media-list-item-size: 300px;
        --b-padding: 60px;
    }

        .hp__news .media__list .media__list__item:nth-child(4) {
            display: grid;
        }

        .hp__news .media__list {
            display: flex;
            overflow-x: auto;
            -ms-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
            padding-inline: var(--wrapper-inline-padding);
            scroll-padding: var(--wrapper-inline-padding);
        }

            .hp__news .media__list::-webkit-scrollbar {
                display: none;
            }

            .hp__news .media__list .media__list__item {
                width: var(--media-list-item-size);
                scroll-snap-align: start;
                flex-shrink: 0;
            }
}

@media (max-width: 640px) {
    .hp__news {
        --b-padding: 40px;
        padding-block-end: var(--b-padding);
        position: relative;
    }

        .hp__news > .wrapper {
            position: initial;
        }

        .hp__news .btn__wrapper {
            position: absolute;
            bottom: 0;
        }
}
/* --------------- Media Gallery/Bento --------------- */

.hp__media {
    --b-padding: 100px;
    padding-block: var(--b-padding);
}

    .hp__media .wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 50px;
        align-items: end;
    }

    .hp__media .title__wrapper .title span {
        color: var(--clr-brown);
    }

    .hp__media .title__wrapper .title .title--heading {
        color: var(--clr-text);
    }

.media__gallery__bento {
    --bento-block-size: 175px;
    --bento-big-block-size: 272px;
    display: grid;
    margin-block-start: clamp(20px, 3vw, 30px);
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 20px;
    grid-template-areas:
        "bento-square-top bento-square-top bento-top bento-top"
        "bento-square-top bento-square-top bento-middle-first bento-middle-last"
        "bento-square-bottom bento-square-bottom bento-middle-first bento-middle-last"
        "bento-square-bottom bento-square-bottom bento-bottom bento-bottom";
}

    .media__gallery__bento li {
        position: relative;
        width: 100%;
        height: var(--bento-block-size);
        overflow: hidden;
        border-radius: var(--radius-10);
    }

        .media__gallery__bento li:nth-child(1) {
            grid-area: bento-square-top;
            height: var(--bento-big-block-size);
        }

        .media__gallery__bento li:nth-child(2) {
            grid-area: bento-square-bottom;
            height: var(--bento-big-block-size);
        }

        .media__gallery__bento li:nth-child(3) {
            grid-area: bento-top;
        }

        .media__gallery__bento li:nth-child(4) {
            grid-area: bento-middle-first;
        }

        .media__gallery__bento li:nth-child(5) {
            grid-area: bento-middle-last;
        }

        .media__gallery__bento li:nth-child(6) {
            grid-area: bento-bottom;
        }

.spnsrd__blk span {
    display: block;
    font-size: 14px;
    padding-block-end: 5px;
}

/* share it css*/

.share-it {
    padding:20px;
    border: 1px solid #ccc;
    border-radius: var(--radius-20);
}
    .share-it > span {
        font-size: 20px;
        font-weight: var(--fw-bold);
        border-inline-start: 5px solid #dcdbdb;
        padding-inline-start: 10px;
    }

/* popup css*/

.pop-up-wrap {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: scale(1.3);
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(21, 17, 17, 0.61);
    display: flex;
    align-items: center;
}



    .pop-up-wrap.pop-up-open {
        visibility: visible;
        opacity: 1;
        z-index: 999;
        transform: scale(1);
    }
.fade__slider .swiper-pagination,
.popup-swiper-pagination {
    position: absolute;
    z-index: 99;
    bottom: 10px;
    display: flex;
    justify-content: center;
}


.popup-swiper-pagination .swiper-pagination-bullet {
    background: var(--clr-blue);
    width: 10px;
    height: 10px;
}
.fade__slider .swiper-pagination-bullet {
    background: #073A4C;
    width: 10px;
    height: 10px;
}


.pop-up {
    background-color: #fefefe;
    margin: auto;
    padding: 2rem;
    border: 1px solid #888;
    border-radius: 20px;
    position: relative;
    width: 50%;
}



.pop-up-close {
    width: 40px;
    height: 40px;
    background: var(--clr-blue);
    float: right;
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    top: -35px;
    right: -30px;
    transition: all 0.3s ease-in-out;
}

    .pop-up-close:hover {
        background: var(--clr-yellow);
        transition: all 0.3s ease-in-out;
    }

    .pop-up-close:before,
    .pop-up-close:after {
        position: absolute;
        left: 50%;
        content: " ";
        height: 20px;
        width: 2px;
        background-color: white;
        top: 10px;
        left: 19px;
    }

    .pop-up-close:before {
        transform: rotate(45deg);
    }



    .pop-up-close:after {
        transform: rotate(-45deg);
    }

.pop-up-data h4 {
    font-size: 30px;
    color: var(--clr-blue);
    margin-block: 1rem;
}

.pop-up-data p {
    font-size: 20px;
}

.pop-up-data {
    max-height: 80vh;
    overflow: auto;
}

    .pop-up-data::-webkit-scrollbar {
        width: 1em;
        height: 0.5em;
    }



    .pop-up-data::-webkit-scrollbar-track {
        background: var(--clr-yellow);
        border-radius: 100vw;
        margin-block: 0.5em;
    }



    .pop-up-data::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #c13584 0%, #0075be 100%);
        border: 2px solid #ccc;
        border-radius: 100vw;
    }



        .pop-up-data::-webkit-scrollbar-thumb:hover {
            background: var(--clr-yellow);
        }

.pop-up .pop-up-data .swiper-slide.sidebar-item {
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}



    .pop-up .pop-up-data .swiper-slide.sidebar-item:has(:only-child) {
        grid-template-columns: 1fr;
    }

.no-data-found {
    margin-block-start: 2rem;
}
.cookies-policy {
    position: fixed;
    width: 100%;
    bottom: 0;
    padding: 0;
    z-index: 999;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.cookie-consent-container {
    position: absolute;
    bottom: 10px;
    left: 20px;
    right: 20px;
    margin: -100px auto 0;
    background: var(--clr-yellow-light);
    padding: 20px;
    max-width: calc(var(--wrapper-max-size) + calc(var(--wrapper-inline-padding)* 2));
    border-radius: 20px;
}

    .cookie-consent-container .cookie-consent-selection {
        text-align: right;
    }

    .cookie-consent-container button {
        border: none;
        padding: 10px 20px;
        margin: 10px 0 0 10px;
        background: none;
        font-size: 1.1em;
        border-radius: 10px
    }

        .cookie-consent-container button.cookie-consent-allow {
            background-color: #04aa6d;
            color: #fff;
        }

            .cookie-consent-container button.cookie-consent-allow:focus,
            .cookie-consent-container button.cookie-consent-allow:hover {
                background-color: #059862;
                cursor: pointer;
            }

        .cookie-consent-container button.cookie-consent-deny {
            padding: 5px 0;
            font-size: 0.9em;
            opacity: 0.8;
        }

            .cookie-consent-container button.cookie-consent-deny:focus,
            button.cookie-consent-deny:hover {
                opacity: 1;
                cursor: pointer;
            }

    .cookie-consent-container hr {
        margin: 15px 0;
        background-color: #8a8a8a;
        height: 1px;
        border: 0;
    }
        .cookie-consent-container h4{ font-size:1.5rem;}



        @media (max-width: 1400px) {
            .media__gallery__bento {
        --bento-block-size: 125px;
        --bento-big-block-size: 200px;
    }

    .hp__media .wrapper {
        gap: 30px;
    }
}

@media (max-width: 860px) {
    .hp__media {
        --b-padding: 80px;
    }

        .hp__media .wrapper {
            grid-template-columns: auto;
        }

        .hp__media .wrapper,
        .spnsrd__blk {
            min-width: 0;
        }

    .pop-up .pop-up-data .swiper-slide.sidebar-item {
        grid-template-columns: 1fr;
    }
    .pop-up .pop-up-data figcaption{ padding-block-end:50px;}
}

@media (max-width: 640px) {
    .media__gallery__bento {
        --bento-big-block-size: 190px;
        gap: 10px;
    }
}

/* --------------- Social Links --------------- */

.social__links {
    gap: 10px;
}

.scroll__up {
    color: #6bdcff;
    cursor: pointer;
}

.social__fixed {
    --corner-size: 15px;
    position: fixed;
    z-index: 333;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    padding-block: 10px;
    padding-inline: 8px 5px;
    border-start-start-radius: 30px;
    border-end-start-radius: 30px;
}

    .social__fixed::before,
    .social__fixed::after {
        position: absolute;
        right: 0;
        content: "";
        width: var(--corner-size);
        height: var(--corner-size);
        background: url("../images/corner.svg");
        background-size: contain;
    }

    .social__fixed::before {
        top: calc(var(--corner-size) * -1);
    }

    .social__fixed::after {
        transform: scaleY(-1);
        bottom: calc(var(--corner-size) * -1);
    }

    .social__fixed .social__links {
        gap: 5px;
    }

        .social__fixed .social__links img {
            width: 40px;
            height: 40px;
        }

@media (hover: hover) {
    .scroll__up svg,
    .social__links img {
        transition: all ease-in-out 200ms;
    }

    .scroll__up:hover svg,
    .social__links a:hover img {
        transform: scale(1.2);
    }
}

@media (max-width: 1200px) {
    .social__fixed {
        display: none;
    }
}

@media (max-width: 860px) {
    .scroll__up {
        margin-block-start: 30px;
    }
}
/* --------------- Footer --------------- */

footer {
    --footer-title-size: 25px;
    --footer-icon-size: 50px;
    --block-start-margin: 110px;
    position: relative;
    background: rgb(0, 49, 80);
    margin-block-start: var(--block-start-margin);
    background: linear-gradient( 135deg, rgba(0, 49, 80, 1) 0%, rgba(3, 91, 128, 1) 50%, rgba(3, 154, 205, 1) 100% );
}

    footer::before,
    footer::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: repeat;
        pointer-events: none;
    }

    footer::before {
        background-image: url("../images/footer-pattern.png");
        background-size: contain;
    }

    footer::after {
        background-image: url("../images/noisy-texture.png");
        z-index: 1;
        background-size: auto;
    }

    footer .wrapper {
        z-index: 2;
    }

    footer .footer__col__group {
        grid-template-columns: auto 1fr auto;
        column-gap: clamp(25px, 3vw, 50px);
        row-gap: 30px;
        padding-block-end: clamp(40px, 3vw, 80px);
    }

        footer .footer__col__group .footer__col:nth-child(2) {
            max-width: 750px;
            margin-inline: auto;
        }

    footer h6 {
        font-size: var(--footer-title-size);
        font-weight: var(--fw-medium);
        color: var(--clr-yellow);
        margin-block-end: clamp(15px, 3vw, 25px);
    }

.footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

    .footer__nav a {
        color: rgba(255, 255, 255, 0.8);
    }

        .footer__nav a:hover {
            color: var(--clr-yellow);
            text-decoration: underline;
            text-underline-offset: 5px;
            text-decoration-thickness: 1px;
        }

.footer__contact {
    gap: clamp(20px, 3vw, 40px);
    align-content: start;
}

    .footer__contact li a {
        color: white;
        grid-template-columns: var(--footer-icon-size) 1fr;
        gap: 15px;
    }

    .footer__contact li span {
        font-size: clamp(12px, 3vw, 14px);
        font-weight: var(--fw-bold);
        text-transform: uppercase;
        padding-block-end: 5px;
    }

    .footer__contact li h6 {
        font-size: clamp(18px, 3vw, 22px);
        font-weight: var(--fw-light);
        margin: 0;
        color: white;
    }

footer .social__links {
    grid-auto-flow: column;
    justify-content: start;
}

.footer__legal {
    position: relative;
    padding-block-start: clamp(20px, 3vw, 30px);
    padding-block-end: clamp(50px, 3vw, 80px);
}

    .footer__legal::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        content: "";
        background: rgb(187, 233, 255);
        background: linear-gradient( 90deg, rgba(187, 233, 255, 1) 0%, rgba(255, 191, 96, 1) 100% );
    }

    .footer__legal .icon {
        position: absolute;
        right: 30px;
        bottom: 100%;
    }

    .footer__legal p,
    .footer__legal p a,
    .footer__legal ul a {
        color: rgba(255, 255, 255, 0.7);
        font-size: clamp(14px, 3vw, 16px);
    }

        .footer__legal p a,
        .footer__legal ul a:hover {
            text-decoration: underline;
            text-decoration-thickness: 0.7px;
            text-underline-offset: 3px;
        }

    .footer__legal ul {
        column-gap: 20px;
        row-gap: 10px;
        padding-block-start: 20px;
    }

        .footer__legal p a:hover,
        .footer__legal ul a:hover {
            color: var(--clr-yellow);
        }

@media (max-width: 1400px) {
    footer .footer__col__group {
        grid-template-columns: auto 1fr;
    }
}

@media (max-width: 860px) {
    .socialboard {
        --block-start-margin: 80px;
    }
    footer {
        --block-start-margin: 80px;
    }
        footer .footer__col__group {
            grid-template-columns: auto;
        }

    .footer__contact {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    footer {
        --footer-title-size: 20px;
        --footer-icon-size: 40px;
    }

    .footer__contact {
        grid-template-columns: auto;
    }

    .footer__nav {
        grid-template-columns: auto;
    }

    footer .footer__col__group .footer__col:nth-child(2) {
        margin: initial;
    }
}

/* --------------- Newsletter --------------- */

.newsletter__invite {
    --invite-size: 140px;
    --invite-offset: calc(var(--invite-size) / 2);
    --invite-radius: 90px;
    --invite-inline-padding: 55px;
    --cd-img-width: 240px;
    --cd-img-height: 216px;
    position: relative;
    height: var(--invite-size);
    border-radius: var(--invite-radius);
    grid-template-columns: auto 1fr auto;
    column-gap: clamp(20px, 3vw, 40px);
    align-content: center;
    align-items: center;
    background: rgb(2, 153, 205);
    padding-inline: var(--invite-inline-padding);
    transform: translateY(calc(var(--invite-offset) * -1));
    z-index: 55;
    background: linear-gradient( 90deg, rgba(2, 153, 205, 1) 0%, rgba(255, 191, 96, 1) 100% );
}

    .newsletter__invite h5 {
        font-size: clamp(20px, 2vw, 30px);
        color: white;
        font-weight: var(--fw-medium);
        margin-block-end: 5px;
        line-height: 1.1;
    }

    .newsletter__invite p {
        font-size: clamp(14px, 1vw, 18px);
        color: rgba(255, 255, 255, 0.7);
    }

    .newsletter__invite .cat__dog {
        position: absolute;
        z-index: 1;
        bottom: 0;
        right: 30%;
        width: var(--cd-img-width);
        height: var(--cd-img-height);
    }

@media (max-width: 1400px) {
    .newsletter__invite {
        --invite-size: 120px;
        --invite-inline-padding: 35px;
        --cd-img-width: 170px;
        --cd-img-height: 153px;
        column-gap: 20px;
    }

        .newsletter__invite p {
            font-weight: var(--fw-regular);
        }
}

@media (max-width: 860px) {

    .pop-up {
        padding: 1.5rem;
        width: 80%;
    }
    .pop-up-data h4 {
        font-size: 24px;
        margin-block:0.5rem;
    }

    .newsletter__invite {
        --invite-radius: 15px;
        --invite-size: 180px;
        --invite-inline-padding: 25px;
        --invite-offset: 50px;
        grid-template-columns: auto;
        padding-inline-start: 200px;
        justify-items: start;
        gap: 15px;
    }

        .newsletter__invite > img {
            display: none;
        }

        .newsletter__invite .cat__dog {
            left: 15px;
        }

        .newsletter__invite h5 {
            font-size: 24px;
        }
}

@media (max-width: 640px) {
    .newsletter__invite {
        --invite-radius: 15px;
        --invite-size: 150px;
        --invite-inline-padding: 25px;
        --invite-offset: 50px;
        --cd-img-width: 120px;
        --cd-img-height: 108px;
        padding-inline-start: 150px;
        gap: 10px;
    }

        .newsletter__invite p {
            display: none;
        }

        .newsletter__invite h5 {
            font-size: 20px;
        }
}

/* * {
    outline: 1px solid rgba(255, 0, 0, 0.38);
} */





/* new */
.pets__featured .pets__list-card-wrap {
    /* grid-template-columns: repeat(4, 1fr);*/
}
.pets__list-card-wrap {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-block-start: 2rem;
    align-items:start;
}

.sidebar-slider .sidebar-item .gallery-item img,
.pets__list-card img {
    border-radius: 10px;
}

.pets__list-card {
    --card-list-f-size: 16px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    padding: 10px 10px 30px 10px;
    border: 1px solid #e2ddd9;
}

.sidebar-slider .pets__list-card figcaption .pet-data {
    margin-block-start: 0;
    margin-block-end: 10px;
}

.pets__list-card figcaption h3 {
    font-size: 20px;
    margin-block: 10px;
}

.pets__list-card figcaption {
    padding: 0px 10px;
}

.sidebar-slider .sidebar__slider {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e2ddd9;
    padding-block-start: 20px;
}

    .sidebar-slider .sidebar__slider .pets__list-card {
        padding: 10px 20px 30px 20px;
    }

    .sidebar-slider .sidebar__slider .sidebar-item {
        background: none;
        border-radius: 0;
        border: 0px;
        margin-block-start: 0px;
    }

        .sidebar-slider .sidebar__slider .sidebar-item figcaption {
            padding-inline: 0px;
            padding-block: 0px;
        }

.sidebar-slider .pets__list-card:hover {
    box-shadow: 0 0 0;
}

.sidebar-slider .pets__list-card figure picture::after {
    display: none;
}

.sidebar-slider .sidebar__slider > h3 {
    margin-inline: 20px;
    font-size: 22px;
    color: #fcaa41;
}

.sidebar-slider .sidebar__slider h4 {
    margin-inline: 20px;
    font-size: 14px;
    color: #4b4b4b;
}

.popup-left figcaption .pet-data,
.popup-left figcaption .pet-info,
.pets__list-card figcaption .pet-data,
.pets__list-card figcaption .pet-info {
    display: flex;
    flex-wrap: wrap;
    column-gap: 28px;
}

.pets__list-card figcaption .card-link {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.popup-left figcaption .pet-data {
    flex-direction: column;
    gap: 10px;
}

.popup-left figcaption .pet-info li,
.pets__list-card figcaption .pet-info li {
    position: relative;
    font-weight: var(--fw-x-light);
    font-size: 17px;
    color: #4b4b4b;
}

.popup-left figcaption .pet-data li,
.pets__list-card figcaption .pet-data li {
    position: relative;
    font-size: var(--card-list-f-size);
    color: #4b4b4b;
    font-weight: var(--fw-regular);
}

    .popup-left figcaption .pet-data li:first-child::after,
    .popup-left figcaption .pet-info li:first-child::after,
    .pets__list-card figcaption .pet-info li:first-child::after {
        opacity: 0;
    }

.popup-left figcaption .pet-info li::after,
.pets__list-card figcaption .pet-info li::after {
    content: "";
    width: 4px;
    height: 4px;
    background: #4b4b4b;
    display: block;
    position: absolute;
    top: 9px;
    left: -16px;
    border-radius: 50%;
}

.pets__list-card figcaption .pet-data li:first-child::after {
    opacity: 0;
}

.pets__list-card figcaption .pet-data li::after {
    content: "";
    width: 1px;
    height: 20px;
    background: #4b4b4b;
    display: block;
    position: absolute;
    top: 0px;
    left: -14px;
    border-radius: 50%;
}

.pets__list-card figcaption .pet-data {
    margin-block: 15px 25px;
}

.pets__list-card .adoption,
.pets__list-card .meet-me {
    padding: 10px 24px;
    font-size: var(--card-list-f-size);
    transition: all ease-in-out 200ms;
    cursor: pointer;
}

.pets__list-card .meet-me {
    background: #e6f8ff;
    border: 1px solid #8ec0d1;
    border-radius: 50px;
    color: #1a4655;
}

.pets__list-card-wrap.lost-and-found .card-link {
    justify-content: center;
}

.pets__list-card .adoption {
    border: 1px solid #a2a2a2;
    border-radius: 50px;
    color: #4b4b4b;
}

.gallery-item picture,
.pets__list-card figure picture {
    position: relative;
}

     .gallery-item.image picture::after,
    .pets__list-card figure picture::after {
        content: "";
        width: 40px;
        height: 40px;
        position: absolute;
        right: 10px;
        bottom: 10px;
        background: url("../../images/zoom-icon.svg");
        background-size: contain;
        cursor:pointer;
    }

.pets__list-card:hover {
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.05);
}

    .pets__list-card:hover .meet-me {
        background: #0299cd;
        color: #fff;
        transition: all ease-in-out 200ms;
    }

    .pets__list-card:hover .adoption {
        background: #073a4c;
        color: #fff;
        transition: all ease-in-out 200ms;
    }

    .pets__list-card:hover figcaption h3 {
        color: #0299cd;
    }

.pets__list-card figure {
    position: relative;
}

.page__has__sidebar .filter__wrapper {
    flex-wrap: wrap;
}
.pets__list-card figure span.lost-span,
.pets__list-card figure span.found-span {
    position: absolute;
    border-radius: 18px;
    top: 10px;
    left: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: var(--fw-bold);
    padding: 6px 12px;
    z-index: 99;
}

.popup-left span.found-span,
.pets__list-card figure span.found-span {
    background: #ff5a5a;
}
.popup-left span.lost-span,
.pets__list-card figure span.lost-span {
    background-color: var(--clr-blue);
}
    .share-it {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px;
    border: 2px solid #cccc;
    border-radius: 15px;
    justify-content: space-between;
    font-weight: var(--fw-bold);
    color: #073a4c;
}

.post {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}

    .post h3 {
        color: #fff;
        font-size: 22px;
        margin-block-end: 20px;
    }

    .post::after {
        content: "";
        position: absolute;
        z-index: 8;
        background: linear-gradient( 180deg, rgba(7, 58, 76, 0.17) 30%, rgba(7, 58, 76, 0.8) 100% );
        width: 100%;
        height: 100%;
        top: 0px;
    }

    .post figcaption {
        position: absolute;
        padding: 20px;
        bottom: 0px;
        display: flex;
        z-index: 9;
        flex-direction: column;
        align-items: flex-start;
    }

        .post figcaption a {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--clr-blue);
            color: #fff;
            font-size: 14px;
            font-weight: var(--fw-bold);
            padding-inline: 20px 15px;
            padding-block: 10px;
            border-radius: 50px;
            transition: all ease-in-out 200ms;
        }

.page__has__sidebar aside {
    gap: 35px;
    display: flex;
    flex-direction: column;
}

.sidebar__nav__toggle {
    display: none;
}

.post figcaption a:hover {
    background: var(--clr-brown);
    transition: all ease-in-out 200ms;
}

.popup-left {
    --popup-size: 40px;
    --popup-width: 600px;
    position: fixed;
    right: calc(var(--popup-width) * -1);
    top: 0;
    width: var(--popup-width);
    z-index: 999;
    background: #fff;
    padding-inline-start: 60px;
    padding-block-start: 60px;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 30px;
    overflow-y: scroll;
    transition: all ease-in-out 400ms;
}
.mob-tags {
    display: flex;
    gap: 50px;
    align-items: center;
    flex-wrap: wrap;
}
    .popup-left.active-popup {
        right: 0;
        transition: all ease-in-out 400ms;
    }

    .popup-left figure {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 20px;
    }

.close-popup {
    background: #ffeaea;
    padding: 14px 10px;
    border-radius: 50%;
    width: var(--popup-size);
    height: var(--popup-size);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

    .close-popup:hover {
        background: rgba(254, 223, 177, 1);
    }

.popup-left figure img {
    border-radius: 10px;
}

.popup-left figure span {
    background: #ff5a5a;
    border-radius: 18px;
    color: #fff;
    font-size: 12px;
    font-weight: var(--fw-bold);
    padding: 6px 12px;
}

.popup-left p {
    font-weight: var(--fw-medium);
}

    .popup-left p span {
        color: #4b4b4b;
        font-weight: var(--fw-regular);
    }

.popup-left figcaption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.popup-left h3 {
    font-size: var(--title-25);
    color: var(--clr-blue);
    font-weight: var(--fw-bold);
}

.popup-left h4,
.popup-left figcaption h3 {
    color: #073a4c;
}

.popup-left h4 {
    font-size: 24px;
    font-weight: var(--fw-bold);
}

.contact-info {
    gap: 20px;
}

    .contact-info a {
        display: flex;
        gap: 10px;
        font-size: 16px;
        color: var(--clr-text);
        font-weight: var(--fw-medium);
        cursor:pointer;
    }

.popup-open header {
    z-index:90;
}



@media (max-width: 1600px) {
    .pets__list-card {
        --card-list-f-size: 14px;
    }

    .popup-left {
        gap: 25px;
    }

    .pets__list-card .adoption,
    .pets__list-card .meet-me {
        padding: 10px 22px;
    }
}

@media (max-width: 1400px) {
    .pets__list-card .adoption,
    .pets__list-card .meet-me {
        padding: 8px 14px;
    }
    .pets__featured .pets__list-card-wrap .pets__list-card {
        min-width: 300px;
    }
        .page__has__sidebar {
        gap: 25px;
    }
}

@media (max-width: 1200px) {
    /*
    .pets__featured .pets__list-card-wrap {
        overflow-x: auto;
        -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
        padding-inline: var(--wrapper-inline-padding);
        scroll-padding: var(--wrapper-inline-padding);
    }*/
        .pets__featured .pets__list-card-wrap::-webkit-scrollbar {
            display: none;
        }
    .pets__list-card {
        --card-list-f-size: 14px;
    }

        .pets__list-card figcaption .pet-data li::after {
            height: 15px;
        }

    .pets__list-card-wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .page__has__sidebar {
        gap: 25px;
    }

    .pets__list-card-wrap {
        gap: 10px;
    }

    .pets__list-card .adoption,
    .pets__list-card .meet-me {
        padding: 8px 15px;
    }
}

@media (max-width: 900px) {
    .form__control {
        --form-item-size: 40px;
    }

    .page__has__sidebar .sidebar {
        position: absolute;
        top: -30px;
        left: 0;
        width: 100%;
        z-index: 24;
        background-color: #fff;
        border-bottom: 1px solid var(--clr-blue);
        border-radius: 0px;
        padding: 0px var(--wrapper-inline-padding) 10px var(--wrapper-inline-padding);
    }

    .sidebar__nav__toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        padding: 10px;
        font-size: 16px;
        font-weight: var(--fw-bold);
        color: var(--clr-blue);
    }

    .sidebar.nav--open .sidebar__menu {
        display: block;
    }

    .sidebar__nav__toggle.active::after {
        transform: rotate(-45deg) translateY(3px);
    }

    .page__has__sidebar article {
        position: relative;
        top: 30px;
    }

    .sidebar__nav__toggle::after {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        border-top: 2px solid var(--clr-blue);
        border-right: 2px solid var(--clr-blue);
        transform: rotate(135deg) translateY(5px);
        transition: all ease-in-out 200ms;
    }

    .page__has__sidebar aside {
        order: 2;
    }

    
}

@media (max-width: 600px) {
    .pets__list-card-wrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .page__has__sidebar article {
        top: 30px;
    }
   
}

.btn__toggle__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 200px;
    height: 44px;
    border-radius: 40px;
    border: 1px solid #4B4B4B;
    margin-block: 2rem;
}

.galley-section .btn__toggle__nav a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: var(--fw-bold);
    color: var(--clr-text);
    border-radius: 25px;
    transition: all ease-in-out 200ms;
    cursor: pointer;
}

    .galley-section .btn__toggle__nav a:hover {
        text-decoration: none
    }

    .galley-section .btn__toggle__nav a.current {
        background-color: var( --clr-blue);
        color: #fff;
        pointer-events: none;
    }

.text-green {
    color: var(--clr-green);
}
a.gallery-item {
    cursor: pointer;
}

.adopt__slider .adopt__pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    transform: translateX(0%) !important;
    position: absolute;
    z-index: 999;
    bottom: 40px;
}

.pets__list-card figure .adopt__slider .swiper-pagination-bullet {
    background: #ff5a5a;
    width: 7px;
    height: 7px;
    position: relative;
    left: auto;
    z-index: 9999;
    cursor: pointer;
    padding: 0px;
}
.lightgallery-form{max-width:300px;}

.spnsrd__blk .spnsrd {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

    .spnsrd__blk .spnsrd .spnsrd__copy {
        position: absolute;
        bottom: 0px;
        left: 0px;
        padding: 2rem;
        z-index: 1;
        background: linear-gradient( 0deg, rgba(2, 153, 205, 1) 0%, rgba(255, 191, 96, 0.5) 100% );
        width: 100%;
        display: flex;
        color: #fff;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

        .spnsrd__blk .spnsrd .spnsrd__copy span {
            padding-block-end: 0px;
        }

        .spnsrd__blk .spnsrd .spnsrd__copy h3 {
            font-size: 2rem;
        }

    .spnsrd__blk .spnsrd img {
        width: 100%;
    }

.kitten-nursery .gallery-item picture img{width:100%}
.media__gallery__bento .gallery-item picture{position:static;}
.media__gallery__bento .gallery-item.image picture::after {display:none}


.happy__adoption {
    position: relative
}

.swiper-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.pets__list {
    padding-block-start: 2rem;
}

    .pets__list .swiper-button-next,
    .pets__list .swiper-button-prev {
        border: 1px solid #0299cd;
        color: #0299cd;
    }

        .pets__list .swiper-button-next:hover,
        .pets__list .swiper-button-prev:hover {
            color: #fff;
        }