.package-container{
    width: 100vw;
    height: max-content;
    background: var(--white);
    display: flex;
    flex-direction: row;
    align-items: justify;
    justify-content: space-evenly;
}
.itinarary{
    width: 60%;
    height: max-content;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.itinarary img{
    width: 100%;
    height: 40rem;
    border-radius: 1rem;
}
.itinarary h1{
    color: var(--secondary-color);
    font-size: 2.5rem;
    text-align: center;
}
.itinarary h2{
    color: var(--heading-color);
    font-size: 2rem;
    text-align: left;
    border-bottom: 2px solid var(--heading-color);
    padding-bottom: 0.5rem;
}
.daywise{
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.daywise {
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.daywise  h3{
    color: var(--secondary-color);
    font-size: 1.9rem;
}
.daywise p{
    color: var(--pera-color);
    font-size: 1.5rem;
    text-align: justify;
}
.incex{
   width: 100%;
    height: max-content;
    background: var(--white);
    display: flex;
    flex-direction: row;
    align-items: justify;
    justify-content: space-evenly;
}
.include {
    width: 40%;
    height: max-content;
    padding: 1rem;
    border: 2px solid var(--secondary-color);
    border-radius: 1rem;
}
.exclude{
    width: 40%;
    height: max-content;
    padding: 1rem;
    border: 2px solid var(--secondary-color);
    border-radius: 1rem;
}

@media only screen and (max-width:500px) {
    html {
        font-size: 48%;
    }
    .package-container{ width: 100vw;
    height: max-content;
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;}

    
    .itinarary{
         width: 100vw;
    height: max-content;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    }}
    }