/*Services Table 1*/
   
   body {
        padding: 0px;
        margin: 0;
        font-family: 'Lato', sans-serif;
        background-image: url('Logo/backround.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    }
.table {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-collapse: collapse;
        width: 1000px;
        height: 200px;
        border: 1px solid #bdc3c7;
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);

    }
    element.style {
        margin-bottom: 45px;
    }
.table1 .tr {
        transition: all .2s ease-in;
        cursor: pointer;
    }

.table1 .th,
.table1 .td {
        padding: 6px;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }

.table1    #header1 {
        background-color: #132075;
        color: #fff;
    }

.table1    h1 {
        text-align: center;
    }

tr:hover {
        background-color: #f5f5f5;
        transform: scale(1.02);
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);
    }

    @media only screen and (max-width: 768px) {
        .table1 .table {
            width: 100%;
        }
    }
:indeterminate


/*
Table 2*/

.table2 table {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-collapse: collapse;
        width: 1000px;
        height: 200px;
        border: 1px solid #bdc3c7;
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);
    }

    tr {
        transition: all .2s ease-in;
        cursor: pointer;

    }

    th,
    td {
        padding: 6px;
        text-align: center;
        border-bottom: 1px solid #ddd;

    }

    #header2 {
        background-color: #132075;
        color: #fff;
    }

    h1 {
        text-align: center;
        padding-top:60px;
    }

    tr:hover {
        background-color: #f5f5f5;
        transform: scale(1.02);
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);
    }

    @media only screen and (max-width: 768px) {
        table {
            width: 100%;
        }
    }







    
/* Foorer start's from hear  */
/* Styling for the top box */
.top-box {
    position: relative;
    width: fit-content;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 20px;
    text-align: center; /* Align all content in the top box to the center */
  
  }
  
  
  /* Styling for the icons */
  .icon {
    display: inline-block;
    padding-left: 80px;
    width: 50px;
    height: 50px;
    margin-right: 10px;
  
  }
  .fas{
    font-size: -webkit-xxx-large;
    color: #011daa;
  
  }
  /* Styling for the information text */
  .info {
    display: inline-block;
    padding-left: 10px;
    
  }
  
  /* Styling for the bottom box */
  .bottom-box {
    background-color: #011daa;
    padding: 20px;
    margin-top: -20px; /* This value should be equal to the top box's padding to overlap */
  }
  
  .bottom-box h2{
    color: #ffffff;
    text-align: center;
    font-size:30px;
    padding-top: 20px;
  }
  
  
  ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    color: #ffffff;
    margin: 0 10px;
    padding-top:20px;
    padding-bottom:20px;
  }
  
  .bottom-box li::before {
    content: "-";/*give any type of symbol for Bullets */
    color: red;
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
  }
  .paragraph-container a {
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
  }
  
  .paragraph-container a:hover {
    color: #1F51FF;
  
     padding-bottom: 6px;
  }
  
  .container{
  
       display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    min-height: auto;
  
  }
  
  .container ul{
      display:block;
      float:left;
  }
  .container li{
      padding-top:10px;
  }
  
  .container a{
      text-decoration:none;
      font-size:17px;
  }
  
  @media (max-width: 768px){
      .top-box{
          text-align:inherit;
          display:flex;
  
      }
  
   /*   .info{
          display:block;
      }*/
  
      ul{
          display:grid;
          justify-content: space-around;
      }
  
      li{
          padding-bottom:20px;
      }
  }