html{
        overflow-x: hidden !important;
    }
    .products-new .section {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-top: 60px;
    }

    .products-new .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .products-new .header .head {
        font-size: 40px;
        color: var(--primaryText);
        font-weight: 700;
        margin: 0
    }

    @media screen and (max-width:1200px) {
        .products-new .header .head {
            font-size: 30px;
        }
    }

    @media screen and (max-width:992px) {
        .products-new {
            height: auto;
        }

        .products-new .header .head {
            font-size: 25px;
        }
    }

    @media screen and (max-width:768px) {
        .products-new .section {
            gap: 0;
            padding-top:0 ;
        }
        .list-pets{
            padding: 30px 0;
        }

        .products-new .header .head {
            font-size: 24px;
        }

        .products-new {
            margin-top: 40px;
        }
    }

    @media screen and (max-width:568px) {
        .products-new .header {
            flex-wrap: wrap;
            gap: 30px;
        }

        .products-new .header .head {
            font-size: 20px;
        }
    }

    body{
        margin:0;
        padding:0;
    }

    .preloader{
        width:100%;
        height:100vh;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .animation_nav{
        margin: 0;
        background-color: var(--primary);
    }

    .preloader .content{
        width:25%;
        height:25%;
        position: relative ;
        background:white;
        border-radius:10px;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-direction: column;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        overflow: hidden !important;

        opacity:1;
    }

    .animation_content_none{
        opacity: 1 !important;
        width:95% !important;
        height:90% !important;
        border-radius: 50px !important;
    }

    .animation_content{
        animation:
            fade_in 2s ease forwards,
            expand 1s ease forwards 3.5s;
    }

    .preloader .content .img_logo{
        width:200px;
        opacity:0;
        transform:translateY(50px) scale(.6);

        animation: img_fade 2s ease forwards;
        animation-delay:1s;
    }

    .preloader .content .img_none{
        display: none !important;
    }

    .preloader .content .name{
        font-size: 160px;
        font-weight: 900;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        color: var(--primary) !important;
        /* animation:name_fade 1s 5s; */
        transform: translate(0 , -200px);
        color: white;
        top: -120px;
        font-family: 'inter';
        font-weight: bold;
    }

    .preloader .content .animation_name{
        visibility: visible;
        animation: name_fade 1s 5s forwards;
    }

    .preloader .content .animation_name_mini{
        visibility: visible;
        animation: name_fade 1s forwards ;
    }

    @keyframes name_fade {
        0% {
            opacity: 0;
            position: absolute;
            transform: translate(0 , -200px);
        }

        99% {
            position: absolute;
        }

        100% {
            opacity: 1;
            transform: translate(0 , 0);
            position: relative;
        }
    }


    @keyframes fade_in{
        from{
            opacity:0;
            width: 15%;
            height: 15%;
        }
        to{
            opacity:1;
            width: 25%;
            height: 25%;
        }
    }

    @keyframes img_fade{

        0%{
            opacity:0;
            transform:translateY(50px) scale(.6);
        }

        35%{
            opacity:1;
            transform:translateY(0) scale(1);
        }

        70%{
            opacity:1;
            transform:translateY(0) scale(1);
        }

        100%{
            opacity:0;
            transform:translateY(0) scale(.8);
            display: none;
        }
    }

    @keyframes expand{
        from{
            width:25%;
            height:25%;
        }

        to{
            width:100%;
            height:90%;
            border-radius: 50px;
        }
    }

    .preloader .content .video{
        width: 300px;
        position: absolute;
        top: 192px;
        left: 50%;
        transform: translate(calc(-50% - 0px), 0) !important;
        opacity: 0;
        visibility: hidden;
        z-index: 9;
        transition: all .3s;
    }

    .preloader .content .video_cat{
        position: absolute;
        opacity: 1 !important;
        visibility: visible;
        width: 460px !important;
        top: 270px;
    }

    .preloader .content .video_hidden{
        opacity: 0 !important;
        visibility: hidden !important;
    }


    .preloader .content .animation_video{
        visibility: visible;
        animation: fade_buttons 1s 5s forwards;
    }

    .preloader .content .animation_video_mini {
        visibility: visible;
        animation: fade_buttons 1s forwards;
    }

    .preloader .content .background_petflakes{
        background-image: url(../../img/background-petflakes.webp);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 1200px;
        position: absolute;
        opacity: 0.3;
        top: 300px;
    }

    .preloader .content .buttons{
        position:absolute;
        bottom: 50px;
        left:0;
        width:100%;

        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:0 80px;
        z-index: 99;

        opacity:0;
        visibility:hidden;

        transform:translateY(-170px);
    }

    .preloader .content .animation_buttons {
        visibility: visible;
        animation: fade_buttons 1s 5s forwards;
    }

    .preloader .content .animation_buttons_mini {
        visibility: visible;
        animation: fade_buttons 1s forwards;
    }

    @keyframes fade_buttons{

        from{
            opacity:0;
            transform:translateY(-170px);
        }

        to{
            opacity:1;
            transform:translateY(0);
        }

    }

    .preloader .content .buttons a{
        position: relative;
        overflow: hidden;
        isolation: isolate;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 200px;
        height: 75px;
        background-color: var(--primary);
        border-radius: 40px;
        padding: 20px;
        font-weight: bold;
        font-size: 20px;
        color: white;
        text-decoration: none;
        border: 2px solid var(--primary);
    }

    .preloader .content .buttons a span{
        position: relative;
        z-index: 2;
        transition: color .4s ease;
    }

    .preloader .content .buttons a .angle{
        position: relative;
        z-index: 2;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
    }

    .preloader .content .buttons a .angle svg{
        position: relative;
        z-index: 2;
        color: var(--primary);
    }

    .preloader .content .buttons a::before{
        content: "";
        position: absolute;
        top: 12.5px;
        right: 20px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: white;
        transform: scale(0);
        transform-origin: center;
        transition: transform 1s ease-out;
        z-index: 1;
    }

    .preloader .content .buttons a:hover::before{
        transform: scale(12);
    }

    .preloader .content .buttons a:hover span{
        color: var(--primary);
    }

    .preloader .content .buttons .switch{
        display: flex;
        background-color: white;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border-radius: 30px;
        height: 75px;
        gap: 15px;
    }

    .preloader .content .buttons .switch .img_switch{
        width: 45px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .preloader .content .buttons .switch .active_switch{
        background: var(--bs-yellow);
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px;
        width: 55px;
    }

    @media screen and (max-width:1200px) {
        .preloader .content .name{
            font-size: 130px;
        }

        .preloader .content .background_petflakes{
            height: 1000px;
        }

    }

    @media screen and (max-width:992px) {
        .preloader .content .name{
            font-size: 100px;
        }

        .preloader .content .img_logo{
            width: 170px;
        } 

        .preloader .content .background_petflakes{
            height: 800px;
        }
    }

    @media screen and (max-width:776px) {
        .preloader .content .name {
            font-size: 70px;
        }

        .preloader .content .img_logo {
            width: 150px;        
        }

        .preloader .content .buttons{
            padding:0 30px;
        }

        .preloader .content .background_petflakes{
            height: 600px;
        }

        .preloader .content .buttons a{
            width: 175px;
            height: 65px;
            padding: 15px;
            font-size: 18px;
        }

        .preloader .content .buttons .switch{
            padding: 15px;
            height: 65px;
            gap: 10px;
        }
        .preloader .content .video{
            /* width: 150px; */
        }

        .preloader .content .video_cat{
            /* width: 300px !important; */
        }

    }

    @media screen and (max-width:576px) {
        .preloader .content .name {
            font-size: 40px;
            margin-top: 95px !important;
        }

        .preloader .content .video{
            width: 100px;
        }

        .preloader .content .video{
            width: 200px;
            top: 176px;
        }

        .preloader .content .video_cat{
            width: 300px !important;
            top: 234px;
        }

        .preloader .content .background_petflakes{
            height: 400px;
        }


        .preloader .content .img_logo {
            width: 90px;        
        }

        .preloader .content .buttons a{
            width: 165px;
            height: 60px;
            padding: 10px;
            font-size: 16px;
        }

        .preloader .content .buttons .switch{
            padding: 10px;
            height: 60px;
            gap: 5px;
        }

        .preloader .content .buttons .switch .img_switch{
            width: 35px;
        }
    }