html{
    scroll-behavior: smooth;
    
}

body{
    margin: 0px;
}

img{
    display: block;
}

.contrainer{
    display: grid;
    grid-template-areas: "head head"
                         "menu content"
                         "foot foot";
    grid-template-columns: 25% 75%;
}



.head{
    grid-area: head;
    /* background-color: rgb(198, 228, 255); */

}

.menu{
    display: block;
    margin: 0px;
    grid-area: menu;
    /* background-color: rgb(184, 255, 211); */
    background-image: linear-gradient(to right,#f7ddb8,#fff);
    /* background-image: url(pic/b-menu.jpg); */
    background-size: cover;
    background-repeat: no-repeat ; 
}

.content{
    grid-area: content;
    background-image: linear-gradient(to right,#fff,#f7ddb8);
    /* background-color: rgb(255, 211, 238); */
   
}

.foot{
    grid-area: foot;
    background-color: #583218;
      
}

.head1{
width: 100%;
}

.text-footer1,.text-footer2{
    text-align: center;
    font-size: 14px;
    color: rgb(252, 250, 250);
}

.textp1,.textp2,.textp3{
    margin: 0 10%;
}

.textp2{
    font-weight: bold;
    font-size: 16px;
}

.textp3{
    font-weight: bold;
    font-size: 16px;
    color: blue;
}

.text-space{
    margin-bottom: 5px;
}

.textp2{
    background-image:linear-gradient(rgb(98, 255, 98),rgb(149, 255, 149)) ;
    border-radius: 10px;
    padding: 10px 10px;
    margin-top: 20px;
    margin-bottom: 8px;
}

.iconall{
    width: 100%;
    margin-top: 5%;
}

.menucon{
    margin: 5% 10%;
}

.center{
    text-align: center;
}

.backb{
    background-color: rgb(0, 89, 255);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    text-align: center;
    margin: auto;
    margin-bottom: 5%;
}

.head1,.head2{
    width: 100%;
}

.head1{
    display: block;
    position: relative;
    z-index: -1;
}


.sidebar-2{
    display:none;
    position: absolute;
    right: 0;
    top: 5px;
}

.head2{
    display: none;
    position: relative;
    z-index: -1;
}

.content-manual{
    min-height: 74.6vh;
}

.centent-space{
    height: 15%;
}

.con-man{
    display: grid;
    grid-template-columns: 50% 50%;
    text-align: center;
    margin-top: 20%;
}




.cm1,.cm2{
    position: relative;
    color: rgb(0, 89, 255);
    background-color: rgba(255, 255, 255, 0.452);
    border-radius: 20px;
    border: 3px dashed rgb(0, 89, 255);
    margin: 0px 10%;
    padding: 3% 0px;
    font-weight: bold;
}

/* .cm1{
    margin-top: -5%;
}

.cm2{
    margin-top: 5%;
} */

.bb-bottom{
    position: relative;
    margin-top: 30%;
    text-align: center;
}



.cm1-img,.cm2-img{
    width: 100%;
}



.con-man-img{
   margin-left: 10%;
   margin-right: 10%;
}

@media only screen and (max-width: 600px){
    .contrainer{
        display: grid;
        grid-template-areas: "head"
                             "content"
                             "foot";
        grid-template-columns: 100%;
    }

    .head1{
        display: none;
    }
    
    .head2,.sidebar-2{
        display: block;
    }

    .con-man{
        display: grid;
        grid-template-columns: 100%;
        text-align: center;
        margin-top: 20%;
    }

    .cm2{
        margin-top: 10%;
    }

    .cm2-img{
        margin-top: 10%;
    }
}