.tourContent{
    width: 60vw;
    padding: 0 clamp(60px, 10vw, 200px);
    margin: 100px 0 150px 0;
}

.tourContent h1{
    font-size: clamp(24px, 5vw, 32px);
    font-weight: bold;
    color: #344C38;
    margin-bottom: 2rem;

}

.tourContent img{
    width: 100%;
    height: 50vh;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.itinerary{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dropdownWrapper{
    padding: 3rem 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.dropdownWrapper .header h2{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid grey;
    font-style: italic;
    color: #344C38;
    font-weight: 500;
    font-size: clamp(16px, 2vw, 18px);
    padding: 0.5rem 0;
    transition: 0.3s all ease-in-out;
}
.dropdownWrapper .header h2:hover{
    
    color: #33683c;
    border-bottom: 1px solid #33683c;
    
}
.entry{
    padding: 0 2rem;
}
.itineraryBody{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.entry .day h2{
    font-size: clamp(14px, 2vw, 16px);
    color: black;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid black;
}
.description p{
    margin-bottom: 1.8rem;
}
.description{
    padding-top: 1rem;
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.highlights p, .information p{
    padding-top: 1rem;
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.itineraryBody{
    height: 0;
    overflow: hidden;
}


@media (max-width: 480px) {
  /* styles for small phones */
  .tourContent{
    padding: 20px;
  }
}


/* ===========================
   📲 Mobile Devices (Landscape) 
   481px – 767px width
   =========================== */
@media (min-width: 481px) and (max-width: 767px) {
  /* styles for large phones / small devices */
 
}


/* ===========================
   💻 Tablets (Portrait & Landscape)
   768px – 1024px width
   =========================== */
@media  (max-width: 1025px) {
  .tourContent{
    width: 100vw !important;
    margin: 50px 0 100px 0;
  }
}