.section {
position: relative;
}
.section1 {
min-height: 100vh;
background-color: #001d3d;
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
flex-direction: column;
}
.section1 .img1 {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
}
.section1 .first {
z-index: 5;
text-align: center;
width: 50%;
}
@media (max-width: 768px) {
.section1 .first {
width: 100%;
}
}
.section1 .first .title-container span {
font-size: 64px;
color: white;
margin-bottom: 0;
}
@media (max-width: 768px) {
.section1 .first .title-container span {
font-size: 36px;
}
}
.section1 .second {
position: absolute;
bottom: 0;
width: 100%;
bottom: 0;
height: 100%;
}
.section1 .second::before {
content: '';
position: absolute;
width: 2px;
height: 260px;
background-image: url(//traditionalyacht.com/wp-content/uploads/2024/04/white-line.svg);
left: 50%;
bottom: 0;
}
.section2 .items-container {
margin-top: 64px;
}
.section2 .items-container .intro-title-container {
width: 66.666667%;
margin-bottom: 140px;
}
@media (max-width: 768px) {
.section2 .items-container .intro-title-container {
width: 100%;
margin-bottom: 44px;
}
}
.section2 .items-container .image-container {
width: 33.333333%;
}
@media (max-width: 768px) {
.section2 .items-container .image-container {
width: 100%;
}
}
.section2 .items-container .image-container {
position: relative;
}
.section2 .items-container .image-container::before {
content: '';
position: absolute;
right: -70px;
top: -100px;
width: 220px;
height: 258px;
background-image: url(//traditionalyacht.com/wp-content/uploads/2024/02/section2-line.svg);
}
@media (max-width: 768px) {
.section2 .items-container .image-container::before {
display: none;
}
}
@media (max-width: 768px) {
.section2 .items-container::after {
bottom: -2%;
width: 168px;
height: 229px;
background-image: url(//traditionalyacht.com/wp-content/uploads/2024/04/mobile-line.svg);
background-repeat: no-repeat;
}
}
.section2 .items-container .image-container .img2 {
position: relative;
}
.section2 .items-container .trip-info {
width: 41.666667%;
}
@media (max-width: 768px) {
.section2 .items-container .trip-info {
width: 100%;
}
}
.section2 .info-section {
justify-content: space-evenly;
margin-bottom: 80px;
}
@media (max-width: 768px) {
.section2 .info-section {
flex-direction: column;
}
}
.section2 .trip-info {
padding-top: 80px;
}
.section2 .trip-info .item {
margin-bottom: 56px;
}
.section2 .trip-info .item .item-inner .section-title {
margin-bottom: 16px;
}
.section2 .trip-info .item .trip-icon {
height: 80px;
width: 80px;
border-radius: 10000px;
}
.section3 .swiper .swiper-img {
height: 900px;
object-fit: cover;
}
.section3 .swiper .swiper-slide .slide-inner {
position: relative;
}
.section3 .swiper .swiper-slide .slide-inner .slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.section3 .swiper .swiper-slide .slide-inner .slide-content .slide-map {
margin-bottom: 20px;
}
.section4 {
margin-bottom: 180px;
} .section4 .intro .section-title {
margin-top: 80px;
}
.section4 .intro .intro-description {
text-align: center;
width: 66.666667%;
margin-bottom: 80px;
}
@media (max-width: 768px) {
.section4 .intro .intro-description {
width: 100%;
}
}
.section4 .cruises-list {
max-width: 1100px;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
row-gap: 96px;
margin: 0 auto;
}
@media (max-width: 768px) {
.section4 .cruises-list {
row-gap: 44px;
}
}
.section4 .cruise .cruise-img-container {
position: relative;
margin-bottom: 33px;
overflow: hidden;
}
.section4 .cruise .cruise-img-container img {
transition: 0.3s all ease-in;
aspect-ratio: 1.38;
object-fit: cover;
}
.section4 .cruise:hover .cruise-img-container img {
scale: 1.1;
}
.section4 a:hover {
color: initial;
}
.section4 .cruise .cruise-title::before {
content: '';
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 1px;
background-image: url(//traditionalyacht.com/wp-content/uploads/2024/02/border.svg);
}
.section4 .cruise .cruise-info {
display: flex;
flex-direction: column;
gap: 16px;
}
.section4 .cruise .cruise-info .total-guests,
.section4 .cruise .cruise-info .time,
.section4 .cruise .cruise-info .info {
gap: 8px;
}
.section4 .cruise {
grid-column: span 6 / span 6;
}
@media (max-width: 768px) {
.section4 .cruise {
grid-column: span 12 / span 12;
}
}
.section5 {
margin-bottom: 180px;
}
.section5 .title-container .intro-title {
position: relative;
}
.section5 .title-container .intro-title::before {
content: '';
position: absolute;
right: 25%;
bottom: -20px;
width: 780.308px;
height: 181.598px;
background-image: url(//traditionalyacht.com/wp-content/uploads/2024/03/swirl-line.svg);
background-repeat: no-repeat;
}
@media (max-width: 768px) {
.section5 .title-container .intro-title::before {
display: none;
}
}
.section5 .title-container {
margin-bottom: 128px;
}
.section5 .reasons-list {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
row-gap: 96px;
}
.section5 .reasons-list .reason {
text-emphasis: center;
grid-column: span 4 / span 4;
}
@media (max-width: 768px) {
.section5 .reasons-list .reason {
grid-column: span 12 / span 12;
}
.section5 .reasons-list {
row-gap: 40px;
}
}
.section5 .reasons-list .reason .reason-title {
margin-bottom: 16px;
}
.section5 .reasons-list .reason .reason-img {
text-align: center;
margin-bottom: 40px;
}
.section5 .reasons-list .reason .reason-img img {
width: 180px;
height: 180px;
object-fit: cover;
border-radius: 10000px;
}
.section6 {
margin-bottom: 60px;
}
.section6 .img-container img {
height: 680px;
object-fit: cover;
}
@media (max-width: 768px) {
.section6 .img-container img {
height: 320px;
}
}
.section7 {
margin-top: 120px;
margin-bottom: 120px;
}
.section7 .title-container {
text-align: center;
margin-bottom: 40px;
}
.section7 .swiper-container {
width: 50%;
}
@media (max-width: 768px) {
.section7 .swiper-container {
width: 100%;
}
}
.section7 .swiper-button-prev,
.section7 .swiper-button-next {
height: 64px;
width: 64px;
}
.section7 .parent-container {
width: 100%;
}
@media (min-width: 1024px) {
.section7 .parent-container {
width: 80%;
margin: 0 auto;
}
}
.section7 .swiper-button-prev::after {
content: '';
width: 64px;
height: 64px;
background-image: url(//traditionalyacht.com/wp-content/uploads/2024/03/swiper-left.svg);
}
.section7 .swiper-button-next::after {
content: '';
width: 64px;
height: 64px;
background-image: url(//traditionalyacht.com/wp-content/uploads/2024/03/swiper-right.svg);
}
.section8 {
margin-top: 120px;
margin-bottom: 180px;
position: relative;
}
.section8::before {
content: '';
position: absolute;
left: 50%;
top: -90px;
width: 100%;
height: 854px;
background-image: url(//traditionalyacht.com/wp-content/uploads/2024/03/eggline.svg);
transform: translateX(-50%);
}
@media (max-width: 768px) {
.section8::before {
display: none;
}
}
.section8 .first-title {
margin-bottom: 16px;
}
.section8 .second-title {
margin-bottom: 64px;
}
.section8 .form-wrapper {
width: 33.333333%;
}
@media (max-width: 768px) {
.section8 .form-wrapper {
width: 100%;
}
}
.section9 {
padding-top: 38px;
background: var(--darkblue);
margin-bottom: 120px;
}
.section9 .title-container .first-title {
text-align: center;
margin-bottom: 8px;
}
.section9 .title-container .second-title {
text-align: center;
width: 66.666667%;
margin-bottom: 80px;
}
.section9 .map-container {
margin-bottom: 40px;
}
.section3 .swiper-button-next,
.section3 .swiper-button-prev {
padding: 22px;
background-color: var(--yellow);
border-radius: 52px;
}
.section3 .swiper-button-next:after,
.section3 .swiper-button-prev:after {
font-size: 20px;
color: #001d3d;
}
.roller {
height: 6rem;
line-height: 7.8rem;
font-weight: 400;
position: relative;
overflow: hidden;
width: 100%;
display: flex;
justify-content: center;
}
.roller .rolltext {
position: absolute;
top: 0;
color: white;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.roller.play .rolltext {
animation: slide 4s;
animation-fill-mode: forwards;
animation-delay: 0.5s;
opacity: 1;
}
@keyframes slide {
0% {
top: 0;
}
25% {
top: -6rem;
}
50% {
top: -12rem;
}
100% {
top: -17rem;
}
}
@media screen and (max-width: 768px) {
.roller {
height: 2.3rem;
line-height: 5.8rem;
}
.roller .play {
.rolltext {
animation: slide1 4s;
animation-fill-mode: forwards;
animation-delay: 0.5s;
opacity: 1;
}
}
@keyframes slide {
0% {
top: 0;
}
25% {
top: -3.3rem;
}
50% {
top: -7rem;
}
100% {
top: -9.5rem;
}
}
}