* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.position-relative {
  position: relative;
}
.text-justify {
  text-align: justify;
}
:root {
  --primary-color: #e92c0d;
  --secondary-color: #0071bc;
}
p,
h2,
h3,
h4,
h5,
h6 {
  line-height: 30px;
}
h3 {
  font-size: 40px;
  color: var(--secondary-color);
  margin-bottom: 30px;
}
h4 {
  font-size: 28px;
  margin-bottom: 10px;
}

.heading_div{
  position: relative;
  width: fit-content;
  margin: auto;
}
.heading_div::before{
  position: absolute;
  content: "";
  bottom: -15px;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 50px;
  background-color: var(--secondary-color);
}
.heading_div::after{
  position: absolute;
  content: "";
  bottom: -15px;
  left: 0;
  width: 15px;
  height: 3px;
  border-radius: 50px;
  background-color: #fff;
  animation: heading-anm 8s linear infinite forwards;
}
@keyframes heading-anm{
  form{
    left: 0;
  }
  to{
    left: 95%;
  }
}


/* Top Header area  */
.top_header {
  position: relative;
  padding: 8px 0px;
  background-color: #095b91;
}
.top_header a {
  text-decoration: none;
  color: rgb(255, 255, 255);
  margin: 0px 5px;
}
.social_icons a {
  display: inline-flex;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
}
.social_icons a .fa-facebook {
  color: rgb(59, 89, 152);
}
.social_icons a .fa-twitter {
  color: rgb(70, 149, 211);
}
.social_icons a .fa-instagram {
  color: rgb(178, 18, 115);
}
.social_icons a .fa-linkedin {
  color: rgb(5, 166, 216);
}

/* Main Header Area  */
.header {
  position: relative;
  padding: 20px 0px;
  background-color: rgb(255, 255, 255);
}
.header .container {
  position: relative;
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu-links ul {
  display: flex;
  margin: 0px;
}
.menu-links ul li {
  list-style: none;
  margin-left: 60px;
}
.menu-links ul li a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-weight: 500;
  font-size: 18px;
  transition: all 0.4s ease 0s;
}
.menu-links ul li a:hover {
  color: var(--primary-color);
}
.menu-links ul li .login-btn {
  padding: 10px 30px;
  color: #fff;
  border-radius: 5px;
  background-color: var(--secondary-color);
}
.menu-links ul li .login-btn:hover {
  background-color: var(--primary-color);
  color: #fff;
}
.logo img {
  width: 200px;
  border-radius: 5px;
}
.toggle-btn {
  display: none;
}
.toggle-style {
  display: none;
}
@media screen and (max-width: 991px) {
  .toggle-btn {
    display: block;
    height: 30px;
    width: 30px;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
  }
  .toggle-style {
    display: block;
    position: absolute;
    right: 1.3%;
    top: 20px;
    border-radius: 2px;
    background: rgb(255, 255, 255);
    width: 35px;
    padding: 5px;
    height: 30px;
  }
  .tline1 {
    width: 25px;
    height: 3px;
    border-radius: 5px;
    background-color: var(--primary-color);
    margin: 3px 0px;
    display: block;
    transition: all 0.4s ease 0s;
  }
  .tline2 {
    width: 25px;
    height: 3px;
    border-radius: 5px;
    background-color: var(--primary-color);
    margin: 3px 0px;
    display: block;
    transition: all 0.4s ease 0s;
  }
  .tline3 {
    width: 25px;
    height: 3px;
    border-radius: 5px;
    background-color: var(--primary-color);
    margin: 3px 0px;
    display: block;
    transition: all 0.4s ease 0s;
  }
  .toggle-btn:checked ~ .toggle-style .tline1 {
    transform: translateY(6px) rotate(45deg);
  }
  .toggle-btn:checked ~ .toggle-style .tline2 {
    opacity: 0;
  }
  .toggle-btn:checked ~ .toggle-style .tline3 {
    transform: translateY(-6px) rotate(-45deg);
  }
  .toggle-btn:checked ~ .menu-links {
    left: 0px;
    top: 0px;
    position: fixed;
  }
  .menu-links {
    background-color: rgb(255, 255, 255);
    position: absolute;
    z-index: 111;
    left: -800px;
    top: -20px;
    width: 250px;
    height: 100vh;
    transition: all 0.5s ease 0s;
  }
  .menu-links ul {
    display: block;
  }
  .menu-links ul li {
    margin: 20px 0px;
    padding: 10px 20px;
    border-radius: 5px;
  }
}

.sticky-header{
  position: fixed;
  width: 100%;
  top: 0;
  background-color: #fff;
  z-index: 111;
  border-bottom: 1px solid #eee;
}




/* scroll top button */
.scroll-btn {
  position: fixed;
  border-radius: 50%;
  bottom: 20px;
  right: 20px;
  background: #0071bc;
  width: 50px;
  height: 50px;
  font-size: 20px;
  color: #fff;
  z-index: 111;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-btn:hover{
  color: #fff;
}



/* Banner Section  */
.banner {
  position: relative;
  padding: 60px 0px;
  background-image: url("../image/shapes/bg1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left bottom;
  width: 100%;
  overflow: hidden;
  z-index: 1;
  animation: background-move 12s linear infinite;
}
@keyframes background-move{
  form{
    background-position: left bottom;
  }
  to{
    background-position: center top;
  }
}
.banner::before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  content: "";
  background-color: rgb(0, 0, 0);
  opacity: 0.6;
  z-index: -1;
}
.banner-image {
  max-width: 100%;
  width: 500px;
  margin: 20px 0px;
  animation: 5s linear 0s infinite normal none running move;
}
.banner-text {
  position: relative;
}
.banner-text h1 {
  margin-bottom: 20px;
  font-size: 60px;
  color: rgb(255, 255, 255);
  text-shadow: rgb(204, 204, 204) 0px 1px 0px, rgb(201, 201, 201) 0px 2px 0px,
    rgb(187, 187, 187) 0px 3px 0px, rgb(185, 185, 185) 0px 4px 0px,
    rgb(170, 170, 170) 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 6px 1px,
    rgba(0, 0, 0, 0.1) 0px 0px 5px, rgba(0, 0, 0, 0.3) 0px 1px 3px,
    rgba(0, 0, 0, 0.2) 0px 3px 5px, rgba(0, 0, 0, 0.25) 0px 5px 10px,
    rgba(0, 0, 0, 0.2) 0px 10px 10px, rgba(0, 0, 0, 0.15) 0px 20px 20px;
}
.banner-text p {
  font-size: 20px;
}
.start-btn {
  padding: 10px 30px;
  background-color: var(--secondary-color);
  border-radius: 5px;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  text-decoration: none;
  display: inline-block;
  margin-top: 30px;
  transition: all 0.5s ease 0s;
}
.start-btn:hover {
  background-color: var(--primary-color);
  color: #fff;
}


/* About Us  */
.about-us {
  position: relative;
  padding: 50px 0px;
}
.about-image {
  max-width: 100%;
}
@keyframes move {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.about_point {
  padding: 5px 15px;
  background-color: rgb(237, 237, 237);
}
.about_point i {
  margin-right: 10px;
  font-size: 20px;
}


/* Our Services Section  */
.services {
  position: relative;
  padding: 80px 0px;
  background: rgb(239, 239, 239);
}
.service-div {
  margin: -28px auto;
  height: 300px;
  width: 300px;
  transform: rotate(45deg);
  background-color: rgb(255, 255, 255);
  padding: 20px;
  border-radius: 10px;
  transition: all 0.5s ease 0s;
}
.service_div_inner {
  transform: rotate(-45deg);
  margin: 0px 0px 0px -35px;
}
.service-icon img {
  height: 50px;
  filter: brightness(0);
}
.service-txt {
  margin-top: 20px;
  position: relative;
}
.service-txt h4 {
  color: #0071bc;
}
.service-txt p {
  margin: 0px;
}


/* Why Choose section  */
.why-choose {
  position: relative;
  padding: 50px 0px;
}
.whychoose-icon-wrap {
  position: relative;
  background-size: cover;
  background-position: center center;
  margin: 10px 0;
  padding: 15px;
  color: #fff;
  background-color: #02263e;
  z-index: 1;
}
.whychoose-icon-wrap:hover:before{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.7;
  z-index: -1;
}
.commission:hover{
  background-image: url(../image/commission-bg.jpg);
}
.safe_secure:hover{
  background-image: url(../image/secure-bg.jpg);
}.support:hover{
  background-image: url(../image/support-bg.jpg);
}.fast_response:hover{
  background-image: url(../image/response-bg.jpg);
}


.whychoose-txt p {
  font-weight: 500;
}
.why_choose_img{
  max-width: 100%;
  animation: 5s linear 0s infinite normal none running move;
}


/* Counter Section  */
.counter {
  position: relative;
  padding: 0px 0px 80px;
}
.item i {
  display: block;
}
.number {
  display: inline;
}
.number ~ span {
  color: var(--secondary-color);
  font-size: 30px;
}
.item {
  padding: 25px 20px;
  margin: 20px 0px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.61);
  box-shadow: rgb(233, 233, 233) 0px 0px 20px 5px;
  transition: all 0.5s ease 0s;
}
.item:hover {
  box-shadow: rgb(233, 233, 233) 0px 0px 1px 1px;
}
.counter-div img {
  max-width: 100%;
}
.item p {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 0px;
  color: var(--primary-color);
}
.item .number {
  font-size: 30px;
  font-weight: 600;
  color: var(--secondary-color);
}
.item img {
  height: 80px;
  margin-bottom: 15px;
}


/* Business Step section  */
.steps {
  position: relative;
  padding: 80px 0px;
}
.single-step {
  position: relative;
  padding: 10px 20px;
}
.single-step::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  right: 0px;
  top: 50%;
  transition: all 0.4s ease 0s;
  background-color: var(--primary-color);
  clip-path: polygon(100% 50%, 0px 0px, 0px 100%);
}
.last-step::before {
  display: none;
}
.single-step:hover::before {
  transform: translateX(10px);
}
.single-step:hover .step-icon {
  border: 1px dashed rgb(153, 0, 52);
  transform: translateY(-10px);
}
.single-step h5 {
  font-size: 28px;
}
.single-step p {
  margin: 0px;
}
.step-icon {
  background-color: rgb(255, 255, 255);
  box-shadow: rgb(242, 242, 242) 0px 0px 2px 2px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  padding: 15px;
  margin: 0px auto 10px;
  transition: all 0.4s ease 0s;
}
.step-icon img {
  width: 100%;
}


/* Platform section  */
.platform {
  position: relative;
  padding: 60px 0px;
}
.single-platform {
  position: relative;
  margin: 20px 0px;
  transition: all 0.5s ease 0s;
}
.single-platform:hover {
  transform: translateY(-10px);
  box-shadow: rgb(221, 220, 219) 0px 0px 60px 5px;
}
.platform-head {
  padding: 20px;
  background-color: #145885;
  color: rgb(255, 255, 255);
  text-align: center;
  position: relative;
}
.platform-head img {
  width: 100px;
  margin-bottom: 20px;
}
.paltform-text {
  padding: 20px;
  background-color: rgb(247, 247, 247);
  position: relative;
}


/* Footer section  */
.footer-sec {
  position: relative;
  background-color: #06314e;
  padding: 50px 0px 20px;
}
.footer-sec p {
  color: rgb(255, 255, 255);
}
.f-logo {
  width: 250px;
}
.link-head {
  color: #ffffff;
  font-size: 24px;
  margin-left: 25px;
}
.f-links li {
  list-style: none;
  font-size: 16px;
  color: rgb(255, 255, 255);
  margin: 5px 0px;
}
.f-links li a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 500;
  font-size: 18px;
  transition: all 0.5s ease 0s;
}
.f-links li a:hover {
  color: var(--primary-color);
  margin-left: 10px;
}
.bottom-foot {
  background-color: #02253c;
  border-top: 1px solid #15384e;
  padding: 10px;
}
.bottom-foot p {
  margin: 0px;
  color: rgb(255, 255, 255);
}
.bottom-foot p a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
}



/* Responsive part  */

@media screen and (min-width: 1400px) {
  .mtb-100{
    margin: 100px 0;
  }
}

@media screen and (max-width: 1399px) {
  .banner-text h1 {
    font-size: 46px;
  }
  .service-div {
    margin: 75px auto;
  }
  .pancard-service{
    margin-top: -600px;
  }
}
@media screen and (max-width: 1199px) {
  .plat-icon {
    left: -15px;
  }
}
@media screen and (max-width: 991px) {
  .pancard-service{
    margin: 75px auto;
  }
  .single-step::before {
    display: none;
  }
}
@media screen and (max-width: 575px) {
  .banner-text h1 {
    font-size: 30px;
  }
  h3 {
    font-size: 30px;
  }
  h4 {
    font-size: 28px;
  }
  .service-div {
    margin: 10px auto;
    transform: rotate(0deg);
    height: auto;
    width: auto;
  }
  .pancard-service{
    margin: 10px auto;
  }
  .service_div_inner {
    transform: rotate(0deg);
    margin: 0;
  }
  .whychoose-icon-box{
    padding: 5px;
  }
  .whychoose-icon-box img{
    width: 40px;
  }
}