*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
header{
    width:100%;
    height:320px;
    margin-left: 18%;
    position: fixed;
    top:-40px;
    left:-180px;
    clip-path: polygon(0 45%, 0 41%, 100% 0, 100% 45%);
    background-image: linear-gradient(90deg,#f0f1e2,#fa70707c,#c380ea09);
    z-index: 1;

}
nav{
    width:100%;
    height:290px;
    display: flex;
    justify-items: center;
     align-items: center;


}
.pic_1{
    width:100%;
    height:120vh;
    background-image: url(ferry.jpg);
    background-size: cover;

}
.wheel{
    width:80px;
    height:80px;
    position:fixed;
    top:15px;
    left:1800px;
    background-image: url(wheel.png);
    background-size: cover;
    animation: boat 14s linear infinite;
    z-index: 5;

}
.l_side{
    width:18%;
    height:110vh;
    left:-30px;
    top:-20px;
    background-image: url(light1.png);
    background-size: cover;
    opacity: 0.8;
    position: fixed;
    opacity:0.8;
    z-index: 2;
    }

.menu{
    width:100%;
    height:300px;
    display: flex;
    justify-content:center;

}
.menu>li{
    width:15%;
    height:300px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 115px;
    text-align: center;
    list-style-type: none;

}
.start{
    font-size: 20px;
    margin-top: 10px;
    color:aliceblue;
    list-style-type: none;
 }

 .start:hover{
    font-size: 25px;
    font-weight: bold;
    color:orangered;
 }


.logo{
    width:150px;
    height:50px;
    background-image: url(logo.png);
    background-size: cover;
    margin-top: 60px;
    font-size: 15px;
    padding-top: 50px;
    color:aliceblue;
    font-weight: bold;

}
.menu>li:hover{
    font-size: 20px;
    color:red;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    background-image: linear-gradient(90deg,#f3f5ee,#fb83837c);
    animation: gradient 2s linear;

} 

.uni{
    font-size: 23px;
    color:rgb(228, 6, 6);
    font-family: cursive;

}

.side{
    width:13%;
    height:300px;
    position: fixed;
    top:510px;
    left:220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;

    

}
.arrow{
    width:180px;
    height:120px;
    position: relative;
    background-color: rgba(247, 250, 253, 0.471);
    clip-path: polygon(90% 25%, 100% 50%, 90% 75%, 0 75%, 10% 50%, 0 25%);   
    }

 .arrow:hover{
    background-color:transparent;
   
 }

 .ar{
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    top:50px;
    left: 25px;
    text-shadow:2px 2px #3c3c40;
    color: rgb(251, 68, 129);
    text-align: center;
}

.arrow:first-child{
    margin-left: 15px;
}

.arrow:nth-child(2){
    margin-left: 30px;
}


.ar:hover{
    font-size: 20px;
    font-weight: bold;
    color:rgb(187, 215, 249);
    cursor: pointer;
}


.h_title{
    font-size: 40px;
    color: white;
    position: absolute;
    top:350px;
    left: 650px;
}

.p_title{
    font-size: 30px;
    color: white;
    position: absolute;
    top:400px;
    left: 770px;
    font-style: italic;
}

.property{
    width:50%;
    height:55px;
    position: relative;
    top:440px;
    left:470px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgb(70, 68, 94);
}

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

#checkin{
    width:25%;
    height:40px;
    background-color: white;
    font-size: 18px;
    color:rgb(70, 68, 94);
    text-align: center;

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

main{
    width:100%;
    height:140vh;
    position: relative;
    background-size: cover;
    background: linear-gradient( rgb(161, 195, 246),  rgb(56, 99, 156));
}

.size{
    width:80%;
    height:1100px;
    position: absolute;
    left:380px;
    display:flex;
    flex-wrap: wrap;
    justify-content:space-evenly;
    align-items:center;
    top: 100px;
  }

.river{
    width:27%;
    height:480px;
    background-image: linear-gradient(125deg, #4b80f3, white);
    position:relative;

}

.h_river{
    font-size: 35px;
    color:aliceblue;
    padding-left: 15px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    top:280px;
    
}

#elv{
    width: 100%;
    height:300px;
}
.p_river{
    font-size:22px;
    text-align: center;
    color:rgb(23, 2, 50);
    padding-left: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding-top: 25px;
}
.days{
    font-size: 30px;
    color:red;
    font-weight: bold;
    font-family: cursive;
    position: absolute;
    top:280px;
    padding-left: 340px;
        
    }
    .time{
    width:100%;
    height:60px;
    display: flex;
    justify-content:center;
    margin-top: 10px;

    }

    .time_3{
    width:26%;
    height:60px;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color:rgb(28, 6, 57);
    text-align: center;
    padding-top: 8px;
    font-weight: bold;
    }

    .sp1{
    font-size: 14px;
    padding-top: 5px;
    display: block;
    }

    .more{
    width:120px;
    height:40px;
    background: transparent;
    margin-left:150px;
    margin-top: 25px;
    font-size: 15px;
    padding:6px 15px;
    border:2px solid rgb(47, 58, 80);
    box-shadow: 5px 5px 9px rgb(96, 110, 138);
    }

    .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:150px;
    margin-top: 25px;
    font-size: 15px;
    text-align: center;
    border:none;
    }

    a{
    font-size: 15px;
    font-weight: bolder;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(29, 7, 43);
    text-decoration: none;

    }
    a:hover{
        font-size: 16px;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        color: rgb(248, 244, 250);
        text-decoration: none;
    
        }
    
    
    .content {
    position: relative;
    }
    
    .content h2 {
    color: #fff;
    width:900px;
    font-size: 6em;
    position: absolute;
    transform: translate(-50%, -50%);  
    font-family: Arial, Helvetica, sans-serif;
    top:10px;
    left:1200px;  
    }


    .content h2:first-child {
    color: transparent;
    -webkit-text-stroke: 2px white;
    }


    .content h2:nth-child(2) {
    color: #458cf6;
    animation: wave 3s ease-in-out infinite;
    }

    article{
    background: linear-gradient(rgb(43, 84, 139), rgb(244, 199, 199));
    width:100%;
    height:800px;
    }

   .vship{
    width: 1200px;
    height:600px;
    margin-top: 60px;
    position: absolute;
    left:550px;
    }

   .p_last{
    font-size:50px;
    text-align: center;
    color: #fe2551;
    text-shadow: 5px 5px 5px #3c3c40;
    padding-left: 400px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    padding-top: 80px;
    }

    footer{
    background-color: rgb(19, 47, 84);
    width:100%;
    height:900px;
    position: relative;
    background-image: url(pirs.jpg);
    background-size: cover;
   }


   .h_white{
    font-size: 30px;
    color: white;
    text-align: center;
    font-family:Georgia, 'Times New Roman', Times, serif;

    }

   .i_txt{
    font-size: 20px;
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    }


    .i{
    font-size: 20px;
    color: white;
  
    }
    
    .contact{
    width:800px;
    height:300px;
    position: absolute;
    top:150px;
    left:550px;
    }

    i{
    font-size: 17px;
    color: white;
    padding-top: 30px;
    padding-left: 20px;
    }

        @keyframes wave {
            0%,
            100% {
                clip-path: polygon(
                    0% 45%,
                    16% 44%,
                    33% 50%,
                    54% 60%,
                    70% 61%,
                    84% 59%,
                    100% 52%,
                    100% 100%,
                    0% 100%);
            }
        
            50% {
                clip-path: polygon(
                    0% 60%,
                    15% 65%,
                    34% 66%,
                    51% 62%,
                    67% 50%,
                    84% 45%,
                    100% 46%,
                    100% 100%,
                    0% 100%);
            }
        }
        

@keyframes boat {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 50% 100%;
    }
}