@charset "utf-8";

* {
    box-sizing: border-box;
}

/* Clear floats after the columns */
.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 1025px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

html {
    font-family: Verdana,Arial,Helvetica,sans-serif;
	  font-size:13px
}

.header {
    background-color: #4682b4;
    color: #ffffff;
    padding: 5px;
}

.header .topnav a:link,
.header .topnav a:visited,
.header .topnav a:active {
    color: #e8e8e8 !important;
    text-decoration: none;
}

.header .topnav a:hover {
    color: #000000 !important;
    text-decoration: none;
}

/* Add a background color to the top navigation */
.topnav {
    overflow: hidden;
    background-color: #4682b4;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #e8e8e8;
    text-align: center;
    padding-bottom: 8px;
    padding-top: 8px;
    padding-left: 16px;
    padding-right: 16px;
    text-decoration: none;
    font-size: 15px;
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 801px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
  }
  .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
  }
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 3px;
    padding-left: 10px;
    margin-bottom: 0px;
    background-color: #d8ecf9;
    color: #ffffff;
}

.aside {
    background-color: #ffffff;
    padding: 2px;
    text-align: center;
    font-size: 13px;
}

img {
    max-width: 100%;
    height: auto;
}

a:link {
    color:#000;
    text-decoration:none
}

a:visited {
    color:#000;
    text-decoration:none
}

a:hover,a:active,a:focus {
	  text-decoration:underline
}

.footer {
    background-color: #344152;
	  color: #000000;
    font-size: 12px;
    padding: 0px;
	  font-weight: normal !important; 
}

.footer ul {
    list-style-type: none;
    margin: 0;
    padding: 0px;
}

.footer li {
    padding: 2px;
	  margin-bottom: 0px;
    background-color: #344152;
	  color: #82c3eb;
}

.footer a,
.footer a:link,
.footer a:visited {
    color: #82c3eb !important;
    text-decoration: none;
}

.footer a:hover {
    color: #82c3eb !important;
    text-decoration: underline;
}

.footer li.footertextheader a,
.footer li.footertextheader a:link,
.footer li.footertextheader a:visited,
.footer li.footertextheader a:hover,
.footer li.footertextheader a:active {
    color: #d8ecf9 !important;
    text-decoration: none !important;
}

.footer li.footertextheader a:hover {
    color: #d8ecf9 !important;
    text-decoration: underline !important;
}

.menu li.boxtitle {
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    margin-bottom: 0px;
    background-color: #82c3eb;
    color: black;
    font-weight:bold;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -khtml-border-radius:8px;
    border-radius: 8px;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}

.menu li.firstitem {
    padding-top: 10px;
	margin-bottom: 0px;
    background-color: #d8ecf9;
    color: #fffffc;
}

.menu li.lastitem {
    padding-top: 4px;
    padding-bottom: 10px;
    margin-bottom: 0px;
    background-color: #d8ecf9;
    color: #fffffc;
}

.menu li.boxbottom {
    padding-top: 3px;
    padding-bottom: 14px;
    margin-bottom: 0px;
    background-color: #d8ecf9;
    color: #fffffc;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -khtml-border-radius:8px;
    border-radius: 8px;
    border-top-left-radius:0;
    border-top-right-radius:0;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
}

.boxtitle {
    padding: 6px;
    padding-left: 10px;	
    margin-bottom: 0px;
	  color: black;
    background-color: #82c3eb;
    font-weight:bold;
    font-size:14px;
    text-align:left;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -khtml-border-radius:8px;
    border-radius: 8px;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}

.boxbottom {
    padding: 6px;
    padding-left: 10px;	
    padding-bottom: 14px;
    margin-bottom: 0px;
    background-color: #d8ecf9;
    color: #fffffc;
    font-size:13px;
    text-align:left;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -khtml-border-radius:8px;
    border-radius: 8px;
    border-top-left-radius:0;
    border-top-right-radius:0;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
}

.boxbottomright {
    padding: 6px;
    padding-left: 10px;	
    padding-bottom: 6px;
    margin-bottom: 0px;
    background-color: #d8ecf9;
    color: #fffffc;
    font-size:13px;
    text-align:left;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -khtml-border-radius:8px;
    border-radius: 8px;
    border-top-left-radius:0;
    border-top-right-radius:0;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
}

.tat {
    color:#F3F3F3;
    padding-bottom:1px;
    padding-top:30px;
}

.copyright {
    color:#F3F3F3;
    padding-bottom:20px;
    text-align:center;
}

.logos {
    text-align: center;
    padding-bottom: 10px;
}

input.totalprice {
    text-align:right;
    border:0 none;
    font-family:Verdana,Geneva,sans-serif;
    font-size:12px;
    font-weight:bold;
    vertical-align:middle
}

/* HAVE NOT CHECKED FROM HERE */
.continueshopping {
    -moz-box-shadow:inset 0 1px 0 0 #bbdaf7;-webkit-box-shadow:inset 0 1px 0 0 #bbdaf7;
    box-shadow:inset 0 1px 0 0 #bbdaf7;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#79bbff),color-stop(1,#378de5));
    background:-moz-linear-gradient(center top,#79bbff 5%,#378de5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#82c3eb',endColorstr='#378de5');
    background-color:#82c3eb;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    border:1px solid #84bbf3;
    display:inline-block;
    color:#fff;
    font-family:Verdana;
    font-size:12px;
    font-weight:bold;
    padding:6px 12px;
    text-decoration:none;
    text-shadow:1px 1px 0 #528ecc
}
	
.continueshopping:hover {
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#378de5),color-stop(1,#79bbff));
    background:-moz-linear-gradient(center top,#378de5 5%,#79bbff 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5',endColorstr='#82c3eb');
    background-color:#378de5;
    text-decoration:none
}

.continueshopping:active {
    position:relative;
    top:1px
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 769px) {
  .col-25, .col-50, .col-75, .col-37, .col-63, input[type=submit] {
      width: 100%;
      margin-top: 0;
    }
}

@media only screen and (max-width: 1024px) {
  .footertours {
      padding: 0 0 0 10px;
      margin:0;
      float:left;
  }
}

@media only screen and (max-width: 1024px) {
  .footertoursleft {
      padding: 10px 0 0 10px;
      margin:0;
      float:left;
  }
}

@media screen and (max-width: 768px) {
  div.hideformobile {
      display: none;
  }
}

@media screen and (min-width: 801px) {
  div.hidefortabletandcomputer {
      display: none;
  }
}

@media screen and (max-width: 1024px) {
  div.hideformobileandtablet {
      display: none;
  }
}

@media screen and (min-width: 1025px) {
  div.hideforcomputer {
      display: none;
  }
}

@media screen and (max-width: 1025px){
  .logo{
      width:150px !important;
 }
}

/* new css */

:root {
    --primary-color: #4682b4;
    --secondary-color: #edf5fa;
    --text-color: #333;
    --light-color: #fff;
    --error-color: #ff0000;
    --success-color: #4caf50;
    --border-radius: 4px;
    --box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    --transition: all 0.3s ease;
}

/* Base Layout */
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
}

h1 {
    font-size: 1.4rem;
    color: var(--primary-color);
    font-weight: 700;
    margin: 0 0 10px 0;
    font-family: inherit;
}

/* This is for test new design */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 !important;
    border: 1px solid #ddd;        
    border-radius: 8px;             
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    background-color: #EDF5FA;
    padding-bottom: 0px;
}

.header {
    background-color: var(--primary-color);
}

.tour-header {
    text-align: center;
    padding: 20px 0;
    margin-top: -20px;
    margin-bottom: 0px;
}

.tour-section {
    margin-bottom: -20px;
    margin-left: -10px !important;
    margin-right: -10px !important;
    width: calc(100% + 20px) !important;
}

/* Cards & Sections */
.card,
.booking-card,
.related-tour-card {
    background: var(--light-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    margin: 0 0 20px 0;
}

.card {
    position: relative;
    z-index: 1;
    border-radius: 0 0 4px 4px;
}

.section-tab-container {
    position: relative;
    margin: 50px 0 20px;
}

.section-title-tab,
.related-section-title-tab {
    position: absolute;
    top: -10px;
    left: 0;
    background: var(--primary-color);
    color: var(--light-color);
    padding: 6px 14px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 6px 6px 0 0;
    transform: translateY(-50%);
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.related-section-title-tab {
    top: -8px;
}

/* Tour Program */
.tour-schedule {
    margin-top: 5px !important;
}

.schedule-item p {
    padding-bottom: 10px;
}

.schedule-item:last-child p,
.schedule-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

.note {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
}

/* Lists */
.card ul {
    margin: 0;
    padding-left: 20px;
}

.card li {
    padding-bottom: 8px;
}

.card ul li:last-child {
    padding-bottom: 0;
}

/* Transfer Table */
.transfer-grid {
    display: block;
    margin-top: 8px;
    gap: 8px;
}

.transfer-item {
    padding: 8px 0;
}

.transfer-item[data-price-thb] {
    font-weight: bold;
    color: var(--primary-color);
    margin-top: -10px;
}

.transfer-location {
    font-weight: normal;
}

/* Alerts */
.alert {
    padding: 15px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
}

.alert-icon {
    margin-right: 20px;
    min-width: 20px;
}

.alert-warning {
    background-color: #fff3cd;
    border-left: 5px solid #ffc107;
    margin-top: 20px;
}

.alert-info {
    background-color: #d0e9d2;
    border-left: 5px solid #4caf50;
    margin-top: 20px;
}

/* Booking Section */
.booking-section {
    margin: 30px;
}

.section-title-container {
    background: var(--primary-color);
    color: white;
    padding: 10px;
    text-align: center;
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
}

.tour-name-wrapper {
    text-align: center;
}

.tour-name-display {
    display: inline-block;
    margin: 0 auto 25px auto;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    padding: 8px 16px;
    border-radius: 6px;
}

.booking-form {
    background: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    align-items: center;
}

.form-col {
    flex: 1;
    min-width: 200px;
    margin-right: 15px;
}

.form-col:last-child {
    margin-right: 0;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.tour-date-selects {
    display: flex;
    gap: 8px;
    width: 100%;
}

.tour-date-selects select:nth-child(1) { flex: 1; min-width: 60px; }
.tour-date-selects select:nth-child(2) { flex: 2; min-width: 100px; }
.tour-date-selects select:nth-child(3) { flex: 1; min-width: 60px; }

.tour-date-selects select {
    flex: 1;
    min-width: 0;
}

.calendar-icon {
    margin-left: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.tour-date-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-row.total-row .form-col label {
    margin-bottom: 4px;
}

select,
input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
}

.label-price-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.label-price-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.price-display {
    display: flex;
    gap: 8px;
    align-items: center;
}

.price-new {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ff6b35;
}

.price-old {
    text-decoration: line-through;
    color: #999;
    font-size: 1.0em;
    margin-left: 13px;
}

.btn-container {
    text-align: center;
    margin: 25px 0 10px 0;
}

.add-to-cart-btn {
    display: inline-block;
    padding: 14px 28px;
    min-width: 200px;
    background-color: #2b5876;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.add-to-cart-btn:hover {
    background-color: #3a6d99;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.add-to-cart-btn:active {
    transform: translateY(0);
}

/* Related Tours */
.related-tours {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
    width: calc(100% + 20px) !important;
}

.related-tours-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.related-tour-card {
    background: white;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
    margin-top: 10px;
    flex: 0 0 auto;
    width: 340px;
    max-width: 100%;
}

.related-tour-card img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
}

.tour-image-container {
    height: 200px;
    overflow: hidden;
}

.tour-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-name {
    padding: 15px 15px 5px;
    text-align: center;
    color: var(--primary-color);
    font-weight: 600;
}

.view-cart-link {
    display: flex;
    align-items: center;
    padding: 4px 0; /* Add top and bottom padding */
}

.view-cart-link a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
    font-weight: normal;
}

.view-cart-link a:hover {
    text-decoration: underline;
}

.cart-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.cart-text {
    margin-left: 15px; /* Increased from 8px to 15px for more space */
    font-size: 13px;
    line-height: 20px;
    color: #000;
}

.gt_float_switcher {
    transform: translateY(5px) !important;
}

/* Hero Section */
.hero {
    background: url('images/phiphi/gallery1.jpg');
    height: 65vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    color: white; 
    text-align: center;
}

.hero-content {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero h1 {
    height: 2.5em;
    line-height: 1.3;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: 2.0rem;
    color: white;
    margin-bottom: -30px;
}

.hero p {
    min-height: 3.5em;
    line-height: 1.5;
    margin: 1rem 0;
    font-size: 1.2rem;
    font-weight: 600;
    opacity: 0.9;
    color: white;
}

.trust-badges {
    min-height: 5em; /* Space for 2 badge rows */
    margin: 1rem 0;
}

.badge {
    background: rgba(73, 73, 73, 0.45);
    padding: 0.5rem 0.5rem;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    margin-bottom: 20px;
}

.cta-button {
    display: inline-block;
    background: #ff6b35;
    color: white;
    padding: 0.5rem 2rem;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 20px;
}

/* Stats Section */
.stats {
    background: linear-gradient(135deg, #82c3eb 0%, #4682b4 100%);
    color: white;
    padding: 0rem 0;
    text-align: center;
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

.stat-item {
    padding-left: 10px;
    padding-right: 10px;
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.0rem;
    color: #ffd700;
}
		
/* Featured Tours */
.featured-tours {
    padding: 0rem 0;
    background: #f8f9fa;
    margin-top: 40px;
}

.featured-tours .section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.featured-tours .section-header h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 5px; /* Space between h2 and p */
}

.featured-tours .section-header p {
    margin-bottom: 0;
    font-size: 1.2rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

.tours-grid-index {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
    margin-top: 0;
    gap: 1rem;
    margin: 0 1rem 3rem 1rem; /* Adds 1rem margin on left and right */
}

.tour-card-index {
    width: 100%;          
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
}

.tour-card:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.tour-image {
    background-color: #f0f0f0;          
    height: 0px;
    padding-bottom: 66.66%; /* 3:2 aspect ratio (250px/375px) */
    background-size: cover;
    background-position: center;
    position: relative;
}

.tour-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #ff6b35;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 1.2rem;
    font-weight: bold;
}

.tour-content {
    padding: 1.5rem 2rem; /* Adjust padding as needed */
    min-height: 220px; /* Fixed height to prevent shifts */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Keeps footer at bottom */
}

.tour-title {
    margin: 0; /* Remove default margins */
    padding: 0 0 0.5rem 0; /* Add padding instead */
    height: 3.5em; /* Fixed height (adjust based on your title length) */
    line-height: 1.3; /* Prevents text overflow */
    overflow: hidden; /* Ensures text doesn't break layout */
    margin-bottom: -0.7rem;
}

.tour-description {
    margin: 0;
    margin-bottom: 0rem; /* Add space below the description */
    min-height: 4.5em; /* Reserve space for 3 lines of text */
    line-height: 1.5; /* Consistent spacing */
}

.tour-features {
    margin: 1rem 0;
    min-height: 2.5em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* Add space between features */
}

.feature {
    background: #f0f8ff;
    color: #0066cc;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.85rem;
    white-space: nowrap; /* Prevent text wrapping within features */
}

.tour-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-container {
    display: flex;
    align-items: flex-end;
    gap: 15px;
}

.tour-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ff6b35;
    line-height: 1;
}

.tour-price-old {
    font-size: 1.0rem;
    color: #999;
    text-decoration: line-through;
    line-height: 1;
}

.book-btn {
    background: linear-gradient(45deg,#4682b4);
    color: white;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.book-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(76,175,80,0.3);
}

/* Why Choose Us */
.why-choose {
    padding-top: 40px;
    padding-bottom: 0px;
    background: white;
}

.section-header {
    margin-top: 15px;  
    margin-bottom: 20px; /* Consistent spacing below */
}

.why-choose .section-header h2 {
    min-height: 2.5em; /* Reserve space for heading */
    line-height: 1.3;
    margin: 0; /* Remove default margins */
    text-align: center;
    margin-bottom: -20px; /* Space between h2 and p */
}

.why-choose .section-header p {
    min-height: 2em; /* Reserve space for subtitle */
    line-height: 1.5;
    margin: 0.5rem auto 0; /* Centered with top margin */
    width: fit-content; /* Prevent width changes */
    font-size: 1.2rem;
    margin-bottom: -25px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
    margin-top: 0px;
    margin-bottom: 15px;
}

.feature-item {
    min-height: 220px; /* Fixed container height */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    margin-bottom: -40px;
}

.feature-item h3 {
    min-height: 3em; /* Reserve heading space */
    line-height: 1.3;
    margin: 0 0 0.5rem 0;
    text-align: center;
    margin-bottom: -20px;
}

.feature-item p {
    min-height: 4.5em; /* Reserve 3 lines of text */
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

.feature-icon {
    flex-shrink: 0; /* Prevents icon resizing */
    margin-bottom: 1rem;
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, #82c3eb, #82c3eb);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}

/* Add these iPhone-specific styles to your existing CSS */

/* iPhone detection and fixes */
@supports (-webkit-touch-callout: none) {
  /* This targets WebKit browsers (Safari on iOS) */
  
  @media (max-width: 768px) {
    .hero {
        /* Reduce height slightly to accommodate content */
        height: 55vh;
        min-height: 380px;
        /* Add safe padding for iPhone notch and elastic scroll */
        padding: 30px 15px 40px 15px;
        /* Prevent elastic scroll issues */
        overflow: hidden;
    }

    .hero-content {
        /* Compress content vertically */
        min-height: 280px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .hero h1 {
        /* Move h1 down from top edge */
        margin: 15px 0 5px 0;
        font-size: 1.9rem;
        line-height: 1.1;
        text-align: center;
    }

    .hero p {
        /* Tighter spacing */
        margin: 8px 0 15px 0;
        font-size: 1.05rem;
        line-height: 1.3;
        text-align: center;
    }

    .trust-badges {
        /* Reduce badge section height */
        min-height: auto;
        margin: 10px 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
    }

    .badge {
        /* Smaller badges */
        padding: 0.4rem 0.6rem;
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .cta-button {
        /* Pull button up significantly */
        margin-top: 10px;
        padding: 10px 20px;
        font-size: 1.05rem;
    }
  }

  @media (max-width: 480px) {
    .hero {
        height: 50vh;
        min-height: 360px;
        padding: 25px 10px 35px 10px;
    }

    .hero-content {
        min-height: 260px;
    }

    .hero h1 {
        margin: 10px 0 5px 0;
        font-size: 1.7rem;
    }

    .hero p {
        margin: 6px 0 12px 0;
        font-size: 1rem;
    }

    .trust-badges {
        margin: 8px 0;
        gap: 5px;
    }

    .badge {
        padding: 0.3rem 0.5rem;
        font-size: 0.85rem;
        margin-bottom: 6px;
    }

    .cta-button {
        margin-top: 8px;
        padding: 9px 18px;
        font-size: 1rem;
    }
  }
}

.featured-tour-card {
    width: calc(100% + 20px);          
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    margin-bottom: 2rem;
    margin-left: -10px;
    margin-right: -10px;
}

.featured-tour-card:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.featured-tour-card:last-child {
    margin-bottom: 10px; /* Remove bottom margin from the last card */
}

.featured-tour-image {
    background-color: #f0f0f0;          
    height: 0px;
    padding-bottom: 56.25%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.featured-tour-content {
    padding: 1.5rem 2rem;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.featured-tour-title {
    margin: 0;
    padding: 0;
    line-height: 1.3;
    font-size: 1.2rem;
    margin-bottom: -0.1rem;
}

.featured-tour-description {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-size: 13px;
}

.featured-tour-features {
    margin: 1rem 0;
    min-height: 2.5em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.featured-tour-feature {
    background: #f0f8ff;
    color: #0066cc;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.featured-tour-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.featured-price-container {
    display: flex;
    align-items: baseline;
    gap: 8;
}

.featured-tour-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ff6b35;
}

.featured-tour-price-old {
    font-size: 1.0rem;
    text-decoration: line-through;
    color: #999;
    margin-left: 1.0rem;
    position: relative;
    top: -0.5px; /* Move it up slightly to level it more */
}

@media (max-width: 768px) {
  html {
      scroll-padding-top: 80px;
  }

  .gtranslate_wrapper .gt_float_switcher {
      height: 47px !important;
  }

  .gtranslate_wrapper .gt_float_switcher {
      transform: translateY(7px) !important;
  }

  .header {
      min-height: 50px;
      position: sticky;
      top: 0;
      z-index: 1000;
  }
  
  /* Mobile Logo and Menu Button */
  .hideforcomputer {
      padding: 5px 15px;
      position: relative;
  }
  
  .hideforcomputer img {
      max-width: 120px !important;
      height: auto;
  }
  
  .hideforcomputer span {
      margin-right: 15px !important;
      font-size: 14px !important;
      color: white;
  }
  
  .mobile-menu-icon {
      display: inline-block !important;
      font-size: 16px;
      font-weight: bold;
      color: white;
      padding: 5px 0 5px 10px;
      cursor: pointer;
  }
  
  /* Mobile Menu Container */
  .topnav {
      overflow: hidden;
  }
  
  .topnav.responsive {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #4682b4;
      z-index: 1000;
      padding: 10px 0 80px;
      overflow-y: auto;
      display: block !important;
  }
  
  .hidefortabletandcomputer {
      display: none;
      flex-wrap: wrap;
      align-items: center;
      padding: 10px 15px;
  }
  
  .topnav.responsive .hidefortabletandcomputer {
      display: block !important;
  }
  
  /* Menu Items */
  .topnav.responsive a {
      display: block;
      padding: 5px 15px !important;
      margin: 1px 0 !important;
      line-height: 1.4;
      color: white;
      text-decoration: none;
  }
  
  .topnav.responsive a:hover {
      background-color: rgba(255,255,255,0.1);
  }
  
  .topnav.responsive a[style*="font-weight:bold"] {
      padding-top: 10px !important;
      padding-bottom: 5px !important;
      margin-top: 5px !important;
  }
  
  /* Close Button */
  .menu-close-btn {
      position: fixed;
      top: 12px;
      right: 12px;
      font-size: 16px;
      font-weight: bold;
      color: white;
      background: rgba(0,0,0,0.3) !important;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1001;
      border: none !important;
      cursor: pointer;
  }
  
  .menu-close-btn:hover {
      background: rgba(0,0,0,0.4) !important;
      transform: scale(1.05);
  }
  
  .topnav:not(.responsive) .menu-close-btn {
      display: none;
  }
  
  /* Hidden Elements */
  .hidefortabletandcomputer > a.icon,
  .hidefortabletandcomputer > a:first-child {
      display: none !important;
  }
  
  /* Desktop Table Styles */
  .header .hideformobileandtablet table {
      width: 100%;
  }
  
  .header .hideformobileandtablet td:first-child {
      width: 60%;
  }
  
  .header .hideformobileandtablet img[alt="Phuket Day Tours, Excursions and Day Trips to islands, adventures and entertainment"] {
      max-width: 150px;
      height: auto;
  }
  
  /* Mobile Menu Icon States */
  .topnav.responsive .mobile-menu-icon {
      visibility: hidden;
      position: fixed;
      top: 5px;
      right: 5px;
      padding: 8px !important;
      font-size: 20px;
      background: rgba(0,0,0,0.2) !important;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border: none !important;
      display: none;
  }
  
  .topnav.responsive .mobile-menu-icon:after {
      content: "" !important;
  }
  
  /* Mobile Close Button Alternative */
  .mobile-close-btn {
      display: none !important;
  }

  /* Form Row Fixes - Add spacing only under specific rows */
  .form-row {
      flex-wrap: wrap;
  }

  /* Add extra spacing only under Tour Date, Adults, and Children rows */
  .booking-form .form-row:nth-child(1),
  .booking-form .form-row:nth-child(2), 
  .booking-form .form-row:nth-child(3) {
      margin-bottom: 20px !important;
  }

  .form-col {
      flex: 1 1 100%;
      width: 100%;
  }

  /* Specific spacing for form elements */
  .tour-date-selects {
      margin-top: 10px !important;
  }

  /* SIMPLIFIED RIGHT ALIGNMENT - Calendar Icon */
  /* Target any row that contains tour date elements */
  .form-row:first-child,
  .form-row:nth-child(1) {
      display: flex !important;
      flex-wrap: wrap !important;
  }

  .form-row:first-child .form-col,
  .form-row:nth-child(1) .form-col {
      display: flex !important;
      justify-content: space-between !important;
      align-items: flex-start !important;
      width: 100% !important;
  }

  /* Force any icon, calendar, or last element in first row to right */
  .form-row:first-child i,
  .form-row:first-child .fa,
  .form-row:first-child [class*="icon"],
  .form-row:first-child [class*="calendar"],
  .form-row:nth-child(1) i,
  .form-row:nth-child(1) .fa,
  .form-row:nth-child(1) [class*="icon"],
  .form-row:nth-child(1) [class*="calendar"] {
      margin-left: auto !important;
      align-self: flex-start !important;
  }

  /* Alternative: target the tour date header if it exists */
  .tour-date-header {
      width: 100%;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center;
      margin-bottom: 5px;
  }

  .tour-date-header > *:last-child {
      margin-left: auto !important;
  }

  /* Date Selects - Keep them in one row */
  .tour-date-selects {
      display: flex !important;
      flex-direction: row !important;
      gap: 8px;
      width: 100%;
  }

  .tour-date-selects select {
      /*flex: 1;*/
      margin-top: -5px !important; /* Reduced from 10px */
  }

  /* SIMPLIFIED RIGHT ALIGNMENT - Adults and Children Prices */
  /* Target ALL form rows and make them flex containers */
  .form-row {
      display: flex !important;
      flex-wrap: wrap !important;
  }

  .form-row .form-col {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      width: 100% !important;
  }

  /* Target rows 2 and 3 specifically for Adults/Children */
  .form-row:nth-child(2),
  .form-row:nth-child(3) {
      display: flex !important;
  }

  .form-row:nth-child(2) .form-col,
  .form-row:nth-child(3) .form-col {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
  }

  /* Force last child in these rows to the right */
  .form-row:nth-child(2) .form-col > *:last-child,
  .form-row:nth-child(3) .form-col > *:last-child {
      margin-left: auto !important;
  }

  /* Alternative targeting - look for price-related elements */
  .form-row span,
  .form-row div:last-child {
      margin-left: auto !important;
  }

  /* More specific - target elements that look like prices */
  .form-row span[style*="color"],
  .form-row span[style*="font-weight"],
  .form-row div[style*="min-width"] {
      margin-left: auto !important;
      text-align: right !important;
  }

  /* Exclude labels from being pushed right */
  .form-row label,
  .form-row span:first-child,
  .form-row div:first-child {
      margin-left: 0 !important;
      margin-right: auto !important;
  }

  /* Force Adults, Children, Infants labels to stay left */
  .form-row:nth-child(2) .form-col > *:first-child,
  .form-row:nth-child(3) .form-col > *:first-child,
  .form-row:nth-child(4) .form-col > *:first-child {
      margin-left: 0 !important;
      margin-right: auto !important;
      text-align: left !important;
      align-self: flex-start !important;
  }

  /* Target text content that contains Adults, Children, Infants */
  .form-row span:contains("Adults"),
  .form-row span:contains("Children"), 
  .form-row span:contains("Infants"),
  .form-row div:contains("Adults"),
  .form-row div:contains("Children"),
  .form-row div:contains("Infants") {
      margin-left: 0 !important;
      margin-right: auto !important;
      text-align: left !important;
  }

  /* More specific - any element that's not a price should stay left */
  .form-row *:not(span[style*="color"]):not(span[style*="font-weight"]):not(div[style*="min-width"]):first-child {
      margin-left: 0 !important;
      margin-right: auto !important;
      text-align: left !important;
  }

  /* Tour Name Display */
  .tour-name-display {
      margin: 0 auto 10px auto;
  }

  /* Add to Cart Button */
  .add-to-cart-btn {
      width: 100%;
      max-width: 280px;
  }
  
  /* Total Row Spacing */
  .total-row-spacing {
      margin-top: -10px;
  }

  /* Related Tours Grid */
  .related-tours-grid {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 15px;
      margin-bottom: 10px !important;
  }

  /* Reduce space after last related tour card */
  .related-tours-grid > *:last-child {
      margin-bottom: -10px !important;
  }

  /* Transfer Grid */
  .transfer-grid {
      grid-template-columns: 1fr;
  }
  
  .hero {
      height: 60vh;
  }

  .hero h1 {
      margin-top: -5px;
      margin-bottom: -35px;
  }

  .hero p {
      margin-bottom: 35px;
  }

  .trust-badges {
      gap: 0rem;
  }

  .cta-button {
      margin-top: 30px;
  }

  .stat-number {
      font-size: 18px;
  }

  .tours-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
      padding: 0 1rem;
  }
            
  .container {
      padding: 0 1rem;
  }
            
  .trust-badges {
      flex-direction: column;
      gap: 1rem;
  }
            
  .tour-card {
      margin: 0;
      max-width: 100%;
  }
            
  .tour-content {
      padding: 1.5rem;
  }
            
  .tour-features {
      gap: 0.5rem;
  }

  .tour-price {
    font-size: 1.5rem;
  }

  .tour-price-old {
    font-size: 1.25rem;
    margin-left: 10px;
  }
            
  .feature {
      font-size: 0.8rem;
      padding: 0.25rem 0.6rem;
  }
  
  .featured-tour-title {
      margin-bottom: 0.7rem;
  }

  .featured-tour-description {
      margin: 0;
      padding: 0;
      line-height: 1.5;
      font-size: 13px;
      margin-bottom: 0.7rem;
  }
}

@media (max-width: 480px) {
  .hero h1 {
      font-size: 2rem;
  }
            
  .hero p {
      font-size: 1.1rem;
  }
            
  .tours-grid {
      padding: 0 0.5rem;
  }
            
  .container {
      padding: 0 0.5rem;
  }
            
  .tour-title {
      font-size: 1.2rem;
  }
            
  .tour-description {
      font-size: 0.9rem;
  }
            
  .tour-footer {
      flex-direction: column;
      gap: 1rem;
      align-items: stretch;
  }
            
  .book-btn {
      width: 100%;
      text-align: center;
  }
}

@media screen and (max-width: 768px) {
    .calendar-hide-mobile {
        display: none !important;
    }
  }

  @media screen and (min-width: 769px) {
    .calendar-hide-desktop {
        display: none !important;
    }
  }