:root {
  --color-accent: #05141F;;
}
a{
    cursor: pointer;
}

@font-face {
  font-family: kiaFont; /* set name */
  src: url(./assets/fonts/KiaSignatureRegular.woff2); /* url of the font */
  font-weight: 500;
}
@font-face {
   font-family: kiaFont;
   src: url(./assets/fonts/KiaSignatureLight.woff2);
   font-weight: lighter;
}
@font-face {
   font-family: kiaFont;
   src: url(./assets/fonts/KiaSignatureBold.woff2);
   font-weight: bold;
}

.blurred-bg {
 background-image: url(./assets/hero-image-new.jpg);
 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover ;
    width: 100%;
    height: 100%;
    position: absolute;
     filter: blur(19px) ;
     z-index: -2;
     zoom: 195%;
    overflow: hidden;
}
body {
   
    background-size: cover;
    font-family: kiaFont;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    background-color: #265779;
}
.back-to-kia {
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    text-decoration: none;
}
header {
    background-color: white;
    display: flex;
    align-items: center;
    padding-right: 45vw;
    padding-left: 2%;
    justify-content: space-between;
    a {
         color: black;
         text-decoration: none;
    }
}
main {
    position: relative;
    display: grid;
    place-items: center;
    flex-grow: 1;
    padding: 15rem 0;
}
section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1000px;
    background-color: var(--color-accent);
    text-align: center;
    img {
        object-fit: cover;
        object-position: center 80%;
        aspect-ratio:  16 / 6;
    }
}
.box-text {
    color: white;
    padding: 3vw 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    h1{
        text-transform: capitalize;
    }
    h3 {
        font-weight: lighter;
    }
    .button-list {
        display: flex;
        gap: 1rem;
        justify-content: center;
    }
    button {
        font-weight: 500;
        border-radius: 0;
        border: white solid 1px;
        padding: 0.8rem 1.5rem;
        color: var(--color-accent);
        cursor: pointer;
        transition: all 0.2s;
    }

    button:hover {
        background: transparent;
        color: white;
    }
    
    .booking-button {
        background: transparent;
        color: white;
        border: white 1px solid;
    }
    .booking-button:hover {
        background-color: white;
        color: var(--color-accent);
    }
}

footer {
    background-color: var(--color-accent);
    color: white;
    padding: 1.5rem 3rem;
    
    hr {
        width: 100vw;
        margin-left:-3rem
        /* overflow: visible; */
    }
}
.kia-sig {
    max-width: 300px;
}
.kia-and-socials {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 3rem 0;
}
.socials {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.back-and-privacy {
    display: flex;
    justify-content: space-between;
    padding: 2rem 0 ;
}
.link-to-privacy {
    font-size: x-small;
    color: rgb(173, 173, 173);
    a {
      color: rgb(173, 173, 173);
    }
}
.fusion-watermark {
    max-width: fit-content;
    position:fixed;
    right:0;
    bottom:0;
    opacity: 0.5; 
}
@media screen and (max-width: 600px) {
    header {
        a {
            display: none;
        }
        justify-content: center;
        padding-right: 0;
    }
}