/* ######## cruise ######## */
#cruise{
    background: var(--trBlack);
    clip-path: polygon(0 0,100% 10%,100% 100%,0 90%);
}

.cruise-photo{
    position: relative;
    min-height: 100vh;
}

.cruise{
    width: 25%;
    height: auto;
    position: absolute;
    transition: all 2s ease-in-out;
}

.cruise:hover{
    z-index: 50;
    transform: scale(1.5);
}

.cruise-1{
    top: 2%;
    left: 10%;
    transform: rotate(-15deg);
    z-index: 20;
}

.cruise-2{
    top: 8%;
    left: 41%;
    transform: rotate(8deg);
    z-index: 30;
}

.cruise-3{
    top: 12%;
    left: 66%;
    transform: rotate(-14deg);
    z-index: 20;
}

.cruise-4{
    top: 17%;
    left: 25%;
    transform: rotate(38deg);
    z-index: 25;
}

.cruise-5{
    top: 30%;
    left: 10%;
    transform: rotate(6deg);
    z-index: 10;
}

.cruise-6{
    top: 32%;
    left: 40%;
    transform: rotate(-8deg);
    z-index: 30;
}

.cruise-7{
    top: 41%;
    left: 61%;
    transform: rotate(14deg);
    z-index: 10;
}

.cruise-8{
    top: 57%;
    left: 67%;
    transform: rotate(-15deg);
    z-index: 20;
}

.cruise-9{
    top: 50%;
    left: 39%;
    transform: rotate(13deg);
    z-index: 10;
}

.cruise-10{
    top: 51%;
    left: 14%;
    transform: rotate(-2deg);
    z-index: 30;
}

.cruise-11{
    top: 63%;
    left: 9%;
    transform: rotate(-15deg);
    z-index: 30;
}

.cruise-12{
    top: 75%;
    left: 63%;
    transform: rotate(21deg);
    z-index: 30;
}
/* ######## end of cruise ######## */

/* ######## naval ######## */
#naval{
    background: var(--trBlack);
    clip-path: polygon(0 10%,100% 0%,100% 90%,0 100%);
}

.naval-photo{
    position: relative;
    min-height: 50vh;
}

.naval{
    width: 25%;
    height: auto;
    position: absolute;
    transition: all 2s ease-in-out;
}

.naval:hover{
    z-index: 50;
    transform: scale(1.5);
}

.naval-1{
    top: 5%;
    left: 10%;
    transform: rotate(-7deg);
    z-index: 20;
}

.naval-2{
    top: 0%;
    left: 55%;
    transform: rotate(-18deg);
    z-index: 30;
}

.naval-3{
    top: 15%;
    left: 37%;
    transform: rotate(14deg);
    z-index: 20;
}

.naval-4{
    top: 52%;
    left: 16%;
    transform: rotate(38deg);
    z-index: 25;
}

.naval-5{
    top: 45%;
    left: 40%;
    transform: rotate(-28deg);
    z-index: 30;
}

.naval-6{
    top: 49%;
    left: 65%;
    transform: rotate(8deg);
    z-index: 20;
}
/* ######## end of naval ######## */