/* ====================
  home Styles
=======================*/
.wrapper_home {
    display: grid;
    /* grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto); */
    grid-template-columns: 30px 1fr 30px;
    height: 900px;
    min-width: 330px;
    /* height: 100vh;
    min-height: 500px;
    max-height: 1080px; */
    /* grid-template-rows: 30px 400px 100px 100px 30px; */
    grid-template-rows: 30px 4fr 1fr 30px;
    grid-template-areas:
        "tl_home    hd1_home  tr_home"
        "ldr_home   dr_home   rside_home"
        "lsub_home  sub_home  rside1_home"
        "bl_home    bt_home   br_home";
}

.dr_home h1 {
    color: white;
    font-size: 3.0rem;
}
.sub_home h2 {
    font-size: 2.0rem;
}

body {
    background: #a59779;
    font-family: 'Pathway Gothic One';
}
.wrapper_home {
    padding: 10px;
}
.tl_home {
    border-right: 1px solid #000;
    grid-area: tl_home;
}
.tr_home {
    grid-area: tr_home;
    border-left: 1px solid #000;
}
.hd1_home {
    grid-area: hd1_home;
}
.hd2_home {
    grid-area: hd2_home;
    border-left: 1px solid #000;
}
.ldr_home {
    grid-area: ldr_home;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
}
.dr_home {
    background:url(../img/1.jpeg);
    /* padding-top:100px; */
    background-size: auto;
    /* height: 80vh; You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */

    grid-area: dr_home;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;

    text-align: center;
    display:flex;
    align-items:center;
    justify-content:center;
}

.rside_home {
    grid-area: rside_home;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.rside1_home {
    grid-area: rside1_home;
    border-left: 1px solid #000;
    /* border-top: 1px solid #000; */
    /* border-bottom: 1px solid #000; */
}

.lsub_home {
    grid-area: lsub_home;
    border-right: 1px solid #000;
}
.sub_home {
    grid-area: sub_home;
    text-align: center;
}

.bl_home {
    grid-area: bl_home;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
}
.bt_home {
    grid-area: bt_home;
    border-top: 1px solid #000;
}
.br_home {
    grid-area: br_home;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
}

@media (min-width: 650px) {
    .wrapper_home {
        display: grid;
        /* grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(100px, auto); */
        grid-template-columns: 30px 4fr 3fr 30px;
        /* grid-template-rows: 30px 400px 100px 200px 30px; */
        grid-template-rows: 30px 4fr 1fr 1fr 30px;
        height: 900px;
        /* min-height: 500px; */
        max-width: 1500px;
        max-height: 1080px;
        grid-template-areas:
            "tl_home    hd1_home   hd2_home  tr_home"
            "ldr_home   dr_home   im_home  rside_home"
            "lsub_home  sub_home  im_home  rside_home"
            "lnada_home nada_home im_home  rside_home"
            "bl_home    bt_home   bt_home  br_home";
    }

    .dr_home {
        background: #a59779;
    }
    .dr_home h1 {
        color: black;
        font-size: 4.5rem;
    }
    .sub_home h2 {
        font-size: 2.5rem;
    }

    .rside2_home {
        grid-area: rside2_home;
        border-left: 0px solid #000;
        border-top: 0px solid #000;
        border-bottom: 0px solid #000;
    }

    .rside_home {
        border-bottom: 0px solid #000;
    } 

    .im_home {
        grid-area: im_home;
        /* border-bottom: 1px solid #000; */
        border-top: 1px solid #000;
        border-left: 1px solid #000;
    
    
        background:url(../img/1.jpeg);
        /* padding-top:100px; */
        background-size: auto;
        /* height: 80vh; You must set a specified height */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
    }

    .nada_home {
        grid-area: nada_home;
        border-top: 1px solid #000;
        /* border-bottom: 1px solid #000; */
    }
    .lnada_home {
        grid-area: lnada_home;
        border-top: 1px solid #000;
        /* border-bottom: 1px solid #000; */
        border-right: 1px solid #000;
    }
}

/* ====================
  service Styles
=======================*/
.wrapper_serv {
    display: grid;
    /* grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto); */
    grid-template-columns: 30px 1fr 30px;
    grid-template-rows: 30px 1fr 2fr 5fr 2fr 5fr 30px;
    /* min-height: 500px; */
    height: 2000px;
    min-width: 330px;
    grid-template-areas:
        "tl_serv    hd_serv    tr_serv"
        "tl2_serv   title_serv tr2_serv"
        "lim1_serv  im1_serv    rside1_serv"
        "lim1_serv  t1_serv    rside1_serv"
        "lim2_serv  im2_serv    rside2_serv"
        "lim2_serv  t2_serv    rside2_serv"
        "bl_serv    bt2_serv   br_serv";
}

body {
    background: #a59779;
    font-family: 'Pathway Gothic One';
}
.wrapper_serv {
    padding: 10px;
}

.tl_serv {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    grid-area: tl_serv;
}
.hd_serv {
    grid-area: hd_serv;
    border-bottom: 1px solid #000;
}
.tr_serv {
    grid-area: tr_serv;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
}

.tl2_serv {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    grid-area: tl2_serv;
}
.title_serv {
    grid-area: title_serv;
    border-bottom: 1px solid #000;

    text-align: center;
    display:flex;
    align-items:center;
    justify-content:center;
}
.tr2_serv {
    grid-area: tr2_serv;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
}


.lim1_serv {
    grid-area: lim1_serv;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}
.im1_serv {
    grid-area: im1_serv;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;

    background:url(../img/12.png);
    /* padding-top:100px; */
    background-size: auto;
    /* height: 80vh; You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}
.t1_serv {
    grid-area: t1_serv;
    border-bottom: 1px solid #000;
}
.rside1_serv {
    grid-area: rside1_serv;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
}

.lim2_serv {
    grid-area: lim2_serv;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}
.im2_serv {
    grid-area: im2_serv;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;

    background:url(../img/13.png);
    /* padding-top:100px; */
    background-size: auto;
    /* height: 80vh; You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}
.t2_serv {
    grid-area: t2_serv;
    border-bottom: 1px solid #000;
}
.rside2_serv {
    grid-area: rside2_serv;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
}

.bl_serv {
    grid-area: bl_serv;
    border-right: 1px solid #000;
}
.bt1_serv {
    grid-area: bt1_serv;
    border-right: 1px solid #000;
}
.bt2_serv {
    grid-area: bt2_serv;
}
.br_serv {
    grid-area: br_serv;
    border-left: 1px solid #000;
}
@media (min-width: 650px) {
    .wrapper_serv {
    display: grid;
    grid-template-columns: 30px 2fr 3fr 30px;
    grid-template-rows: 30px 1fr 3fr 3fr 30px;
    height: 1300px;
    max-width: 1500px;
    max-height: 1300px;
    grid-template-areas:
        "tl_serv    hd_serv    hd_serv    tr_serv"
        "tl2_serv   title_serv title_serv tr2_serv"
        "lim1_serv  im1_serv   t1_serv    rside1_serv"
        "lim2_serv  im2_serv   t2_serv    rside2_serv"
        "bl_serv    bt1_serv   bt2_serv   br_serv";
    }

    .dr_cont h1 {
        font-size: 4.5rem;
    }
    .sub_cont h2 {
        font-size: 3.5rem;
    }
    .dr_cont h1 {
        font-size: 3.0rem;
    }
    .sub_cont h2 {
        font-size: 2.0rem;
    }
}

/* ====================
  contact Styles
=======================*/
.wrapper_cont {
    display: grid;
    grid-template-columns: 30px 1fr 30px;
    grid-template-rows: 30px 2fr 2fr 1fr 1fr 30px;
    height: 900px;
    min-width: 330px;
    grid-template-areas:
        "tl_cont    hd2_cont  tr_cont"
        "ldr_cont   im_cont   rside_cont"
        "ldr_cont   dr_cont   rside_cont"
        "lsub_cont  sub_cont  rside_cont"
        "lnada_cont nada_cont rside_cont"
        "bl_cont    bt_cont   br_cont";
}


body {
    background: #a59779;
    font-family: 'Pathway Gothic One';
}
.wrapper_cont {
    padding: 10px;
}
.tl_cont {
    border-right: 1px solid #000;
    grid-area: tl_cont;
}
.tr_cont {
    grid-area: tr_cont;
    border-left: 1px solid #000;
}

.hd2_cont {
    grid-area: hd2_cont;
}
.ldr_cont {
    grid-area: ldr_cont;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
}
.dr_cont {
    grid-area: dr_cont;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;

    text-align: center;
    flex-direction: column;
    display:flex;
    align-items:center;
    justify-content:center;
}

.dr_cont h2 {
    font-size: 1.5rem;
}
.nada_cont h2 {
    font-size: 2.0rem;
}
.sub_cont h2 {
    font-size: 2.5rem;
}

.rside_cont {
    grid-area: rside_cont;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.lsub_cont {
    grid-area: lsub_cont;
    border-right: 1px solid #000;
}
.sub_cont {
    grid-area: sub_cont;
    text-align: center;
}
.nada_cont {
    grid-area: nada_cont;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    display:flex;
    align-items:center;
    justify-content:center;
}

.lnada_cont {
    grid-area: lnada_cont;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}
.bl_cont {
    grid-area: bl_cont;
    border-right: 1px solid #000;
}

.br_cont {
    grid-area: br_cont;
    border-left: 1px solid #000;
}

.im_cont {
        grid-area: im_cont;
        border-bottom: 1px solid #000;
        border-top: 1px solid #000;
        border-right: 1px solid #000;

        background:url(../img/4.webp);
        /* padding-top:100px; */
        background-size: auto;
        /* height: 80vh; You must set a specified height */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
    }

@media (min-width: 650px) {
    .wrapper_cont {
        display: grid;
        grid-template-columns: 30px 2fr 3fr 30px;
        /* grid-template-rows: 30px 400px 100px 200px 30px; */
        grid-template-rows: 30px 4fr 1fr 2fr 30px;
        /* height: 100vh; */
        /* height: 800px; */
        height: 900px;
        max-width: 1500px;
        max-height: 1080px;
        grid-template-areas:
            "tl_cont    hd1_cont   hd2_cont  tr_cont"
            "ldr_cont   im_cont    dr_cont   rside_cont"
            "lsub_cont  im_cont    sub_cont  rside_cont"
            "lnada_cont im_cont    nada_cont rside_cont"
            "bl_cont    bt_cont    bt_cont   br_cont";
    }
    .dr_cont h2 {
        font-size: 2.5rem;
    }
    .nada_cont h2 {
        font-size: 3.0rem;
    }
    .sub_cont h2 {
        font-size: 3.5rem;
    }

    .hd1_cont {
        grid-area: hd1_cont;
        border-right: 1px solid #000;
    }
    .bt_cont {
        grid-area: bt_cont;
    }
    .dr_cont {
        text-align: left;
        flex-direction: column;
        display:flex;
        align-items:bottom;
        justify-content:flex-end;
    }
}