h3 {
    font-size: 1.7rem;
    text-align: center;
}

h1 {
    text-align: center;
    padding: 1rem;
    text-transform: uppercase;
    font-size: 3rem;
}

strong {
    color: #000;
}

body {
    overflow-x: hidden;
}


.container {
    height: 100vh;
    background-image: url("../pictures/school-building111sky222.jpg");
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heading {
    padding: 0.5rem;
    font-size: 4rem;
}

.start {
    padding: 1rem;
    font-size: 2.3rem;
    text-align: center;
}

.welcome {
    background-color: rgb(255, 255, 255, 0.5);
    text-shadow: 2px 2px rgb(0, 0, 128);
    border-radius: 1rem;
    color: rgb(128, 0, 128);
}

.btn {
    border: none;
    cursor: pointer;
    /* background-color: black; */
    background-color: #1d1d36;
    color: #fff;
    margin-top: 0.9rem;
    height: 4em;
    width: 9.6em;
}

.btn:hover {
    transition: all 1s;
    transform: scale(1.2);
    color: #000;
    background-color: white;
    border-radius: 6px;
}

/* grid*/

.container-1 {
    /* position: relative; */
    /* margin: 0.313rem 0.313rem; */

    display: grid;
    /* grid-template-picture-rows: repeat(2, 1fr); */
    grid-template-columns: repeat(2, 1fr);
    /* width:100%; */
    height: fit-content;
}

.picture-element {
    /* aspect-ratio: 551 / 413.25; */
    aspect-ratio: 413.25 / 551;
    height: 50vh;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* width: inherit; */
}
/* .picture-row1{
    flex-basis: 40vw;
} */
/* .grid-img { */
/* background-image: url("../class-group.jpg"); */
/* background-repeat: no-repeat; */
/* background-size: 650px; */
/* grid-column-start: 1; */
/* grid-column-end: 3; */
/* grid-picture-row: 1; */
/* } */
.grid-img {
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex: 50%; */

}

.grid-img img {
    flex-grow: 1;
    /* width: inherit; */
}

.grid-txt {
    padding: 0.938rem;
    /* align-items: center; */
    /* height: 65vh; */
    min-height: 50vh;
    text-align: center;
    color: #fff;
    background-color: #1d1d36;
    /* grid-column-start: 3; */
    /* grid-column-end: 5; */
    /* grid-picture-row: 1; */
}


.element {
    margin-top: 1rem;
}

.element-grid {
    display: block;
}

/* .grid-txt2 { */
/* padding: 0.375rem; */
/* text-align: center; */
/* align-items: center; */
/* height: 65vh; */
/* color: #fff; */
/* background-color: #1d1d36; */
/* grid-column-start: 1; */
/* grid-column-end: 3; */
/* grid-picture-row: 2; */
/* } */

/* .grid-img2 { */
/* background-image: url("grp.jpg");
    background-repeat: no-repeat;
    background-size: 650px;
    grid-column-start: 3;
    grid-column-end: 5; */
/* grid-picture-row: 2; */
/* } */

.list {
    /* text-align: left; */
    text-align: justify;
    padding-left: 0.313rem;
}

/* grid end */

.para {
    /* margin: 3px 12rem; */
    width: 80vw;
    text-align: center;
    font-size: 1.3rem;
    padding: 15px;
}

.safety-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: rgb(252 186 99);
    /* align-items: center; */
}
.picture-row img{
    margin: 0.2rem;
}

/* .images {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 200px;
    text-align: justify;
    position: relative;
} */

/* .para-2 {
    padding: 76px;
    align-items: center;
    height: 76vh;
    color: white;
    background-color: #1d1d36;
} */

/* .para-3 {
    padding: 76px;
    align-items: center;
    height: 76vh;
    color: white;
    background-color: #1d1d36;
} */

/* img {
    position: relative;
    top: 5px;
} */

.span {
    font-size: 1.9rem;
    background-color: rgb(181, 171, 153);
}

.culture {
    color: #fff;
    /* background-color: #5c5adb; */
}

.picture-row {
    margin: 0.5rem;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

#btn-1 {
    border: none;
    margin: 0 auto;
    padding: 0.82rem;
    background-color: #5c5adb;
    color: #fff;
}

#btn-1:hover {
    border-radius: 4px;
    cursor: pointer;
    transition: all 1s ease-in-out;
    transform: scale(1.1);
    background-color: rgb(225, 225, 225);
    color: black;

}

#btn-2 {
    border: none;
    margin: 0 auto;
    padding: 0.82rem;
    background-color: #5c5adb;
    color: #fff;
}

#btn-2:hover {
    color: black;
    border-radius: 4px;
    cursor: pointer;
    transition: all 1s ease-in-out;
    transform: scale(1.1);
    background-color: rgb(225, 225, 225);

}

.signup-para {
    text-align: center;
    font-size: 1.9rem;
    padding: 15px;
}

.signup-box {
    display: grid;
    grid-template-columns: 5fr 1fr;
    height: 2.9vh;
    margin: 0.2rem 1rem 3rem 1rem;
}

input[type=text] {
    padding: 1rem;
    border: none;
    background: #f1f1f1;
}

#btn-sign {
    border: none;
    padding: 0.7rem;
    color: #fff;
    background-color: #2d2d2f;
}

#btn-sign:hover {
    border-radius: 3px;
    cursor: pointer;
    background-color: #fff;
    background-image: linear-gradient(to right, rgb(235, 166, 230), #76e0cc);
}

.mail {
    margin-left: 3rem;
}



@media screen and (max-width: 600px) {
    .container-1 {
        display: flex;
        flex-wrap: wrap;
    }

    .picture-element {
        width: 100vw;
    }

    .order-1 {
        order: 1;
    }

    .order-2 {
        order: 2;
    }

    .order-3 {
        order: 3;
    }


    .order-4 {
        order: 4;
    }
}