/*  */
.h1 {
    z-index: 99;
}

:root {
    --pg-clr1: black;
    --pg-clr2: white;
    /* --pg-clr3: #1e1e1e; */
    --pg-clr3: #000b22;
    --pg-clr4: #14df7d;
    --pg-clr5: #1abc9c;
    --pg-clr6: #16a085;
    --pg-clr7: #95a5a6;
    --pg-clr8: #ecf0f1;
}

/*  */
.s1 {
    color: var(--pg-clr1);
    background-color: var(--pg-clr3);
    padding: 3rem 0;
}

.s1-r1 {
    width: 90%;
    max-width: 80rem;
    margin-inline: auto;
}

.s1-r1-b1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.s1-r1-b1-c1--img {
    /* justify-self: center; */
    max-width: 100%;
    height: auto;
}

.s1-r1-b1-c1--p {
    color: var(--pg-clr4);
    font-size: 1.5rem;
    text-transform: capitalize;
}

.s1-r1-b1-c1--h1 {
    font-size: 3rem;
    font-family: Arial, sans-serif;
    color: var(--pg-clr2);
    letter-spacing: .5px;
    line-height: 1em;
    padding-bottom: 1rem;
    text-transform: capitalize;
}

.s1-r1-b2 {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 90%;
    padding-top: 2rem;
}

.s1-r1-b2-c1--div {
    justify-self: right;
    border-top: 17px solid var(--pg-clr4);
    width: 50px;
}

.s1-1 {
    background-color: var(--pg-clr3);
    padding-bottom: 3rem;
    clip-path: polygon(50% 100%, 0% 0%, 100% 0);
    margin-bottom: 2rem;
}

@media (max-width: 50rem) {
    .s1-r1-b1-c1--img {
        justify-self: center;
    }

    .s1-r1-b1-c1--p {
        font-size: 1rem;
        justify-self: center;
    }

    .s1-r1-b1-c1--h1 {
        font-size: 2rem;
        justify-self: center;
    }
}

/*  */

/*  */

.s2 {
    margin-top: 5rem;
    margin-bottom: 3rem;
}

.s2-r1 {
    width: 90%;
    max-width: 80rem;
    margin-inline: auto;
}

.s2-r1-b1-c1--p {
    color: var(--pg-clr3);
    font-size: 2.5rem;
    text-align: center;
}

.s2-r1-b1-c2--p {
    font-size: 1.4rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--pg-clr7);
    text-align: center;
    margin-top: 1rem;
}

.s2-r1-b1-c1--div {
    width: 15%;
    border-top: 2px solid var(--pg-clr6);

    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-inline: auto;
}

/*  */

.s2-r1-b2 {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    justify-content: center;
    gap: 3rem;
    margin: 3rem 0;
}

.s2-r1-b2-c1--p {
    color: var(--pg-clr3);
    /* font-weight: 700; */
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.s2-r1-b2-c1--bi {
    font-size: 1rem;
    margin-right: 1rem;
    color: var(--pg-clr5);
}

@media (max-width: 50rem) {

    .s2-r1-b1-c1--p {
        font-size: 1.5rem;
    }

    .s2-r1-b1-c2--p {
        font-size: 1.2rem;
    }

    .s2-r1-b2 {
        grid-template-columns: max-content;
        gap: 1rem;
        margin: 2rem 0;
    }
}

/* * */
#contactform {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "a b c"
        "aa bb cc"
        "d d d"
        "dd dd dd"
        "e e e"
        "f f f"
        "ff ff ff"
        "g g g";
    gap: 1rem;

    margin-top: 5rem;
    margin-bottom: 5rem;
    padding: 2rem 2rem;
    border: 1px solid var(--pg-clr5);
}

#name {
    width: 100%;
    grid-area: a;
}

#email {
    width: 100%;
    grid-area: b;
}

#phone {
    width: 100%;
    grid-area: c;
}

#error-name {
    width: 100%;
    grid-area: aa;
}

#error-mail {
    width: 100%;
    grid-area: bb;
}

#error-phone {
    width: 100%;
    grid-area: cc;
}

#message {
    width: 100%;
    grid-area: d;
}

#error-message {
    width: 100%;
    grid-area: dd;
}

#label-resultat {
    width: 50%;
    grid-area: e;
    justify-self: center;
    text-align: center;
    font-size: 0.9rem;
    color: var(--pg-clr3);

    margin-top: 2rem;
    letter-spacing: 0.5px;
}

#resultat {
    width: 50%;
    grid-area: f;
    justify-self: center;
    text-align: center;
}

#error-resultat {
    width: 50%;
    grid-area: ff;
    justify-self: center;
    text-align: center;
}

#contactform .btn {
    font-size: 0.9rem;
    grid-area: g;
    justify-self: center;
    background: var(--pg-clr5);
    color: var(--pg-clr2);
    padding: 0.8rem 1.2rem;
    margin: 1rem 0;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s ease;
}

#contactform .btn:hover {
    background: var(--pg-clr6);
    cursor: pointer;
}

.form-control {
    color: var(--pg-clr3);
    border: 2px solid var(--pg-clr8);
    border-radius: 6px;
    transition: border .25s linear, color .25s linear, background-color .25s linear;
    padding: 0.5rem;
    font-size: 1rem;
    /* outline: none; */
}

.form-control:focus {
    border-color: var(--pg-clr5);
}


.form-control::placeholder {
    color: var(--pg-clr3);
    opacity: 0.5;
}

@media (max-width:50rem) {

    .s1-r1-b1-h2 {
        font-size: 1.5rem;
    }

    .s1-r1-b1-p {
        font-size: 1.2rem;
    }

    #contactform {
        grid-template-columns: 1fr;
        grid-template-areas: "a"
            "aa"
            "b"
            "bb"
            "c"
            "cc"
            "d"
            "dd"
            "e"
            "f"
            "ff"
            "g";
    }
}


.error {
    color: red;
}

#success {
    background: aquamarine;
    padding: 1rem;
    border: 0;
}

#sent {
    font-size: 2rem;
    padding: 0.5rem;
}

#thanks {
    color: orangered;
    text-transform: capitalize;
}

#errorsent {
    /* display: block; */
    background: #FBE3E4;
    padding: 1rem;
    color: #8a1f11;
    border: 1px solid #FBC2C4;
    border-radius: 3px;

    /* text-align: center; */
}

/* end contact form */
/* * */

.s3-r1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 5rem;
}

@media (max-width:50rem) {
    .s3-r1 {
        grid-template-columns: 1fr;
    }
}

/*  */