.header{
   height: 13vh;
   font-family: Aldrich, sans-serif;
   padding: 28px 78px;
}
body{
   margin: 0;
   padding: 0;
   font-family: Aldrich, sans-serif;
   background-color: rgba(248, 248, 217, 0.91);
}
.sunpic{
   width: 145px;
   height: 22px;
   cursor: pointer;
}
.leftdiv{
   width: 60px;
   margin-left: 26px;
   flex-shrink: none;
   cursor: pointer;
}
.text{
   color: black;
}
ul{
   display: flex;
   margin: 0;
}
.li4{
   list-style: none;
   color: rgb(183, 183, 183);
   font-size: 14px;
   font-family: 400;
   padding: 5px 8px;
   margin-right: 20px;
   cursor: pointer;
   }
/* -------------------------------------------------main container------------------------------------------------------ */ */ */

.heading-container{
   padding-top:80px;
   padding-bottom: 80px;
   margin-left: auto;
   margin-right: auto;
   font-family: Aldrich, sans-serif;
}
.above-heading{
   margin-bottom: 0;
   text-transform: uppercase;
   font-size: 36px;
   width: 970px;
   align-self: center;
   line-height: 57.6px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;    
   color: rgb(17, 17, 17);
}

/* -----------------------------------------Navigation---------------------------------------------------- */

.subnavi{
   font-family: Aldrich, sans-serif;
   padding-top: 30px;
   margin-bottom: 40px;
}
.ul1{
   list-style: disc;
   flex-wrap: wrap;
}
.li1{
   list-style: none;
   color: rgb(156, 151, 151);
   font-size: 14px;
   font-weight: 400;
   padding: 1px 0px;
   margin-right: 20px;
   align-self: center;
   margin-right: 10px;
}
.a{
   padding-bottom: 4px;
   font-size: 20px;
   color: rgb(119, 118, 118);
}
.li2{
   color: black;
}

/* -------------------------------------------Cards---------------------------------------------------------- */

.carddiv{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 10px;
}
.cardpics{
   width: 100%;
   height: 52vh;
   object-fit: cover;
}
.picfooter{
   background-color: rgb(114, 109, 109);
   color: white;
}

/* _-----------------------------------------footer------------------------------------------------------------ */

.footerdiv{
   padding: 25px 40px;
   background-color:  rgb(13, 12, 12);
   font-family:  Raleway, sans-serif;
   font-weight: 400;
   flex-wrap: wrap;
}
.txt3{
   color: rgb(183, 183, 183);
   font-size: 16px;
}
span{
   color: white;
}
.pic6{
   width: 142px;
   height: 24px;
}

/* ------------------------------media querry-------------------------------------------------------- */
@media (min-width:50px) and (max-width:576px) {
   .carddiv{
       grid-template-columns: 1fr;
   }
   .cardpics{
       height: 75vh;
   }
   
}


@media screen and (max-width:425px) {
   .heading-container{
       margin-top: 40px;
   }
   .above-heading{
       font-size: 30px;
       line-height: 48px;
   }
}
@media screen and (max-width:862px) {
   .li4{
       display: none;
   }
}
@media screen and (max-width:425px) {
   .container-fluid{
       padding: 40px 15px;
   }
}

@media screen and (max-width:768px) {
   .li1{
       display: inline;
   }
}



@media (min-width:577px) and (max-width:991px) {
   .carddiv{
       grid-template-columns: 1fr 1fr;
   }
   .cardpics{
    height: 85vh;
   }
}
@media (min-width:300px) and (max-width:1024px) {
   .footerdiv{
       justify-content: center;
       text-align: center;
       
   }
   
}
@media (min-width:992px) and (max-width:1365px) {
   .carddiv{
       grid-template-columns: 1fr 1fr 1fr 1fr;
   }
   .cardpics{
    height: 80vh;
   }
}
@media (min-width:1367px) and (max-width:3000px) {
   .carddiv{
       grid-template-columns: 1fr 1fr 1fr 1fr;
   }
   .cardpics{
       width: 100%;
       height: 90vh;
   }
}
.spinner-border{
   margin-top: 60px;
   margin-bottom: 70px;
}