/* Basic Reset */
* {
  margin: 0;
  padding: 0;
}

/* Body Styles */
body {
  font-family: Arial, sans-serif;
    background-color: #252f42;
}

/* Header Styles */
header {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  height: 40px;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 20px;
}

nav li a {
  text-decoration: none;
  color: #555;
  font-weight: bold;
  transition: color 0.3s ease;
}

nav li a:hover {
  color: #000;
}

nav .cta {
  background-color: #0d6efd;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

nav .cta:hover {
  background-color: #0c5bd0;
}

.hero {
  display: flex;
  justify-content: space-evenly;
  background-color: #252f42;
  color: #fff;
  padding-top: 100px;
  text-align: center;
 /* width: 100%;*/
  padding-left: 50px;
  padding-bottom: 100px;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
  width: 700px;
  text-align: left;
}

.hero p {
  font-size: 24px;
  margin-bottom: 40px;
}

.hero .cta {
  background-color: #fff;
  color: #0d6efd;
  padding: 20px 40px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.hero .cta:hover {
  background-color: #f0f0f0;
}

.logo1{
    max-height: 100%;
      max-width: 200px;
      margin-top: 100px;
      margin-left: -550px;
}
.logo2{
    max-height: 100%;
      max-width: 200px;
      margin-top: 100px;
      /*margin-left: -50px;*/
}
.hero1 {
  margin-left: 40px;
}

/* Features Styles */
.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 100px;
}

.feature {
  flex-basis: calc(50% - 20px);
  margin-bottom: 40px;
}

.feature img {
  height: 64px;
  margin-bottom: 20px;
}

.feature h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #f5f6f7;
}

.feature p {
  font-size: 16px;
  color: #ccd3d9;
}

.rectangle {
      background-color: #374663;
      width: 100%;
      height: 66px;
      position: sticky;
      top: 0;
      left: 0;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      z-index: 9999;
    }

    .button-container {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      /*flex-grow: 1;*/
    }


    .button {
      background-color: #333;
      color: #fff;
      border: none;
      padding: 20px 60px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s ease;
      height: 65px;
    }

    .button:hover {
      background-color: #555;
    }

    .button1 {
      background-color: #e8c858;
      color: #121110;
      border: none;
      padding: 20px 60px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s ease;
      height: 65px;
    }

    .button1:hover {
      background-color: #e8c858;
    }

    .button2 {
      background-color: #e8c858;
      color: #121110;
      border: none;
      padding: 20px 60px;
      cursor: pointer;
      font-size: 16px;
      border-radius: 10px;
      float: left;
      margin-left: 130px;
      transition: background-color 0.3s ease;
    }

    .button2:hover {
      background-color: #e8c858;
    }
    
    .logo {
      float: left;
      max-height: 100%;
      max-width: 200px;
      padding-right: 20px;
      margin-right: 550px;    }

    .image {
       /* float: right;*/
        width: 600px;
        height: 500px;
        margin-right: -25px;
      }

    .para{
      width: 500px;
      text-align: left;

    }
    .banner {
      /*display: flex;*/
      align-items: center;
      /*justify-content: space-evenly;*/
      background-color: #3067f0;
      text-align: center;
      padding: 20px;
      margin-bottom: 20px;
      padding-left: 200px;
      padding-bottom: 50px;
    }

  .banner-heading {
    font-size: 48px;
    width: 800px;
    text-align: center;
    color: white;
  }


    .banner-logo {
      display: inline-flex;
      margin-right: 10px;
      width: 200px;
      height: 60px;
      border-radius: 10px;
    }

    .banner-image {
      flex-shrink: 0;
      width: 200px;
      margin-left: 160px;

    }

    .abc{
      text-align: center;
      justify-content: center;
      margin-left: 300px;
      margin-right: 300px;
      font-size: 20px;
      color: #ccd3d9;

    }

    .line {
      border: none;
      border-top: 5px solid #2c5dbf;
      margin: 50px 0px;
      padding: 0px;
      height: 50px;}

    .line1 {
      border: none;
      border-top: 2px solid #333436;
      padding: 0px;
      height: 50px;}

    .l{
      display:flex;
      justify-content: space-evenly;
      color: white;

    }
    .l ol li{
      list-style-type: none;
      line-height: 30px;
    }

    .h{
      font-weight: bolder;
      font-size: 20px;

    }

    .t{
      display: flex;
      justify-content: space-around;
    }

    .y {
      display: flex;
    }

    .y img{
      margin-left: 10px;
      margin-right: 40px;
    }

    .asdf{
      width: 195px;
    }

    .foot{
      color: white;
      text-align: center;
      margin-bottom: 20px;
    }