/*GRID*/

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
}
.cell {
    height: 100px;
}

/* default - small devices */

[class*="col"] {
    grid-column-end: span 12;
}

/* below 600px typically tablet*/

@media only screen and (max-width: 600px) {
    .sm1 {
        grid-column-end: span 12;
    }
    .sm2 {
        grid-column-end: span 6;
    }
    .sm3 {
        grid-column-end: span 4;
    }
    .sm4 {
        grid-column-end: span 3;
    }
    .sm6 {
        grid-column-end: span 2;
    }
    .sm12 {
        grid-column-end: span 1;
    }
}

/* above 601px typically tablet*/

@media only screen and (min-width: 601px) {
    .md1 {
        grid-column-end: span 12;
    }
    .md2 {
        grid-column-end: span 6;
    }
    .md3 {
        grid-column-end: span 4;
    }
    .md4 {
        grid-column-end: span 3;
    }
    .md6 {
        grid-column-end: span 2;
    }
    .md12 {
        grid-column-end: span 1;
    }
}

/* above 1025px typically desktop*/

@media only screen and (min-width: 1025px) {
    .col1 {
        grid-column-end: span 12;
    }
    .col2 {
        grid-column-start: 1;
        grid-column-end: span 6;
    }
    .col3 {
        grid-column-start: 7;
        grid-column-end: span 5;
    }
    .col4 {
        grid-column-end: span 3;
    }
    .col6 {
        grid-column-end: span 2;
    }
    .col12 {
        grid-column-end: span 1;
    }
}

/*GRID*/

/*banner*/

.banner {
    grid-column: span 12;
    border: 2px solid #7b271e;
    background-color: #a5927e;
    padding-top: 2%;
    padding-left: 2%;

    height: 100%;
}

.bannerimg {
    grid-column-start: 1;
    grid-column-end: 4;
}

.bannerimg2 {
    grid-column-start: 6;
    align-content: center;
}

.bannertext {
    grid-column-start: 7;
    grid-column-end: 9;

    font-family: Hastegi;
    font-size: 7vw;
    color: #ffffff;
    font-weight: 500;
    border-radius: 10px;
    background-color: #a5927e;
    margin-top: 30%;
    margin-bottom: 30%;
    padding-left: 20%;
    padding-right: 20%;
    height: 55%;
    width: 100%;
    align-content: center;
    border: 3px solid #000000;
}

.bannertext:hover {
    grid-column-start: 7;
    grid-column-end: 9;

    font-family: Hastegi;
    font-size: 5vw;
    color: #ffffff;
    font-weight: 999;
    border-radius: 10px;
    background-color: #a5927e;
    margin-top: 30%;
    margin-bottom: 30%;
    padding-left: 10%;
    padding-right: 10%;
    height: 35%;
    width: 100%;
    text-align: center;
    align-content: center;
    border: 10px solid #7b271e;
    transition-duration: 0.2s;
}

/*banner*/

/*Homebx1*/

.bx1temp {
    grid-column-start: 1;
    grid-column-end: 7;
    height: 100%;
}

.bx1 {
    grid-column-start: 1;
    grid-column-end: 12;
    border: 2px solid #7b271e;
    background-color: #a5927e;

    font-family: Hastegi;
    font-size: 4vw;
    color: #ffffff;
    text-align: center;

    height: 95%;
    margin-top: 10%;
    margin-bottom: 10%;
    padding-top: 10%;
    padding-left: 5%;
    padding-bottom: 10%;
    padding-right: 5%;
}
.bx1a {
    grid-column-start: 1;
    grid-column-end: 12;
    border: 2px solid #7b271e;
    background-color: #a5927e;

    font-family: Hastegi;
    font-size: 4vw;
    color: #ffffff;
    text-align: center;

    height: 50%;
    margin-top: 25%;
    margin-bottom: 10%;
    padding-top: 10%;
    padding-left: 5%;
    padding-bottom: 10%;
    padding-right: 5%;
}

.bx1txt {
    font-family: Hastegi;
    font-size: 7vw;
    color: #ffffff;
    text-align: center;
}

.bx2 {
    grid-column-start: 7;
    grid-column-end: 12;
    border: 2px solid #7b271e;
    background-color: #a5927e;

    font-family: Hastegi;
    font-size: 6.5vw;
    color: #ffffff;
    text-align: center;

    height: 85%;
    width: 110%;
    margin-top: 12%;
    padding-top: 10%;
    padding-left: 5%;
    padding-bottom: 5%;
    padding-right: 5%;
}

.bx2img {
    padding-top: 10%;
    padding-left: 5%;

    padding-right: 5%;
}

/*Homebx1*/

/*About*/

.abtbx {
    grid-column-start: 1;
    grid-column-end: 13;
    margin-top: 5%;
    height: 100%;

    align-content: center;
    padding: 2%;
    border: 2px solid #7b271e;
    background-color: #a5927e;
}

.masterbar {
    grid-column-start: 1;
    grid-column-end: 13;
    margin-top: 10%;
    height: 50%;

    align-content: center;
    padding: 2%;
    border: 2px solid #7b271e;
    background-color: #CCC5B5;
}

.abtimg {
    grid-column-start: 1;
    grid-column-end: 5;
}

.abttxtbx {
    grid-column-start: 2;
    grid-column-end: 12;
    font-family: Hastegi;
    font-size: 12.5vw;
    color: #ffffff;
    text-align: center;
}

.abttxtbx1 {
    grid-column-start: 2;
    grid-column-end: 12;
    font-family: Hastegi;
    font-size: 7.5vw;
    color: #ffffff;
    text-align: center;
}

.abttxtbx2 {
    grid-column-start: 2;
    grid-column-end: 12;
    font-family: Hastegi;
    font-size: 4.5vw;
    color: #ffffff;
    text-align: center;
}

.abttxtbx3 {
    grid-column-start: 2;
    grid-column-end: 12;
    font-family: Hastegi;
    font-size: 7.5vw;
    color: #ffffff;
    text-align: center;
}

.abttxtbox {
    grid-column-start: 5;
    grid-column-end: 13;
    font-family: Hastegi;
    font-size: 3vw;
    color: #ffffff;
    width: 100%;
    text-align: center;
    align-content: center;
    border: 2px solid #7b271e;
    padding-bottom: 10%;

}

.abtbttnbox {
    grid-column-start: 2;
    grid-column-end: 12;
    font-family: Hastegi;
    font-size: 3vw;
    color: #ffffff;
    width: 100%;
    text-align: center;
    align-content: center;
    border: 2px solid #7b271e;
    margin-top: 7.5%;
    padding-top: 5%;
    padding-bottom: 5%;
    height: 100%;
}

/*About*/

/*Menu*/

.Menubox {
    grid-column-start: 2;
    grid-column-end: 12;
    font-family: Hastegi;
    font-size: 3vw;
    color: #ffffff;
    width: 100%;
    text-align: center;
    align-content: center;
    border: 2px solid #7b271e;
   
    padding-bottom: 7.5%;
    height: 80%;
}

.Menutxt1 {
    grid-column-start: 1;
    grid-column-end: 6;
    font-family: Hastegi;
    font-size: 3.5vw;
    color: #ffffff;
    width: 100%;

    text-align: left;
    align-content: center;
    margin-top: 7.5%;

    padding-left: 5%;
    padding-bottom: 5%;
    line-height: 150%;
    height: 100%;
}
.Menutxt2 {
    grid-column-start: 7;
    grid-column-end: 12;
    font-family: Hastegi;
    font-size: 3.5vw;
    color: #ffffff;
    width: 100%;

    text-align: right;
    align-content: center;
    padding-left: 15%;
    margin-top: 7.5%;
    padding-bottom: 5%;
    line-height: 150%;
    height: 100%;
}
.Menubuttonbox {
    grid-column-start: 2;
    grid-column-end: 12;
    font-family: Hastegi;
    font-size: 3vw;
    color: #ffffff;
    width: 100%;
    text-align: center;
    align-content: center;
    border: 2px solid #7b271e;
     background-color: #CCC5B5;
    padding-bottom: 7.5%;
    margin-top: 5%;
    margin-bottom: 10%;
    height: 30%;
}

/*Menu*/

/*Review*/

.reviewtxt {
    grid-column-start: 2;
    grid-column-end: 12;
    font-family: Hastegi;
    font-size: 4.5vw;
    color: #ffffff;
    text-align: center;
}

.reviewtxt2 {
    grid-column-start: 2;
    grid-column-end: 12;
    font-family: Hastegi;
    font-size: 3vw;
    color: #ffffff;
    text-align: center;
}

/*Review*/

/*button*/

/*FONT*/
@font-face {
    font-family: Hastegi;
    src: url(Hastegi-yYBYe.otf);
}
/*FONT*/

/*button*/

.buttonmain {
    grid-column-start: 1;
    grid-column-end: 12;

    font-family: Hastegi;
    font-size: 4vw;
    color: #ffffff;

    border-radius: 10px;
    background-color: #453A39;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 5%;
    padding-top: 2.5%;
    height: 35%;
    width: 100%;
    text-align: center;

    border: 5px solid #7b271e;
}

.buttonmain2 {
    grid-column-start: 1;
    grid-column-end: 12;

    font-family: Hastegi;
    font-size: 4vw;
    color: #ffffff;

    border-radius: 10px;
    background-color: #453A39;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 5%;
    padding-top: 5%;
    height: 10%;
    width: 65%;
    text-align: center;

    border: 5px solid #7b271e;
}

.buttonmain3 {
    grid-column-start: 5;
    grid-column-end: 9;

    font-family: Hastegi;
    font-size: 4.5vw;
    color: #ffffff;

    border-radius: 10px;
    background-color: #453a39;
    margin-bottom: 10%;
    margin-top: 10%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 1%;
    padding-top: 2%;
    height: 20%;
    width: 100%;
    text-align: center;

    border: 2.5px solid #7b271e;
}

.buttonmain4 {
    grid-column-start: 1;
    grid-column-end: 5;

    font-family: Hastegi;
    font-size: 4vw;
    color: #ffffff;

    border-radius: 10px;
    background-color: #453a39;
    margin-top: 10%;
    margin-left: 10%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 10%;
    padding-top: 5%;
    height: 30%;
    width: 65%;
    text-align: center;

    border: 2.5px solid #7b271e;
}

.buttonmain5 {
    grid-column-start: 9;
    grid-column-end: 13;

    font-family: Hastegi;
    font-size: 4vw;
    color: #ffffff;

    border-radius: 10px;
    background-color: #453a39;
    margin-top: 10%;
    margin-left: 10%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 10%;
    padding-top: 5%;
    height: 30%;
    width: 65%;
    text-align: center;

    border: 2.5px solid #7b271e;
}

.buttonmain6 {
    grid-column-start: 1;
    grid-column-end: 5;

    font-family: Hastegi;
    font-size: 3vw;
    color: #ffffff;

    border-radius: 10px;
    background-color: #453a39;
    margin-top: 10%;
    margin-left: 10%;
    margin-bottom: 10%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;

    padding-top: 5%;
    height: 30%;
    width: 65%;
    text-align: center;
}

.buttonmain7 {
    grid-column-start: 5;
    grid-column-end: 9;

    font-family: Hastegi;
    font-size: 3vw;
    color: #ffffff;

    border-radius: 10px;
    background-color: #453a39;
    margin-top: 10%;
    margin-left: 10%;
    margin-bottom: 10%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;

    padding-top: 5%;
    height: 30%;
    width: 65%;
    text-align: center;
}

.buttonmain8 {
    grid-column-start: 9;
    grid-column-end: 13;

    font-family: Hastegi;
    font-size: 3vw;
    color: #ffffff;

    border-radius: 10px;
    background-color: #453a39;
    margin-top: 10%;
    margin-left: 10%;
    margin-bottom: 10%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 2.5%;

    padding-top: 5%;
    height: 30%;
    width: 65%;
    text-align: center;

    border: 2.5px solid #7b271e;
}