body,p{padding:0;margin:0;font-family:Verdana,Geneva,Tahoma,sans-serif;overscroll-behavior:none}.grid{display:grid;width:100%;height:100vh;grid-template-areas:"nav nav nav nav" "main main main main" "footer footer footer footer";grid-template-rows:auto 1fr auto;grid-template-columns:repeat(4,1fr)}.nav{grid-area:nav;background-color:#fff}.main{grid-area:main}footer{grid-area:footer;background-color:#121212;display:flex;align-items:center;justify-content:center;height:50px;color:#fff}.btn{color:#000;border-radius:24px;outline:0;border:none;box-shadow:none;background-color:transparent;font-size:1rem;font-weight:700;letter-spacing:3px;padding:24px 32px;text-transform:uppercase;cursor:pointer}h1,h2{margin:0;padding:0}a{text-decoration:none;color:inherit}.nav{padding:40px 64px;position:relative}.nav .links{display:flex;align-items:center;flex-direction:column;list-style-type:none;gap:32px;font-weight:700}.nav .links a{color:#000;text-decoration:none}.nav .logo{height:40px;width:40px}.nav .logo img{height:100%;width:100%}.nav .menu{display:flex;justify-content:center;flex-direction:column;gap:8px;cursor:pointer}.nav .menu-hidden{display:none}.nav .menu__item{height:.3rem;width:2rem;background-color:#fbae04}.nav .responsive{display:flex;justify-content:space-between}.main .hero{position:relative;display:flex;flex-direction:column}.main .hero .view-dogs{background-color:#fbae04;color:#fff}.main .hero .heroImg{object-fit:cover;object-position:center;width:100%}@media screen and (max-width:500px){.main .hero{width:100%;height:500px}.main .hero .heroImg{position:relative!important;height:50%;display:flex}.main .hero .bgText{height:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:32px;gap:32px}.main .hero .bgText h2{text-align:center}.main .hero .bgText button,.main .hero .bgText h2{font-size:1rem;font-weight:600}}@media screen and (min-width:501px){.main .hero{height:18rem;flex-direction:row}.main .hero .bgImg{height:100%;z-index:0}.main .hero .bgText{width:50vw;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px}.main .hero h1{font-size:1rem}.main .hero h2{width:60%;text-align:center}.main .hero button,.main .hero h2{font-size:.75rem}.main .hero .view-dogs{padding:16px 8px;display:none}}@media screen and (min-width:700px){.main .hero{height:28rem}.main .hero h2{font-size:.75rem;width:80%;text-align:center}.main .hero .view-dogs{padding:16px;display:block;width:auto}}@media screen and (min-width:900px){.main .hero{height:32rem}}@media screen and (min-width:1200px){.main .hero{height:38rem}.main .hero h1{font-size:3rem}.main .hero h2{font-size:2rem}.main .hero .view-dogs{padding:24px;font-size:1rem}}@media screen and (min-width:1600px){.main .hero{height:48rem}.main .hero .view-dogs{padding:20px 40px;font-size:1.5rem}.main .hero h1{font-size:3rem}.main .hero h2{font-size:2rem}}@media screen and (min-width:2000px){.main .hero{height:70rem}}.services{display:flex;flex-direction:column;justify-content:center;text-align:center;gap:16px;padding:16px 32px}.services .serviceCard{border:2px solid #000;border-radius:16px;padding:40px;flex:1 1}.services .serviceCard .title{text-transform:uppercase;margin-top:16px;color:#fbae04;font-weight:700}.services .serviceCard .text{text-transform:capitalize;margin-top:16px;line-height:1.5}@media screen and (min-width:900px){.services{padding:32px 64px;flex-direction:row}.services .serviceCard{display:flex;flex-direction:column;justify-content:center;align-items:center;height:300px}}.adoption{margin-top:16px;text-align:center;padding:32px;text-transform:capitalize}.adoption .title{font-size:2rem;font-weight:700}.adoption .processCard{margin:16px 32px}.adoption span.soon{display:none}.adoption .process{padding:48px;margin-top:16px;border-radius:16px}.adoption .process .img{margin-top:-24px}.adoption .process .subTitle{font-size:24px}.adoption .process .text{margin-top:16px}.adoption .one:hover span.soon,.adoption .three:hover span.soon,.adoption .two:hover span.soon{display:block}.adoption .one:hover .processCard .subTitle,.adoption .one:hover .processCard .text,.adoption .three:hover .processCard .subTitle,.adoption .three:hover .processCard .text,.adoption .two:hover .processCard .subTitle,.adoption .two:hover .processCard .text{color:transparent}@media screen and (min-width:1200px){.adoption .steps{display:flex;justify-content:center}}.slide-hidden{display:none}.dogsResults{padding:32px}.petImg{border-radius:16px;height:280px;width:280px}.petImg img{min-width:100%}.petCard{display:flex;flex-direction:column;align-items:center;padding:32px}.dogInfo{margin-top:16px;width:280px;gap:16px}.dogInfo,.pets{display:flex;justify-content:center;flex-wrap:wrap}.pets{flex-direction:column}@media screen and (min-width:500px){.pets{flex-direction:row;gap:32px}}.pagination{display:flex;align-items:center;justify-content:center;margin-top:32px;cursor:pointer;gap:8px}.pagination .activePage{background-color:#fbae04;color:#fff;border-radius:8px;padding:6px;border:2px solid}.pagination .nextBtn,.pagination .prevBtn{border-radius:18px;padding:8px 24px;color:#fff;border:none;cursor:pointer;background-color:#000}.dogsResults .adorable{font-size:2.5rem;text-align:center;font-weight:700;margin-bottom:1rem}.dogsResults .loading{font-size:2rem;text-align:center;margin-top:2rem;color:gray}