@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');

body {
   font-family: 'Poppins', sans-serif;
}

.banner,
.search-section,
.footer,
.table-container {
   font-family: 'Poppins', sans-serif;
}

/* Custom styles */
.banner {
   /* background-image: url('../img/beach.jpg'); */
   background-image: url('../img/bg-image.webp');
   background-size: cover;
   height: 100vh !important;
   background-position: center;
   background-repeat: no-repeat;

   header {
      padding: 15px 0;

      .logo-img {
         width: 200px;
      }
   }

   .search-box {
      /* height: 100vh; */
      margin-top: 0px;
      display: flex;
      align-items: center;
      justify-content: center;
   }
}

thead th, tbody td {
   padding: 8px 10px !important;
   font-size: 14px;
}

.cruise-select {
   padding: 5px;
   /* padding-left: 1px;
   padding-right: 1px; */
}

.search-section {
   background-color: rgb(255 255 255 / 30%);
   padding: 20px;
   border-radius: 15px;
   margin-top: 15px;
   backdrop-filter: blur(10px);
   /* width: 75%; */
   min-height: 272px;
}

.table-container {
   width: 100%;
   margin: 50px auto;
   border-radius: 8px;
   overflow: auto;
}

table {
   width: 100%;
   border-collapse: collapse;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   background-color: #fff;
   overflow: auto;
}

.result-table thead tr {
   background-color: #3498db;
   color: white;
   border-radius: 30px;
   overflow: hidden;
}

thead th,
tbody td {
   padding: 15px 18px;
   text-align: left;
   font-size: 14px;
}

tbody tr {
   background-color: #F6F6F6;
}

.was-price {
   color: red;
   text-decoration: line-through;
}

.bg-gray {
   background-color: #F1F1F1;
}

.current-price {
   color: green;
   font-weight: bold;
}

.save-price {
   color: green;
}

.responsive-modal {
   min-width: 80vw;
}

button.btn {
   background-color: #3D9BE9;
   border-color: #3D9BE9;
}

button.btn:active {
   background-color: #3D9BE9 !important;
   border-color: #3D9BE9 !important;
}

button.btn:hover {
   background-color: #3D9BE9 !important;
   border-color: #3D9BE9 !important;
}

button.btn:focus {
   background-color: #3D9BE9 !important;
   border-color: #3D9BE9 !important;
}

.search-tab {
   background-color: #4F4F4F54 !important;
   border: #4F4F4F54 !important;
}

.btn-check:active+.btn-primary,
.btn-check:checked+.btn-primary,
.btn-primary.active,
.btn-primary:active,
.show>.btn-primary.dropdown-toggle {
   background-color: #3D9BE9 !important;
   border: #3D9BE9 !important;
}

.text-blue {
   color: #3D9BE9;
}

.iti.iti--allow-dropdown {
   width: 100%;
}

/* responsive design */
@media screen and (max-width:576px) {
   .banner {
      height: 100vh;

      .logo-img {
         width: 70% !important;
      }
   }

   .btn-mobile-width {
      width: 100%;
   }

   thead th,
   tbody td {
      padding: 2px 14px;
   }

   #subscribeModalLabel {
      font-size: 20px !important;
      margin-top: 15px;
   }

   /* .search-section {
      width: 75%;
   } */
}

/* Rounded corners for the first and last row */
.result-table th:first-child,
.result-table td:first-child {
   border-top-left-radius: 30px;
   border-bottom-left-radius: 30px;
}

.result-table th:last-child,
.result-table td:last-child {
   border-top-right-radius: 30px;
   border-bottom-right-radius: 30px;
}

.result-table {
   border-collapse: separate;
   border-spacing: 0 10px;
}

.form-group {
   position: relative !important;
}

.form-control {
   width: 100%;
   padding-right: 40px;
}

.calendar-icon {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   font-size: 18px;
   color: #aaa;
}

.calendar-icon i {
   pointer-events: none;
}

/* Email Form */
#email-form-div {
   place-content: center;
}

#email-form-div input,
#email-form-div select,
button {
   border: 1px solid #80808063;
   border-radius: 8px;
   padding: 10px;
}

input,
select {
   border-radius: 6px !important;
}

.iti.iti--allow-dropdown input {
   padding-left: 52px !important;
}


.btn-close {
   top: 15px;
   right: 15px;
}

.react-tel-input .form-control {
   margin-left: 40px !important;
   width: 93.35% !important;
   padding: 21px !important;
   border-end-start-radius: 0px !important;
   border-start-start-radius: 0px !important;
}

.flag-dropdown {
   border-radius: 6px 0 0 6px !important;
   background-color: #fff !important;
   border-right: 0px !important;
}

.tab-btn {
   border-radius: 50px;
}

.react-tel-input .selected-flag {
   border-radius: 6px 0 0 6px !important;
}

.search-field {
   color: #808080;
}

.cruise-line-logo img {
   max-width: 100%;
   height: auto;
   display: block;
   margin: 0 auto;
}

@media (min-width: 768px) {
   .cruise-line-logo {
      display: none;
   }
}

@media screen and (max-width: 1536px) {
   .footer h1 {
      margin-left: 0px;
   }
}

@media screen and (max-width: 1440px) {
   .react-tel-input .form-control {
      width: 91.35% !important;
   }
}

@media screen and (max-width: 1280px) {
   /* .search-section {
      width: 75%;
   } */
}

@media screen and (max-width: 1025px) {
   .react-tel-input .form-control {
      width: 86.35% !important;
   }
}

@media screen and (max-width: 768px) {
   .react-tel-input .form-control {
      width: 80.35% !important;
   }

   .cruise-email-buttons {
      display: flex !important;
   }

   .banner {
      /* height: 100% !important; */
      padding-bottom: 30px;
   }

   /* .search-section {
      width: 75%;
   } */

   .search-tab {
      font-size: 13px;
   }

   .cruise-line-logo img {
      padding-top: 10px;
   }
}

/* For very small devices (phones, 576px and below) */
@media screen and (max-width: 576px) {
   .react-tel-input .form-control {
      width: 86.35% !important;
   }

   .banner {
      height: 100% !important;
      padding-bottom: 30px;
   }

   .footer h1 {
      text-align: center;
      font-size: 14px !important;
   }

   .footer h2 {
      text-align: center;
      font-size: 12px !important;
   }

   .cruise-line-logo {
      padding: 0px 0px 10px 0px;
      border-radius: 5px;
   }

   .form-section .row {
      padding: 0px 14px;
   }

   .search-field {
      font-size: 14px;
   }
}

/* Footer styles */
.footer {
   background-color: #3D9BE9;
   color: white;
   padding: 20px 0;
   text-align: center;
}

.footer h1 {
   font-size: 30px;
   font-weight: bold;
   margin-bottom: 5px;
}

.footer h2 {
   font-size: 16px;
   font-weight: bold;
   margin-bottom: 5px;
}

.footer .grid-container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   /* 5 equal columns */
   gap: 20px;
   justify-items: left;
   /* Center content within grid cells */
}

.footer .grid-item a {
   color: white;
   text-decoration: none;
}

.footer .grid-item a:hover {
   text-decoration: underline;
}

.footer hr {
   margin: 20px auto;
   border: 1px solid white;
   width: 100%;
}

.footer p {
   margin-top: 20px;
   font-size: 14px;
}

.search-all-cruise-btn {
   padding: 8px 38px !important;
}

.search-input {
   border: none;
   width: 50%;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
   .footer .grid-container {
      grid-template-columns: repeat(4, 1fr);
      /* 4 columns for medium screens */
   }
}

@media (max-width: 992px) {
   .footer .grid-container {
      grid-template-columns: repeat(3, 1fr);
      /* 3 columns for small screens */
   }

   .hr-line {
      display: none;
   }
}

@media (max-width: 768px) {
   .footer .grid-container {
      grid-template-columns: repeat(2, 1fr);
      /* 2 columns for extra small screens */
   }
}

@media (max-width: 576px) {
   .footer .grid-container {
      /* grid-template-columns: 1fr; */
      justify-items: center;
      /* Center content within grid cells */
   }

   .search-input {
      width: 100% !important;
   }

   .footer .grid-item {
      text-align: center;
      /* Optional: Center-align the text inside each grid item */
   }
}