#container #Main
{
    
    margin: 50px 0px;
    margin-top: 110px;
    display: grid;
    grid-template-areas: 'about image address form'
                        'about hi address form'
                        'about location meeting form';
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 33.33% 33.33% 33.33%;

}
#container #Main .main-design
{ 
    
    margin: 5px;
    padding: 8px;
    background-color: rgb(137, 137, 218);
    background: linear-gradient(rgba(119, 77, 185, 0.1),rgba(62, 87, 197, 0.1)),url(../img/cub.jpg);
    color: rgb(100, 12, 12);

      
}
#container #Main .main-design:hover, #container #Main .main-design:focus-within
{
    box-shadow:0 0 20px rgba(0, 0, 0, 1) ;
    border-radius: 8px;
}

#container #Main .main-design p
{
    font-family: 'Roboto Slab', serif;
    font-size: 14px;

}
#container #Main .main-design:hover p
{
    text-shadow: 1px 0px black;

}
#container #Main .main-design h4
{
font-family: 'Oswald', sans-serif;;
}
#location
{
    grid-area:location;

}
#address
{
    grid-area:address;
}
#address a
{
    text-decoration: none;
    color: inherit;
}
#about
{
    grid-area:about ;
    
}
#image
{
    grid-area:image ;
    max-width: 100%;
    max-height: 100%;
    margin: 5px;

}
#hi
{
    grid-area:hi ;

}
#form
{
    grid-area:form ;

}

#image img{
    width: 100%;
    height: 100%;
}

#meeting
{
    grid-area:meeting;
}
a
{
    text-decoration: none;
    color: inherit;

}
/* contact form css START */
.form-container{
    padding-bottom: 20px;
        width: 91%;
        height: auto;
        display: flex;
        justify-content: center;
        
    }
    .contact-form{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80%;
    /* height: 600px; */
    }
    .contact-form h2{
        padding-top: 20px;
    }
    input,textarea{
        font-family: 'Roboto Slab', serif;
        width: 100%;
        margin-top: 2rem;
        border: none;
        border-bottom: 2px solid black;
        padding: 8px 5px;
        background: inherit;
        overflow:hidden ;
    }
    .submit{
        color: white;
        background-color: rgb(47, 133, 161);
        border: 1px solid black;
        border-radius: 10px;
        padding: 1rem;
        text-align: center;
        cursor: pointer;
    }
    .submit:hover{
        opacity: 0.6;
    }
    .form-container span{
        margin: 20px 0;
        display: none;
    }

    /* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
    /* .contact-form CSS ENDS */


    /* CSS For Responsiveness STARTED */

    @media screen and (max-width:881px)
    {
        #container #Main
        {
            /* grid-template-areas: 'about image address form'
            'about hi address form'
            'about location address form'; */
             grid-template-areas: 'about image form'
            'about address form'
            'about address form'
            'hi location meeting';
            grid-template-columns: 33.33% 33.33% 33.33%;
            grid-template-rows: 25% 25% 33% 17%; 
        }

    } 
    @media screen and (max-width:661px)
    {
        #container #Main
        {
            /* grid-template-areas: 'about image address form'
            'about hi address form'
            'about location address form'; */
             grid-template-areas: 'about address'
            'about address'
            'image form'
            'hi form'
            'location form'
            'meeting form';
            grid-template-columns: 50% 50%;
            grid-template-rows: 20% 24% 18% 18% 10% 10%; 
        }

    } 
    @media screen and (max-width:599px)
    {
        #container #Main
        {
            display: flex;
            flex-direction: column;
        }
        .form-container
        {
            width: auto;
        }

    } 


    /* CSS For Responsiveness ENDED */