html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
}

body {
    background-color: white;
    font-family: Helvetica, sans-serif;
    padding-bottom: 100px;
    box-sizing: border-box;
    
}

.container {
    display: flex;
    flex-direction: column;

}

.nav-bar {
    display: flex;
    justify-content: flex-end;
    /*align-items: center;*/
    /*line-height: 1.5;*/
    background-color: #35424a;
    border-bottom: 2px blue solid;

    /*flex-wrap: wrap;*/
}

.logo-place {
    flex: 1;
    /*border: dotted;*/
    /*height: 180px;*/
    text-align: center;
    color: white;
}

.logo-place a {
    text-decoration: none;
    color: white
}


.logo img {}

.nav-links {

    display: flex;
    /*     align-items:flex-end;*/
    flex: 2;
    justify-content: space-between;
    /*border: dotted;*/
    padding: 1em;
    /*flex-wrap: wrap;*/

}

.nav-links a {
    line-height: 4em;
    /*border: 1px solid red;*/
    border-radius: 5px;
    /* background-color: red;*/
    color: white;
    width: 7em;
    text-align: center;
    margin: auto;

    text-decoration: none;
}

.nav-links a:hover {
    /*border: 1px inset white;*/
    background-color: gold;
}

/*.nav-links a:active{
    -webkit-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(180deg);
    transition: .5s;
}*/

.heading-info {
    display: flex;
    width: 80%;
    margin: auto;
    /* border: 1px solid red;*/
    /* margin-bottom: 2em;*/

}

.heading-logo {
    flex: 1;
    /*border: 1px solid blue;*/
}

.heading-logo img {
    width: 100%;
    height: 300px;
}

.heading-disc {
    padding-left: 10%;
    padding-right: 10%;
    margin: auto;
    flex: 2;
    text-align: center;

}

.cform {}

.cform h1,
p {
    text-align: center;
}

.fb-table {
    text-align: center;
}

.fb-tablebody {
    width: 80%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.fb-tablebody tr:nth-of-type(odd) {
    background-color: lightgray;
}

.fb-tablebody tr:nth-of-type(even) {
    background-color: lightsteelblue;
}

.fb-tablebody tr:last-child {
    background-color: white;
}

.fb-tablebody tbody tr {

    line-height: 50px;

}

.fb-tablebody tbody td {}



tr {}

.i1,
.i2 {
    height: 40px;
    width: 80%;
    border: 0px;
}

.i1 {
    background-color: lightgray;
}

.i2 {
    background-color: lightsteelblue;
    
}

.fbsubmit {
	box-shadow:inset 0px 0px 13px -7px #949494;
	background:linear-gradient(to bottom, #e6dcd1 5%, #a1a19f 100%);
	background-color:#e6dcd1;
	border-radius:7px;
	border:1px solid #000000;
	display:inline-block;
	cursor:pointer;
	color:#737373;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:13px 32px;
	text-decoration:none;
}
.fbsubmit:hover {
	background:linear-gradient(to bottom, #a1a19f 5%, #e6dcd1 100%);
	background-color:#a1a19f;
}
.fbsubmit:active {
	position:relative;
	top:1px;
}





/*.i1:nth-of-type(odd){
    background-color: lightgray;
}
.i1:nth-of-type(even){
    background-color: slategray;
}*/
.fb-table input {}
/*Footer css code here*/
.footer {
    display: flex;
    flex-direction: column;
    margin-top: 2em;
    margin-bottom: 0;
}

.footerup {
    background-color: #35424a;
    color: lightgray;
}

.footer-upper {
    width: 80%;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 2em;
    /*text-align: center;*/
    padding-top: 2em;
    padding-right: 2em;
    padding-bottom: 2em;
}

.footer-upper-1 {
    flex: 1;

}

.footer-upper-1 p {
    text-align: left;
}

.footer-upper-2 {
    flex: 1;


}

.footer-upper-2 ul {
    list-style: none;
    padding-left: 10em;
}

.footer-upper-2 ul li {
    margin: 0.5em;
}

.footer-lower {
    line-height: 2em;
    text-align: center;
    background-color: #B6C9DB;
    color: #1569AE;
}




/*newsletter css code*/

.newsletter {
    display: flex;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1em;
}

.newsletter-text {
    flex: 1;
    float: left;
}

.newsletter-input {
    flex: 1;
    padding-top: 1.2em;
    float: right;
}

.newsletter-input form input {
    border-radius: 3px;
    height: 2em;
    padding: 5px;
}

.newsletter-input form button {
    width: 40%;
    height: 30px;
    box-shadow: 1px 1px blue;
    border-radius: 3px;
}

.about-info {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.about-info h2 {
    border-bottom: 2px solid black;
    text-align: center;
}

.about-info p span {
    font-style: italic;
    font-size: 1.5em;
}


/*============================== image slider code starts here*/

@keyframes slidy {
    0% {
        left: 0%;
    }

    20% {
        left: 0%;
    }

    25% {
        left: -100%;
    }

    45% {
        left: -100%;
    }

    50% {
        left: -200%;
    }

    70% {
        left: -200%;
    }

    75% {
        left: -300%;
    }

    95% {
        left: -300%;
    }

    100% {
        left: -400%;
    }
}

div#slider {
    overflow: hidden;
    height: 450px;
    width: 100%;
    margin: auto;
}

div#slider figure img {
    width: 20%;
    float: left;
}

div#slider figure {
    position: relative;
    width: 500%;
    height: 650px;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 15s slidy infinite;
}

/*=============================="services" code starts here*/

.call-outs-container {
    /*max-width: 1400px;*/
    margin: 40px auto 0 auto;
    flex-wrap: wrap;
    width: 90%;
}

.call-out {
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    flex-basis: 30%;
    
}
.call-out p{
    text-align: left;
}

@media (min-width: 900px) {
    .call-outs-container {
        display: flex;
        justify-content: space-between;
    }
}

.call-out:nth-child(1) {
    background-color: #c0dbe2;
}

.call-out:nth-child(2) {
    background-color: #cdf1c3;
}

.call-out:nth-child(3) {
    background-color: #ccb9da;
}

.call-out:nth-child(4) {
    background-color: #cdf1a4;
}

.call-out:nth-child(5) {
    background-color: #ccb8d9;
}

.call-out:nth-child(6) {
    background-color: lightblue;
}


/*============================*/

@media screen and (max-width : 1024px) {
    body {
        /*background-color: red;*/

    }

    .nav-bar {
        flex-wrap: wrap;
    }

    .nav-links {}

    .nav-links a {}

    .footer-upper-2 ul {
        padding-left: 3em;
    }

    .newsletter {
        width: 80%;
    }

    .newsletter-input form button {
        width: 30%;
    }
    .fb-tablebody tbody tr th,.fb-tablebody tbody tr th td{
        padding: 10px;
/*        width: 90%;*/
    }
    .fb-tablebody{
        font-size: 1.3em;
    }
/*
    .fbth{
        width: 600px;
    }
*/

}

@media screen and (max-width : 768px) {
    body {
        /* background-color: aqua;*/
    }

    header {
        width: 100%;
    }

    .nav-bar {
        flex-direction: column;
    }

    .nav-links {
        flex-direction: column;
    }

    .heading-logo {
        display: none;
    }

    .footer-upper {
        flex-direction: column;
    }

    .footer-upper-2 ul {
        padding-left: 0;
        padding-top: 5px;
        border-top: 1px solid black;
    }

    .newsletter {
        flex-direction: column;
        text-align: center;
    }

    .newsletter-input form button {
        width: 25%;
    }
    
    .fb-tablebody tbody tr{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    
    }
    .fb-tablebody tbody th{
        background-color: lightgray;
    }
    .fb-tablebody tbody td, .i1, .i2{
        background-color: lightsteelblue;
    }
/*
    .fb-tableboddy tbody tr th{
        text-align: center;
        padding: 0;
        width: 400px;
    }
*/
    
/*
    th.fbth{
        width: 350px;
    }
*/
    
}
