@import 'header.css';
@import 'footer.css';

html {scroll-behavior: smooth; }
body {font-family: "DM Sans", sans-serif !important; font-weight: 400;}

h1, h2, h3, h4, h5, h6 {font-family: "Marcellus", serif;}

/* Banner */
/*.banner-bg {background: url('../images/banner-img.jpg') no-repeat; background-size: cover; height: 800px;}*/
.banner-img {width: 100%; height: 750px; object-fit: cover;}
.banner-bg-overlay {position: absolute; left: 0; top:0; right: 0; bottom: 0; background: #02152699;}
.banner-title {font-size:16px; letter-spacing: 3px; font-weight: 400; padding-top: 80px; color: #fff;}
.banner-hding {font-size:64px; line-height: 110px; letter-spacing: 10px; font-weight: 400; color: #fff; text-transform: uppercase;}
.banner-prgh {font-size: 16px; font-weight: 400; letter-spacing: 1.6px; line-height: 30px; color: #fff; padding-top: 20px;}
.banner-btn {background: #b19d7f; border:1px solid #b19d7f; color:#fff; font-size:14px; font-weight: 400; letter-spacing: 3px; padding:11px 25px; border-radius: 0px; margin-top:50px; display:inline-block; }

@media (max-width: 768px) {
	.banner-title {padding-top: 70px;}
	.banner-hding {font-size: 36px; line-height: 44px;}
}

/* Book Now section */
.book-now-section {padding:100px 0;}
.book-now-img {width: 100%; height: 500px; position: relative;}
.book-now-img > img {width: 100%; height: 100%; object-fit: cover;}
.book-now-overlay {position: absolute; left: 0; top:0; right: 0; bottom: 0; background: linear-gradient(to top, #021526, #02152600);}
.bottom-content {position: absolute; bottom: 0px; left:0; padding: 0 20px 50px}
.bottom-content-img {width: 60px; height: 60px; object-fit: contain;}
.bottom-content-hding {font-size: 17px; line-height: 33px; font-weight: 500; letter-spacing: 3px; color: #fff; margin:0px; padding-bottom: 5px;}
.bottom-content-prgh {font-size:10px; font-weight: 500; letter-spacing: 3px; color: #fff;}


/*Wrapper */
.wrap-title {font-size:16px; font-weight: 400; letter-spacing: 3px; padding-top: 10px; padding-bottom: 10px; margin:0px;}
.wrap-hding {font-size:42px; text-transform: uppercase; letter-spacing: 10px; line-height: 70px; margin:0; padding-bottom: 15px;}
.wrap-prgh {font-size: 14px; letter-spacing: 1.6px; line-height: 30px; font-weight: 400;}
.wrap-btn {background: #b19d7f; border:1px solid #b19d7f; color:#fff; font-size:14px; font-weight: 400; letter-spacing: 3px; padding:11px 25px; border-radius: 0px; margin-top:20px; display:inline-block; }
.ullist {margin: 30px 0 0; padding:0px; display: block;}
.ullist li {list-style: none; font-size: 14px; letter-spacing: 1.6px; margin-bottom: 15px; padding-left: 36px; position: relative;}
.ullist li:before {content: ''; width: 18px; height: 18px; position: absolute; left:0; top:0px; background: url("../images/svg/list-icon.svg") no-repeat; background-size: contain;}

.booking-box {width: 100%; background: #fff; box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.2); padding:30px; margin-top:-180px;}
.booking-box-hding {font-size:32px; letter-spacing: 4px; line-height: 48px; padding-bottom: 20px;}
.booking-form-lbl {font-size:13px; letter-spacing: 3px; padding-bottom: 3px;}
.booking-form-field, .gj-textbox-md {width:100%; border:1px solid rgba(217, 217, 217, 1) !important; height: 45px; padding:10px 20px !important; font-size: 14px !important; letter-spacing: 2px;}
.booking-calendar-icon {position: absolute; right:15px; top:12px;}
select.booking-form-field {background: url("../images/svg/select-down-arrow.svg") no-repeat; appearance: none; background-position: 96% center;}
.member-box {background: rgba(244, 242, 237, 1); padding: 20px;}
.booking-form-btn {background: rgba(54, 88, 104, 1); border-radius: 4px; color: #fff; padding:7px 20px; text-align: center; letter-spacing: 3px; font-size:14px; margin:30px auto 0; display: table;}


/* cruise section */
.cruise-section-bg {background: rgba(223, 238, 255, 1); border:1px solid rgba(0, 0, 0, 1); padding:80px 0px; position: relative;}
.cruise-section-bg:before {content: ''; position: absolute; left: 0; top: 0; background:  url('../images/section-bg.png') no-repeat; width:100%; height:100%; opacity:50%; }
.cruise-img {width: 100%; border-radius: 20px; margin-bottom: 10px; height: 360px;}
.cruise-img > img {width: 100%; height: 100%; border-radius: 20px;}
.cruiste-name {font-size:22px; font-weight: 700; line-height: 22px; font-family: "Karla", sans-serif; text-align: center; display: block;}

.section-pading {padding:100px 0 40px;}
.cruise-count-img {width: 50px; height: 50px; margin-right: 15px;}
.cruise-count {font-size:20px; font-weight: 700; font-family: "Encode Sans Semi Condensed", sans-serif; margin: 0;}
.cruise-count-prgh {font-size:14px; font-weight: 300; font-family: "Encode Sans Semi Condensed", sans-serif; margin: 0;}
.cruise-hding {font-size: 38px; font-weight: 700; color: #000; font-family: "Encode Sans Semi Condensed", sans-serif;}
.cruise-prgh {font-size:16px; font-weight: 500; padding-top:30px; font-family: "Encode Sans Semi Condensed", sans-serif;  margin: 0; text-align: justify;}
.cruise-journey-img {width: 100%; height: 340px; border-radius: 40px;}

.cruise-package-box {background: #fff; box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25); min-height:170px; border-radius: 20px; margin-bottom: 20px;}
.cruise-package-img {width: 100%; height: 250px; border-radius: 20px;}
.cruise-package-img > img {width: 100%; height: 100%; object-fit: cover; border-radius: 20px;}
.cruise-packag-content  { background: #fff; box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25); padding:20px; border-radius: 20px; position: relative; margin-top:-30px;}
.cruise-packag-name {font-size: 16px; font-weight: 700; font-family: "Inter", sans-serif;}
.cruise-package-btn {background: rgba(15, 26, 54, 1); border-radius: 40px; padding: 10px 20px; text-transform: uppercase; color: #fff; display: inline-block; margin-top:10px; font-size:14px;}
.cruise-tax-text {font-size:13px; font-weight: 700; color: rgba(135, 134, 134, 1); margin: 0; font-family: "Inter", sans-serif;}
.cruise-hightligt-txt {font-size:13px; font-weight: 700; color: rgba(241, 109, 27, 1); margin: 0; font-family: "Inter", sans-serif;}

/* blog */
.blog-section {background: rgba(2, 21, 38, 1); padding:80px 0px; position: relative;}
.blog-box {margin-bottom: 30px;}
.blog-img-area {width: 100%; height: 300px; margin-bottom: 15px;}
.blog-img-area > img {width: 100%; height: 100%; object-fit: cover;}
.blog-date-icon {width: 14px; height: 14px; object-fit: contain; margin-right: 10px;}
.blog-date {font-size:12px; color: #fff; letter-spacing: 3px; margin: 0;}
.blog-hding {color: #fff; font-size: 26px; line-height: 40px; letter-spacing: 3px;}

.gj-datepicker-md [role=right-icon] {position: absolute; right: 14px !important; top: 12px !important; font-size: 28px !important; opacity: 0; z-index: 1; }

.breadcrumb-bg {background: rgba(54, 88, 104, 1) url('../images/cruise-journey.jpg') no-repeat center; background-size: cover; padding: 40px 0; position: relative;}
.breadcrumb-bg:before {content: ''; position: absolute; left: 0; top:0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7);}
.breadcrumb-hding {font-size:50px; font-weight: 400; color:#fff; letter-spacing: 10px; display: block; text-align: center;}
.breadcrumb-list {margin: 0; padding: 0; display: flex; justify-content: center;}
.breadcrumb-list li {list-style: none; font-size:16px; color:#fff; font-weight: 500; letter-spacing: 3px; padding:0px 20px; position:relative; }
/*.breadcrumb-list li:not(:last-child) {border-right: 1px solid #fff;}*/
.breadcrumb-list li:not(:last-child):before {content: ''; position: absolute; right: 0; top:4px; width: 1px; height: 20px; background: #fff; transform: rotate(23deg);}
.breadcrumb-list li a {color:#fff;}

.contact-bg {background: url('../images/contact-bg.png') no-repeat top; padding: 60px 0;}
.contact-form-bg {background: rgba(244, 242, 237, 1); padding: 40px;}
.contact-radio-btn {width:22px; height: 22px; position: relative; margin-right: 10px;}

@media (max-width: 767px) {
    .wrap-hding {font-size: 30px; letter-spacing: 5px; line-height: 42px;}
    .booking-box {margin-top:50px;}
    .cruise-img {height: 230px;}
    .breadcrumb-hding {font-size: 28px;}
}

.blinking-button{
    padding: 8px 35px;
    border-radius: 0px 0px; 
    border: 0px solid #6C8003;
    background-color: #8EDDBE;
   color: #fff;
   animation: blink 1s linear infinite;
   text-align: left;
   display: flex; 
   flex-direction: row;
   width: 100%;
   gap:20px;
   position: fixed; bottom: 0; z-index: 9;
}
.blinking-button i {font-size: 40px; line-height: 1.5;}
.blinking-button  span {font-size:24px; font-weight: 700;}
@keyframes blink {
  0%, 100% {background-color:#44d821;}
  50% {background-color: #8EDDBE;}
}

@media (min-width: 768px) {
    .blinking-button {display: none;}
}



/* modal */
.expedia-popup .modal-content {border-radius: 12px; padding: 0px; background: #05203D; }
.expedia-logo {display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: bold; position: relative; }
.expedia-logo img {width: 12rem; position: absolute; top: -3rem;}
.expedia-buttons .btn {width: 100%; background: #05203D; border-radius:100px; padding: 5px; }
.phone-offer {background-color: #e78915; color: #fff; font-weight: bold; }
.agent-image {width: 30%; border-radius: 50%; }
.plane-img {width: 10rem; margin-right: 20px; }
.modal-header {border-bottom: none; }

@media (max-width: 576px) {
  .expedia-logo img {width: 50%; }
  .plane-img {width: 14rem; margin-right: 10px; }
  .agent-image {width: 50%; }
  .phone-offer {font-size: 20px; font-weight: 700; }
  .modal-body h4 {font-size: 28px; font-weight: 700; }
  .modal-body p {font-size: 17px; }

}

.modal-body {padding-top :  50px }
.modal-number-container {display: flex; justify-content: center; align-items: center; background: #1156bb; color: white; margin : 10px; border-radius :100px; padding :10px; }
.modal-number-container  h4 {font-size: 20px; } 
.modal-number-container a {color: #fff;}
.content-center {border-radius: 20px 20px 0 0; background: white; }
.modal-footer-custom {display: flex; justify-content: space-between; align-items: center ; color : white; padding:0 20px; }
.expedia-popup {display: none;}