*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    /* user-select: none; */
    font-family: Calibri, Candara, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body{
    background-color: #f3f4f6;

}
/* body::-webkit-scrollbar{
    display: none;
}  */

.header{
    width: 100%;
    height: 4vw;
    padding: .1vw;
    position: fixed;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #001f3f;
    filter: drop-shadow(0vw .1vw .1vw #777);
}

.brandName{
    width: auto;
    height: 3vw;
    margin-left: 5vw;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* border: 1px solid greenyellow; */
}

.brandName img{
    width: 2.5vw;
    height: 2.5vw;
    display: flex;
    margin-right: 1vw;
    cursor: pointer;
    /* border: 1px solid rgb(74, 34, 255); */
}

.brandName div{
    height: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid white; */
}
div .brandNameImg{
    width: auto;
    height: 2.5vw;
    display: flex;
    align-items: center;
    justify-content: center;

    /* font-size: 3vw;
    font-weight: 500;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    font-family: candara,segoe UI, Calibri, arial, sans-serif; */
}


/* form{
    width: 45vw;
    height: 3vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: .5vw .5vw;
    background-color: white;
}

input:focus::placeholder {
    color: transparent;
    
}

#searchBox{
    width: 80%;
    height: 3vw;
    outline: none;
    display: flex;
    align-items: center;
    border-style: none;
    border-radius: .5vw 0vw 0vw .5vw;
    padding-left: 2vw;
    padding-right: 2vw;
    font-size: 1.5vw;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-family: 'candara';
    background-color: white;
}

#searchBtn{
    width: 20%;
    height: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2vw;
    font-family: candara;
    font-weight: 550;
    border-style: none;
    border-radius: 0vw .5vw .5vw 0vw;
    background-color: #00ff;
}

#searchBtn a{
    font-size: 2vw;
    text-decoration: none;
    color: white;
} */


.headerNav{ 
    width: 50%;
    height: 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid greenyellow; */

}

.navElements{
    width: 100%;
    height: 3.5vw;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    /* border: 1px solid white; */
}

.navElement{
    width: auto;
    height: 3.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border: 1px solid greenyellow; */
}


.navElement a{
    color: #E5E7EB;
    padding: .5vw 1vw;
    display: flex;
    text-decoration: none;
    font-size: 1.5vw;
    font-weight: 500;
    font-family: Calibri, candara,segoe UI, Calibri, arial, sans-serif;
    /* border: .2vw solid #000; */
    /* border: 1px solid blue; */
}

.navElement > a:hover{
    color: #fff;
    /* border-bottom: .2vw solid #9CA3AF; */
    border-bottom: .2vw solid #FF8A00;

}


.userLog{
    width: auto;
    margin-right: 5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* border: 1px solid red; */
}

.userLog a{
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    /* border: 1px solid blue; */
}

.logBtn{
    width: auto;
    /* height: 2.5vw; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 1.2vw;
    font-family: Calibri, candara, segoe UI, Calibri, arial, sans-serif;
    font-weight: 600;
    padding: .2vw;
    cursor: pointer;
    border-style: none;
    border-radius: 5vw;
    background-color: #F3F4F6;
    /* border: .5px solid yellow; */
}

.logBtn img{
    width: 2vw;
    height: 2vw;
    margin-right: .4vw;
    /* border: 1px solid red; */
}
.logBtn > div{
    margin-right: .5vw;
    display: flex;
    align-items: center;
    /* border: 1px solid blue; */
}

section{
    width: 100%;
    height: auto;
    padding: 1vw 6vw 10vw 6vw;
    position: relative;
    top: 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* border: 2px solid black; */
}
.carouselSection{
    width: 95vw;
    height: auto;
    margin-bottom: 1vw;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    /* border: 2px solid black; */
}

.carousalImage{
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 57vw;
    height: 38vw;
    border-radius: .5vw;
    cursor: pointer;
}


.carousalImage img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: .5vw;
}

.overlay{
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(3, 22, 45, 0.90) 1%,
        rgba(3, 22, 45, 0.75) 10%,
        rgba(3, 22, 45, 0.45) 30%,
        rgba(3, 22, 45, 0.25) 50%,
        transparent 100%
    );
}

.overlayContent{
    position: absolute;
    bottom: 2vw;
    left: 2vw;
    color: white;
    z-index: 2;
}
.overlayContent h2{
    margin: 0%;
    font-size: 4vw;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: Candara, Calibri;
}
.OverlayLocation{
    width: auto;
    display: flex;
    margin-top: .5vw;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    /* border: 1px solid goldenrod; */
}
.OverlayLocation > img{
    width: 1.2vw;
    margin-right: .3vw;
    display: flex;
    align-self: center;

    /* border: 1px solid white; */
}
.OverlayLocationName{
    width: auto;
    padding-right: 1vw;
    margin-right: 1vw;
    color: #D1D5DB;
    color: #FF8A00;
    font-size: 1vw;
    font-family: Calibri;
    display: flex;
    align-items: center;
    border-right: 1px solid #aeaeae;

    /* border: 1px solid blue; */
}
.carousalImageRating{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.carousalImageRatingIcon{
    display: flex;
    align-self: center;
    justify-content: flex-start;
}
.carousalImageRatingIcon > img:last-child{
    margin-right: .8vw;
}

.carousalImageRatingIcon > img{
    width: 1.2vw;
    /* margin-right: .4vw; */
}
.carousalImageRatingValue{
    width: auto;
    margin-right: 1vw;
    color: #FF8A00;
    font-size: 1vw;
    font-family: Calibri, Candara;
}




/* Start of About and Facts Section. */
.aboutAndFacts{
    width: 36vw;
    height: 38vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    /* border: 1px solid green; */
}

.about{
    width: 100%;
    height: 18vw;
    padding: 1vw;
    display: flex;
    flex-direction: column;
    background-color: #FFF;
    /* border: .1vw solid #e7e7e7; */
    border-radius: .4vw;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.20);
}

.overview{
    width: 100%;
    height: auto;
    margin-left: .5vw;
    margin-bottom: .5vw;
    /* padding-bottom: .5vw; */
    display: flex;
    align-items: center;
    justify-content: left;
    font-family: Candara, Calibri;
    font-size: 1.6vw;
    font-weight: 600;
    color: #111827;
    /* border: .1vw solid #242323; */
}
.overviewIcon{
    width: 3vw;
    height: 3vw;
    padding: .5vw;
    margin-right: 1vw;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #001F3F;
    background-color: #D1D5DB;
}
.overviewIcon img{
    width: 2.3vw;
}

.overviewHeader{
    color: #111827;
    font-size: 2vw;
    font-family: Calibri, Candara;
    font-weight: 600;

    /* border: 1px solid red; */
}


.overviewDescription{
    width: 100%;
    height: auto;
    padding: 0 1vw;
    margin-top: .5vw;
    color: #6b7280;
    font-size: 1.2vw;
    font-family: Calibri;
    line-height: 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* overflow-y: scroll; */
    scrollbar-width: thin;

    /* border: 1px solid black; */
}

.didYouKnowSection{
    width: 100%;
    height: 18vw;
    padding: 1vw;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: .4vw;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.20);
}

.factsHeader{
    width: 100%;
    /* padding-bottom: .4vw; */
    margin-left: .5vw;
    margin-bottom: .5vw;
    display: flex;
    align-items: center;
    justify-content: left;
    color: #111827;
    /* margin-bottom: .2vw; */
    font-family: Calibri;
    font-family: Candara, Calibri, cursive;
    font-size: 2vw;
    font-weight: 600;
    /* border-bottom: .1vw solid #eaeaea; */

    /* border: 1px solid green; */
}

.factHeaderIcon{
    width: 3vw;
    height: 3vw;
    padding: .5vw;
    margin-right: 1vw;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #001F3F;

    /* border: 1px solid red; */
}
.factHeaderIcon img{
    width: 2.5vw;
}

.factHeaderTitle{
    display: flex;
    align-items: center;
    justify-content: center;

    /* border: 1px solid red; */
}

.factItems{
    width: 100%;
    height: auto;
    padding: 0 .6vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* overflow-y: scroll;
    scrollbar-width: thin; */

    /* border: 1px solid blue; */
}


.facts{
    width: 100%;
    height: auto;
    padding: .5vw;
    /* margin-bottom: .4vw; */
    /* border-bottom: .1vw solid #eaeaea; */
    /* border-radius: .5vw; */
    /* background-color: #ececec; */
}
.facts:last-child{
    border-bottom: none;
    margin-bottom: 0vw;
}
.factDescription{
    display: flex;
    flex-direction: row;
    font-family: Calibri;
    /* font-family: cursive; */
    font-size: 1.2vw;
    font-weight: 500;
    color: #6b7280;

}
.factDescription > div{
    margin-right: .5vw;
    color: #FF8A00;
}

.destinationDNA{
    width: 95vw;
    height: auto;
    margin-bottom: 1vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: #FFF;
    border-radius: .4vw;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.20);

    /* border: 1px solid orange; */
}

.destinationDNAtitle{
    width: 100%;
    padding: .5vw 1vw;
    padding-bottom: 0.5vw;
    margin-bottom: 2vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    /* border: 1px solid red; */
}

.DestinationDNAtitleContainer{
    width: 90%;
    margin: 0 1vw;
    display: flex;
    padding-bottom: 2vw;
    flex-direction: column;
    align-items: flex-start;

    /* border: 1px solid purple; */
}

.DestinationDNAHeader{
    width: 100%;
    color: #111827;
    font-size: 2vw;
    font-family: Candara, Calibri;
    font-weight: 600;
}


.DestinationDNASubHeader{
    width: 100%;
    color: #FF8A00;
    font-size: 1.2vw;
    font-family: Candara, Calibri;
    font-weight: 500;
}

.destinationDNAdata{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;

    /* border: 1px solid blue; */
}

.destinationDNAelements{
    width: calc(100%/7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: .5px solid #dddddd;

    /* border: 1px solid green; */
}
.destinationDNAelements:last-child {
    border: none;
}

.destinationDNAelementsIcon{
    width: 4vw;
    height: 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5EBFA;
    border-radius: 50%;
}

.destinationDNAelementsIcon img{
    width: 3vw;

}

.destinationDNAelementsLabel{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2vw;
    font-weight: 600;
    font-family: Candara, calibri, sans-serif;
}

.destinationDNAelementsValue{
    width: 100%;
    padding: 0 .2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1vw;
    font-weight: 500;
    color: #FF8A00;
}

.destinationDNAelementsSubValue{
    width: 100%;
    padding: 0 .2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1vw;
    font-weight: 500;
    color: #6B7280;
}

.destinationCategory{
    width: 94vw;
    height: 3vw;
    padding: .2vw;
    margin-bottom: .5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border-radius: .4vw;
    background-color: #fff;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.20);
    /* border: 1px solid #cecece; */
}

.bestFor{
    width: 50%;
    height: auto;
    padding: 0 .5vw;
    margin: 0 .5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-content: flex-start; */
    /* background-color: #E6FFFA; */
    /* background-color: #FFF; */
    border-right: .5px solid #dddddd;
}
.travelStyle{
    width: 50%;
    height: auto;
    padding: 0 .5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    /* background-color: #E6FFFA; */
    /* background-color: #FFF; */
    /* border: 1px solid blue; */
}
.destinationCategoryheading{
    width: auto;
    margin-right: 1vw;
    color: #FF8A00;
    font-size: 1.2vw;
    font-weight: 600;
    font-family: Calibri, candara;
    /* border: 1px solid green; */
}

.tags{
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    /* border: 1px solid black; */
}
.tags span{
    width: auto;
    padding: .3vw .5vw;
    margin: 0 .5vw;
    font-family: calibri;
    font-size: 1vw;
    font-weight: 600;
    color: #002A55;
    background-color: #E9EEF5;
    background-color: #F5EBFA;
    border-radius: .3vw;
}
/* End of Best for & Style Tag Section */


/* Start of Things To Do Section */

.ThingsToDo{
    width: 95vw;
    height: auto;
    padding: 1vw 1.5vw;
    margin: 2vw 0 1vw 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* background-color: #FFF; */
    border-radius: .3vw;
    /* box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.10); */
    /* background-color: #FFF8F0; */

    /* border: 1px solid black; */
}

.thingsToDoTitle{
    width: 100%;
    /* margin-left: 1vw; */
    margin-bottom: 2vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.thingsToDoTitleIcon img{
    width: 4vw;
    margin-right: 1vw;
    /* border: 1px solid black; */
}
.thingsToDoTitleContainer{
    width: 100%;
    display: flex;
    padding-bottom: .6vw;
    flex-direction: column;
    align-items: center;
    /* border: 1px solid purple; */
}



.thingsToDoHeader{
    width: 100%;
    color: #111827;
    font-size: 2vw;
    font-family: Candara, Calibri;
    font-weight: 600;
}

.thingsToDoSubHeader{
    width: 100%;
    color: #FF8A00;
    font-size: 1.2vw;
    font-family: Candara, Calibri;
    font-weight: 500;
}

/* Start of Things to Do Card Holder Section*/

.thingsToDoCardHolder{
    width: 100%;
    /* border: 1px solid red; */
}
#thingsToDoCards{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    /* border: 1px solid green; */
}
.thingsToDoIndevidualCard{
    width: 24%;
    overflow: hidden;
    display: flex;
    margin-bottom: 2vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: .5vw;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.10);
    background-color: #FFF;

    /* border: 1px solid blue; */
}
.thingsToDoIndevidualCardImg{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
}
.thingsToDoIndevidualCard img{
    width: 100%;
    /* height: 12vw; */
    user-select: none;
    /* max-height: 10vw; */
    /* object-fit: cover; */
    /* border-radius: .4vw .4vw 0 0 ; */
}
.thingsToDoCardDescription{
    width: 100%;
    height: 10vw;
    padding: 1vw;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* border: 1px solid red; */
}
.thingsToDoCardDescriptionIcon{
    width: 3vw;
    height: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5vw;
    margin-right: .8vw;
    border-radius: 50%;
    background-color: #001f3f;
    /* border: 1px solid rgb(255, 0, 0); */
}

/* #thingsToDoCardDescriptionIcon1{
    background-color: #001f3f;
}
#thingsToDoCardDescriptionIcon2{
    background-color: #001f3f;
}
#thingsToDoCardDescriptionIcon3{
    background-color: #001f3f;
}
#thingsToDoCardDescriptionIcon4{
    background-color: #001f3f;
}
#thingsToDoCardDescriptionIcon5{
    background-color: #c2fffa;
}
#thingsToDoCardDescriptionIcon6{
    background-color: #dbe0ff;
}
#thingsToDoCardDescriptionIcon7{
    background-color: #feffa9;
}
#thingsToDoCardDescriptionIcon8{
    background-color: #c2c2c2;
} */


.thingsToDoCardDescriptionIcon img{
    width: 2vw;
    user-select: none;
    /* border: 1px solid red; */
}

.thingsToDoCardDescriptionData{
    width: auto;
    display: flex;
    flex-direction: column;
    /* border: 1px solid blue; */
}
.thingsToDoCardDescriptionHeader{
    margin-bottom: 1vw;
    color: #001F3F;
    font-size: 1.2vw;
    font-family: Calibri, Candara;
    font-weight: 600;

}
.thingsToDoCardDescriptionSubHeader{
    color: #6B7280;
    font-size: 1vw;
    font-family: Calibri, Candara;
}



/* Start of Nearby Places section. */

.nearbyPlaces{
    width: 95vw;
    height: auto;
    padding: 1.5vw;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-radius: .3vw;
    /* box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.10); */
    /* background-color: #F6F9FF; */

    /* border: 1px solid magenta; */
}

.nearbyPlacesTitle{
    width: 100%;
    /* margin-left: 1vw; */
    margin-bottom: 2vw;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;

    /* border: 1px solid blue; */

}

.nearbyPlacesIcon{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* border: 1px solid red; */
}
.nearbyPlacesIcon img{
    width: 4vw;
    height: 4vw;
    margin-right: 1vw;
}

.nearbyPlacesContainer{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    /* border: 1px solid blue; */
}
.nearbyPlacesHeader{
    color: #111827;
    font-size: 2vw;
    font-family: Calibri, Candara;
    font-weight: 600;
/*  */
    /* border: 1px solid rgb(255, 217, 0); */
}
.nearbyPlacesSubHeader{
    color: #FF8A00;
    font-size: 1.2vw;
    font-family: Calibri, Candara;

}



/* Start of Nearby Places Cards section design. */

.nearbyPlacesCards{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;

    /* border: 1px solid blue; */
}

.nearbyPlacesIndevidualCards{
    width: 15.5vw;
    width: 19%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: .5vw;
    overflow: hidden;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.10);
    background-color: #FFF;

    /* border: 1px solid green; */

}

.nearbyPlacesIndevidualCards:hover{
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);

}

.nearbyPlacesIndevidualCards a{
    width: 15.5vw;
    width: 100%;
    overflow-x: hidden;
    text-decoration: none;

    /* border: 1px solid blue; */
}

.nearbyPlacesCardImage{
    width: 15.5vw;
    width: 100%;
    height: 17vw;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
}

.nearbyPlacesCardImage img{
    width: 15.5vw;
    width: 100%;
    height: 100%;
    align-items: center;
    object-fit: cover;

    /* border: 1px solid yellowgreen; */
    
}

.nearbyPlacesCardDescriptionData{
    width: 15.5vw;
    width: 100%;
    height: 10vw;
    padding: 0 1vw;
    display: flex;
    flex-direction: column;

    /* border: 1px solid red; */

}

.nearbyPlacesCardDestinationHeader{
    width: 100%;
    padding: .7vw 0;
    color: #001F3F;
    font-size: 1.2vw;
    font-family: Calibri, Candara;
    font-weight: 600;

    /* border: 1px solid blue; */
}
.nearbyPlacesCardDescriptionSubHeader{
    width: 100%;
    padding: .7vw 0;
    color: #6B7280;
    font-size: 1vw;
    font-family: Calibri, Candara;

    /* border: 1px solid black; */
}

.distAndTimeToReachThatNearbyPlace{
    width: 15.5vw;
    height: auto;
    padding: .5vw .5vw;
    display: flex;
    flex-direction: row;
}
.distToNearbyPlace, .timeToNearbyPlace{
    width: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-right: .5px solid #dddddd;

}
.timeToNearbyPlace{
    border: none;
}

.distToNearbyPlaceIcon, .timeToNearbyPlaceIcon{
    display: flex;
    align-items: center;
    justify-content: center;
}

.distToNearbyPlaceIcon img{
    width: 1.2vw;
    margin-right: .5vw;
}

.timeToNearbyPlaceIcon img{
    width: 1.3vw;
    margin-right: .5vw;
}

.distToNearbyPlaceValue, .timeToNearbyPlaceValue{
    color: #6B7280;
    font-size: 1vw;
    font-family: Calibri, Candara;
    
}

/* End of Nearby Places Cards section design. */



/* Start of Visiting Time and Mode of Transport section. */

/* Start of When to Visit section. */

.visiting{
    width: 95vw;
    height: auto;
    margin: 2vw 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    /* border: 2px solid green; */
}

.visitingTime{
    width: 30vw;
    height: 35vw;
    padding: 1.5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #FFF;
    border-radius: .5vw;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.10);
    /* border: 1px solid blue; */
}
.bestTimeToVisit{
    width: 100%;
    margin-bottom: 2vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    /* border: 1px solid black; */
}
.bestTimeToVisit img{
    width: 3vw;
    /* border: 1px solid blue; */
}
.whenToVisitTitle{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    /* border: 1px solid brown; */
}

.whenToVisitHeader{
    width: 100%;
    padding: 0 1vw;
    color: #111827;
    display: flex;
    font-size: 2vw;
    font-weight: 600;
    font-family: Candara, Calibri;
    /* border: 1px solid black; */
}
.whenToVisitSubHeader{
    width: 100%;
    padding: 0 1vw;
    color: #FF8A00;
    font-family: Candara, Calibri;
    font-size: 1.2vw;
    /* border: 1px solid green; */
}
.visitingInformation{
    width: 100%;
    height: 26vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    /* border: 1px solid gold; */
}

.bestTime, .consider, .avoid{
    width: 100%;
    height: 8vw;
    padding: .5vw 1vw;
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border-radius: .5vw;
    /* border: 1px solid green; */
}

#bestTime{
    background-color: #CBF4AA;
    background-color: #F0FBF4;
}
#consider{
    background-color: #F9FFA7;
    background-color: #FFFF87;
    background-color: #FBFC92;
    background-color: #FFFAEB;
}
#avoid{
    background-color: #ff7f7f;
    background-color: #FEF2F2;
}

.bestTime img{
    width: 10%;
    /* border: 1px solid blue; */
}

.bestTimeDescription{
    width: 90%;
    height: 7vw;
    padding: 0 1vw;
    color: #16A34A;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* border: 1px solid red; */
}
.bestTimeHeader, .considerHeader, .avoidHeader{
    width: 100%;
    font-size: 1.5vw;
    font-family: Calibri, Candara;
    font-weight: 600;
}
.bestTimeSubHeader, .considerSubHeader, .avoidSubHeader{
    width: 100%;
    font-size: 1vw;
    font-family: Calibri, Candara;
}
.bestTimeReason, .considerReason, .avoidReason{
    width: 100%;
    margin-top: .5vw;
    color: #6B7280;
    font-size: 1vw;
}
.bestTimeBadge{
    width: auto;
    padding: .1vw .3vw;
    position: absolute;
    top: .4vw;
    right: .5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #c1f5ba;
    /* background-color: #d5ffcf; */
    border-radius: .4vw;
    /* border: 1px solid rgb(255, 0, 0); */
}
.bestTimeBadgeIcon img{
    width: 1.1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid red; */
}
.bestTimeBadgeIconName{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16A34A;
    font-size: 1vw;
    /* border: 1px solid blue; */
}

.consider img{
    width: 10%;
    /* border: 1px solid blue; */
}
.considerDescription{
    width: 90%;
    height: 7vw;
    padding: 0 1vw;
    color: #F59E0B;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* border: 1px solid red; */
}
.considerBadge{
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: .1vw .3vw;
    position: absolute;
    top: .4vw;
    right: .5vw;
    background-color: #ffe397;
    /* background-color: #ffeebe; */
    border-radius: .4vw;
    /* border: 1px solid rgb(255, 0, 0); */
}
.considerBadgeIcon img{
    width: 1vw;
    padding: 5%;
    margin-right: .2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid red; */
}
.considerBadgeIconName{
    color: #F59E0B;
    font-size: .7vw;
    display: flex;
    align-items: center;
    /* border: 1px solid blue; */
}


.avoid img{
    width: 10%;
    /* border: 1px solid blue; */
}
.avoidDescription{
    width: 90%;
    height: 7vw;
    padding: 0 1vw;
    color: #DC2626;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* border: 1px solid red; */
}
.avoidBadge{
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: .1vw .3vw;
    position: absolute;
    top: .4vw;
    right: .5vw;
    background-color: #f8c1c1;
    background-color: #ffd9d9;
    border-radius: .4vw;
    /* border: 1px solid rgb(255, 0, 0); */
}
.avoidBadgeIcon img{
    width: 1vw;
    margin-right: .2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid red; */
}
.avoidBadgeIconName{
    color: #DC2626;
    font-size: 1vw;
    /* border: 1px solid blue; */
}

/* End of When to Visit section. */


/* Start of Mode of Transport section. */

.transportation{
    width: 63vw;
    height: 35vw;
    padding: 1.5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #FFF;
    border-radius: .5vw;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.10);
    
    /* border: 1px solid red; */
}

.gettingThere{
    width: 100%;
    margin-bottom: 2vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    /* border: 1px solid black; */
}
.gettingThere img{
    width: 3vw;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* border: 1px solid blue; */
}
.gettingThereTitle{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    /* border: 1px solid brown; */
}


.gettingThereHeader{
    width: 100%;
    padding: 0 1vw;
    color: #111827;
    display: flex;
    font-size: 2vw;
    font-weight: 600;
    font-family: Candara, Calibri;
    /* border: 1px solid black; */
}
.gettingThereSubHeader{
    width: 100%;
    padding: 0 1vw;
    color: #FF8A00;
    font-family: Candara, Calibri;
    font-size: 1vw;
    /* border: 1px solid black; */

}
.infoToReachThere{
    width: 100%;
    height: 26vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* border: 1px solid gold; */
}

.cab, .train, .bus, .byAir{
    width: 23%;
    height: 26vw;
    padding: .5vw .2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    /* border: .1vw solid #F2F2F2; */
    border-radius: .5vw;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.08);
    /* border: 1px solid blue; */
}
#cabIcon{
    width: 4vw;
    height: 4vw;
    padding: .5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #EFF6FF;
    border-radius: 20%;
}
.cabIcon img{
    width: 2.5vw;
}

#trainIcon{
    width: 4vw;
    height: 4vw;
    padding: .5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ECFDF5;
    border-radius: 20%;
}
.trainIcon img{
    width: 2.5vw;
}

#busIcon{
    width: 4vw;
    height: 4vw;
    padding: .5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F3FF;
    border-radius: 20%;
}
.busIcon img{
    width: 2.5vw;
}

#airplaneIcon{
    width: 4vw;
    height: 4vw;
    padding: .5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF7ED;
    border-radius: 20%;
}
.airplaneIcon img{
    width: 2.5vw;
}

.iconHeader{
 color: #001F3F;
 font-size: 1.2vw;
 font-weight: 600;
 margin: .5vw 0;
}
.preference{
    width: auto;
    padding: .2vw .8vw;
    margin-bottom: .2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1vw;
    font-family: Calibri, Candara;
    border-radius: 1vw;
    /* border: 1px solid red; */
}
#cabPreference{
    color: #2563EB;
    background-color: #EFFCFF;
}
#trainPreference{
    color: #16A34A;
    background-color: #ECFDF5;
}
#busPreference{
    color: #A155BB;
    background-color: #F5F3FF;
}
#airplanePreference{
    color: #F97316;
    background-color: #FFF7ED;
}


.preferenceReason{
    width: 100%;
    height: 7vw;
    padding: .3vw .4vw;
    display: flex;
    align-items: center;
    /* border: 1px solid black; */
}
.preferenceReason > ul{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* border: 1px solid blue; */
}
.preferenceReason > ul > li{
    color: #6B7280;
    padding: .4vw 0;
    font-size: 1vw;
    font-family: Calibri, Candar;
    list-style: none;
    display: flex;
    flex-direction: row;
}
.preferenceReason > ul > li > div{
    margin-right: .5vw;
}

.travelTime{
    width: 90%;
    height: 5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-top: .5px solid #dddddd;
    border-bottom: .5px solid #dddddd;

    /* border: 1px solid red; */
}

.travelTime img{
    width: 15%; 
    /* border: 1px solid black;*/
}
.timeDescription{
    width: 85%;
    height: 4vw;
    padding: .2vw .4vw;
    padding-left: .8vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* border: 1px solid red; */
}
.timeHeader{
    color: #001F3F;
    font-size: 1vw;
    font-family: Calibri;
}
.timeDuration{
    font-size: 1vw;
}

#timeDurationCab{
    color: #2563Eb;
}

#timeDurationTrain{
    color: #16A34A;
}

#timeDurationBus{
    color: #A155BB;
}

#timeDurationAirplane{
    color: #F97316;
}
.timeCondition{
    color: #475569;
    font-size: 1vw;
    font-family: Calibri, Candra;

}

.distance{
    width: 90%;
    height: 4.5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* border: 1px solid blue; */
}
.distance img{
    width: 16%; 
    /* border: 1px solid black;    */
}
.distanceDescription{
    width: 85%;
    height: 4vw;
    padding: .2vw .4vw;
    padding-left: .8vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* border: 1px solid red; */
}
.distanceHeader{
    color: #001F3F;
    font-size: .5vw;
    font-family: Calibri;
}
.distanceValue{
    font-size: 1vw;
}


#distanceValueCab{
    color: #2563Eb;
}

#distanceValueTrain{
    color: #16A34A;
}

#distanceValueBus{
    color: #A155BB;
}

#distanceValueAirplane{
    color: #F97316;
}
.distanceFrom{
    color: #475569;
    font-size: 1vw;
    font-family: Calibri, Candra;

}
/* End of Visiting Time and Mode of Transport section. */


/* Start of Where to Stay section. */

.whereToStay{
    width: 95vw;
    padding: 1.5vw;
    margin: 2vw 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background-color: #FFFFFF; */
    border-radius: .3vw;
    /* box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25); */

    /* border: 1px solid blueviolet; */
}

.whereToStayTitle{
    width: 100%;
    height: auto;
    margin-bottom: 1vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    /* border: 1px solid grey; */
}

.whereToStayIcon{
    width: 4vw;
    height: 4vw;
    margin-right: 1vw;
    margin-left: .4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #c0baf3; */
    border-radius: .4vw;
}
.whereToStayIcon img{
    width: 4vw;
}

.whereToStayContainer{
    /* margin-left: 1vw; */
    margin-bottom: 1.5vw;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    /* border: 1px solid green; */

}
.whereToStayHeader{
    color: #111827;
    font-size: 2vw;
    font-family: Calibri, Candara;
    font-weight: 600;
}
.whereToStaySubHeader{
    color: #FF8A00;
    font-size: 1vw;
    font-family: Calibri, Candara;
}

.whereToStayColumns{
    width: 100%;
    /* padding: 0 .5vw; */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;

    /* border: 1px solid pink; */
}

.whereToStayCardHolder{
    width: 32%;
    padding: 1vw 1vw;
    border-radius: .5vw;
    background-color: #FFFFFF;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.20);

    /* border: 1px solid blue; */
}
.whereToStayCardHolderTitle{
    width: 100%;
    display: flex;
    margin-bottom: 1vw;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    /* border: 1px solid blue; */
}

/* #whereToStayCardHolderForLuxuryHotels{
    background-color: #F2E6FE;
}

#whereToStayCardHolderForMidRangeHotels{
    background-color: #eeffee;
}

#whereToStayCardHolderForBudgetHotels{
    background-color: #f0fdff;
} */

.whereToStayCardHolderIconForLuxuryHotels{
    width: 3.5vw;
    height: 3.5vw;
    margin-right: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9e9ff;
    border-radius: .6vw;

}
.whereToStayCardHolderIconForLuxuryHotels img{
    width: 3vw;
}

.whereToStayCardHolderIconForMidRangeHotels{
    width: 3.5vw;
    height: 3.5vw;
    margin-right: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eeffee;
    border-radius: .6vw;

}
.whereToStayCardHolderIconForMidRangeHotels Img{
    width: 3vw;
}


.whereToStayCardHolderIconForBudgetHotels{
    width: 3.5vw;
    height: 3.5vw;
    margin-right: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0fdff;
    border-radius: .6vw;

}
.whereToStayCardHolderIconForBudgetHotels Img{
    width: 3vw;
}

.WhereToStayCategory{
    width: auto;
    display: flex;
    flex-direction: column;
    /* align-items: center;
    justify-content: flex-start; */
}

#whereToStayCardHolderHeaderForLuxuryHotels{
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #9508cc;
    font-size: 1.5vw;
    font-weight: 600;
}

#whereToStayCardHolderHeaderForMidRangeHotels{
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #09be09;
    font-size: 1.5vw;
    font-weight: 600;
}

#whereToStayCardHolderHeaderForBudgetHotels{
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #0fa4b8;
    font-size: 1.5vw;
    font-weight: 600;
}

.whereToStayCardHolderSubHeader{
    color: #6B7280;
    font-size: 1vw;
    font-weight: 500;
    font-family: Calibri, Candara, sans-sarif;
}

.listOfHotelsNames{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;

    /* border: 1px solid lawngreen; */
}
.HotelsIndividualCards{
    width: 100%;
    height: auto;
    padding: 1vw 0;
    /* margin-bottom: 1vw; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    /* border: 1px solid red; */
}
.HotelsIndividualCardsImage{
    width: 40%;
    height: 6vw;
    margin-right: 1vw;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    border-radius: .5vw;

    /* border: 1px solid blue; */
}
.HotelsIndividualCardsImage img{
    width: 100%;
    height: 7vw;
}
.HotelsIndividualCardsDescription{
    width: 70%;
    height: 6vw;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    /* border: 1px solid brown; */
}
.HotelsIndividualCardsDescriptionHeader{
    width: 100%;
    color: #001F3F;
    font-size: 1.2vw;
    font-family: Calibri, Candara;
    font-weight: 600;
}
.HotelsIndividualCardsDescriptionSubHeader{
    width: 100%;
    color: #6B7280;
    font-size: .9vw;
    font-family: Calibri, Candara;
}
.HotelsIndividualCardsDescriptionPrice{
    width: 100%;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #9508cc;
    font-size: .9vw;
    font-weight: 600;
    font-family: Calibri, Candara;

    /* border: 1px solid purple; */
}
.HotelsIndividualCardsDescriptionPrice span{
    color: #6B7280;
    font-weight: 500;
}

#MidRangeHotelsIndividualCardsDescriptionPrice{
    color: #09be09;
    font-weight: 600;

}
#BudgetHotelsIndividualCardsDescriptionPrice{
    color: #0fa4b8;
    font-weight: 600;

}


.hotelLineBreak{
    width: 60%;
    display: flex;
    align-self: flex-end;
    border-bottom: .5px solid #dddddd;
}


.viewMoreHotels{
    width: 100%;
    padding: .5vw 1vw;
    margin-top: 1vw;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;

    border: .5px solid purple;
    border-radius: .4vw;
}
.viewMoreHotels span{
    margin-left: 1vw;
}

#viewMoreLuxuryHotels{
    font-size: 1.3vw;
    font-weight: 600;
    font-family: Calibri, Candara, sans-serif;
    color: #9508cc;
    background-color: #f9e9ff;
    border: .5px solid #efc1ff;
}
#viewMoreMidRangeHotels{
    font-size: 1.3vw;
    font-weight: 600;
    font-family: Calibri, Candara, sans-serif;
    color: #09be09;
    background-color: #eeffee;
    border: .5px solid #bfffbf;
}
#viewMoreBudgetHotels{
    font-size: 1.3vw;
    font-weight: 600;
    font-family: Calibri, Candara, sans-serif;
    color: #0fa4b8;
    background-color: #f0fdff;
    border: .5px solid #beefff;
}


/* End of Where to Stay section. */


/* Start of Food & Cafes Section. */

.foodAndCafe{
    width: 95vw;
    height: auto;
    padding: 1.5vw;
    margin: 2vw 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-radius: .3vw;
    /* box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.10); */
    /* background-color: #FFF9F2; */

    /* border: 1px solid magenta; */
}

.foodAndCafeTitle{
    width: 100%;
    display: flex;
    /* margin-left: 1vw; */
    margin-bottom: 2vw;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;

    /* border: 1px solid blue; */

}

.foodAndCafeIcon{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.foodAndCafeIcon img{
    width: 4vw;
    height: 4vw;
    margin-right: 1vw;
}

.foodAndCafeContainer{
    width: 100%;
    display: flex;
    padding-top: .2vw;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* border: 1px solid red; */
}
.foodAndCafeHeader{
    color: #111827;
    font-size: 2vw;
    font-family: Calibri, Candara;
    font-weight: 600;
}
.foodAndCafeSubHeader{
    color: #FF8A00;
    font-size: 1vw;
    font-family: Calibri, Candara;

}



/* Start of Nearby Places Cards section design. */

.foodAndCafeCards{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;

    /* border: 1px solid red; */
}

.foodAndCafeIndevidualCards{
    /* width: 15.5vw; */
    width: 19%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: .5vw;
    overflow: hidden;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.10);
    background-color: #FFF;

    /* border: 1px solid green; */

}

.foodAndCafeIndevidualCards:hover{
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);

}

.foodAndCafeIndevidualCards a{
    /* width: 15.5vw; */
    width: 100%;
    overflow-x: hidden;
    text-decoration: none;

    /* border: 1px solid blue; */
}

.foodAndCafeCardImage{
    /* width: 15.5vw; */
    width: 100%;
    height: 17vw;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
}

.foodAndCafeCardImage img{
    /* width: 15.5vw; */
    width: 100%;
    height: 17vw;
    align-items: center;
    object-fit: cover;

    /* border: 1px solid yellowgreen; */
    
}

.foodAndCafeCardDescriptionData{
    /* width: 15.5vw; */
    width: 100%;
    height: 10vw;
    display: flex;
    flex-direction: column;

    /* border: 1px solid red; */

}

.foodAndCafeCardDestinationHeader{
    width: 100%;
    padding: .7vw .7vw;
    color: #001F3F;
    font-size: 1.2vw;
    font-family: Calibri, Candara;
    font-weight: 600;

    /* border: 1px solid blue; */
}
.foodAndCafeCardDescriptionSubHeader{
    width: 100%;
    padding: .7vw .7vw;
    color: #6B7280;
    font-size: 1vw;
    font-family: Calibri, Candara;

    /* border: 1px solid black; */
}

.locationAndRatingOfFoodAndCafe{
    width: 15.5vw;
    height: auto;
    padding: .5vw .5vw;
    display: flex;
    flex-direction: row;
}
.locationOfFoodAndCafe{
    width: 100%;
    padding: .5vw .5vw;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    /* border-right: 1px solid #acacac; */

}

/* .RatingOfFoodAndCafe{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    border-right: 1px solid #acacac;
} */

.RatingOfFoodAndCafe{
    border: none;
}

.locationOfFoodAndCafeIcon, .RatingOfFoodAndCafeIcon{
    display: flex;
    align-items: center;
    justify-content: center;
}

.locationOfFoodAndCafeIcon img{
    width: 1.2vw;
    margin-right: .5vw;
}

.RatingOfFoodAndCafeIcon img{
    width: 1.3vw;
    margin-right: .5vw;
}

.locationNameOfFoodAndCafe, .RatingOfFoodAndCafeValue{
    color: #6B7280;
    font-size: 1vw;
    font-family: Calibri, Candara;
    
}




/* End of Food & Cafes Section. */


/* Start of Travel Tips section styling. */

.traveTips{
    width: 95vw;
    height: auto;
    padding: 1.5vw;
    padding-bottom: 0;
    /* margin-top: 2vw; */
    /* background-color: #FFF; */
    /* border-radius: .4vw; */
    /* box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.10); */
    /* background-color: #FFFDEA; */
    
    /* border: 1px solid blue; */
}
.traveTipsTitle{
    width: 100%;
    display: flex;
    /* margin-left: 1vw; */
    margin-bottom: 2vw;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    /* border: 1px solid darkorange; */

}
.traveTipsIcon{
    width: 3.5vw;
    height: 3.5vw;
    margin-right: .5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fffd88;
    border-radius: .5vw;

    /* border: 1px solid red; */
}
.traveTipsIcon img{
    width: 3vw;
    /* border: 1px solid darkkhaki */
}

.traveTipsTitleContainer{
    width: auto ;
    padding: .2vw .5vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    /* border: 1px solid rebeccapurple; */
}
.traveTipsHeader{
    color: #111827;
    font-size: 2vw;
    font-family: Calibri, Candara;
    font-weight: 600;
}
.traveTipsSubHeader{
    color: #FF8A00;
    font-size: 1vw;
    font-family: Calibri, Candara;
}


.traveTipsCardHolder{
    width: 100%;
    margin-top: .5vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    /* border: 1px solid navy; */
}
.traveTipsIndividualCard{
    width: 18%;
    display: flex;
    padding: 1vw;
    margin-bottom: 1.5vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: .5vw;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
    background-color: #FFFFFF;

    /* border: 1px solid palevioletred; */
}

.traveTipsIndividualCardIcon{
    width: 4vw;
    height: 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #F5EBFA;

}
/* 
#traveTipsIndividualCardIcon1{
    background-color: #f9defa;
}
#traveTipsIndividualCardIcon2{
    background-color: #ddfddd;
}
#traveTipsIndividualCardIcon3{
    background-color: #ffe6ba;
}
#traveTipsIndividualCardIcon4{
    background-color: #e2dcff;
}
#traveTipsIndividualCardIcon5{
    background-color: #ffcee7;
}
#traveTipsIndividualCardIcon6{
    background-color: #fffab1;
}
#traveTipsIndividualCardIcon7{
    background-color: #d0fcff;
}
#traveTipsIndividualCardIcon8{
    background-color: #e2cffa;
}
#traveTipsIndividualCardIcon9{
    background-color: #c6f7c6;
}
#traveTipsIndividualCardIcon10{
    background-color: #ddddff;
} */

.traveTipsIndividualCardIcon img{
    width: 3vw;
}

.traveTipsCardDescription{
    width: 100%;
    display: flex;
    margin-top: .5vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* border: 1px solid coral; */
}

.traveTipsCardDescriptionHeader{
    width: 100%;
    padding: .5vw;
    color: #001F3F;
    font-size: 1.3vw;
    font-family: Calibri, Candara;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.traveTipsCardDescriptionHeaderDevider{
    width: 30%;
    margin-top: .2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    
    border: .5px solid #FF8A00;
}
/* 
#traveTipsCardDescriptionHeaderDevider1{
    border: 1.5px solid #f9defa;
}
#traveTipsCardDescriptionHeaderDevider2{
    border: 1.5px solid #c9f1c9;
}
#traveTipsCardDescriptionHeaderDevider3{
    border: 1.5px solid #ffe6ba;
}
#traveTipsCardDescriptionHeaderDevider4{
    border: 1.5px solid #c7baff;
}
#traveTipsCardDescriptionHeaderDevider5{
    border: 1.5px solid #ffbcde;
}
#traveTipsCardDescriptionHeaderDevider6{
    border: 1.5px solid #f8f190;
}
#traveTipsCardDescriptionHeaderDevider7{
    border: 1.5px solid #baf4f8;
}
#traveTipsCardDescriptionHeaderDevider8{
    border: 1.5px solid #e6d3ff;
}
#traveTipsCardDescriptionHeaderDevider9{
    border: 1.5px solid #c9f1c9;
}
#traveTipsCardDescriptionHeaderDevider10{
    border: 1.5px solid #c7baff;
} */


.traveTipsCardDescriptionSubHeader{
    width: 100%;
    height: 6vw;
    margin-top: .7vw;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    color: #6B7280;
    font-size: 1vw;
    font-family: Calibri, Candara;

    /* border: 1px solid blue; */
}

/* End of Travel Tips section styling. */


/* Start of Footer Section. */

footer{
    width: 100%;
    height: auto;
    padding: 1vw 3vw;
    padding-bottom: 3vw;
    position: relative;
    color: #FFF;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: #001f3f;

    /* border: 1px solid #1F2937; */
}
.footerBranding{
    width: auto;
    margin-right: 4vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    /* border: 1px solid white; */
}
.footerBrandLogo{
    width: 100%;
    margin-bottom: 1vw;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.footerBrandLogoIcon img{
    width: 3.5vw;
    height: 3.5vw;
    margin-right: 1vw;
}

.footerBrandName img{
    width: auto;
    height: 2.5vw;
    margin-right: 1vw;
}

.footerBrandTagline{
    margin-left: .5vw;
    color: #D1D5DB;
    font-size: 1.2vw;
    font-family: Calibri, Candara;
    /* font-weight: 600; */
}


.footerExplore, .footerAbout, .footerContact, .footerPopularPlaces{
    width: auto;
    margin-right: 5vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    /* border: 1px solid lightcyan; */
}


.footerExploreHeader, .footerAboutHeader, .footerContactHeader, .footerPopularPlacestHeader{
    width: auto;
    margin-bottom: 1vw;
    font-size: 1.5vw;
    font-family: Calibri, Candara;
    font-weight: 600;
}
.footerExploreElements, .footerAboutElements, .footerContactElements, .footerPopularPlacesElements{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.footerContactElements > a{
    text-decoration: none;
}
.footerAboutElements > a{
    text-decoration: none;
}
.footerPopularPlacesElements{
    width: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}
.footerPopularPlacesElements > a{
    margin: .5vw .4vw;
    text-decoration: none;
    /* border: 1px solid pink; */
}
.exploreElements, .aboutElements, .contactElements, .popularPlacesElements a{
    width: 100%;
    margin-bottom: .5vw;
    text-decoration: none;
    color: #D1D5DB;
    font-size: 1.2vw;
    font-family: Calibri, Candara;
}


.footerPopularPlacesElements{
    max-width: 20vw;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.popularPlacesNames{
    width: auto;
    padding: .2vw .8vw;
    color: #D1D5DB;
    font-size: 1.2vw;
    font-family: Calibri, Candaraq;
    display: flex;
    align-items: center;
    border: .5px solid #6B7280;
    border-radius: .5vw;
}


.footerLineBreak{
    width: 94%;
    position: absolute;
    bottom: 2vw;
    border-bottom: 1px solid #4B5563;
}

/* End of Footer Section. */