*{
    font-family:sans-serif;
    text-decoration: none;
    font-size: 1.1rem;
    transition: 0.3s ease;
}
body{
    background-image: url("images/travel.jpeg");
    height: 98vh;
    width: 98vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: white;
}
.logo{
    background: linear-gradient(to right,#046b9e,#d33390);
    background-clip: text;
    color: transparent;
    display: inline-flex;
    cursor: pointer;
    font-size: 2.5rem;
    margin: 0;
}
.header a:hover{
    color: purple;
}
.header {
  position: fixed;
  
  /* --- New properties for the margin effect --- */
  top: 1rem; /* Margin from the top */
  left: 1rem; /* Margin from the left */
  width: calc(100% - 2rem); /* Adjusts width to create the right margin */
  border-radius: 15px; /* Optional: adds nice rounded corners */

  /* --- Existing properties --- */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 3%; /* Padding inside the navbar */
  z-index: 100;
  transition: 0.3s ease;
  box-sizing: border-box; 
}
/* Style for the container holding the links */
.navbar {
  display: flex;
}

/* Style for each link within the new navbar container */
.navbar a {
  color: black;
  font-size: 1.1rem;
  text-decoration: none;
  margin-left: 2rem; /* Adds space between the links */
  transition: 0.3s ease;
}

.navbar a:hover {
  color: purple;
}
.active{
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 8px );
    -webkit-backdrop-filter: blur( 8px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 ); 
    padding: 0.8rem;
    z-index: 10;
}
.element{
    display: flex;
    padding-top:40vh;
    align-items: center;
    justify-content: center;
    text-align: center;
}
h2{
    font-size: 2rem;
}
.adv{
    background: linear-gradient(to right,#046b9e,#d33390);
    background-clip: text;
    color: transparent;
    display: inline;
    cursor: pointer;
    font-size: 2.5rem;
}
.p1{
    color: black;
    font-weight: 500;
    text-align: center;
    margin: 0;
    padding: 0;
}
.typing-text:before{
    content:"Indian";
    animation: words 4s infinite;
}
.typing-text:after{
    content: "";
}
@keyframes words{
    50%{
        content: "International";
    }
}
.start{
    border: 2px solid purple;
    border-radius: 30px;
    text-decoration: none;
    color: black;
    margin-left: 45vw;
    padding: 1rem;
    background: transparent;
    font-size: 1.2rem;
    transition: 0.5s ease;
    color: purple;
}
.start:hover{
    background-color: purple;
    color: white;
    cursor: pointer;

}
.empty{
    background-size: cover;
    background-position: center;
}
.second h1{
    text-align: center;
    font-size: 2.5rem;
    padding-top: 7rem;
}
.first{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.second{
    width: 100%;
    padding: 1.5rem 0;
    padding-bottom: 7rem; /* Add space on top and bottom */
}
.third{
    width: 100%;
    background-color: rgb(228, 228, 228);
    padding: 1.5rem 0; /* Add space on top and bottom */
}
.fourth{
    padding: 1.5rem 0;
    padding-bottom: 1.5rem;
    width: 100%;
    background-image: url("images/tour.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: white;
    margin: 0;
    padding: 0;
}
.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;

}
.container img{
    border-radius: 50%;
    height: 200px;
    width: 200px;
    align-items: center;
    box-shadow: 0 0 25px black;
}
.title{
    background: linear-gradient(to right,#046b9e,#d33390);
    background-clip: text;
    color: transparent;
    display: inline;
    cursor: pointer;
    font-size: 2rem;
    text-align: center;

}
.item{
    margin-top: 2rem;
    align-items: center;
    text-align: center;

}
.item p{
    padding: 1rem;
}
.item a{
    border: 2px solid purple;
    border-radius: 30px;
    text-decoration: none;
    color: black;
    padding: 1rem;
    background: transparent;
    font-size: 1rem;
    transition: 0.3s ease;
    color: purple;
}
.item a:hover{
    background-color: purple;
    color: white;
    cursor: pointer;
}
.third h1{
    text-align: center;
    font-size: 2rem;
    padding-top: 130px;
}
.package-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2rem;
    justify-content: space-evenly;
    justify-items: center;
    align-content: space-evenly;
    align-items: center;
}
.packages{
    background-color: white;
    border: 2.5px solid purple;
    height: 700px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    border-radius: 10px;
}
.package-container img{
    margin-top: 1rem;
    height: 200px;
    width: 350px;
    border-radius: 10px;
}
.package-container h1{
    padding: 0;
    margin: 0;
    margin-top: 10px;
    font-size: 1.3rem;
}
.package-container p{
    padding: 1rem;
    margin: 1rem;
    padding-top: 0;
    padding-bottom: 0;
}
.packages:hover{
    background-color: purple;
    cursor: pointer;
    color: white;
}
.packages h2{
    margin: 0;
    padding-bottom: 0;
    font-size: 1.5rem;
    font-weight: normal;
    color: rgb(233, 6, 233);
}
.packages span{
    margin: 0;
    padding: 0;
}
.packages button{
    padding: 1rem;
    margin: 1rem;
    border: 2px solid purple;
    color: purple;
    border-radius: 40px;
    background:transparent;
}
.packages:hover button{
    border: 2px solid white;
    color: white;
}
.packages button:hover{
    background-color: white;
    color: purple;
}
.contact-glass{
    height: 45%;
    width: 30%;
    top: 50%;
    left: 50%;
    transform: translate(110%,38%);
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 ); 
    padding: 0.8rem;
}
.cont{
    background: linear-gradient(to right,#046b9e,#d33390);
    background-clip: text;
    color: transparent;
    display: inline;
    cursor: pointer;
    font-size: 2rem;
    margin-left: 10vw;
    padding: 1rem;
}
.fourth h3{
    color: rgb(83, 5, 83);
    text-align: center;
    margin-top: 20rem;
}
.logo1{
    background: linear-gradient(to right,#046b9e,#d33390);
    background-clip: text;
    color: transparent;
    display: inline;
    cursor: pointer;
    font-size: 1.1rem;
}
ul{
    list-style-type: none;
    text-align: justify;
    margin-left: 8vw;
}
ul li{
    padding: 0.8rem;
    
}
.social-icons a{
    color: purple;
}
.social-icons a:hover{
    color: #d33390;
}
.wrapper1 {
    height: 30%;
    width: 30%;
    top: 50%;
    left: 50%;
    transform: translate(110%,38%);
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 ); 
    padding: 0.8rem;
  }
  
  .wrapper1 .title1 h1 {
    margin-top: 5rem;
    background: linear-gradient(to right,#046b9e,#d33390);
    background-clip: text;
    color: transparent;
    display: inline;
    cursor: pointer;
    font-size: 3rem;
    text-align: center;
    margin-bottom: 25px;

  }
  
  .contact-form {
    display: flex;
  }
  
  .uil {
    height: 50px;
    width: 50px;
  }
  
  .input-fields {
    display: flex;
    flex-direction: column;
    margin-right: 4%;
  }
  
  .input-fields,
  .msg {
    width: 60%;
  }
  
  .input-fields .input,
  .msg textarea {
    margin: 10px 0;
    background: transparent;
    border: 0px;
    border-bottom: 2px solid #635f668f;
    padding: 10px;
    color: black;
    width: 70%;
  }
  
  .msg textarea {
    height: 189px;
  }
  .msg .btn1 {
    margin-top: 1rem;
    display: inline-block;
    color: purple;
    cursor: pointer;
    font-size: 1.7rem;
    padding: 1rem 3rem;
    background: none;
  }
  .btn1 {
    padding: 1rem;
    margin: 1rem;
    border: 2px solid purple;
    color: purple;
    border-radius: 40px;
    background:transparent;
  }
  .btn1:hover{
    background-color: purple;
    color: white;
    cursor: pointer;

}
  
  i {
    color: purple;
  }

  form {
    width: 90vw;
    margin: 0 2rem;
    padding-bottom: 2rem;
    border-bottom: 0.2rem solid white;
    display: flex;
    align-items: center;
  }
  form input {
    width: 100%;
    font-size: 1rem;
    color: white;
    text-transform: none;
    background: none;
    padding-right: 2rem;
  }
  
  form input::placeholder {
    color: #aaa;
  }
  
  form label {
    font-size: 1rem;
    cursor: pointer;
    color: white;
  }
  form label:hover {
    color: purple;
  }
  .msg{
    margin-left: 12rem;
    transform: translateY(-14rem);
  }
/*cart css*/
#cart-items-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 5px;
  border-bottom: 1px solid #eee;
}
/* --- Final Modal & Form Styles --- */

.modal-overlay {
  /* Keeps the flexbox centering */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Hides the modal by default */
  visibility: hidden;
  opacity: 0;
  
  /* Other styles remain the same */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Adds a nice fade effect */
}
.modal-overlay.visible {
  visibility: visible;
  opacity: 1;
}
.modal-content {
  background-color: #fefefe;
  padding: 25px 30px; /* Adjusted padding */
  border: 1px solid #888;
  border-radius: 10px;
  width: 90%; /* Responsive width */
  position: relative;
  color: #333;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  margin: 100px auto; /* Centered vertically */
}

.modal-content h2 {
  color: purple;
  margin-top: 0;
}

.modal-content h3 {
  font-size: 1.1rem;
  color: #333;
  margin-top: 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.modal-content form {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
}

.modal-content input[type="text"],
.modal-content input[type="email"] {
  width: 70%;
  padding: 12px; /* Reduced padding */
  margin: 5px 0 10px 0; /* Adjusted margin */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px; /* Set a consistent font size */
  box-sizing: border-box; /* Crucial for correct sizing */
  color: #333;
}

/* --- THE KEY FIX for Placeholders --- */
.modal-content input::placeholder {
  font-size: 15px; /* Slightly smaller font for placeholder */
  color: #999;
}

.close-btn {
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
  color: black;
}

.modal-content .btn1 {
    display: block;
    width: 70%;
    margin-top: 20px;
    padding: 12px;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    background-color: purple;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.modal-content .btn1:hover {
    background-color: #6a006a;
}
#order-history-list table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
#order-history-list th, #order-history-list td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
#order-history-list th {
  background-color: #f2f2f2;
}
/* --- Responsive Styles for Mobile and Tablet --- */
@media (max-width: 768px) {
    /* --- Responsive Order History Table --- */
    #order-history-list table thead {
      display: none; /* Hide the table headers on mobile */
    }

    #order-history-list table tr {
      display: block; /* Make each row its own block */
      border: 1px solid #ddd;
      margin-bottom: 1rem;
    }

    #order-history-list table td {
      display: block; /* Stack table cells vertically */
      text-align: right; /* Align text to the right */
      padding-left: 50%; /* Make space for the label */
      position: relative;
      border-bottom: 1px solid #eee;
    }

    #order-history-list table td::before {
      content: attr(data-label); /* Use the data-label as the text */
      position: absolute;
      left: 10px;
      font-weight: bold;
      text-align: left;
    }
    /* --- Responsive Button Sizes --- */
  .start {
    font-size: 1rem;    /* Make font smaller */
    padding: 0.8rem;    /* Reduce padding */
  }

  .contact-form .btn1 {
    font-size: 1.1rem;  /* Make font smaller */
    padding: 0.8rem 1.5rem; /* Reduce padding */
    width: 100%;      /* Make it full-width inside its container */
  }
    /* --- Header & Navbar --- */
    .header {
        flex-direction: column; /* Stack logo and nav links vertically */
        align-items: center;
        padding: 1rem;
    }

    .navbar {
        flex-direction: column; /* Stack nav links vertically */
        align-items: center;
        margin-top: 1rem;
    }

    .navbar a {
        margin: 0.5rem 0; /* Add vertical spacing for nav links */
    }

    /* --- Hero Section --- */
    .element {
        padding-top: 25vh; /* Adjust spacing for smaller screens */
    }

    .start {
        margin-left: 0; /* Remove the large left margin on the button */
        display: block;
        width: 80%;
        margin: 2rem auto 0;
        text-align: center;
    }

    /* --- Activities Section --- */
    .container {
        grid-template-columns: 1fr; /* Change 3-column grid to a 1-column stack */
        gap: 2rem;
    }

    /* --- Packages Section --- */
    .package-container {
        grid-template-columns: 1fr; /* Change 3-column grid to a 1-column stack */
        padding: 0 1rem;
    }
    
    .packages {
        height: auto; /* Allow height to adjust to content */
        padding-bottom: 1rem;
    }
    
    /* --- Contact Form Section --- */
    .wrapper1 {
        width: 90%;
        transform: none; /* Reset the transform */
        margin: 5rem auto 0;
        left: 0;
        top: 0;
    }
    
    .input-fields, .msg {
        width: 100%;
    }
    
    .msg {
        margin-left: 0;
        transform: none;
    }
    
    .cont {
        margin-left: 0;
        text-align: center;
        display: block;
    }
}
/* --- Hamburger Menu & Mobile Navigation --- */

#hamburger-btn {
    display: none; /* Hidden on desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

#hamburger-btn span {
    width: 2rem;
    height: 0.25rem;
    background: #333;
    border-radius: 10px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
}

/* --- Responsive Styles for Mobile and Tablet --- */
@media (max-width: 768px) {
    .header {
        justify-content: space-between; /* Space between logo and hamburger */
        align-items: center;
    }
    
    #hamburger-btn {
        display: flex; /* Show the button on mobile */
    }

    .navbar {
        display: none; /* Hide the navbar by default on mobile */
        position: absolute;
        top: 100%; /* Position it below the header */
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.9);
        flex-direction: column;
        align-items: center;
        padding: 1rem 0;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }
    
    .navbar.active {
        display: flex; /* Show the navbar when it has the 'active' class */
    }

    .navbar a {
        margin: 1rem 0;
    }
}