@media screen and (max-width:420px){
        .pic_1{
        width:100%;
        height:33vh;
        background-image: url(ferry.jpg);
        background-size: cover;
        }
      
        .l_side{
        width:5%;
        height:18vh;
        left:0px;
        top:5px;
        background-image: url(light1.png);
        background-size: cover;
        opacity: 0.8;
        position: fixed;
        opacity:0.4;
        z-index: 2;
        }

        .side{
           display:none;
        }
        
        .arrow{
        display:none;
        }
        
        header{
        width:45%;
        height:118px;
        margin-left: 18%;
        position: fixed;
        top:-5px;
        left:-130px;     
        }

        nav{
        width:100%;
        height:50px;
        margin-left: 50px;      
        }

        .menu{
        width:87%;
        height:50px;
        }

        .menu>li{
        width:15%;
        height:30px;
        padding-top:34px;
        }

        .start{
        font-size: 11px;
        margin-top: 25px;
        margin-left: 5px;
        }

         .logo{
        width:38px;
        height:38px;
        background-image: url(logo.png);
        background-size: cover;
        margin-top: 10px;
        margin-left: 60px;
        font-size: 9px;
        padding-top: 8px;
        }


        .uni{
        font-size: 8px;
        padding-left: 6px;
        padding-top: 2px;
        }


        .wheel{
        width:50px;
        height:50px;
        top:180px;
        left:365px;
        background-image: url(wheel.png);
        background-size: cover;
        animation: boat 14s linear infinite;
        z-index: 5;
        }
        
        .property{
        width:75%;
        height:35px;
        position: relative;
        top:115px;
        left:70px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        background-color: rgb(70, 68, 94);
        }
           
        .voyage{
        width:26%;
        height:20px;
        background-color: white;
        font-size: 9px;
        }
        
        #checkin{
        width:26%;
        height:20px;
        background-color: white;
        font-size: 9px;
        }
        
        .sub{
        width:15%;
        height:20px;
        font-size: 9px;    
        }

        .content h2 {
        color: #fff;
        width:675px;
        font-size: 3em;
        position: absolute;
        transform: translate(-50%, -50%);  
        top:9px;
        left:374px;  
        }

        main{
        height:300vh;
        }

        .size{
        width:90%;
        height:300vh;
        position: absolute;
        left:20px;
        display:flex;
        flex-direction: column;
        align-items:center;
        top: 40px;
        }
               
          
        .river{
        width:100%;
        height:325px;
        top: -20px;
        }
  
        #elv{
        width: 100%;
        height:190px;
        }
  
        .h_river{
        font-size: 35px;
        padding-left: 15px;
        top:170px; 
        }

        .p_river{
        font-size:18px;
        padding-left: 15px;
        padding-top: 18px;
        }

        .days{
        font-size: 30px;
        padding-left: 15px;
        top:50px;
        padding-left: 300px;
        }

        .time{
        width:100%;
        height:60px;
        display: flex;
        justify-content:center;
        margin-top: 4px;
        }
    
        .time_3{
        width:26%;
        height:50px;
        font-size: 18px;
        padding-top: 6px;
        }              
        
        .more{
        width:120px;
        height:30px;
        background-image: linear-gradient(125deg, #b6b6fe, white);
        text-align: center;
        margin-left:130px;
        margin-top: 8px;
        padding-top: 6px;
        color: #458cf6;        
        }   
        
        .more:hover{
        width:120px;
        height:40px;
        cursor: pointer;
        transition:0.2s linear;
        background-color:rgb(113, 129, 161);
        box-shadow: 5px 5px 9px  #f3f167;
        margin-left:130px;
        margin-top: 8px;
        font-size: 14px;
        text-align: center;
        border:none;
        }
        
        .content h2 {
      top:10px;
        left:365px;  
            }
         
        
        article{
        background: linear-gradient(rgb(43, 84, 139), rgb(244, 199, 199));
        width:100%;
        height:360px;
                    }
                     
        .vship{
        width: 90%;
        height:300px;
        margin-top: 00px;
        position: absolute;
        left:20px;
        }
 
        .p_last{
        font-size:25px;
        text-shadow: 5px 5px 5px #3c3c40;
        padding-left: 20px;
        padding-top: 10px;
        }
                    
        footer{
        background-color: rgb(19, 47, 84);
        width:100%;
        height:200px;
        position: relative;
        background-size: cover;
        }       
                        
        .h_white{
        font-size: 30px;
        color: white;
        text-align: center;
        font-family:Georgia, 'Times New Roman', Times, serif;            
        }
                        
                        
        .contact{
        width:400px;
        height:180px;
        position: absolute;
        top:20px;
        left:20px;
        }
                            
        .i_txt{
        font-size: 15px;
        color: white;                                    }
                                
                                                                             
        i{
        font-size: 12px;
        color: white;
        padding-top: 15px;
        }
                                           
        }

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


      header{
      top:-10px;
      left:-135px;     
    }

         main{
        height:280vh;
        }

        .size{
         height:280vh;
        } 

      .l_side{
        width:5%;
        height:16vh;
        left:5px;
        top:22px;
        background-image: url(light1.png);
        background-size: cover;
        position: fixed;
        opacity:0.4;
        z-index: 2;
      }

       .wheel{
        width:50px;
        height:50px;
        top:180px;
        left:300px;
        }
  
        .days{
        top:20px;
        padding-left: 291px;
        }

        .more{
        width:120px;
        height:30px;
        background-image: linear-gradient(125deg, #b6b6fe, white);
        text-align: center;
        margin-left:110px;
        margin-top: 8px;
        padding-top: 6px;
        color: #458cf6;        
        }   

        .content h2 {
         color: #fff;
         width:600px;
         font-size: 2.5em;
         position: absolute;
         transform: translate(-50%, -50%);  
         top:9px;
         left:325px;  
         }

      
         .menu{
          width:72%;
          height:50px;
          display: flex;
          justify-content:center;
          }


          .start{
          font-size: 10px;
          margin-top: 10px;
          color:aliceblue;
          list-style-type: none;
          }
          .menu>li{
          padding-top: 36px;
        
        }
        
          .logo{
          width:45px;
          height:30px;
          background-image: url(logo.png);
          background-size: cover;
          margin-top: 17px;
          margin-left: 65px;
          font-size: 6px;
          padding-top: 10px;
          color:aliceblue;
          font-weight: bold;

          }
          .property{
          width:95%;
          height:35px;
          position: relative;
          top:232px;
          left:10px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(70, 68, 94, 0.959);

        }
  
         .voyage{
          width:55%;
          height:20px;
          background-color: white;
          font-size: 9px;
          color:rgb(79, 77, 99);
          text-align: center;
          }

          #checkin{
          width:45%;
          height:22px;
          background-color: white;
          font-size: 10px;
          color:rgb(70, 68, 94);
          text-align: center;
          }

          .sub{
          width:35%;
          height:20px;
          background-color:rgb(70, 68, 94);
          font-size: 9px;
          color:white;
          font-weight: bold;
          border: #f3f5ee;
          }

          .days{
          font-size: 30px;
          padding-left: 15px;
          top:50px;
          padding-left: 225px;
           }


         .contact{
          left:-30px;
          }

}