<style>
        * {
            font-family: 'Josefin Sans', sans-serif;
            font-weight: 400;
        }
        .head{
            padding-left: 15px;
            padding-right: 15px;
        }
        .headerContainer{
             display: flex;    
        }
       .list, .list_img{
           display: inline;
           font-size: 17px;   
       }
       .list a{
          text-align: center;
          color: black;
          display: inline-block;
          padding: 14px 16px;
          text-decoration: none;
       }
       .search_icon{
           width: 20%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 24px;
       }
       .header{
           width: 60%;     
       }
       .header ul{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
       }
       .menu_icon{
           width: 20%;
           display: flex;
           align-items: center;
           justify-content: space-evenly;
           font-size: 24px;
       }
       .img{
           display: inline;
           vertical-align: middle;
       }
       .list_img{
           width: 50px;
       }
       .list-menu a:hover{
           background-color: black;
           color: white;
       }
       .pege-number{
            position: absolute;
            transform: rotate(-90deg);
            bottom: 0;
            padding: 30px;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
       }
       .pege-number .span1{
        color: rgb(16, 16, 16);
        font-size: 40px;
       }
       .pege-number .span2{
        color: gray;
        font-size: 20px;
       }
       .backgroundimg1{
           background-repeat: no-repeat;
           height: 500px;
           background-size: 100%;
           box-shadow: 0 10px 15px #00000060;
           background-size: cover !important;  
       }
       .para1{
           text-align: center;
           display: inline-block;
           align-items: center;
           width: 50%;
           font-weight: 400;
           font-size: 34px;
           line-height: 56px;
           letter-spacing: 11px;
           padding: 100px;
       }
       .btn , #shopbtn {
           letter-spacing: 1px;
           background-color: black;
           color: white;
           height: 50px;  
           border: none;
           width: 150px;
       }
       .btn:hover,#shopbtn:hover ,.button-btn:hover{
           background-color: rgb(206, 101, 101);
       }
       .fa-shopping-cart:hover +.shopping-cart ,.fa-bars:hover +.toggle-menu , #page:hover + .dropdown-page {
            position: absolute;
            width: 200px;
            padding: 25px;
            background: rgb(234, 231, 231);
            text-align: center;
            top: 70px;
            display: block;  
            text-decoration: none; 
            border: black 5px solid;
       }
       .shopping-cart {
           display: none;
       }
       .shopping-cart button{
           letter-spacing: 1px;
           font-size: 15px;
           background-color: black;
           color: white;
           height: 40px;
       }
       .dropdown-page ul{
            display: block;
       }
       .dropdown-page{
        display: none;
       }
       .toggle-menu{
        display: none;
       }
       .backgroundimg2 , .bacgroundimg3 ,.bacgroundimg4 ,.backgroundimg5{
           background-repeat: no-repeat;
           height: 100vh;
           background-position: center;
           background-size: cover;  
           position: relative;
           box-shadow: 0 10px 15px #00000060;
           background-size: cover !important;
            
       }
       .title-caption{
           width: 35%;
           display: inline-block;
           text-align: center;
           padding: 100px;
           line-height: 40px;
       }
       #containt-right{
           text-align: right;
       }
       #title{
           letter-spacing: 11px;
           font-weight: 800; 
           font-size: 18px;  
       }
      .title-shopbtn1 , .tittle-shopbtn2{
          width: 35%;
          display: inline-block;
          text-align: center;
          padding: 100px;
          letter-spacing: 11px;
          line-height: 60px;   
      }

      .title-shopbtn1 h1 {
          font-size: 35px;
          line-height: 50px;
      }

      .tittle-shopbtn2{
          font-size: 20px;
          width: 40%;
      }
     
      .pg-containt{
          width: 50;
          text-align: center;
          padding: 100px;
          letter-spacing: 18px;
          line-height: 60px;
      }
      .button-btn{
          border-radius: 50%;
          height: 150px;
          width: 150px;
          float: left;
          line-height: 1.8em;  
          background-color: black;
          color: white;
          border: none;
      }
      .btncls{
        display: flex;
        align-items: center;
        padding-left: 250px;
      }

    .footer {
    display: grid;
    grid-template-columns: 30% 20% 20% 30%;
    width: 100%;
    line-height: 1.5em;
    margin-bottom: 3em;
}
.block1, .block2, .block3, .block4 {
    padding: 2em;
}
.footer h3 {
    font-size: 1.75em;
    font-weight: 600;
}
.footer ul {
    padding-inline-start: unset;
}
.footer li:hover {
    color: black;
    cursor: pointer;
}
.footer li {
    list-style: none;
    color: grey;
    transition: 400ms all;
}
.block1 img {
    width: 50%;
    height: auto;
    padding: 1em 0em 4em 0em;
}
.block4 input {
    width: 100%;
    font-size: 1.25em;
    margin-top: 1em;
    border: 1px solid grey;
    padding: 8px;
}
.block4 i:hover {
    background: black;
    color: white;
}
.block4 i {
    font-size: 1.25em;
    padding: 0.5em;
    margin: 0.75em;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    transition: 500ms all;
}
/* MObile resposive code starts here  */
    @media all and (max-width:850px){
        .header {
            width: 60%;
            visibility: hidden;
            }
        .pege-number {
            display: none;
        }
        .img {
            visibility: visible;
        }
        .backgroundimg1 {
            background: no-repeat right url(image/background1.jpg);
        }
        .para1 {
            font-size: 1.5em;
            line-height: 27px;
            letter-spacing: 11px;  
        }
        .title-shopbtn1 h1 {
            font-size: 1.5em;
            line-height: 28px;
            letter-spacing: 4px;
        }
        #title {
            letter-spacing: 1px;
            text-align: center;
        }
        img.caption {
            width: 100%;
        }
        h1 {
            letter-spacing: 3px;
            line-height: 29px;
            text-align: center;
        }
        h2 {
            line-height: 24px;
            letter-spacing: 4px;
        }
        .btncls {
            display: flex;
            align-items: center;
            padding-left: 1px;
        }
        .block1, .block2, .block3,.block4{
            display: none;
        }     
        }
    </style>
