/* font-family: 'Inter', sans-serif;
font-family: 'Roboto', sans-serif; */

/* -------------------------- Default -------------------------- */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: black;
    transition: 0.2s linear;
}

a:hover {
    color: #C72A35;
}

address {
    font-style: normal;
}

strong {
    font-weight: inherit;
}

button {
    border: none;
    background-color: white;
}

ul {
    list-style: none;
}
/* -------------------------- Elements -------------------------- */

/* --- Text --- */
.smallText {
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    font-family: 'Inter', sans-serif;
}

.text {
    font-size: 18px;
    font-weight: 400;
    line-height: 150%;
    font-family: 'Inter', sans-serif;
}

.headerText {
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
}

.subheaderText {
    font-size: 25px;
    font-weight: 500;
    line-height: 30px;
    font-family: 'Inter', sans-serif;
}

.blockHeader {
    margin-bottom: 25px;
    font-size: 40px;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
}

.mediumBold {
    font-weight: 500;
}

.boldBold {
    font-weight: 700;
}

.redText {
    color: #C72A35;
}

/* --- Book Button --- */
.bookBtn {
    height: 40px;
    color: white;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background-color: #C72A35;
    transition: linear 0.2s;
    width: 100%;
}

.bookBtn:hover {
    background-color: #BD000C;
}

.bookBtn p{
    margin-left: 10px;
}

/* --- Sections/Blocks --- */
.block {
    width: 1200px;
    margin: auto;
    padding: 40px;
}

.blockWrapper {
    color: white;
    text-align: center;
    width: 100%;
    min-width: 1200px;
    background-color: #C72A35;
}

/* --- Divider --- */
.divider {
    width: 1200px;
    height: 5px;
    margin: auto;
    border-radius: 2.5px;
    background-color: #C72A35;
}

/* -------------------------- Header Menu -------------------------- */
.headerMenu {
    grid-area: nav;
    width: 1200px;
    display: grid;
    grid-template-rows: 50px 50px;
    grid-template-columns: 170px 1fr 225px;
    grid-template-areas:
     "logo info info"
     "logo btns book";
}

.headerLogo {
    grid-area: logo;
    width: 100%;
    height: 100%;
}

/* --- Header Contact Info --- */
.headerContactInfo {
    grid-area: info;
    justify-self: right;
    width: 700px;
    height: 16px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

#availabilityStatusHighlighted {
    font-weight: 700;
}

.headerDivider {
    width: 1px;
    height: 16px;
    background-color: black;
}

.headerContactImg {
    float: left;
    margin-right: 5px;
}



/* --- Header Nav Menu --- */
.headerNavMenu {
    width: 590px;
    height: 20px;
    margin-top: 10px;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.headerNavBtn {
    color: black;
    font-size: 20px;
    line-height: 20px;
    position: relative;
    transition: linear 0.2s;
}

.headerNavBtn:hover {
    color: #C72A35;
}

.headerNavBtn:after {
    content: "";
    height: 2px;
    display: block;
    position: absolute;
    top: 130%;
    left: 10%;
    background-color: #C72A35;
}

.headerNavBtn:hover:after {
    animation: selection-underline 0.2s linear alternate 0s forwards;
}

/* --- Header Nav Menu Animation--- */
@keyframes selection-underline {
    0%{
        width: 0%;
    }
    100%{
        width: 80%;
    }
}

/* --- Book Btn --- */
#headerBtn {
    width: 100%;
    grid-area: book;
    justify-self: center;
}

/* --- Burger Btn --- */
#burgerIcon {
    display: none;
}

#mobileMenu {
    display: none;
}



/* -------------------------- Header -------------------------- */

.header {
    display: grid;
    grid-template-columns: 560px 1fr;
    grid-template-areas:
     "nav nav"
     "header span"
     "subheader span"
     "badges span";
    width: 1200px;
    height: 900px;
    margin: auto;
    padding-top: 10px;
    background-size: 600px;
    background-repeat: no-repeat;
    background-image: url(./images/header-image.png);
    background-position: 100% 100%;
}

.headerLine {
    grid-area: header;
    margin-top: 50px;
    color: #C72A35;
    font-size: 100px;
    line-height: 100px;
}

.subHeaderLine {
    grid-area: subheader;
}

.badgeBox {
    grid-area: badges;
    width: 540px;
    height: 300px;
    margin-top: 80px;
    margin-bottom: 125px;
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2fr 1fr;
}

.badge {
    height: fit-content;
    justify-self: center;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.25));
}

.winnerBadge {
    margin-top: 75px;
}

#mobileSpan {
    display: none;
}

/* -------------------------- Block 1 -------------------------- */

.blockLayout1 {
    display: grid;
    grid-template-columns: 1fr;
}

/* -------------------------- Block 2 -------------------------- */

.blockLayout2 {
    display: grid;
    grid-template-columns: 1fr;
}

.servicesBox {
    display: grid;
    gap: 40px 35px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.serviceCard {
    width: 350px;
    height: 280px;
    background-color: #F2F2F2;
    border-radius: 10px;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.25));
}

.serviceCardText {
    margin: 20px 0 20px 0;
    font-size: 25px;
    text-align: center;
}

.serviceCardBtn {
    width: 310px;
    margin: auto;
}

/* -------------------------- Block 3 -------------------------- */

/* --- Block Layout --- */
.blockLayout3 {
    display: grid;
    gap: 0 80px;
    grid-template-columns: 642px 398px;
    grid-template-areas:
     "header header"
     "map info";
}

.blockLayout3 .blockHeader {
    grid-area: header;
}

.googleMap {
    width: 100%;
    height: 359px;
    border-radius: 10px;
}

/* --- Block Info Box --- */
.blockInfoBox {
    padding: 10px 0;
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

.blockInfoPart {
    height: fit-content;
}

.blockInfoBullet {
    line-height: 22px;
}

.blockInfoIcon{
    float: left;
    margin-right: 10px;
}

.blockInfoAreaList {
    margin: 10px 0 0 40px;
}

/* -------------------------- Block 5 -------------------------- */

/* --- Block Layout --- */
.blockLayout5 {
    display: grid;
    grid-template-rows: 72px 1fr;
    grid-template-columns: 1fr 515px;
    grid-template-areas: 
    "header image"
    "list image";

}

.blockLayout5 .blockHeader {
    grid-area: header;
}

.blockLayout5 img {
    grid-area: image;
    justify-self: right;
}

/* --- Block List --- */
.blockList {
    width: 560px;
    justify-self: right;
    list-style: none;
}

.blockListElement {
    position: relative;
    margin-bottom: 20px;
}

.blockListElement::before {
    content: '';
    top: 3px;
    left: -36px;
    position: absolute;
    width: 21px;
    height: 21px;
    background-image: url(./images/bullet-icon.svg);
}

/* -------------------------- Block 6 -------------------------- */

/* --- Block Layout --- */
.blockLayout6 {
    display: grid;
    gap: 0 80px;
    grid-template-columns: 500px 540px;
    grid-template-areas: 
    "header header"
    "img form";
}

.blockLayout6 .blockHeader {
    grid-area: header;
}

.blockLayout6 img {
    grid-area: img;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.25));   
}

.contactTypeBox {
    grid-area: Type;
}

.contactTelBox {
    grid-area: Numb;
}

.contactAddrBox {
    grid-area: Addr;
}

.contactCodeBox {
    grid-area: Code;
}

.contactComBox {
    grid-area: Comm;
}

.contactSubmitBox {
    grid-area: Butn;
}

/* --- Contact Form Layout --- */
.contactForm {
    grid-area: form;
    width: 100%;
    display: grid;
    gap: 20px 40px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
     "Type Type Type Type Type Numb Numb Numb Numb Numb"
     "Addr Addr Addr Addr Addr Addr Addr Code Code Code"
     "Comm Comm Comm Comm Comm Comm Comm Comm Comm Comm"
     "Butn Butn Butn Butn Butn Butn Butn Butn Butn Butn";
    border-radius: 10px;
}

/* --- Input Labels --- */
.inputLabel {
    line-height: 100%
}

/* --- Input Fields --- */
.inputField {
    width: 100%;
    height: 40px;
    outline: none;
    color: #6B6B6B;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    text-align: center;
    background-color: #F2F2F2;
    border: solid #CBCBCB 3px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.25));  
}

.inputField:focus {
    border: solid #C72A35 3px;
}

/* --- Input Select --- */
.inputSelect {
    appearance: none;
    background-repeat: no-repeat;
    background-position: bottom 12px right 12px;
    background-image: url(./images/arrow-icon.svg);
}

.inputSelect:focus {
    background-image: url(./images/arrow-red-icon.svg);
}

.inputSelect option {
    font-size: 25px;
}

/* --- Input Text Area --- */
#contactCom {
    padding: 15px 20px;
    height: 150px;
    resize: none;
    text-align: left;
}

/* --- Input Submit --- */
#contactSubmit {
    cursor: pointer;
    border: none;
    padding-left: 40px;
    background-repeat: no-repeat;
    background-position: top 7px left 174px;
    background-image: url(./images/book-icon.svg);
}

/* -------------------------- Footer-------------------------- */
.footerLayout {
    width: 1200px;
    margin: auto;
    padding: 20px 40px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Text --- */
.footerText {
    color: white;
    padding-left: 10px;
    display: block;
    font-size: 14px;
    line-height: 17px;
    font-family: 'Inter', sans-serif;
}

.footerHeader {
    margin-bottom: 9px;
}

.footerLink:hover {
    color: white;
    text-decoration: underline;
}

/* --- Divider --- */
.footerDivider {
    width: 1px;
    height: 100px;
    background-color: white;
}

/* --- Sections --- */
.footerArea {
    display: grid;
    grid-template-areas: 
     "header header header"
     "p1 p2 p3";
     grid-template-columns: 1fr 1fr 1fr;
}

.footerArea h3 {
    grid-area: header;
}

.footerIcon {
    float: left;
    margin-right: 10px;
}

.footerHeaderIndent {
    margin-top: 8px;
}