/* BASIC STYLING OF PAGE - Color Schemes & Text Fonts */
:root {
    --color-primary: #587C93; --color-primary2: #EE8A5A;
    --color-secondary: #A8C7DC; --color-secondary2: #0B0C25; --color-secondary3: #E7ECF3;
    --color-text: #222222; --color-text2: #444444;
    --color-background: #E7ECF3; --color-background2: #587C93;
}

h1 {font-family: "Abril Fatface", serif; font-size: 48px;}
h2 {font-family: "Abril Fatface", serif; font-size: 40px;}
h3 {font-family: "Abril Fatface", serif; font-size: 33px;}
h4 {font-family: "Roboto", serif; font-weight: 700; font-size: 20px;}
h5 {font-family: "Roboto", serif; font-weight: 300; font-size: 15px;}
h6 {font-family: "Roboto", serif; font-weight: 500; font-size: 16px;}
p {font-family: "Roboto", serif; font-weight: 400; font-size: 16px;}

* {box-sizing: border-box; margin: 0px; padding: 0px; justify-content: center;}
/*--------------------------------------------------------------------------------------------*/
/* Header Navigation Styling */
.navbar {
    padding-left: 1rem; padding-right: 1rem;
    padding-top: 2rem; padding-bottom: 2rem;
    background-color: var(--color-background);
    display: flex; align-items: center; justify-content: space-around;
}
.navbar li {list-style: none; display: inline-flex;}
li a {margin-right: 30px; color: var(--color-secondary2); text-decoration: none; }
#logo { width: 45%;}
button {
    background-color: var(--color-primary2); border: none; color: #FFFFFF;
    padding-left: 2rem; padding-right: 2rem; padding-top: 0.75rem; padding-bottom: .75rem;
}
li:hover {text-decoration: underline;}


/*-------------------------------------------------------------------------------------------*/
/* Sunset Styling */
#sunset {width: 100vw;}
.banner {position: relative;}
.banner-text {position: absolute; top: 30%; padding-left: 4rem; color: #FFFFFF;}


/*-------------------------------------------------------------------------------------------*/
/* Destination Search Bar Styling */
.destinationlookup {
    margin-top: 1rem; margin-left: auto; margin-right: auto; margin-bottom: 2.5rem;
    text-align: center; width: 900px; padding: 1rem;
    background-color: var(--color-background2);
}
.destinationlookup h3 {color: #FFFFFF; margin-bottom: 1rem;}
main {justify-content: center; align-items: center;}
.destinationlookup form {display: flex; margin-bottom: .5rem; justify-content: center;}
input {border: none; padding: 12px; width: 550px;}


/*-------------------------------------------------------------------------------------------*/
/* "Trending Tours" Section Styling */
.trendingtours {
    flex-direction: column; padding-bottom: 1.5rem; padding-top: 1.5rem; text-align: center;
    background-color: var(--color-background);
}
.trendingtours h5 {color: #929090;}
main {
    display: flex; gap: 1.5rem; padding-bottom: 2rem;
    background-color: var(--color-background);
}
.card {
    background-color: white;
    padding: 0rem; gap: 1rem; width: 100%;
    display: flex; flex-direction: column;
}
.card img {display: block; width: 100%;}
.card-content {padding: 1rem;}
.card-content h4 {font-size: 16px; margin-bottom: .5rem; margin-left: 0;}
.card-content p {font-size: 13px; margin-bottom: .7rem; margin-left: 0; color: #929090;}
.card-content form {display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 0 1rem 1rem;}
.card-content form h4 {font-size: 24px; margin: 0;}
.card-content form button {width: auto; max-width: 100%; padding: 0.75rem 1.25rem;}


/*-------------------------------------------------------------------------------------------*/
/* "Perfect Trip" Section Styling */
.trips {margin-top: 2.5rem; text-align: center;}
.perfecttrip h5 {color: #666666;}
.perfecttripphotos {display: flex; gap: 5rem; margin-top: 2rem; margin-bottom: 2rem;}
.icons img {margin-bottom: .4rem;}
.icons h6 {margin-bottom: 2rem;}
b {color: var(--color-primary2);}


/*-------------------------------------------------------------------------------------------*/
/* "Top Notch Destinations" Section Styling */
#photoArray {
    display: grid;
    grid-gap: 1rem;
    grid-template-areas: "photoOne photoThree photoFour" "photoTwo photoThree photoFive";
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    margin-bottom: 2rem; margin-top: 2rem;
}
#photoArray > div:nth-child(3) {grid-area: photoThree; height: auto;}
.topnotch {text-align: center;}
.topnotch h5 {color: #666666;}
.locations {position: relative;}
.locations-text1 {position: absolute; top: 70%; left: 10%; color: #FFFFFF; font-size: 13px; text-align: left;}
.locations-text2 {position: absolute; top: 86%; left: 10%; color: #FFFFFF; font-size: 13px; text-align: left;}
.locations-text1 p, .locations-text2 p {font-weight: 300;}


/*-------------------------------------------------------------------------------------------*/
/* Footer Styling */
.footer {
    background-color: var(--color-background2);
    width: 100%; display: flex; color: #FFFFFF;
    justify-content: center; gap: 8rem; padding-top: 3rem; padding-bottom: 3rem;
}
.footer div {text-align: left;}
.footer p {font-weight: 300;}
.col-3 li {list-style: none; margin-top: 1rem;}
.socialmedia img {width: 15%;}

/*-------------------------------------------------------------------------------------------*/
/* Media Queries */
/*-------------------------------------------------------------------------------------------*/
/* Tablet */
@media (max-width: 999px) {
    .top-rated {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 1.5rem;
        padding: 1rem;
    }

    .top-rated .card {
        width: 100%;
        max-width: 320px;
    }
}
@media (max-width: 1000px) {
    .navbar {
        flex-direction: column;
        align-items: center;
    }

    .navbar ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #logo {
        width: 220px;
        margin-left: 0;
    }

    .about-banner-text,
    .banner-text {
        top: 15%;
        left: 2rem;
        right: 2rem;
        padding-left: 0;
        max-width: 80%;
    }
    .blog-banner-text {right: 2rem; left: auto; max-width: 260px;}
    .about-banner-text h1,
.blog-banner-text h1 {
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.about-banner-text p,
.blog-banner-text p {
    line-height: 1.5;
}

    .destinationlookup {
        width: 90%;
    }

    .destinationlookup form {
        flex-direction: column;
        align-items: center;
    }

    .destinationlookup form input,
    input {
        width: 100%;
        max-width: 500px;
    }

    main {
        flex-direction: column;
        align-items: center;
    }

    .perfecttripphotos {
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
    }

    #photoArray {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
    }

    .locations img {
        width: 100%;
        max-width: 500px;
        height: auto;
        padding-bottom: 1rem;
    }

    .locations-text1,
    .locations-text2 {
        left: 10%;
        top: 70%;
    }

    .about-context {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1rem;
    }

    .contextwords,
    .contextimages {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #about-description {
        padding-left: 10%;
        padding-right: 10%;
    }

    .bucket-list {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .top-rated {
        grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; padding: 2rem;
        justify-items: center;
    }

    .blogs {
        flex-direction: column;
        align-items: center;
    }

    .blogtext {
        padding-left: 5%;
        padding-right: 5%;
    }

    .footer {
        flex-wrap: wrap;
        gap: 3rem;
        text-align: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .footer div {
        text-align: center;
    }
}

@media (max-width: 780px) {
    .card-content form {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-content form button {
        width: 100%;
        max-width: 220px;
    }
}
/*-------------------------------------------------------------------------------------------*/
/* Phone */
@media (max-width: 700px) {
    h1 {font-size: 32px;}
    h2 {font-size: 28px;}
    h3 {font-size: 24px;}
    h4 {font-size: 18px;}
    h5, p {font-size: 14px;}
    .navbar {padding-top: 1rem; padding-bottom: 1rem;}
    .navbar ul {flex-direction: column; align-items: center; gap: 0.75rem;}
    li a {margin-right: 0;}
    #logo {width: 180px;}
    button {width: 100%; max-width: 250px;}
    #sunset {width: 100%;}
    .banner-text, .about-banner-text {position: absolute; top: 10%; left: 1rem; right: 1rem; max-width: 90%; text-align: left;}
    .blog-banner-text {right: 1rem; max-width: 220px; text-align: right;}
    .about-banner-text h1,
    .blog-banner-text h1 {
        font-size: 34px;
    }
    .about-banner-text p,
    .blog-banner-text p {
        font-size: 15px;
    }
    .destinationlookup {width: 95%; padding: 1rem;}
    .destinationlookup form {gap: 0.75rem;}
    input {width: 100%; max-width: 100%;}
    .card {width: 90%;}
    .card-content form {flex-direction: column; gap: 1rem; align-items: center;}
    .perfecttripphotos {flex-direction: column; gap: 1.5rem;}
    .locations img {max-width: 100%;}
    .locations-text1, .locations-text2 {left: 8%;top: 72%;}
    #about-description {padding-left: 6%;padding-right: 6%;line-height: 28px;}
    #about-ending {line-height: 1.5;padding-left: 6%;padding-right: 6%;}
    .contextimages {
        padding: 1rem;
    }

    .contextimages img {
        width: 100%;
        height: auto;
    }

    .card2 {width: 100%; flex-direction: column; text-align: center;}
    .card2 img {width: 100%; height: auto;}
    .card2 h5 {flex: unset;}
    .bucket-list {grid-template-columns: 1fr; padding: 1rem;}

    .top-rated {
        display: grid; grid-template-columns: 1fr !important; justify-items: center; gap: 1.5rem; padding: 1rem;
    }
    .top-rated .card {width: 100%; max-width: 320px;}
    .top-rated .card-content form {flex-direction: column; align-items: center;}

    .travellookup {
        width: 90%;
        flex-direction: column;
    }

    .blogdescription {
        padding-left: 8%;
        padding-right: 8%;
    }

    .blogs {
        width: 95%;
    }

    .blogs img {
        width: 100%;
        height: auto;}
    .footer {
        flex-direction: column;
        gap: 2rem;
    }
}

/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/

.about-banner {position: relative;}
.about-banner-text {position: absolute; top: 10%; left: 4rem; color: black; max-width: 500px;}
.about-context {background-color: var(--color-background)}
#about-description {text-align: center; line-height: 32px; padding-left: 30%; padding-right: 30%; margin-top: .5rem; margin-bottom: 3rem;}
.about-context {display: flex; align-items: center; margin-bottom: 5rem;}
#about-ending {text-align: center; margin-bottom: 5rem; padding-left: 10%; padding-right: 10%; line-height: 70px;}
.about-context h5 {line-height: 33.3px;}
.contextwords {padding-left: 5%; padding-right: 10%;}
.contextwords h2 {margin-bottom: .5rem;}
.contextwords h6 {margin-bottom: 3rem;}
.contextimages {display: flex; flex-direction: column; padding: 2rem; gap: 2rem; padding-right: 10%;}


.card2 {
    background-color: rgba(168,199,220,0.25);
    padding: .75rem; gap: 1rem; width: 100%; max-width: 476px;
    display: flex; flex-direction: row; align-items: center; flex-wrap: wrap;
}
.bucket-list {display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 476px)); justify-content: center; padding: 2rem;}
.card2 h5 {text-align: center; line-height: 31px; margin: 10px; flex: 1 1 250px;}
.card2 img {flex: 1 1 20px; max-width: 100px; height: auto;}
#destination-description {padding: 2.5rem; text-align: center; font-style: italic;}
.destination-description2 {background-color: white; display: block; padding: 3rem; text-align: center;}
.destination-description2 h4 {margin-top: 2rem; margin-bottom:1rem;}
#endingnote {font-style: italic; font-weight: 300; font-size: 30px; color: var(--color-primary2);}


.travellookup {display: flex; width: 50%; gap: 1rem; background-color: grey; padding: 1rem; justify-content: center; align-items: center;}
.top-rated {display: grid; gap: 2.5rem; padding: 2rem 3rem; grid-template-columns: repeat(3, minmax(0, 1fr));}

.blog-banner-text {text-align: right; position: absolute; top: 18%; left: auto; right: 3rem; color: black; max-width: 300px;}
.blog-banner {position: relative;}
.blogdescription {padding-left: 20%; padding-right: 20%; text-align: center; font-style: italic; line-height: 33.25px; margin-top: 2rem; margin-bottom: 2rem;}
.blogs {
    background-color: rgba(168,199,220,0.25); width: 90%; margin: auto; padding: 10px; display: flex; margin-bottom: 2rem; justify-content: space-between;
}
.blogtext {padding-right: 10%; padding-left: 10%;}
.blogs img {display: block;}
.blogtext h3 {font-size: 30px; color: var(--color-primary2); margin-bottom: .5rem; text-decoration: underline; }
.blogtext h4 {font-weight: 300; margin-bottom: .5rem; }
.blogtext button {background-color: var(--color-secondary);}
.likewhatyousee {text-align: center; margin-bottom: 3rem; }

.about-banner-text h1, .blog-banner-text h1 {line-height: 1.1;margin-bottom: 0.5rem;}
.about-banner-text p, .blog-banner-text p {line-height: 1.5;}
.blog-banner-text p {color: var(--color-primary2);}