* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

/* social app */
.social {
    width: 100%;
    height: 5vh;
    background: linear-gradient(to right, pink, red);
}

.socialrap {
    width: 80%;
    margin: auto;
}

.name {
    position: absolute;
}

.name h1 {
    color: aliceblue;
}

.app {
    float: right;
}

.app ul li {
    display: inline;
}

.app ul li a {
    color: aliceblue;
    font-size: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

.clear1 {
    width: 100%;
    background: linear-gradient(to right, pink, red);
    height: 1vh;
}

/* navigation bar */
#nav {
    width: 100%;
    height: 10vh;
    background-color: rgba(0, 0, 0, 0.2);
    background: linear-gradient(to right, pink, red);
    top: 0px;
    position: sticky;

}

.navrap {
    width: 80%;
    margin: auto;
}

.logo {
    position: absolute;
}

.logo h1 {
    font-size: 70px;
    color: aliceblue;
    /* padding-top: 20px; */
}

.menu {
    float: right;
}

.menu ul {
    margin-top: 15px;
}

.menu ul li {
    display: inline
}

.menu ul li a {
    color: aliceblue;
    text-decoration: none;
    font-size: 20px;
    text-transform: uppercase;
    padding: 10px;
}

.menu ul li a:hover {
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    border-radius: 20px;
}


/* banner */
.images {
    width: 100%;
    background-image: url(image2.webp);
    height: 80vh;
    background-size: 100%;
    background-repeat: no-repeat;
}

.imagerap {
    width: 100%;
    height: 90vh;
    /* background-color: rgba(0, 0, 0, 0.2); */


}

.imagerap1 {
    width: 50%;
    /* border: 2px solid white; */
    padding-top: 80px;
    margin: auto;
}

.company {
    width: 80%;
    margin-left: 15%;
    background-color: rgba(0, 0, 0, 0.6);
    margin-top: 35%;
    border: 8px solid gold;
}

.company h1 {
    text-align: center;
    color: gold;
    font-size: 90px;
}

.company p {
    text-align: center;
    color: white;
    font-size: 40px;
}

/* .company2 h1{
    text-align: left;
    color: black;
    font-size: 50px;
    padding-bottom: 50px;

} */

/* mid */

.mid {
    width: 100%;
    height: 50vh;
    background: linear-gradient(to right, pink, yellow);
}

.mid h1 {
    text-align: left;
    font-size: 40px;
}

.midrap {
    width: 95%;
    margin: auto;
    display: grid;
    /* padding-top: 50px; */
    grid-template-columns: auto auto auto auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 10px;
}


.box1 {
    background-image: url(./offer2.avif);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    /* width: 30%; */
    border-radius: 100%;
    border: 2px solid black;
    background-color: aliceblue;
}

.t1 h1 {
    text-align: center;
    text-transform: uppercase;
    background-color: fuchsia;
    color: black;
    /* margin-top: 290px; */
    font-size: 20px;

}

.box2 {
    background-image: url(./dog1.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    /* width: 30%; */
    border-radius: 100%;
    border: 2px solid black;
    background-color: aliceblue;
}

.box3 {
    background-image: url(./cat1.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    /* width: 30%; */
    border-radius: 100%;
    border: 2px solid black;
    background-color: aliceblue;
}

.box4 {
    background-image: url(pharm2.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    /* width: 30%; */
    border-radius: 100%;
    border: 2px solid black;
    background-color: white;
}

.box5 {
    background-image: url(toy2.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    /* width: 30%; */
    border-radius: 100%;
    border: 2px solid black;
    background-color: aliceblue;
}



.mid2 {
    width: 100%;
    height: 50vh;
    background: linear-gradient(to right, pink, yellow);
}

.mid2 h1 {
    /* text-align: left; */
    font-size: 40px;
}

.midrap2 {
    width: 95%;
    margin: auto;
    display: grid;
    padding-top: 50px;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    overflow: auto;

}

.ban {
    width: 100%;
    height: 40vh;
    background: linear-gradient(to right, pink, yellow);
}

.banrap {
    width: 95%;
    margin: auto;
}

.cu2 img {
    width: 100%;
    padding-bottom: 70px;
}


.box6 {
    border: 2px solid black;
    background-color: rgba(0, 0, 0, 0.2);
    /* padding: 10px; */
    background-image: url(./dog\ treats.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* background-color: aliceblue; */
}

.box6 h1 {
    text-align: center;
    /* margin-top: 290px; */
    text-transform: uppercase;
    background-color: white;
    /* color: black; */
    margin-bottom: 30%;
    font-size: 20px;

}

.box7 {
    border: 2px solid black;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(./cat\ treats2.jpeg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    background-color: aliceblue;
}

.box7 h1 {
    text-align: center;
    text-transform: uppercase;
    background-color: white;
    color: black;
    margin-bottom: 30%;
    font-size: 20px;
}

.box8 {
    border: 2px solid black;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(groom3.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}

.box8 h1 {
    text-align: center;
    text-transform: uppercase;
    background-color: white;
    color: black;
    margin-bottom: 30%;
    font-size: 20px;
}

.box9 {
    border: 2px solid black;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(walk.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}

.box9 h1 {
    text-align: center;
    text-transform: uppercase;
    background-color: white;
    color: black;
    margin-bottom: 30%;
    font-size: 20px;
}

.box10 {
    border: 2px solid black;
    background-color: white;
    background-image: url(bowl2.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}

.box10 h1 {
    text-align: center;
    text-transform: uppercase;
    background-color: white;
    color: black;
    margin-bottom: 30%;
    font-size: 20px;

}

.box11 {
    border: 2px solid black;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(./bed3.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}

.box11 h1 {
    text-align: center;
    text-transform: uppercase;
    background-color: white;
    color: black;
    margin-bottom: 30%;
    font-size: 20px;
}

.box12 {
    border: 2px solid black;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(cloth.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}

.box12 h1 {
    text-align: center;
    text-transform: uppercase;
    background-color: white;
    color: black;
    margin-bottom: 30%;
    font-size: 20px;
}

.box13 {
    border: 2px solid black;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(med.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}

.box13 h1 {
    text-align: center;
    text-transform: uppercase;
    background-color: white;
    color: black;
    margin-bottom: 30%;
    font-size: 20px;

}


.catagory {
    width: 100%;
    height: 50vh;
    background: linear-gradient(to right, pink, yellow);
}

.catagory h1 {
    /* text-align: left; */
    font-size: 40px;
}

.catagoryrap {
    width: 95%;
    margin: auto;
    display: grid;
    padding-top: 50px;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    overflow: auto;

}






.dog {
    border: 2px solid black;
    background-color: rgba(0, 0, 0, 0.2);
    /* padding: 10px; */
    background-image: url(./dogg.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* background-color: aliceblue; */
}

.dog h1 {
    text-align: center;
    /* margin-top: 290px; */
    text-transform: uppercase;
    background-color: white;
    /* color: black; */
    margin-bottom: 30%;
    font-size: 20px;

}

.cat {
    border: 2px solid black;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(./catt.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    background-color: aliceblue;
}

.cat h1 {
    text-align: center;
    text-transform: uppercase;
    background-color: white;
    color: black;
    margin-bottom: 30%;
    font-size: 20px;
}

.fish {
    border: 2px solid black;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(fish.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}

.fish h1 {
    text-align: center;
    text-transform: uppercase;
    background-color: white;
    color: black;
    margin-bottom: 30%;
    font-size: 20px;
}

.bird {
    border: 2px solid black;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(bird.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}

.bird h1 {
    text-align: center;
    text-transform: uppercase;
    background-color: white;
    color: black;
    margin-bottom: 30%;
    font-size: 20px;
}

.rabbit {
    border: 2px solid black;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(rabbit.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}

.rabbit h1 {
    text-align: center;
    text-transform: uppercase;
    background-color: white;
    color: black;
    margin-bottom: 30%;
    font-size: 20px;

}

.guineapig {
    border: 2px solid black;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(./gui.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}

.guineapig h1 {
    text-align: center;
    text-transform: uppercase;
    background-color: white;
    color: black;
    margin-bottom: 30%;
    font-size: 20px;
}


/* discount */
.discount {
    width: 100%;
    height: 40vh;
    background: linear-gradient(to right, pink, yellow);
}

.discountrap {
    width: 95%;
    margin: auto;
}

.dis img {
    width: 100%;
    padding-bottom: 70px;
}


/* cupon */
.cupobn {
    width: 100%;
    height: 35vh;
    background: linear-gradient(to right, pink, yellow);
}

.cuponrap {
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto;
    overflow: auto;
}

.cu1 img {
    width: 500px;
    height: 30vh;
    /* padding-bottom: 70px; */
}

.cu3 img {
    width: 500px;
    height: 30vh;
}

.cu4 img {
    width: 500px;
    height: 30vh;
    /* padding-bottom: 70px; */
}

.cu5 img {
    width: 500px;
    height: 30vh;
}


.cupon1 {
    width: 100%;
    height: 35vh;
    background: linear-gradient(to right, pink, yellow);
}

.cuponrap1 {
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    overflow: scroll;
}

.min1 img {
    width: 300px;
    height: 30vh;
    /* padding-bottom: 70px; */
}

.min2 img {
    width: 300px;
    height: 30vh;
}

.min3 img {
    width: 300px;
    height: 30vh;
    /* padding-bottom: 70px; */
}

.min4 img {
    width: 300px;
    height: 30vh;
}
.min5 img {
    width: 300px;
    height: 30vh;
}

.min6 img {
    width: 300px;
    height: 30vh;
}


/* special offers */
.rap{
    width: 100;
    height: 60vh;
    background: linear-gradient(to right, pink,yellow);
}
.raprap{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto;
}
.rap h1{
    /* border: 2px solid black; */
    /* background-color: floralwhite; */
    text-align: left;
    text-transform: uppercase;
    /* font-size: 10vh; */
}
.circle{
    /* border: 2px solid black; */
    border-radius: 20%;
    background-size: cover;
    background-color: rgb(245, 222, 179);
    padding: 10px;
    background-image: url(gif4.gif);
    background-repeat: no-repeat;
    height: 50vh;
    width: 90%;
}
.circle h1{
    margin-top: 40px;
    text-align: center;
    text-transform: uppercase;
    /* background-color: white; */
}

.circle1{
    /* border: 2px solid black; */
    border-radius: 20%;
    background-color: white;
    background-size: cover;
    padding: 10px;
    background-image: url(gif\ dog.gif);
    background-repeat: no-repeat;
    height: 50vh;
    width: 90%
}
.circle1 h1{
    margin-top: 40px;
    text-align: center;
    text-transform: uppercase;
    /* background-color: white; */
}

.circle2{
    /* border: 2px solid black; */
    border-radius: 20%;
    background-color: white;
    padding: 10px;
    background-image: url(shampoo.webp);
    background-repeat: no-repeat;
    height: 50vh;
    width: 90%;
}
.circle2 h1{
    margin-top: 40px;
    text-align: center;
    text-transform: uppercase;
    /* background-color: white; */
}


/* henlo */
.henlo {
    width: 100%;
    height: 35vh;
    background: linear-gradient(to right, pink, yellow);
}

.henlorap {
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto;
}

.henlo1 img {
    width: 450px;
    height: 30vh;
    padding: 5%;
    /* padding-bottom: 70px; */
}


.henlo2 img {
    width: 500px;
    height: 30vh;
    padding: 5%;
}

.henlo3 img {
    width: 500px;
    height: 30vh;
    padding: 5%;
    /* padding-bottom: 70px; */
}


/* brand in focus */
.brand {
    width: 100%;
    height: 50vh;
    background: linear-gradient(to right, pink, yellow);
}

.brand h3 {
    /* text-align: left; */
    font-size: 40px;
}

.brandrap {
    width: 95%;
    margin: auto;
    display: grid;
    padding-top: 50px;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    overflow: auto;

}
.brand1 {
    /* border: 2px solid black; */
    border-radius: 60%;
    background-color: rgba(0, 0, 0, 0.2);
    /* padding: 10px; */
    background-image: url(./brand1.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 35vh;
    width: 250px;
    /* border-radius: 100%; */
    /* background-color: aliceblue; */
}


.brand2 {
    /* border: 2px solid black; */
    border-radius: 60%;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(./brand2.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 35vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    background-color: aliceblue;
}



.brand3 {
    /* border: 2px solid black; */
    border-radius: 60%;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(brand3.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 35vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}



.brand4 {
    /* border: 2px solid black; */
    border-radius: 60%;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(brand4.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 35vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}


.brand5 {
    /* border: 2px solid black; */
    border-radius: 60%;
    background-color: white;
    background-image: url(brand5.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 35vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}


.brand6 {
    /* border: 2px solid black; */
    border-radius: 60%;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(./brand6.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 35vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}






/* best selling treats*/
.sell {
    width: 100%;
    height: 50vh;
    background: linear-gradient(to right, pink, yellow);
}

/* .brand h3 {
    font-size: 40px;
} */

.sellrap {
    width: 95%;
    margin: auto;
    display: grid;
    padding-top: 50px;
    grid-template-columns: auto auto auto auto auto auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    overflow: auto;

}
.sell1 {
    /* border: 5px solid red; */
    border-radius: 10%;
    background-color: rgba(0, 0, 0, 0.2);
    /* padding: 10px; */
    background-image: url(./sell1.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 40vh;
    width: 250px;
    /* border-radius: 100%; */
    /* background-color: aliceblue; */
}


.sell2 {
    border: 5px solid red;
    border-radius: 10%;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(./sell2.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 40vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    background-color: aliceblue;
}



.sell3 {
    border: 5px solid red;
    border-radius: 10%;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(sell3.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 40vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}



.sell4 {
    border: 5px solid red;
    border-radius: 10%;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(sell4.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 40vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}


.sell5 {
    border: 5px solid red;
    border-radius: 10%;
    background-color: white;
    background-image: url(sell5.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 40vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}


.sell6 {
    border: 5px solid red;
    border-radius: 10%;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(sell6.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 40vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}



/* best selling toy*/
.selll1 {
    width: 100%;
    height: 50vh;
    background: linear-gradient(to right, pink, yellow);
}

/* .brand h3 {
    font-size: 40px;
} */

.sellrap1 {
    width: 95%;
    margin: auto;
    display: grid;
    padding-top: 50px;
    grid-template-columns: auto auto auto auto auto auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    overflow: auto;

}
.sell7 {
    /* border: 5px solid red; */
    border-radius: 10%;
    background-color: rgba(0, 0, 0, 0.2);
    /* padding: 10px; */
    background-image: url(./sell7.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 40vh;
    width: 250px;
    /* border-radius: 100%; */
    /* background-color: aliceblue; */
}


.sell8 {
    border: 5px solid blue;
    border-radius: 10%;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(./sell8.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 40vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    background-color: aliceblue;
}



.sell9 {
    border: 5px solid blue;
    border-radius: 10%;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(sell9.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 40vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}



.sell10 {
    border: 5px solid blue;
    border-radius: 10%;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(sell10.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 40vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}


.sell11 {
    border: 5px solid blue;
    border-radius: 10%;
    background-color: white;
    background-image: url(sell11.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 40vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}


.sell12 {
    border: 5px solid blue;
    border-radius: 10%;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(sell12.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 40vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}



/* pet pharm */
.pharm {
    width: 100%;
    height: 60vh;
    padding-top: 2%;
    background: linear-gradient(to right, pink, yellow);
}

.pharmrap {
    width: 95%;
    margin: auto;
}

.ph img {
    width: 100%;
    padding-bottom: 70px;
}



/* medicines */
.med {
    width: 100%;
    height: 40vh;
    background: linear-gradient(to right, pink, yellow);
}


.medrap {
    width: 95%;
    margin: auto;
    display: grid;
    padding-bottom: 30px;
    padding-top: 10px;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    overflow: auto;

}
.med1 {
    /* border: 2px solid black; */
    /* border-radius: 60%; */
    background-color: rgba(0, 0, 0, 0.2);
    /* padding: 10px; */
    background-image: url(./med1.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* background-color: aliceblue; */
}


.med2 {
    /* border: 2px solid black; */
    /* border-radius: 60%; */
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(./med2.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    background-color: aliceblue;
}



.med3 {
    /* border: 2px solid black; */
    /* border-radius: 60%; */
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(med3.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}



.med4 {
    /* border: 2px solid black; */
    /* border-radius: 60%; */
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(med4.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}
.med5 {
    /* border: 2px solid black; */
    /* border-radius: 60%; */
    background-color: white;
    background-image: url(med5.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}


.med6 {
    /* border: 2px solid black; */
    /* background-size: cover; */
    /* border-radius: 60%; */
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(./med6.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 250px;
    /* border-radius: 100%; */
    /* border: 2px solid black; */
    /* background-color: aliceblue; */
}


/* facilities */
.fac {
    width: 100%;
    height: 35vh;
    background: linear-gradient(to right, pink, yellow);
}

.facrap {
    width: 80%;
    margin: auto;
    /* padding-bottom: 60px; */
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 50px;
    
}


.facilities1 img {
    width: 100%;
    height: 80%;
    /* padding: 5%; */
    /* padding-bottom: 70px; */
}


/* footer */
.footer{
    width: 100%;
    height: 30vh;
    background: linear-gradient(to right,  pink, red);
}
.footrap{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-column-gap:20px ;
    padding-top: 20px;
}

.boxx ul li {
    /* background-color: rgba(0,0,0,0.6); */
    list-style: none;

}
.boxx h1{
    text-align: center;
    color: black;
    /* padding-left: 5%; */
    /* padding-top: 8%; */
}
.boxx ul li a{
    color: black;
    font-size: 40px;
    /* margin-left: 30%; */
    
}





/* bnavigation bar */
#bnav {
    width: 100%;
    height: 15vh;
    background-color: rgba(0, 0, 0, 0.4);
    /* background-color: white; */
    bottom: 0px;
    position: sticky;
    border-top: 2px solid white;

}

.bnavrap {
    width: 80%;
    margin: auto;
}


.bmenu {
    margin: auto;
    padding: 20px;
    padding-left: 20%;
}

.bmenu ul {
    margin-top: 15px;
}

.bmenu ul li {
    display: inline
}

.bmenu ul li a {
    color: white;
    text-decoration: none;
    font-size: 50px;
    text-transform: uppercase;
    padding: 50px;
}

/* .bmenu ul li a:hover {
    background-color: rgba(0, 0, 0, 0.1);
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    border-radius: 20px;
} */