@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

.navigation {
    position: fixed; 
    width: 100%;
    height: 66px;
    background: #2178ae;
z-index: 1;
}

.logo {
    position: fixed;
    height: 66px;
    margin-left: 33px;
}

.main-menu {
    display: flex;
    font-size: 16.5px;
    gap: 10px;
    float: right;
    margin-right:33px;
    padding-top: 26px;
}


.menu { 
    text-decoration: none;
    padding: 6px;
    padding-left: 13px;
    padding-right: 13px;
    color: white;
    font-family: 'Jost', sans-serif;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
}

.menu:hover {
    background: white;
    color: #2178ae;
}

.menu:focus {
    background: white;
    color: #2178ae;
}

/* Home Section */

.hero-image-container {
    width:100%;
}
.quote {
    width: 1000px;
    height: 330px;
    font-size: 165px;
    margin-top: -600px;
    margin-left: 100px;
    color: white;
    position: absolute;
    text-shadow: 3px 6px 30px rgb(0, 0, 0);
    font-family: 'Jost', sans-serif;
}

/* About */

.about-section .part {
    width: 100%;
    height: 265px;
}

.A1 {
    background-color: rgb(241, 249, 255);
}

.A2 {
    background-color:#1b4793;
    position: relative;
}

.bg-img2 {
    width: 100%;
    height: 265px;
    object-fit: cover;
    opacity: .4;
}

.heading {
    padding-top: 7vh;
    padding-bottom: 16px;
    font-size: 49.5px;
    font-family: 'Montserrat', sans-serif;
}

.au .av {
    text-align: center;
}

h5 {
    font-size: 20px;
    font-family: sans-serif;
    line-height: 26px;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 400;
    padding-bottom: 7vh;
}
.about-us-cap {
    color: rgb(0, 0, 0);
}

.vancouver {
    color: white;
}

.about-us {
    text-align: center;
    margin-left: 30vh;
    margin-right: 30vh;
}

.about-van {
    text-align: center;
    margin-left: 30vh;
    margin-right: 30vh;
    color: white;
    position: absolute;
    transform: translate(0,-100%);
}

/* Places */

.places-section {
    background-color: rgb(241, 249, 255);
    padding: 70px;
}

.place-listings {
    display: flex;
    flex-wrap: wrap;
    gap: 33px;
    justify-content: center;
    align-items: center;
    
}

.ppart1 {
    margin-bottom: 70px;
}

.container-heading {
    font-size: 50px;
    font-weight:900;
    background: #1b4793;
    font-family: 'Montserrat', sans-serif;
    color: white;
    text-align: center;
    width: 482px;
    height: 297px;
    padding:20px 0 20px 0;
    margin-top: -25px;
}

.spot {
    width: 482px;
    height: 297px;
    background: #1b4793;
    margin-bottom: 66px;
    font-size: 20px;
    font-family: "Helvetica Neue", sans-serif;
    display: absolute;
    color:black;
}

.title {
    display: absolute;
    background: #2178ae;
    font-size: 26.5px;
    transform: translate(0,-6px);
    padding: 6px 0 6px 13px;
    transition: 0.3s ease-in-out;

}

.title:hover {
    background: #001841;
}

.title:focus     {
    background: #001841;
}


.PList {
    width: 100%;
    height: 100%;
}

.link {
    text-decoration: none;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 26.5px;
    padding: 6px 0 6px 0;
    
}

.location {
    padding:3px 0 0 13px;
}

/* Events */
.event-section{
    width: 100%;

}
.bg-events {
    width: 100%;
    height: 700px;
    object-fit: cover;
    

}

.epath{
    margin-top: -670px;
    padding: 0 40px 40px 40px;
    
}
.evnt {
    text-align: center;
    color: white;
    text-shadow: 0px 0px 13px black;
    margin-bottom: 20px;
}

.evnt-listings {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    align-items:center;
    justify-content: center;
    margin-bottom: 40px;
}

.elist {
    width: 393px;
    height: 429px;
    background: rgb(255, 255, 255);
    transition: .3s ease-in-out;
    
}

.elist:hover {
    width: 393px;
    height: 429px;
    background: rgb(255, 255, 255);
    box-shadow: 0px 0px 13px rgb(151, 231, 255);
}

.elist:focus {
    width: 393px;
    height: 429px;
    background: rgb(255, 255, 255);
    box-shadow: 0px 0px 13px rgb(151, 231, 255);
}

.eposter {
    width: 100%;
    height: 191px;
    padding-bottom: 23px;
}

.evtname {
    padding: 6px;
    padding-left: 33px;
    padding-right: 33px;
}

.etitle {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 23px;
    font-weight: 900;
    color:rgb(29, 29, 29);
    text-decoration: none;
    transition: .5s ease-in-out;
}

.etitle:hover {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 23px;
    font-weight: 900;
    color:rgb(29, 29, 29);
    text-decoration: underline;
}

.etitle:focus {
        font-family: "Helvetica Neue", sans-serif;
        font-size: 23px;
        font-weight: 900;
        color:rgb(29, 29, 29);
        text-decoration: underline;
    }


.edate {
    color: rgb(255, 81, 0);
    font-size: 20px;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 800;
}

.edet {
    color: rgb(77, 77, 77);
    font-size: 16.5px;
    font-family: "Helvetica Neue", sans-serif;
}

.eprice {
    color: rgb(77, 77, 77);
    font-size: 16.5px;
    font-family: "Helvetica Neue", sans-serif;
    padding: -10px;
}

/* Reviews */

.reviews-section {
    background-color: rgb(241, 249, 255);;
    padding: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
}

 .feedback {
    background: rgb(255, 255, 255);
    width: 500px;
    padding: 25px;
    float: right;
    border-radius: 33px 0px;
}
.sender {
    font-family: "Jost", sans-serif;
    font-size: 26.5px;
    text-align: center;
    padding:0 0 13px 0;
    color: rgb(56, 56, 56);
}

.message {
    font-size: 20px;
    font-family: "Helvetica Neue", sans-serif;
    font-style: italic;
    padding: 0 26.5px 0 26.5px;
    line-height: 26.5px;
    text-align: center;
    color: rgb(134, 134, 134);
}

.reviewss {
    margin-top: -80px;
}


/* Contact */

.contact-section {
    width:100%;
    height: 600px;
    background: white;
    padding-top: 115px;
}

.content-parts{ 
    display: flex;
    justify-content: center;
    gap: 66px;
}

.cpart{
    font-family: "Helvetica Neue", sans-serif;
    width: 660px;
    color: black;
    padding: 20px;
}

.contact-form{
    margin-left: 200px
}

.gentxtbox {
font-size: 20px;
font-family: "Helvetica Neue", sans-serif;
margin: 6px 0 13px 50px;
width: 600px;
padding: 6px;
}

.send {
    font-size: 16.5px;
    width:100px;
    padding: 10px;
    text-transform: uppercase;
    background:#2178ae;
    color: white;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 500;
    margin-left: 50px;
    border-radius: 6px;
}
.send:hover {
    font-size: 16.5px;
    width:100px;
    padding: 10px;
    text-transform: uppercase;
    background:#0a324b;
    color: white;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 500;
    margin-left: 50px;
    border-radius: 6px;
}

.send:focus {
    font-size: 16.5px;
    width:100px;
    padding: 10px;
    text-transform: uppercase;
    background:#0a324b;
    color: white;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 500;
    margin-left: 50px;
    border-radius: 6px;
}


.contact-contents {
    line-height: 23px;
    font-size: 16.5px;
}
.contact-cpara {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 33px;
}

.cctdet {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 700;
}

.contact-flex {
    display: flex;
    gap: 66px;
}

.contact-icons {
    margin-top: 35px;
    display: flex;
    gap: 26.5px;
}
.icon-container {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    transition: 0.3s ease-in-out;
}

.icon-container:hover {
    width: 50px;
    height: 50px;
    border-radius: 35px;
    box-shadow: 0 0 10px rgb(124, 124, 124);
}


.icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-q {
    font-size: 16.5px;
    margin-left: 50px;
    color: rgb(116, 116, 116);
}

/* footer */

.footer-section {
    width: 100%;
    height: 260px;
    background: rgb(20, 18, 27);
    padding: 60px 0 60px 0;
}

.footer-contents {
    display:flex;
    flex-wrap: wrap;
    gap: 100px;
    justify-content: center;
    margin-left: 66px;
}

.footerhead {
    width: 400px;
    line-height: 20px;
}

.foot-heading {
    color: white;
    font-size: 20px;
    font-family: "Montserrat", sans-serif;
}

.logo-container {
    width: 330px;
    height: 100px;
}

.footer-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-caption {
    font-size: 16.5px;
    font-family: "Helvetica Neue", sans-serif;
    color: rgb(255, 255, 255);
}

.footer-icons {
    margin-top: 23px;
    display: flex;
    gap: 26.5px;
    margin-left: 30px;
}
.f-icon-container {
    width: 33px;
    height: 33px;
    border-radius: 16.5px;
    transition: 0.3s ease-in-out;
}

.f-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-body-list {
    margin-top: 26.5px;
    font-family: "Helvetica Neue",sans-serif;
    font-size: 16.5px;
    line-height: 30px;
    color:white;
}

.flink {
    text-decoration: none;
    color: white;
    transition: .3s ease-in-out;
}

.flink:hover {
    text-decoration: none;
    color: #2178ae;
}

.flink:focus {
    text-decoration: none;
    color: #2178ae;
}

.ft1 {
    margin-right: 33px;

}

.ft2 {
    margin-right: -230px;
}

.ft4{
    margin-left: -100px;
}

.newsletter {
    font-size: 12px;
    font-family: "Helvetica Neue", sans-serif;
    margin-top: 6px;
    width: 200px;
    padding: 6px;
}

.confirm {
    font-size: 13px;
    width: 82px;
    padding: 6px;
    background:#2178ae;
    color: white;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 500;
    border-radius: 3px;
    margin-top: 13px;
    transition: .3s ease-in-out;
}

.confirm:hover {
    font-size: 13px;
    width:82px;
    padding: 6px;
    background:#0a324b;
    color: white;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 500;
    border-radius: 3px;
    margin-top: 13px;
}

.confirm:focus {
    font-size: 13px;
    width:82px;
    padding: 6px;
    background:#0a324b;
    color: white;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 500;
    border-radius: 3px;
    margin-top: 13px;
}

.privpo {
    margin-top: 10px;
    font-size: 12px;
    font-family: "Helvetica", sans-serif;
    color: white;

}