:root {
	--color-light-xl: #fff;
	--color-light-l: #f6f6f6;
	--color-light-s: #fafafa;
	--color-dark-s: #cdcdcd;
	--color-dark-m: #b2b2b2;
	--color-dark-l: #545454;
	--color-dark-xl: #4c4c4c;
	--color-dark-2xl: #444;
	--color-dark-3xl: #292929;
	--color-primary: #f1cdb3;
	--color-primary-light: #fddcc4;
	--start-screen-gradient-background: #211f20;
	--footer-gradient-background: #211f20;

    --color-test:#b2b2b2;
}

:root {
    --font-family: "Georgia", sans-serif;
    --second-family: "Arial", sans-serif;
    --third-family: "Inter", sans-serif;
}

* {
    box-sizing: border-box;

    margin: 0px;
    padding: 0px;

    /* border: 1px solid rgb(0, 0, 0); */

    list-style: none;
    text-decoration: none;
}

/* .header-content,.start-screen-content, .about-content, .pets-content, .help-content, .donation-content, .footer-content {
    border: 1px solid rgb(255, 0, 0);
} */

html {
    scroll-behavior: smooth;
}

.body {
    min-width: 320px;
    width: 100%;
}

.body.delete-scroll {
    overflow: hidden;
} 

.body-wraper {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.on {
    position: absolute;

    top: 0px;
    left: -100%;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.5);
}

.body-wraper.blackout .on{
    left: 0;
}

.body-wraper.blackout2 .on{
    left: 0;
}

.body-wraper.blackout2 .popap-window {
    display: block;
}

.header {
    display: flex;
    justify-content: center;

    background: url("./assets/img/background.png"), radial-gradient(237.5% 111.8% at 0% 0%, rgb(91, 72, 58) 0%, rgb(38, 36, 37) 100%), var(--start-screen-gradient-background);
    background-size: cover;
}

.header-content {
    display: flex;
    justify-content: space-between;
    padding: 30px 40px 0px 40px;

    width: 1280px;
}

.header-logo {
    text-align: center;
}

.header-logo:hover {
    text-shadow: 0px 0px 10px var(--color-primary-light);
    transition: 0.3s;
}

.header-logo-title {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 32px;
    line-height: 110%;
    letter-spacing: 0.06em;
    color: var(--color-primary);
}

.header-logo-subtitle {
    margin-top: 10px;

    font-family: var(--second-family);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--color-light-xl);
}

.burger-container {
    position: absolute;

    top: 48px;
    right: 20px;
}

.burger-btn {
    display: none;
    cursor: pointer;
    /* margin-top: 18px; */
    /* margin-left: 64px; */
    position: relative;

    width: 30px;
    height: 22px;

    border: none;
    background-color: transparent;

    transition: transform .5s;
}

.burger-btn span {
    position: absolute;

    width: 30px;
    height: 2px;

    background-color: var(--color-primary);

    left: 0px;

    transition: transform .5s, box-shadow .3s;
}

.burger-btn span:nth-child(1) {
    transform: translateY(-10px);
}

.burger-btn span:nth-child(3) {
    transform: translateY(10px);
}

/* подцветка бургер меню при наведении
.burger-btn:hover span:nth-child(1) {
    box-shadow: 0px 0px 5px var(--color-primary);
}
.burger-btn:hover span:nth-child(2) {
    box-shadow: 0px 0px 5px var(--color-primary);
}
.burger-btn:hover span:nth-child(3) {
    box-shadow: 0px 0px 5px var(--color-primary);
} */

/*rotate burger-btn with stick*/
.header.open .burger-btn{
    transform: rotate(90deg);
}

/* for each individual stick
.header.open .burger-btn span:nth-child(1){
    transform: translateY(0px) translateX(10px) rotate(90deg);
}
.header.open .burger-btn span:nth-child(2){
    transform: rotate(90deg);
    
}
.header.open .burger-btn span:nth-child(3){
    transform: translateY(0px) translateX(-10px) rotate(90deg);
} 
*/

.nav {
    margin-top: 16px;
}

.nav-list {
    display: flex;
    /* justify-content: flex-end; */
}

.nav-links {
    margin-left: 36px;
    margin-bottom: 20px;

    font-family: var(--second-family);
    font-weight: 400;
    font-size: 15px;
    line-height: 160%;
    color: var(--color-dark-s);
}

.interactive:hover {
    color: var(--color-light-xl);
    transition: 0.2s;
}

.interactive:active {
    padding-bottom: 3px;
    border-bottom: 3px solid var(--color-primary);
}

.about-the-shelter {
    padding-bottom: 4px;
    border-bottom: 3px solid var(--color-primary);

    cursor:default;
}

/* .about-the-shelter:hover {
    color: var(--color-light-xl);
    transition: 0.3s;
}

.about-the-shelter:active {
    padding-bottom: 3px;
    border-bottom: 3px solid var(--color-primary);
} */

.start-screen {
    display: flex;
    justify-content: center;

    background: url("./assets/img/background.png"), radial-gradient(237.5% 111.8% at 0% 0%, rgb(91, 72, 58) 0%, rgb(38, 36, 37) 100%), var(--start-screen-gradient-background);
    background-size: 100%;
}

.start-screen-content {
    display: flex;
    /* margin-top: 90px; */
    padding: 90px 40px 0px 40px;

    max-width: 1280px;
}

.content-text {
    margin-top: 163px; 
    margin-right: 42px;
    margin-bottom: 243px;
}

.content-heading {
    margin-right: 120px;
}

.content-heading-title {    
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 44px;
    line-height: 130%;
    color: var(--color-light-xl);
}

.content-subheading {
    margin-top: 42px;
}

.content-subheading-subtitle {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 15px;
    line-height: 160%;
    color: var(--color-dark-s);
}

.make-a-friend{
    display: block;
    margin-top: 42px;
    padding: 15px 45px;

    border-radius: 100px;
    width: 208px;
    height: 52px;
    border: none;

    background: var(--color-primary);

    font-family: var(--font-family);
    font-weight: 400;
    font-size: 17px;
    line-height: 130%;
    letter-spacing: 0.06em;
    color: var(--color-dark-3xl);
}

.make-a-friend:hover {
    background: var(--color-primary-light);

    box-shadow: 0px 0px 10px var(--color-primary-light);
    transition: 0.3s;
}

.make-a-friend:active {
    background: var(--color-primary-light);

    box-shadow: inset 0px 0px 5px black;
    transition: 0.3s;
}

.content-dog-img {
    /* margin-right: 40px; */
}

.about {
    display: flex;
    justify-content: center;

    background: var(--color-light-xl);
}

.about-content {
    display: flex;
    justify-content: center;
    padding: 80px 40px 100px 40px;

    width: 1280px;
}

.about-pets-img {
    display: block;
    margin: 0px auto;
    margin-right: 120px;
    margin-left: 175px;
    /* margin: 0px 120px 0px 175px; */
}

.about-text {
    display: block;
    margin: 13px auto;
    margin-right: 175px;
    /* margin: 13px 175px 14px 0px;  */
    width: 430px;
}

.about-text-title {
    margin-right: 60px;

    font-family: var(--font-family);
    font-weight: 400;
    font-size: 35px;
    line-height: 130%;
    letter-spacing: 0.06em;
    color: var(--color-dark-l);
}

.about-text-subtitle {
    margin-top: 25px;

    font-family: var(--second-family);
    font-weight: 400;
    font-size: 15px;
    line-height: 160%;
    color: var(--color-dark-xl);
}

.pets {
    display: flex;
    justify-content: center;

    background: var(--color-light-l);
}

.pets-content {
    padding: 80px 40px 100px 40px;

    width: 1280px;
}

.pets-title {
    display: block;
    margin: 0px auto;
    margin-bottom: 60px;
    /* margin: 0px 400px 60px 400px; */
}

.pets-title-item {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 35px;
    line-height: 130%;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--color-dark-l);
}

.pets-slider {                  /*slider-container*/
    display: flex;
    justify-content: center;
    /* width: 435px; */
}

.left-btn {
    margin: auto 0px;
    
    margin-right: 53px;

    cursor: pointer;

    background-color: var(--color-light-l);

    min-width: 52px;
    height: 52px;
    border-radius: 100px;
    border: 2px solid var(--color-primary);
}

.left-btn:hover {
    background: var(--color-primary-light);
    border: 2px solid var(--color-primary-light);
    transition: 0.3s; 
}

.left-btn:active {
    transition: 0.3s;
    box-shadow: inset 0px 0px 10px gray;
}

.slider-container {
    display:flex;
    overflow-x: scroll;
}

.slider-container::-webkit-scrollbar {
    display: none;
}

.pets-slider-cards {            /*slides-wrapper*/
    display: flex;
    /* justify-content: space-between; */
    gap: 0px 90px;
    /* width: 990px; */
}

.pets-card {                    /*slide*/
    border-radius: 9px;
    width: 270px;
    height: 435px;

    background: var(--color-light-s);
    cursor: pointer;
}

.pets-card-photo {
    border-radius: 9px 9px 0 0;
}

.pets-content-title {
    margin-top: 24px;

    font-family: var(--font-family);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--color-dark-l);
}

.pets-content-btn {    
    display: block;
    margin: 30px auto;

    border: 2px solid var(--color-primary);
    border-radius: 100px;
    padding: 15px 40px;
    width: 187px;
    height: 52px;

    background: var(--color-light-s);
    cursor: pointer;
}

.pets-content-btn:hover {
    box-shadow: 0px 0px 10px var(--color-primary-light);
    transition: 0.3s;
}

.pets-content-btn-title {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 17px;
    line-height: 130%;
    letter-spacing: 0.06em;
    color: var(--color-dark-3xl);
}

.pets-card:hover {
    background: var(--color-light-xl);
    box-shadow: 0px 0px 10px var(--color-primary-light);
    transition: 0.3s;
}

.pets-card:hover .pets-content-btn {
    background: var(--color-primary-light);
    transition: 0.3s;
}

.pets-content-btn:active {
    box-shadow: inset 0px 0px 5px black;
    transition: 0.3s;
}

.right-btn {
    margin: auto 0px;
    margin-left: 53px;

    cursor: pointer;

    background-color: var(--color-light-l);

    min-width: 52px;
    height: 52px;
    border-radius: 100px;
    border: 2px solid var(--color-primary);
}

.right-btn:hover {
    background: var(--color-primary-light);
    border: 2px solid var(--color-primary-light);
    transition: 0.3s; 
}

.right-btn:active {
    transition: 0.3s;
    box-shadow: inset 0px 0px 10px gray;
}

.get-to-know-the-rest{
    display: block;
    margin: 0px auto;
    margin-top: 59px;
    /* margin: 59px 469px 0px 470px; */
    /* margin: 60px auto; */


    border: var(--color-light-s);
    border-radius: 100px;
    padding: 15px 44px;
    width: 261px;
    height: 52px;

    background: var(--color-primary);

    font-family: var(--font-family);
    font-weight: 400;
    font-size: 17px;
    line-height: 130%;
    letter-spacing: 0.06em;
    color: var(--color-dark-3xl);
    cursor: pointer;
}

.get-to-know-the-rest:hover {
    background: var(--color-primary-light);
    box-shadow: 0px 0px 10px var(--color-primary-light);
    transition: box-shadow 0.3s;
}

.get-to-know-the-rest:active {
    box-shadow: inset 0px 0px 5px black;
    transition: 0.3s;
}

.help {
    display: flex;
    justify-content: center;
    background: var(--color-light-xl);
}



.help-content {
    padding: 80px 40px 100px 40px;

    width: 1280px;
    /* height: 431px; */
}

.help-head-title {
    display: block;
    margin: 0px auto;
    /* padding: 0px 440px; */
    margin-bottom: 60px;
    /* margin: 0px 440px 60px 440px; */
}

.help-head-item {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 35px;
    line-height: 130%;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--color-dark-l);
}

.help-list {
    /* margin: 0px 87px; */

    display: flex;
    flex-wrap: wrap;
    justify-content:center;

    gap: 55px 120px;

    align-items: baseline;
}

.help-svg {
    display: block;
    margin: 0px auto;
}

.help-list-item-title {
    display: block;
    margin-top: 29px;

    font-family: var(--font-family);
    font-weight: 400;
    font-size: 20px;
    line-height: 115%;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--color-dark-l);
}

.donation {
    display: flex;
    justify-content: center;

    background: var(--color-light-l);
}

.donation-content {
    display: flex;
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 100px;
    /* margin: 75px 181px 100px 181px; */

    width: 915px;
}

.donation-content-img {
    margin: 11px 30px 10px 0px;
}

.donation-content-title {
    margin-right: 80px;
    margin-bottom: 20px;

    font-family: var(--font-family);
    font-weight: 400;
    font-size: 35px;
    line-height: 130%;
    letter-spacing: 0.06em;
    color: var(--color-dark-l);
}

.donation-content-subtitle {
    /* margin-right: 73px; */
    margin-bottom: 20px;

    font-family: var(--font-family);
    font-weight: 400;
    font-size: 15px;
    line-height: 110%;
    letter-spacing: 0.06em;
    color: var(--color-dark-l);
}

.donation-card {
    display: flex;
    margin-right: 31px;
    margin-bottom: 20px;

    border-radius: 9px;
    padding: 10px 15px;

    width: 350px;
    height: 43px;

    background: var(--color-primary);
}

.donation-card:hover {
    box-shadow: 0px 0px 10px var(--color-primary-light);
    transition: 0.3s;
}

.donation-card:active {
    box-shadow: inset 0px 0px 5px black;
    transition: 0.3s;
}

.donation-card-number {
    margin-left: 15px;

    font-family: var(--font-family);
    font-weight: 400;
    font-size: 20px;
    line-height: 115%;
    letter-spacing: 0.06em;
    color: var(--color-dark-l);
}


.donation-content-sub-card-number {
    font-family: var(--second-family);
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    color: var(--color-dark-m);
}

.footer {
    display: flex;
    justify-content: center; 

    background: url("./assets/img/background.png"), radial-gradient(549.89% 73.65% at 5.73% 50%, rgb(81, 61, 47) 0%, rgb(26, 26, 28) 100%), var(--start-screen-gradient-background);
    background-size: 100%;

    height: 350px;
}

.footer-content {
    display: flex;
    gap: 0px 160px;

    margin: 40px 40px 0px 40px;
}

.footer-content-contacts {
    margin-top: 16px; 
    margin-bottom: 60px;

    width: 278px;
    /* height: 234px; */
}

.footer-content-location {
    margin-top: 16px; 
    margin-bottom: 60px;
    margin-right: 5px;

    width: 302px;
    /* height: 234px; */
}

.contacts-title {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 35px;
    line-height: 130%;
    letter-spacing: 0.059em;
    color: var(--color-light-xl);
}

.connect {
    display: flex;
    margin-top: 37px;
}

.connect-title {
    margin-top: 5px;
}

.location {
    display: flex;
    margin-top: 33px;
}

.location-title {
    margin-top: 3px;
}

.contacts-list-item:hover div {
    text-shadow: 0px 0px 10px var(--color-primary-light);
    filter: drop-shadow(0px 0px 10px var(--color-primary-light));
    transition: 0.3s;
}

.contacts-list-item:active div {
    text-shadow: 0px 0px 10px var(--color-light-l);
    filter: drop-shadow(0px 0px 10px var(--color-light-l));
    transition: 0.3s;
}

.svg-location {
    margin-top: 5px;
}

.contacts-text {
    /* margin-top: 4px; */
    margin-left: 20px;

    font-family: var(--font-family);
    font-weight: 400;
    font-size: 20px;
    line-height: 115%;
    letter-spacing: 0.06em;
    color: var(--color-primary);
}

.footer-dog-img {
    width: 300px;
    height: 310px;
}



/*----------------------------------------------------------------------*/
/* .popap-window,      .popap-window-content,  .button-container,  .exit,  
.popap-card,        .popap-photo,           .card-text ,        .text-name,
.card-text,         .text-breed ,           .text-description,  
.card-list,    .card-list-item {
    border: solid 1px black;
    margin: 5px;
} */


.popap-window {
    display: none; 

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.button-container {
    display: flex;
    justify-content: end;

    position: relative;
    right: -52px;
}

.exit {
    margin-right: 9px;

    border-radius: 100px;
    border: 2px solid var(--color-primary);
    background: rgba(0, 0, 0, 0.1);

    width: 52px;
    height: 52px;

    cursor: pointer;
}

.exit:hover {
    background: var(--color-primary-light);
    border: 2px solid var(--color-primary-light);

    transition: 0.3s; 
}

.exit:active {
    transition: 0.3s;
    box-shadow: inset 0px 0px 10px gray;
}

.popap-card {
    width: 900px;

    display: flex;
    background-color: #fff;
    border-radius: 9px;
}

.popap-photo {
    border-radius: 9px 0 0 9px;
    width:  500px;
    height: 500px;
}

.card-text {
    margin: 50px 20px 0px 30px;
    width: 351px;
}

.text-name {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 35px;
    line-height: 130%;
    letter-spacing: 0.06em;
    color: #000;
}

.text-breed {
    margin-top: 10px;

    font-family: var(--font-family);
    font-weight: 400;
    font-size: 20px;
    line-height: 115%;
    letter-spacing: 0.06em;
    color: #000;
}

.text-description {
    margin-top: 40px;

    font-family: var(--font-family);
    font-weight: 400;
    font-size: 15px;
    line-height: 113%;
    letter-spacing: 0.06em;
    color: #000;
}

.card-list{
    margin-top: 40px;
    margin-left: 15px;
}

.card-list-item {
    margin-top: 10px;

    list-style: initial;
    color: var(--color-primary);
}

.text-fonts {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 15px;
    line-height: 110%;
    letter-spacing: 0.06em;
    color: #000;
}