:root {
    --inder: "Inder", serif;
    --irish_Grover: "Irish Grover", serif;
    --inter: "Inter", serif;
    --accent-dark: #963B2B;
    --accent-light: #FFDDBB;
    --pink: #FDAD90;
}

body {
    font-family: var(--inder);
    background: linear-gradient(270deg, #fdad90 0%, #fdb 100%);;
}

.container {
    width: 100%;
    max-width: 1396px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

/*header*/

.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    display: block;
    width: 72px;
    height: 102px;
    background-image: url(../image/logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: 10px;
}

.nav-link {
    color: var(--accent-dark);
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
}

.nav-link:hover {
    color: var(--pink);
}

/*main*/

.left-block {
    display: flex;
    gap: 57px;
    max-width: 710px;

}

.paw {
    background-image:url(../image/paw.svg) ;
    background-repeat: no-repeat;
    width: 207px;
    height: 112px;
    background-size: contain;
}

.header-cat {
    font-family: var(--irish_Grover);
    font-weight: 400;
    font-size: 120px;
    text-align: center;
    color: #963b2b;
    margin: 0 ;
    padding: 0;

}

.cat {
    position: relative;
    width: 367px;
    height: 478px;
    margin: 0 auto;
    padding-top: 200px;
    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 338px;
        height: 478px;
        z-index: 1;
        pointer-events: none;
    }
    #eys {
        width: 72px;
        left: 66px;
        top: 109px;
        height: 22px;
    }
    #ears {
        z-index: 3;
        width: 126px;
        height: 127px;
        left: 44px;
        top: 36px;
        }
    #scarf {
        width: 140px;
        height: 159px;
        top: 152px;
        left: 33px;
        }
    #tail {
        width: 346px;
        height: 463px;
        left: -5px;
        top: 7px;
        }
} 

#elipse {
    width: 500px;
    height: 500px;
    top: 7px;
    left: -90px;
}

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

.left-arrow {
   border: none;
   background: none;
   padding-left: 120px;
   padding-right: 100px;
   padding-bottom: 200px;
   cursor: pointer
 }
 .right-arrow {
    border: none;
    background: none;
    padding-left: 50px;
    padding-bottom: 200px;
    margin-right: 80px;
    cursor: pointer
 }
 
 .right-block {
    border-top-left-radius: 140px;
    border-bottom-left-radius: 140px;
    align-items: center;
    width: 516px;
    height: 842px;
    background: linear-gradient(90deg, #fdb 0%, #fdad90 100%);
    text-align: center;
    margin: 0;
    margin-left: 20px;
    margin-top: -100px;

}
 .right-center {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
 }

 h2 {
    font-family: var(--irish_Grover);
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-size: 64px;
    padding-top: 63px;
    color: var(--accent-dark);
 }

 .description {
    font-weight: 400;
    font-size: 22px;
    color: #000;
    max-width: 380px;
    text-align: left;
    margin-left: 80px;
 }

 .cards {
    border-radius: 75px;
    width: 360px;
    height: 445px;
    background: #fdb698;
    margin-left: 80px;
    padding-top: 10px;
 }

 .textPanel1 {
    font-weight: 200;
    font-size: 22px;
    color: #000000;
 }

 .card1 {
    border-radius: 50px;
    width: 131px;
    height: 145px;
    background: #fdb;
    margin-left: 13px;
    align-items: center;
    font-weight: 400;
    font-size: 22px;
    text-align: center;
    color: #963b2b;
    border: none;
    transition: 0.5s;
    cursor: pointer;
    margin-top: 10px;
 }
 
 .card4 {
    border-radius: 50px;
    width: 131px;
    height: 145px;
    background: #fdb;
    margin-left: 45px;
    margin-top: 10px;
    align-items: center;
    font-weight: 400;
    font-size: 22px;
    text-align: center;
    color: #963b2b;
    border: none;
    transition: 0.5s;
    cursor: pointer
 }

.cardColor {
    display: flex;
}
 
 .card1:hover {
    transform: scale(1.1);
 }

.card4:hover {
    transform: scale(1.1);
}
 
 .clew {
    padding-top: 8px;
    margin-right: 70px;
    
 }

.imageCat {
    max-width: 90px;
    height: 135px;
}

.arrowPanelLeft {
    border: none;
    background: transparent;
    padding-top: 30px;
    padding-right: 50px;
    cursor: pointer
}

.arrowPanelRight {
    border: none;
    background: transparent;
    padding-top: 30px;
    padding-left: 50px;
    cursor: pointer
}

/*footer*/ 

footer {
    display: flex;
    justify-content: center;
    border-radius: 40px;
    width: 768px;
    height: 181px;
    background: #fdad90;
    text-align: center;
    margin-top: -220px;
}

.textFooter {
    align-items: center;
    text-align: center;
    font-weight: 400;
    font-size: 22px;
    color: #000;
    max-width: 681px;
}
.save {
    margin-top: -150px;
    position: absolute;
    margin-left: -509px;
    background-color: var(--accent-dark);
    border: none;
    color: white;
    border-radius: 10px;
    width: 100px;
    height: 30px;
    font-size: 17px;
    cursor: pointer;
}
.save:hover {
    background-color: var(--accent-light);
    color: var(--accent-dark)
}

/*media*/

@media(max-width: 1350px) {
    .description {
        font-size: 21px;
    }
    .cards {
        margin-right: 100px;
    }
}

@media(max-width: 1300px) {
    .right-block {
        width: 400px;
        height: 750px;
    }
    .cards {
        width: 330px;
        height: 400px;
        margin-left: 50px;
    }
    .description {
        font-size: 16px;
        padding-right: 10px;
    }
    .card1 {
        width: 120px;
        height: 135px;
        margin-left: 5px;
        margin-right: 10px;
        margin-top: 2px;
    }
    .card4 {
        width: 120px;
        height: 135px;
        margin-left: 35px;
        margin-right: 20px;
        margin-top: 1px;
    }
    .clew {
        width: 192px;
        padding-top: 0px;
    }
    .arrowPanelLeft {
        width: 40px;
    }
    .arrowPanelRight {
        width: 40px;
        margin-right: 56px;
    }
    .textPanel1 {
        margin: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media(max-width: 1253px) {
    .logo {
        padding-right: 10px;
    }
    .right-block {
        margin-right:0px ;
    }
    h2 {
        padding-left: 56px;
    }
}

@media(max-width: 1250px) {
    .right-block {
        width: 380px ;
        height:650px ;
    }
    .description {
        font-size: 0;
    }
    .cards {
        margin-left: 20px;
        margin-top: 20px;
    }
    h2 {
        padding-right: 90px;
        margin-top: -20px;
    }
    .clew {
        padding-top: 14px;
        padding-left: 30px;
    }
    .save {
        margin-top: -8px;
    }
}

@media(max-width: 1167px) {
    .right-block {
        width: 0;
        height: 0;
    }
    .cards {
        margin-left: -197px;
        margin-top: 117px;
        width: 300px;
    }

    .clew {
        width: 0;
    }
    .right-arrow {
        margin-right: 160px;
        padding-left: 0;
    }
    .left-arrow {
        padding-left: 0;
        padding-right: 75px;
    }
    h1 {
        font-size: 100px;
    }
    .color-buttons {
        padding-right: 40px;
    }
    .arrowPanelRight{
        margin-left: 30px;
    }
    .arrowPanelLeft {
        padding-right: 40px;
    }
    .card4 {
        margin-left: 16px;
        margin-top: 10px;
    }
    .textPanel1 {
        font-size: 17px;
    }
    .cat #eys {
        width: 72px;
        left: 54px;
        top: -111px;
        height: 463px;
    }
    .cat #scarf {
        width: 140px;
        height: 159px;
        top: 152px;
        left: 20px;
    }
    .cat #tail {
        width: 300px;
        height: 434px;
        left: 16px;
        top: 27px;
    }
    .cat {
        margin-left: -43px;
        width: 300px;
        height: 458px;
    }
    .cat img {
        left: -10px;
    }
    .cat #ears {
        width: 128px;
        left: 32px;
        top: -132px;
        height: 463px;
    }    
    #elipse {
    width: 400px;
    height: 400px;
    top: 7px;
    left: -70px;
    }
    h2 {
        display: none;
    }
    .save {
        margin-left: -361px;
    }
}

@media(max-width: 834px){
    .right-center {
        justify-content: flex-start;
    }
    footer {
        width: 569px;
        height: 304px;
        margin-left: 100px;
        margin-top: -140px;
        margin-bottom: 40px;
    }
    .textFooter {
        max-width: 504px;
        padding-top: 50px;
    }
    .card1 {
        width: 131px;
        height: 135px;
        margin-right: 3px;
    }
    .card4 {
        width: 131px;
        height: 135px;
        margin-left: 13px;
    }
    .cards {
        width: 300px;
        height: 405px;
        margin-top: 134px;
    }
    
}
@media(max-width: 772px){
    .right-center {
        display: block;
        justify-content: center;
    }
    .cards {
        margin-left: 110px;
        margin-top: -64px;
        width: 360px;
        height: 445px;
    }
    .right-arrow {
        margin-right: 33px;
    }
    .left-block {
        display: flex;
        gap: 20px;
        max-width: 710px;
    }
    .header-cat {
        font-size: 110px;
    }
    .cat {
        margin-left: 36px;
    }
    .nav-link {
        font-size: 20px;
    }
    .card4 {
        width: 131px;
        height: 135px;
        margin-left: 40px;
    }
    footer {
        width: 370px;
        height: 302px;
        margin-top: 450px;
        margin-left: 126px;
    }
    .textFooter {
        font-size: 22px;
        padding: 0;
        text-align: left;
        padding-left: 20px;
    }
    .save {
        margin-top: -504px;
        margin-left: 236px;
    }
}

@media(max-width: 666px){
    .header-cat {
        font-size: 70px;
    }
    .paw {
        width: 150px;
        height: 112px;
    }
    .logo {
        width: 40px;
        height: 102px;
    }
    .right-arrow {
        margin-right: 0px;
    }
    .cat {
        margin-left: -63px;
    }
    .cards {
        margin-left: 17px;
    }
    footer {
        margin-left: 43px;
    }
}

@media(max-width: 468px){
    .nav-link {
        font-size: 15px;
    }
    .header-wrapper {
        justify-content: flex-start;
        gap: 170px;
    }
    .right-center {
        justify-content: center;
        margin-left: 30px;
    }
    .paw {
        width: 100px;
        height: 112px;
    }
    .cat {
        margin-left: -35px;
        width: 200px;
        height: 458px;
        #eys {
            width: 47px;
            left: 19px;
            top: -42px;
            height: 400px;
        }
        #body {
            width: 200px;
        }
        #ears {
            width: 87px;
            height: 455px;
            left: 4px;
            top: -83px;
        }
        #scarf {
            width: 95px;
            height: 159px;
            top: 154px;
            left: -4px;
        }
        #tail {
            width: 239px;
            height: 434px;
            left: -33px;
            top: 17px; 
        }
        #elipse {
            width: 277px;
            height: 400px;
            top: 52px;
            left: -70px;
        }
    }
    .header-cat {
        font-size: 60px;
    }
    .cards {
        margin-left: -30px;
        margin-top: -102px;
    }
    footer {
        margin-left: 20px;
        margin-top: 398px;
        width: 358px;
    }
    .center-block {
        margin-top: -85px;
    }
    .save {
        margin-left: 81px;
    }
}

@media(max-width: 408px) {
    .nav-link {
        font-size: 12px;
    }
    .cat {
        margin-left: -34px;
    }
    .right-center {
        justify-content: center;
        margin-left: 2px;
       }
    .header-wrapper {
        gap: 180px
    }
    .header-cat {
        font-size: 50px;
    }
    .paw {
        width: 90px;
        height: 100px;
    }
    .cards {
        margin-left: -31px;
        margin-top: -140px;
    }
    footer {
        margin-left: -2px;
        margin-top: 358px;
    }
    .save {
        margin-top: -490px;
    }
}

@media(max-width: 388px){
    .nav-link {
        font-size: 8px;
    }
    .cat {
        margin-left: -53px;
        #elipse {
            left: -54px;
        }
    }
    .cards {
        width: 335px;
        height: 445px;
    }
    footer {
        margin-left: -7px;
        width: 338px;
    }
    .textFooter {
        font-size: 20px;
    }
}