* {
    font-family: 'lora';

}

.backer {
    background-image: url(../images/blue.png);
    background-size: 100%;
    background-size: cover;
        
}

header {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    margin: 0;
    text-align: center;
    align-content: center;
    align-items: center;
}

.main {
    width: 100%;
    height: 100%;
 background-color: grey;

}
h1 {
    display: flex;
    margin-top: 25px;
    margin-left: -50px;
    background-image: linear-gradient(to right, rgb(166, 237, 241), rgba(30, 143, 255, 0.577));
    
    color: rgb(255, 255, 255);
    padding: 10px;
    width: 100%;
    height: 150px;
   justify-content: flex-end;
   align-items: center;
   font-size: 60px;
   font-style: italic;
}

.banner-pic {
    width: 270px;
    height: 250px;
    background-image: url(../images/weatherback.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    z-index: 1;
    
}

h2 {
    margin-top: 50px;
}

.grid-box {
    width: 100%;
    padding: 10px;
    
    border-radius: 15px;
    margin: 20px;
    margin-right: 25px;
    margin-left: -10px;
}

.main-pic {
    width: 130%;
    height: 100%;
}

.small-pic {
    width: 120%;
    height: 100%;
}

h2 {
    color: rgb(255, 255, 255);
    font-size: xx-large;
    background-image: linear-gradient(to left, rgb(166, 237, 241), rgba(30, 143, 255, 0.614));
    border: 2px solid navy;
    width: 40%;
    padding:5px;
    border-radius: 8px;
}


.rental-info {
    display: flex;
    flex-direction: column;
    width: fit-content;
    height: 100%;
    padding: 35px;
    background-color: rgba(11, 152, 191, 0.768);
    border-radius: 10px;
    margin-left: 25px;
    margin-top: 10px;
    border: 2px dashed white;
    color: white;
    font-size: x-large;
}

.list-item {
    font-family: 'audiowide';
}

.sublist-item {
    font-family: 'audiowide';
    font-size: large;
}



.div1:hover,
.div2:hover,
.div3:hover,
.div4:hover,
.div5:hover {
    scale:1.1;
    transition: ease-in-out 0.3s;
}

.contact {
    background-image: linear-gradient(to left, rgba(30, 143, 255, 0.54),rgb(166, 237, 241));
    backdrop-filter: blur(5px);
     border-radius: 8px;
     border: 3px solid rgb(7, 6, 79);
     padding: 50px;
     width: 30%;
}


.grid {
    display: grid;
    scale: .90;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: .2px;
    width: 100%;
   margin: 0;
   margin-top: -50px;
   padding: 0;
   background-image: linear-gradient(to left, rgba(30, 143, 255, 0.592),rgba(166, 237, 241, 0.581));
   backdrop-filter: blur(5px);
    border-radius: 8px;
    border: 3px solid rgb(7, 6, 79);
    padding: 50px;
    padding-right: 0;
    overflow: hidden;
   
    }
    
    .div1 { 
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 3;
        overflow: hidden;
        margin: 0;
        border: 1px solid rgb(0, 0, 0);

    }
  

    .div2 {   
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2; 
        border: 1px solid rgb(0, 0, 0);
        overflow: hidden;
        margin: 0;

    }
    .div3 { 
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 1;
        grid-row-end: 2; 
        border: 1px solid rgb(0, 0, 0);
        overflow: hidden;
        margin: 0;

     }
     .div4 {   
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 3; 
        border: 1px solid rgb(0, 0, 0);
        overflow: hidden;
        margin: 0;
    }
    .div5 { 
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 2;
        grid-row-end: 3; 
        border: 1px solid rgb(0, 0, 0);
        overflow: hidden;
        margin: 0;
     }

     .rental-info {
        grid-column-start: 5;
        grid-column-end: 7;
        grid-row-start: 1;
        grid-row-end: 3; 

     }

.footer {
    display: flex;
    justify-content: center;
    height: 60px;
    width: 100%;
}

.btn {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    text-align: center;
    font-size: larger;
    background-color: dodgerblue;
    color: white;
    border: 2px solid rgb(255, 255, 255);
}

.btn:hover {
    scale: 1.05;
}

.contact {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: auto;
}

.contact-head {
    justify-content: center;
    flex-direction: column;
    display: flex;
    margin: 0;
}

.card {
    display:flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    list-style: none;
    text-decoration: none;
}

.card a:hover {
 scale:1.05;
}

.title {
    margin: auto;
}

.maint {
    width: 400px;
    display: flex;
    margin: auto;
    justify-content: center;
    text-align: center;
    margin-bottom: 50px;
}

form {
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 15px;
    padding: 10px;
    background-image: linear-gradient(to bottom, dodgerblue, rgb(30, 215, 225));
    border: 3px solid rgb(2, 40, 255);
}

textarea {
    height: 200px;
    border-radius: 8px;
    background-color: rgb(166, 237, 241);
    font-size: larger;
    font-weight: 300;
    font-family: 'rajdhani';

}

input {
    height: 30px;
    border-radius: 8px;
    background-color: rgb(166, 237, 241);
    font-family: 'rajdhani';
    font-size: large;
}

select {
    border-radius: 8px;
    height: 40px;
    background-color: rgb(166, 237, 241);
    width: 70%;
    margin: auto;
    font-family: 'rajdhani';
    text-align: center;
    font-size: larger;
}

.option {
    font-family: 'rajdhani';
    font-size: larger;
    text-align: center;
    padding: 5px;
}

label {
    height: 30px;
    color: white;
    font-size: xx-large;
    padding: 20px;
}

.smaller {
    font-size: x-large;
}

.submit {
    display: flex;
    justify-content: center;
    width: 150px;
    border-radius: 8px;
    margin: auto;
    margin: 15px auto;
    font-size: larger;
    background-color: rgb(241, 122, 122);
    color: white;
    font-family: 'rajdhani';
}

.red {
    background-color: rgb(211, 30, 30);
    font-size: large;
    color: rgb(255, 255, 255);
}

.green {
    font-size: large;
    color: rgb(12, 112, 22);
   
}

.blue {
    font-size: large;
    color: rgb(101, 101, 101);
}

.home {
    margin-top: 50px;
    margin-bottom: 50px;
}

li:hover {
    scale: 1.08;
    transition: 0.03s;
}

.nav-item {
    text-align: center;
}

.button, 
.btn {
    width: 75px;
    height: 75px;
    font-size: x-large;
}