@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');


.contact-top-container {
    position: relative;
    height: 100vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background-repeat: no-repeat;
    background-image: url('/images/kuring-gai-grasslands-2.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}


.text-overlay-c {
    max-width: 90%;
    transform: translateY(-100%);
}

.text-overlay-c h1 {
    font-size: 5rem;
    font-weight: 500;
    color: var(--white);
    z-index: 1;
    font-family: var(--font-family);
}

.fade-element {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
  
.fade-in {
    opacity: 1;
}




.main-content {
    background: var(--maroon);
}




/* CONTACT OPTIONS START */

.options-container {
    background-color: var(--maroon);
    border-bottom: 1px solid var(--silver);
}

.options-title {
    color: var(--silver);
    font-family: var(--font-family);
    margin: 0 0 2% 0;
    padding: 2% 0 0 0;
    text-align: center;
    font-size: 5rem;
    font-weight: bolder;
}

.options {
    display: grid;
    gap: 1rem;
    margin: 0 1rem 2rem 1rem;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: 1.5rem;
    height: 80vh;
}

.option-warranty,
.option-purchasing,
.option-returns,
.option-general {
    opacity: 0;
}

.in-view {
    opacity: 1;
    display: flex;
    height: 80vh;
    border-radius: 8px;
    transition: 0.3s ease-out;
    background-color:#cfcfcf;
    justify-content: center;
}

@media only screen and (max-width: 900px) {
    .options {
        grid-template-rows: repeat(5, 1fr) !important;
    }
    .option-warranty {
        grid-row: 1;
        grid-column-start: 1;
        grid-column-end: 4;
    }
    .option-purchasing {
        grid-row: 2;
        grid-column-start: 1;
        grid-column-end: 4;
    }
    .option-returns {
        grid-row: 3;
        grid-column-start: 1;
        grid-column-end: 4;
    }
    .option-general {
        grid-row: 4;
        grid-column-start: 1;
        grid-column-end: 4;
    }
}

/* .option-warranty {
    transition: 0.3s ease-out;
    background-color:#cfcfcf;
    justify-content: center;
} */

.warranty-card {
    position: relative;
    width: 100%;
}

.warranty-card-image {
    background-image: url(/images/warranty-image.jpg);
    height: 50%;
    margin-bottom: 2%;
    background-size: cover;
    border-radius: 8px 8px 0 0;
}

.warranty-card h2 {
    padding: 0.5%;
    text-align: center;
}

.warranty-card p {
    padding: 4% 2%;
    text-align: center;
    max-height:200px;
    overflow: scroll;
    font-size: 1.2rem;
}


/* .option-purchasing {
    transition: 0.3s ease-out;
    background-color:#cfcfcf;
    display: flex;
    justify-content: center;
} */

.purchasing-card {
    position: relative;
    width: 100%;
}

.purchasing-card-image {
    background-image: url(/images/purchasing-image.jpg);
    height: 50%;
    margin-bottom: 2%;
    background-size: cover;
    border-radius: 8px 8px 0 0;
}

.purchasing-card h2 {
    padding: 0.5%;
    text-align: center;
}

.purchasing-card p {
    padding: 4% 2%;
    text-align: center;
    max-height: 200px;
    overflow: scroll;
    font-size: 1.2rem;
}



/* .option-returns {
    transition: 0.3s ease-out;
    background-color:#cfcfcf;
    display: flex;
    justify-content: center;
} */

.returns-card {
    position: relative;
    width: 100%;
}

.returns-card-image {
    background-image: url(images/returns-image.jpg);
    height: 50%;
    margin-bottom: 2%;
    background-size: cover;
    border-radius: 8px 8px 0 0;
}

.returns-card h2 {
    padding: 0.5%;
    text-align: center;
}

.returns-card p {
    padding: 4% 2%;
    text-align: center;
    max-height: 200px;
    overflow: scroll;
    font-size: 1.2rem;
}


/* .option-general {
    transition: 0.3s ease-out;
    background-color:#cfcfcf;
    display: flex;
    justify-content: center;
} */

.general-card {
    position: relative;
    width: 100%;
}

.general-card-image {
    background-image: url(/images/general-image.jpg);
    height: 50%;
    margin-bottom: 2%;
    background-size: cover;
    border-radius: 8px 8px 0 0;
}

.general-card h2 {
    padding: 0.5%;
    text-align: center;
    font-size: 25px;
}

.general-card p {
    padding: 4% 2%;
    text-align: center;
    max-height: 200px;
    overflow: scroll;
    font-size: 1.2rem;
}

/* .places-card a {
    display: block;
    background-color:#304055;
    color:#eec485;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    padding: 2% 5%;
    margin: 2% 5%;
    border-radius: 5px;
}

.places-card a:hover {
    background-color:#445775;
} */

.option-warranty:hover,
.option-purchasing:hover,
.option-returns:hover,
.option-general:hover {
    box-shadow: 5px 5px 40px #232323;
}


.warranty-card p::-webkit-scrollbar,
.purchasing-card p::-webkit-scrollbar,
.returns-card p::-webkit-scrollbar,
.general-card p::-webkit-scrollbar {
    display: none;
}




.contact-form {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    background: var(--maroon);
    border-bottom: 1px solid var(--silver);
}

.info-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.info-left h3 {
    color: var(--silver);
    font-family: var(--font-family);
    font-size: 3rem;
    font-weight: 500;
    margin-bottom: 0.1rem;
}

.info-left p {
    color: var(--silver);
    font-family: var(--font-family);
    font-size: 1.4rem;
    font-weight: 300;
    margin: 0;
    text-align: center;
    padding: 5% 2% 0 2%;
}

.form-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}


label {
    color: var(--white);
    font-family: var(--font-family);
    font-size: 1.1rem;
    font-weight: 300;
}

#name {
    width: 100%;
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: 5px;
    border: 1px solid var(--silver);
    font-family: var(--font-family);
}

#email {
    width: 100%;
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: 5px;
    border: 1px solid var(--silver);
    font-family: var(--font-family);
}

#subject {
    width: 100%;
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: 5px;
    border: 1px solid var(--silver);
    font-family: var(--font-family);

}

#message {
    width: 100%;
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: 5px;
    border: 1px solid var(--silver);
    resize: none;
    height: 210px;
    font-family: var(--font-family);
}

#submit {
    width: 10%;
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: 5px;
    border: 1px solid var(--silver);
    background: var(--silver);
    color: var(--maroon);
    font-family: var(--font-family);
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s ease;
}

#submit:hover {
    background: var(--rosegold);
    color: var(--silver);
    border: 1px solid var(--rosegold);
    transition: 0.3s ease;
}