/* ======================= Universal =======================*/
* {
    box-sizing: border-box;
}

image {
    max-inline-size: 100%;
    display: block;
}

@font-face {
    font-family: 'Montserrat';
    src: url(../fonts/Montserrat.ttf);
}

@font-face {
    font-family: 'Bellota';
    src: url(../fonts/Bellota-BoldItalic.ttf);
}

@font-face {
    font-family: 'Inter';
    src: url(../fonts/Inter.ttf);
}




/* ======================= Element Styling ======================= */

h1 {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 3rem;
    color: #ECF9F2;
}

p {
    font-size: 1.1rem;
    line-height: 1.5;
    font-family: Inter;
    color: #ECF9F2;
}




/*  ======================= Classes - General =======================*/

/* ---- Headings ---- */
.h1-italics-unique-font {
    font-family: Bellota;
}

/* ------------------ */


/* ---- Backgrounds & Images ---- */

.html-background {
    background-color: #141615;
}

.background-element {
    background: radial-gradient(
    400px 300px at 78% center,
    #343864, #292D4C, #1B1E2F, #0D1117
  );
    background-repeat: no-repeat;
    background-size: cover;
}



/* ---- Layout ---- */

.wrapper {
    max-inline-size: 1200px;
    margin-inline: auto;
}

.two-column-grid {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr 1fr;
}





/* ---- Buttons ---- */
.button-default-style {
    font-size: 1.2rem;
    color: #ECF9F2;
    background: transparent;

    padding-inline: 1.8em;
    padding-block: 1em;
}

.button-style-main {
    font-size: 1.2rem;

    background-color: rgba(0, 0, 0, 0);
    border: 1px, solid, #ECF9F2;
    border-style: solid;
    border-radius: .5rem;
    color: #ECF9F2;
    box-shadow: none;

    padding-inline: 1.8em;
    padding-block: 1em;
}


/* GRADIENT BORDERED BUTTON */
.button-gradient-border {
    position: relative;
    border: 2px solid transparent; /* Creates a transparent border around that box so the color is contained within (extends the box) */

    &::before {
    content: "";
    position: absolute;
    inset: 0;

    background:linear-gradient(90deg, #ECF9F2 15%, #54BF9A, #26BA87) border-box; /* Creates a background of a gradient up to the border box */
    border: inherit;
    border-radius: .4em;

    mask: 
        linear-gradient(white,white) padding-box,
        linear-gradient(white,white);
    mask-composite: exclude;
    }
}

.button-gradient-border:hover {

    &::before {
        content: "";
        background: linear-gradient(90deg, orange 5%, red) border-box; /* Creates a background of a gradient up to the border box */
    
        mask: 
            linear-gradient(white,white) padding-box,
            linear-gradient(white,white);
        mask-composite: exclude;
    }
}

/* .button-style-hero {
    position: relative;
    padding-inline: 1.8em;
    padding-block: 1em;

    font-size: 1.25rem;
    background-color: rgba(0, 0, 0, 0);
    color: #ECF9F2;
    border-style: none;
}

.button-style-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: .6rem; 
    padding: .1em; 
    background:linear-gradient(90deg, #ECF9F2 15%, #54BF9A, #26BA87); 
    mask: 
      linear-gradient(#000 0 0) content-box, 
      linear-gradient(#000 0 0);
    mask-composite: exclude; 
} */





/*  ======================= Classes - Location Specific: Index =======================*/

/* -------- Index, Hero ---------- */
.hero-image-divider {
    margin-block: auto;
}





/*  ======================= Classes - Location Specific: Placeholder Page =======================*/

/* -------- Placeholder Page, Main ---------- */
.placeholder-main-background {
    background: radial-gradient( 400px 300px at 78% center, #242625, #141615);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    min-height: 100vh;
}

.placeholder-content {
    padding-block-start: 7.5vh;
    margin-inline: auto;
    max-inline-size: 650px;
}

.placeholder-content h1{
    margin-block-start: 3.75rem;
    margin-block-end: .3rem;
    text-align: center;
}

.placeholder-content p {
    text-align: center;
}

.placeholder-content img {
    display: block;
    margin: auto;
}

/*  ======================= Placeholder Page Form =======================*/

.placeholder-form-gradient-border {

    position: relative;
    border: 3px solid transparent;
    border-radius: .5em;
    

    &::before {
        content: "";
        position: absolute;
        inset: 0;

        background: linear-gradient(90deg, #29344780 0%, #85CEB380 32%, #ECF9F280 50%, #85CEB380 68%, #29344780 100%) border-box;
        border: inherit;
        border-radius: inherit;

        mask: 
            linear-gradient(white,white) padding-box,
            linear-gradient(white,white);
        mask-composite: exclude;

        pointer-events: none;
    }
}

.placeholder-form {
    max-inline-size: 800px;
    margin-inline: auto;
    margin-block-start: 5vh;
    margin-block-end: 8.33vh;

    padding-block-start: 20px;
    padding-block-end: 30px;
    padding-inline: 16px;

    background-color: #3F3F3F0D;
    backdrop-filter: blur(15.5px);
    
}

.placeholder-form ::placeholder {
    font-family: Inter;
    font-size: 1.18rem;
    color:#AFB6B2;
}

.placeholder-form h3 {
    font-size: 1.5rem;
    text-align: center;
    color: #63C3A1;
    font-family: Montserrat;

    margin-block-start: 0px;
    margin-block-end: 30px;
}

.placeholder-form-fields {
    font-family: Inter;
    font-size: 1.18rem;
    color: #ECF9F2;
    
    background-color: transparent;
    margin-block: 10px;
    margin-inline: 12px;
    padding-inline: .55em;
    padding-block: .4em;

    border-radius: 6px;
    border: 2px solid #293741;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    resize: none;
}

.placeholder-form-fields:focus {
    border: 1px solid #63C3A1;
}

.placeholder-form-inputs-flex {
    display: flex;
    justify-content: space-between;
}

.placeholder-form-details {
    width: 30%;
}

.placeholder-form-comments {
    width: 100%;
    height: 200px;
}

.placeholder-form-submit {
    position: relative;
    margin-block-start: 20px;
    margin-inline: 12px;
    
    font-size: 1.18rem;
    background-color: #4A737333;
    color: #ECF9F2;
    
    border-radius: .3em;
    padding-inline: 1.7em;
    padding-block:.7em;

    border: none;
    outline: none;

    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.placeholder-form-submit:hover {
    background-color: #63C3A1;
}

.placeholder-form-cta p {
    user-select: none;

    position: relative;
    margin-inline-start: 48px;
    bottom: 55px;
    

    font-family: Inter;
    font-size: 1.18rem;
    color: #ECF9F2;
}