*{
    padding: 0;
    margin: 0;
}

/*Nav Bar*/
nav{ /*Nav Bar*/
    position: fixed;
    width: 100%;
    box-shadow: 0px 0px 0px 1.5px rgba(0, 0, 0, 0.3);
    background-color: rgb(157, 191, 143);
}
.xbtravel{ /*XBTRAVEL Logo*/
    position: absolute;
    left: 60px;
    top:12px;
    font-weight: bold;
    font-style: italic;
    font-size: 26px;
    color: black;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
}
.regions{ /*"Container" for Navbar that contains each region element*/
    display: flex;
    justify-content: flex-end;
}

.region{ /*Each Regional element*/
    position: relative;
}

.regionlink{ /*Each link to regional page*/
    display: block;
    padding: 20px 20px;
    text-decoration: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    font-size: 18px;
    color: black;
}
.dropdown{  /*List of places in each region*/
    width: 100%;
    flex-direction: column;
    background-color: rgb(157, 191, 143);
    position: absolute;
    display: none;
}

.placelink{ /*Links of places in each region*/
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
    font-size: 12px;
}

.region:hover .regionlink{ /*Turns Region link yellow anytime a part of the regional element is hovered*/
    background: rgb(235, 255, 156);
}

.region:hover .dropdown{
    display: flex;
}

.placelink:hover{ /**/
    background: rgb(235, 255, 156);
}


/** usa stuff **/

.usdropdown{
    display: none;
    position: absolute;
    background: rgb(157, 191, 143);
    max-width: 291px;
}

.region:hover .usdropdown{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    width: 300px;
}

.usdropdown .placelink{
    font-size: 12px;
    text-align: center;
    padding: 10px 0px;
}


/*containers*/
.container{ /*image container*/
    display: flex;
    flex-direction: row;
    padding: 0px 10px;
}
.container2{ /*contains all the cards*/
    display: flex;
    flex-direction: row;
    padding: 30px 20px;
}

.container6{ /*container for footer categories*/
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 0px 10px;
}

.container7{ /*container for footer place links*/
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
}

/*texts*/
.caption{
    padding: 6px 6px 0px 6px;
    font-size: 16px; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
}

.text3{ /*Text in Destination pages*/
    padding: 30px 50px;
    font-size: large;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.text3 a{ /*Make all links in Region page texts blue*/
    color: blue;
}

.text4{ /*Destination Links for footer*/
    padding: 3px 20px;
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;

}

/*images*/
.imgtype1{  /*Image "holder" for gallery photos*/
    flex:1;
    padding: 0px 20px 30px 20px;
}

.img1{ /*Photo Galleries*/
    width: 100%;
    height: 300px;
    object-fit: cover;
}  

.img2{ /*images for cards*/
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.imgtype3{ /*Image "holder" for destination description images*/
    flex: 1;
    padding: 10px 20px 30px 20px;
}

.img3{ /*Images for destination description*/
    width: 100%;
    height: 400px;
    object-fit: cover;
}

/*Explore and title texts*/

.title1{ /*Title of each page*/
    text-align: center;
    font-weight: bold;
    font-size: 36px;
    padding: 90px 30px 10px 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.explore{ /*Subtitles*/
    text-align: center;
    font-weight: bold;
    font-size: 36px;
    padding-top: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.explore4{ /*Subtitles for footer*/
    font-weight: bold;
    font-size: 24px;
    padding: 10px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
}

/*cards*/
.card{ /*Cards, a subcontainer inside container2*/
    flex: 1;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
    margin: 10px;
    background-color: white;
}

.card:hover{
    box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.8);
}
.card a{ /*Link to the destination inside the card*/
    padding: 20px 20px 15px 20px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 24px;
    color: black;
}

.card p{ /*Destination description inside card*/
    padding: 0px 20px 30px 20px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
}


/*map*/

.map{
    display: flex;
}

iframe{ /*Map*/
    flex: 1;
    padding: 30px 30px;
    border: none;
}
/*footer*/

footer{ /*footer*/
    height: 540px;
    background: rgb(117, 30, 30);
}
footer p{ /*Italicized xbtravel at te bottom*/
    text-align: center;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
    /*padding-bottom: 25px;*/
}


/**hamb**/
.hamb{
    display: none;
}
.side-menu{
    display: none;
}

.hamb-line{
    background: black;
    display: block;
    height: 2px;
    position: relative;
    width: 24px;
}

.hamb-line::before, .hamb-line::after{
    background: black;
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    width: 24px;
}

.hamb-line::before{
    top: 5px;
}

.hamb-line::after{
    bottom: 5px;
}

.side-menu{
    display: none;
}

.side-menu:checked ~ .regions{
    max-height: 100%;
}



.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}
/**NavBar menu for mobile**/


@media (max-width: 1000px){
    .hamb{
        display: block;
        cursor: pointer;
        float: right;
        padding: 30px 16px;
    }

    .regions{
        overflow: hidden;
        width: 100%;
        max-height: 0;
        flex-direction: column;
    }

    /**/
    .imgtype1{
        padding: 0px 8px 30px 8px;
    }

    .imgtype3{
        padding: 10px 8px 30px 8px; 
    }

    .img1{
        height: 80px;
    } 
    .img3{
        height: 98px;
    }
    
    .container2{
        flex-direction: column;
        padding: 10px 20px;
    }
    .container6{
        flex-direction: column;
    }
    .container7{
        align-items: center;
        padding: 25px 0px;
    }
    
    iframe{
        padding: 20px 20px;
        width: 90vw;
        height: 300px;
        border: none;
    }

    .text3{
        padding: 30px 30px;
        font-size: medium;
        text-align: center;
    }
    .caption{
        font-size: 12px;
    } 
}