/* =====================================
   BOOK WITH RUSH VACATIONS
   Main Website Styles
===================================== */


* {
    box-sizing:border-box;
}


html {
    scroll-behavior:smooth;
}


body {

    margin:0;

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    color:#333;

    line-height:1.6;

}





/* ================================
   HEADER
================================ */


header {

    position:absolute;

    top:0;

    left:0;

    width:100%;

    padding:25px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:100;

}



.logo {

    color:white;

    font-size:28px;

    font-weight:700;

}



nav a {

    color:white;

    text-decoration:none;

    margin-left:25px;

    font-weight:600;

}



nav a:hover {

    color:#8ed8ff;

}





/* ================================
   HERO
================================ */


.hero {

    height:100vh;

    min-height:650px;

    background:

    linear-gradient(
    rgba(0,50,80,.45),
    rgba(0,50,80,.45)
    ),

    url("https://images.unsplash.com/photo-1548574505-5e239809ee19");


    background-size:cover;

    background-position:center;


    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:white;

}



.hero-overlay {

    max-width:850px;

    padding:30px;

}



.hero h1 {

    font-size:64px;

    line-height:1.1;

}



.hero p {

    font-size:24px;

}



.button {


    display:inline-block;

    margin-top:25px;

    padding:16px 40px;

    background:#0077cc;

    color:white;

    border-radius:50px;

    text-decoration:none;

    font-weight:bold;

}





/* ================================
   SECTIONS
================================ */


section {

    padding:90px 8%;

}



h2 {

    text-align:center;

    color:#004c80;

    font-size:42px;

}





.intro {

    text-align:center;

}



.intro p {

    max-width:900px;

    margin:auto;

    font-size:20px;

}





/* ================================
   CARDS
================================ */


.cards {

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:30px;

}



.card {

    width:320px;

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:
    0 10px 30px rgba(0,0,0,.12);

}



.card img {

    width:100%;

    height:230px;

    object-fit:cover;

}



.card h3 {

    padding:20px 25px 0;

    color:#004c80;

}



.card p {

    padding:0 25px 25px;

}





/* ================================
   ABOUT
================================ */


.about {

    background:#f4f9fc;

}



.features {

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:25px;

}



.features div {

    width:300px;

    background:white;

    padding:30px;

    border-radius:20px;

}





/* ================================
   BOOKING FORM
================================ */


.booking {

    background:#f5fbff;

}



form {

    max-width:650px;

    margin:auto;

    background:white;

    padding:40px;

    border-radius:25px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.12);

}



label {

    display:block;

    margin-bottom:6px;

    color:#004c80;

    font-weight:600;

}



input,
select,
textarea {


    width:100%;

    padding:15px;

    margin-bottom:18px;

    border-radius:10px;

    border:

    1px solid #ccd8e2;

    font-size:16px;

}



textarea {

    height:150px;

}



button {

    width:100%;

    padding:17px;

    background:#0077cc;

    color:white;

    border:none;

    border-radius:50px;

    font-size:18px;

    font-weight:bold;

}





/* ================================
   SUCCESS MESSAGE
================================ */


.success {


    display:none;

    max-width:650px;

    margin:40px auto;

    background:white;

    padding:40px;

    border-radius:20px;

    text-align:center;

}





/* ================================
   FOOTER
================================ */


footer {

    background:#003b63;

    color:white;

    text-align:center;

    padding:50px 20px;

}







/* =================================
   MOBILE OPTIMIZATION
================================= */


@media(max-width:900px){



header {

    padding:20px;

    background:rgba(0,59,99,.75);

}



.logo {

    font-size:20px;

}



nav {

    display:none;

}



.hero {

    min-height:700px;

}



.hero h1 {

    font-size:40px;

}



.hero p {

    font-size:18px;

}



section {

    padding:60px 20px;

}



h2 {

    font-size:32px;

}



.card {

    width:100%;

}



form {

    padding:25px;

}



input,
select,
textarea {


    font-size:18px;

    padding:16px;

}



button {


    min-height:55px;

}



}






/* ================================
   PHONE ONLY IMPROVEMENTS
================================ */


@media(max-width:600px){



.hero-overlay {

    padding:15px;

}



.hero h1 {

    font-size:34px;

}



.hero p {

    font-size:17px;

}



.card img {

    height:200px;

}



footer {

    padding-bottom:100px;

}



.mobile-book {


    display:block;

    position:fixed;

    bottom:20px;

    left:20px;

    right:20px;

    background:#0077cc;

    color:white;

    text-align:center;

    padding:16px;

    border-radius:50px;

    font-weight:bold;

    text-decoration:none;

    z-index:999;

}



}



/* Hide mobile button on desktop */

@media(min-width:601px){

.mobile-book {

    display:none;

}

}

/* ==========================
   ADMIN TOP MENU
========================== */

.admin-menu {

display:flex;

flex-direction:row;

flex-wrap:wrap;

justify-content:center;

align-items:center;

gap:10px;

width:100%;

margin:20px auto;

}


.admin-menu button {

width:auto;

min-width:120px;

padding:12px 18px;

font-size:15px;

border-radius:8px;

cursor:pointer;

}



.admin-section {

width:100%;

}



.admin-header {

text-align:center;

width:100%;

}