*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body   
{
    background: #fff;
    font-family:Calibri; 
    font-size: .80em;
    margin: 0;
    padding: 5px;
    color: #000;
}

.header {
    background:#fff;
    overflow:hidden;
}

.footer {
    display: grid;
    grid-column : 1 / 4;
    align-items: center;
    justify-content: center;
    background-color:gainsboro;
}

/*
.container {
    background-color:aliceblue;
    display: grid;
    text-align:center;
    margin:2rem;
    grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); 
    gap: 10px;    
}*/

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, 150px);
    gap: 5px;    
    justify-content: center;
    width: 90%;
    margin: 0 auto;
    list-style: none;
}

.container>.item {
    padding: 5px;
    background-color: cornflowerblue;
}

.grid-item1
{
    background-color:cornflowerblue;
}

.grid-item2
{
    background-color:red;
}

.grid-item3
{
    background-color:cornsilk;
}

.grid-col-span-2{
    grid-column:span 2;
}

.grid-col-span-3{
    grid-column:span 3;
}

.grid-col-span-4{
    grid-column:span 4;
}



.nav ul{
    list-style:none;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:-o-flex;
    display:flex;
}

.nav ul li a {
    text-decoration:none;
    color:#ff6a00;
    padding:1.5rem;
    font-weight:bold;
    transform: all .5s ease;
}

.nav
{
    display:grid;
    grid-template-columns: 6fr 6fr;
    align-items:center;
    width:1100px;
    margin:auto;
}

.nav ul li a:hover
{
    color: #000;
    background: #fff;
}

.task-1.container {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;
}

.pagebg {
    display: grid;
    grid-template-rows: auto 1fr auto;

    min-height:100vh;
    background: linear-gradient(0deg, rgba(0 0 0 / 54%), rgba(0 0 50 / 69%)), url("~/jeetroadways/bg.jpg");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
}