/* ---- Fonts ---- */

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_thin-webfont.woff) format(woff);
    src: url(fonts/gelion_thin-webfont.woff2) format(woff2);
    font-weight: 100;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_light-webfont.woff) format(woff);
    src: url(fonts/gelion_light-webfont.woff2) format(woff2);
    font-weight: 300;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_regular-webfont.woff) format(woff);
    src: url(fonts/gelion_regular-webfont.woff2) format(woff2);
    font-weight: 400;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_medium-webfont.woff) format(woff);
    src: url(fonts/gelion_medium-webfont.woff2) format(woff2);
    font-weight: 500;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_semibold-webfont.woff) format(woff);
    src: url(fonts/gelion_semibold-webfont.woff2) format(woff2);
    font-weight: 600;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_bold-webfont.woff) format(woff);
    src: url(fonts/gelion_bold-webfont.woff2) format(woff2);
    font-weight: 700;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_black-webfont.woff) format(woff);
    src: url(fonts/gelion_black-webfont.woff2) format(woff2);
    font-weight: 900;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/poppins-regular-webfont.woff) format(woff);
    src: url(fonts/poppins-regular-webfont.woff2) format(woff2);
    font-weight: 400;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/poppins-medium-webfont.woff) format(woff);
    src: url(fonts/poppins-medium-webfont.woff2) format(woff2);
    font-weight: 500;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/poppins-semibolditalic-webfont.woff) format(woff);
    src: url(fonts/poppins-semibolditalic-webfont.woff2) format(woff2);
    font-weight: 600;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/poppins-bold-webfont.woff) format(woff);
    src: url(fonts/poppins-bold-webfont.woff2) format(woff2);
    font-weight: 700;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/poppins-extrabold-webfont.woff) format(woff);
    src: url(fonts/poppins-extrabold-webfont.woff2) format(woff2);
    font-weight: 800;
}

/* ---- Fonts ---- */

/* ---- Pre-requisites ---- */

html {
    font-size: 62.5%;
    /*This changes the base rem size (i.e., 1rem = 16px) ;
    62.5% of 16px = 10px;
    Thus the new base rem size is 10px (i.e., now 1rem = 10px)*/
}

/* <==== Stylesheet ====> */

:root {

    /* <---- Colors ----> */
    --primary-color: #;
    --secondary-color: #442218;
    --white-color: #fff;
    --dark-color: #20221e;
    --footer: #58595b;
    --text: #58595b;
    --section-bg: #c7ddeb20;
    --bg1: #f4f5f9;
    --testimonial-bg: #EEECDF;
    --testimonial-box: #FDCC27;

    /* ---- CTA button ---- */
    --cta: #dd0000;

    /* ---- Nav Colors ---- */
    --nav-content: #231f20;
    --nav-hover: #f0551f;

    /* <---- Font size ----> */
    --font-small: 1.8rem;
    --font-medium: 2rem;
    --font-large: 2.4rem;
    --font-xlarge: 3.2rem;
    --font-xxlarge: 4.2rem;
    --font-title: 5rem;
    --font-button: 1.8rem;
    --hero-large: 5rem;
    --hero-medium: 4.4rem;
    --hero-small: 4rem;
    --hero-xsmall: 2.4rem;
    --hero-content: 2rem;

    /* <---- Fonts ----> */
    --font: 'Gelion', sans-serif;
    --secondary-font: 'Poppins', sans-serif;

    /* <---- Gap ----> */
    --marquee-gap: 1rem;
}

/* <==== Stylesheet close ====> */


/* <======== Pageheader ========> */

.pageheader {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: var(--font);
    font-size: var(--font-title);
    color: var(--white-color);
}

.page-title {
    position: relative;
    width: 100%;
    height: auto;
    padding: 8.4rem 0;
    background-position: center;
    background-size: cover;
}

/* <======== Pageheader close ========> */

/* <======== Contact form ========> */

.contact-us {
    display: flex;
    width: 100%;
}

.contact-us .container {
    width: 100%;
    margin: 4rem 20rem;
    gap: 4rem;
}

.contact-us .image {
    width: 50%;
    object-position: center;
    justify-content: center;
}

.contact-us .image img {
    width: 80%;
    object-fit: contain;
    align-items: center;
}

.contact-form {
    display: flex;
    flex-direction: column;
    font-size: var(--font-medium);
    font-weight: 500;
    color: var(--dark-color);
    gap: 4rem;
}

form {
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
    font-size: var(--font-small);
    font-weight: 400;
    gap: 1.2rem;
}

label {
    display: flex;
    font-weight: 400;
    padding-bottom: 0.4rem;
}

input {
    width: 100%;
    padding: 1rem;
    border-radius: 1.2rem;
    border-color: var(--dark-color);
    font-size: var(--font-small);
}

textarea {
    width: 100%;
    height: 8rem;
    padding: 1rem;
    border-radius: 1.2rem;
    font-size: var(--font-small);
    border-color: var(--dark-color);
}

input::placeholder {
    font-family: 'Gelion', sans-serif;
    /* Change font family */
    opacity: 0.6;
    /* Ensure full opacity, as some browsers default to lower opacity */
}

textarea::placeholder {
    font-family: 'Gelion', sans-serif;
    /* Change font family */
    opacity: 0.6;
    /* Ensure full opacity, as some browsers default to lower opacity */
}

form button {
    color: var(--dark-color);
    border-color: var(--dark-color);
    box-shadow: none;
}

/* <======== Contact form ========> */