*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
  body {
  
    font-family: sans-serif;
   background-color: whitesmoke;
  } 
    .logo {
        color:rgb(25, 209, 209);
        font-size: 32px;
    }

    .logo span {
        color: rgb(223, 12, 12);
    }
    .header{
        background-color: white;
        margin: 2px;
        height: 100px;
       
    }
    nav ul li{
        list-style-type: none;
        display: inline-block;
        padding: 10px;
    }
    ul li a{
        color: whitesmoke;
        letter-spacing: 0.1rem;
    }
    ul li a:hover{
        color: #ffd358;
        text-decoration: underline;
    }
    .menu li{
     float: left;
     padding: 8px;
    }
    .menu li a{
        text-decoration:white;
    }
    nav .search_box{
        display: flex;
        margin: auto 0;
        height: 35px;
        line-height: 35px;
        position: relative;
        float: left;
        text-align: left;
    }
    nav .search_box input{
        border: none;
        outline: none;
        background: #fff;
        height: 100%;
        padding: 0 10px;
        font-size: 20px;
        width: 130px;
    }
    

    .fa-image-portrait{
     font-size: 20px;
     color: red;
    }
   
    .h1 {
        text-align: center;
        background-color: #d70e76;
        color: #fff;
    }
    .fa-house {
        color: #58ffb7;
        
        
    }
  
    .menu i{
        color: rgb(170, 19, 19);
      
    }
    .slide{
        height: auto;
        width: 180px;
        position: absolute;
        background-color: #fff;
        transition: 0.5s ease;
        transform: translateX(-180px);
    }
    h2{
        color: #8000ff;
        font-weight: 800;
        text-align: right;
        padding: 10px 0;
        padding-right: 30px;
        pointer-events: none;
    }
     ul li {
        list-style: none;
    }
     ul li a{
        color: #011a41;
        font-weight: 500;
        padding: 5px 0;
        display: block;
        text-transform: capitalize;
        text-decoration: none;
        transition: 0.2s ease-out;
    }
    
    ul li:hover a{
        color: #fff;
        background-color: #8000ff;
    }
    ul li a i{
        width: 40px;
        text-align: center;
    }
    input{
        display: none;
        visibility: hidden;
        -webkit-appearance : none;
    }
    .toggle{
        position: absolute;
        height: 30px;
        width: 30px;
        top: 60px;
        left: 20px;
        z-index: 1;
        cursor: pointer;
        border-radius: 2px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }
    .toggle .common{
        position: absolute;
        height: 2px;
        width: 20px;
        background-color: #8000ff;
        border-radius: 50px;
        transition: 0.3s ease;
    }
    .toggle .top_line{
        top: 30%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .toggle .middle_line{
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .toggle .bottom_line{
        top: 70%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    input:checked ~ .toggle .top_line{
        left: 2px;
        top: 14px;
        width: 25px;
        transform: rotate(45deg);
    }
    input:checked ~ .toggle .bottom_line{
        left: 2px;
        top: 14px;
        width: 25px;
        transform: rotate(-45deg);
    }
    input:checked ~ .toggle .middle_line{
        opacity: 0;
        transform: translateX(20px);
    }
    input:checked ~ .slide{
        transform: translateX(0);
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    }
    


.h3t a{
    float: right;
    text-align:left;
   
   color: white;
   position: absolute;
   transform: translate(-35px);
   top: 80px;
   right:1px;
   background: black;
}
.h3f a{
    float: right;
    text-align:left;
    
   color: blue;
   position: absolute;
   transform: translate(-10px);
   top: 80px;
   right:1px;
   background:white;
    border-radius: 10px;
   font-size: large;
}
.fa-facebook{
      float: right;
    text-align:left;
 height: 18px;
   color: blue;
   
   background: white;
    border-radius: 10px;
   font-size: large;
}
.h3i a{
    float: right;
    text-align:left;
    height: 17px;
   color: white;
   position: absolute;
   transform: translate(-59px);
   top: 80px;
   right:1px;
  border-radius: 7px;
background-color: rgb(140, 55, 1);
 font-size: large;
}


   
    
.gridbody{
    max-width: 1500px;
    width: auto;
    height: auto;
    grid-template-columns: repeat(auto-fill, 320px);
    margin: 3px auto;
  
    display: grid;
    
    justify-content: center;
    grid-gap: 25px;
   
}

.wrapper{
   
    
   
   width: 320px;
   height: 100%;
   
   justify-items: center; 
  justify-content: center;
  padding: 1px;
    
    margin: auto;
    gap: 0px;
    font-size: 18px;
  
  
}


.container{
   
   
    width: 100%;
    
    justify-content: center;
    text-align: center;
    text-transform: capitalize;    
}
.container .image-container{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    justify-content: center;
    
   
}
.sheader{
    width: 100%;
    font-weight: normal;
    flex: 1;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: rgb(253, 253, 250);
    
}
.sheader u{
    color: #ba5327;
    text-align: center;

    
}
.footer{
    width: 150px;
  
   height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.fa-whatsapp{
    position: relative;
    left: 5%;
    bottom: -3px;
    background-color: #0ffc1f;
   color: #f3efed;
   font-size: 20px;
   height: 20px;
   width: 30px;
   border-radius: 45%;
}
.container .image-container .image{
    height: 150px;
    width: 157px;
    margin: 1px;
    
}
.container .image-container .image img{
    height:150px;
    width:157px;
    border-radius: 3px;
}
.container .image-container .image:hover img{
    
}
.btn{
    width: 70px;
    height: 25px;
    color: white;
    border-radius: 20px;
    background-color: #1dc714;
}

.container3 u{
    color: #ba5327;
    width: 157px;
}
.container3 {
    height: 150px;
    width:157px;
    text-align: center;
  font-size: 12px;
  color: gray;
}
.container3 h3 {
    text-align: center;
    color: #d00606;
   
}



@media screen and (max-width:360px){

    .gridbody{
        grid-template-columns: repeat(auto-fill, 360px);
        grid-gap: 2px;
    }
    .wrapper{
        width: 320px;
    }
    .container3{
        width: 150px ;
    }
    .container .image-container .image img {
        width: 160px;
    }

    .container .image-container .image{
        width: 160px;
    }


}

@media screen and (min-width: 360px){
    .gridbody{
        grid-template-columns: repeat(auto-fill, 360px);
        grid-gap: 2px;
    }
    .wrapper{
        width: 360px;
    }
    .container3{
        width: 170px ;
    }
    .container .image-container .image img {
        width: 180px;
    }

    .container .image-container .image{
        width: 180px;
    }
}







@media screen and (min-width: 375px){

    .gridbody{
        grid-template-columns: repeat(auto-fill, 375px);
        grid-gap: 2px;
    }
    .wrapper{
        width: 375px;
    }
    .container3{
        width: 175px ;
    }
    .container .image-container .image img {
        width: 190px;
    }

    .container .image-container .image{
        width: 190px;
    }

}
@media screen and (min-width: 400px){

    .gridbody{
        grid-template-columns: repeat(auto-fill, 400px);
        grid-gap: 2px;
    }
    .wrapper{
        width: 400px;
    }
    .container3{
        width: 160px ;
    }
    .container .image-container .image img {
        width: 225px;
    }

    .container .image-container .image{
        width: 225px;
    }

}


@media screen and (min-width: 600px){

    .gridbody{
        grid-template-columns: repeat(auto-fill, 300px);
        grid-gap: 25px;
    }
    .wrapper{
        width: 300px;
       
    }
    .container3{
        width: 130px ;
    }
    .footer{
        width: 150px;
    }
    .container .image-container .image img {
        width: 160px;
    }

    .container .image-container .image{
        width: 160px;
    }

}