/* code to adjust <div> margin START */
#divmarginadjust {
    width: 350px;
    margin: auto;
    margin-top: 20px;
    /*border: 1px solid red;*/
}

#divmarginadjust2 {
    width: 350px;
    margin: auto;
    margin-top: 20px;
    /*border: 1px solid red;*/
}

#divmarginadjust3 {
    width: 350px;
    margin: auto;
    margin-top: 20px;
    /*border: 1px solid red;*/
}
/* code to adjust <div> margin END*/
#subscribeform {
   
    height: 478px;
    margin: auto;
    width: auto;
    background-color: #00558A;
}



#divmarginadjust4 {
    width: 1000px;
    margin-top: 70px;
    margin-left: 20px;
    
    text-align: center;
}
/* code to adjust <div> margin END*/


#divmarginadjust5 {
    width: 400px;
    margin: auto;
    margin-top: 20px;
   
    /*border: 1px solid red;*/
}

#divmarginadjust6 {
    width: 700px;
    margin-top: 7px;
    margin: auto;
    
    text-align: center;
}

#divmarginadjust7 {
    width: 700px;
    margin-top: 7px;
    margin: auto;
 
    text-align: center;
}
/* code to adjust <div> margin END*/



/*Code to allign image control in the centre of Div. and needs to call this function in Image control as "class="center""  START*/
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
/*Code to allign image control in the centre of Div. and needs to call this function in Image control as "class="center"" END*/






/*Code for multiple column layout (take multiple divs side by side) and needs to call this function in div as "class="responsive-two-column-grid"" START*/


.responsive-two-column-grid {
    display: block;
}

    /* columns */
    .responsive-two-column-grid > * {
        padding: 1rem;
    }


.responsive-twoo-column-grid {
    display: block;
}

    /* columns */
    .responsive-twoo-column-grid > * {
        padding: 1rem;
    }




/* tablet breakpoint */

@media (min-width:768px) /*In this CSS code,
    we are targeting screens with a minimum width of 768px.
    If the screen is more than or equal to 768px wide,
    the body code will run.*/
{

    .responsive-two-column-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }


    .responsive-twoo-column-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) /*In this CSS code,
    we are targeting screens with a maximum width of 768px.
    If the screen is less than or equal to 768px wide,
    the body code will run.*/
{

    #subscribeform {
        height: 100%;
        width: 100%;
        background-color: #00558A;
        
    }

    #divmarginadjust4 {
        width: 90%;
        margin-top: 70px;
        margin-left: 20px;
      
        text-align: center;
    }

    #divmarginadjust6 {
        width: 100%;
        margin-top: 7px;
        margin: auto;
       
        text-align: center;
    }

    #divmarginadjust7 {
        width: 100%;
        margin-top: 7px;
        margin: auto;
       
        text-align: center;
    }

    #divmarginadjust5 {
        width: 100%;
        
        height: 460px;
        margin:auto;
        margin-top: 20px;
       
        /*border: 1px solid red;*/
    }
   
}











/*Code for TWO column layout (take multiple divs side by side) and needs to call this function in div as "class="responsive-two-column-grid"" START*/



/*Code to reduce space between navigation bar and image slider START*/
#navibar {
    margin-bottom: 0px;
}
/*Code to reduce space between navigation bar and image slider END*/