﻿/****************************
****** Price-table CSS*******
*****************************/

.price-table {
  margin-top: 88px;
  margin-bottom: 96px;
}

.single-price ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.table-heading {
  background-color: transparent !important;
  color: #FFFFFF !important;
  overflow: hidden;
  padding: 0 !important;
  text-align: center;
}

.single-price.price-one .plan-name, 
.single-price.price-two .plan-name, 
.single-price.price-three .plan-name, 
.single-price.price-four .plan-name {   
  color: #fff;
  font-size: 20px;
  margin-bottom: 0;
  padding: 10px 0;
  text-transform: capitalize;
}

.single-price.price-one .plan-name {
  background-color: #0e76bc;
}

.single-price.price-two .plan-name {
  background-color: #ac2429;
}

.single-price.price-three .plan-name {
  background-color: #ed8d1b;
}

.single-price.price-four .plan-name {
  background-color: #6c825f;
}


.single-price .plan-price { 
  color: #fff;
  float: none;
  font-size: 14px;
  height: 110px;
  margin-bottom: 15px;
  overflow: hidden;
  position: relative;
  z-index: 5;
  padding-top: 15px;
}


.plan-price .dollar-sign {
  font-size: 18px;
}

.plan-price .price {
  font-size: 24px;
}

.plan-price .month {
  display: block;
  margin-top: -6px;
}

.price-one .plan-price:after, 
.price-two .plan-price:after, 
.price-three .plan-price:after, 
.price-four .plan-price:after  {  
  border-style: solid;
  border-width: 110px;
  content: "";
  height: 0;
  left:50%;
  position: absolute;
  top: 0;
  width: 0;
  z-index: -1;
  margin-left: -110px;
}

.price-one .plan-price:after {
  border-color: #0d6fb1 transparent transparent;
}

.price-two .plan-price:after {
  border-color: #ac2429 transparent transparent;
}

.price-three .plan-price:after {
  border-color: #e78817 transparent transparent;
}

.price-four .plan-price:after {
  border-color: #5f7452 transparent transparent;
}

.single-price ul li, 
.single-table ul li {
  padding: 12px 18px;
  background-color: #f7f7f7;
  margin-bottom: 5px;
  color: #696969;
}

.single-price ul li span, 
.single-table ul li span {
  float: right;
}

.price-one .btn-buynow, 
.price-two .btn-buynow, 
.price-three .btn-buynow, 
.price-four .btn-buynow   {  
  border-radius: 0;
  color: #fff;
  padding: 12px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: block;
}

.price-one .btn-buynow  {
  background-color: #0d6fb1;
}

.price-two .btn-buynow  {
  background-color: #ac2429;
}

.price-three .btn-buynow  {
  background-color: #e78817;
}

.price-four .btn-buynow  {
  background-color: #5f7452;
}

.price-one .btn-buynow:hover  {
  background-color: #0a5a90;
}

.price-two .btn-buynow:hover  {
  background-color: #821b1e;
}

.price-three .btn-buynow:hover  {
  background-color: #c57413;
}

.price-four .btn-buynow:hover  {
  background-color: #48583e;
}


.price-table2, .price-table3{
  margin-bottom:125px;
}

.price-table4 {
  margin-bottom: 150px
}

.table-one .table-header, 
.table-two .table-header, 
.table-three .table-header, 
.table-four .table-header {
  overflow: hidden;
  padding:20px;
  color: #fff;
}


.table-one .table-header {
  background-color:#0e76bc;
} 

.table-two .table-header {
  background-color:#c03035;
}

.table-three .table-header {
  background-color:#007c2f;
}

.table-four .table-header {
  background-color:#6c825f;
}

.single-table {
  position: relative;
  /*padding-top: 60px;*/
}

/*.table-one:before, */
.table-two:before, 
.table-four:before {  
  border-style: solid;
  border-width: 0 130px 60px;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.table-one:before {
  border-color: transparent transparent #0d6fb1;
} 

.table-two:before {
  border-color: transparent transparent #ac2429;
}

.table-three:before {
  border-color: transparent transparent #e78817;
}

.table-four:before {
  border-color: transparent transparent #5f7452;
}

.table-header h2 {
  color: #fff;
  float: left;
  font-size: 24px;
  margin-top: 7px;
}

.table-header .plan-price {
  float: right;
  margin: 0;
  overflow: hidden;
  padding-top: 1px;
}

.single-table .btn-signup {
  display: block;
  text-align: center;
  position:relative;
  z-index:1;
}

.single-table ul {
  margin: 0;
  padding: 0;
  list-style-type:none;
}

/*.table-one .btn-signup:after, */
.table-two .btn-signup:after, 
.table-three .btn-signup:after, 
.table-four .btn-signup:after {
  content: "";
  position: absolute;  
  border-style: solid;
  border-width: 78px 130px 0;  
  height: 0;
  left: 0; 
  top: -1px;
  width: 100%;
  z-index: -1;
}

.table-one .btn-signup:after {
  border-color: #0d6fb1 transparent transparent;
}

.table-two .btn-signup:after {
  border-color: #ac2429 transparent transparent;
}

.table-three .btn-signup:after {
  border-color: #e78817 transparent transparent;
}

.table-four .btn-signup:after {
  border-color: #5f7452 transparent transparent;
}

.single-table .btn-signup a {
  color: #fff;
  display: inline-block;
  overflow: hidden;
  padding: 20px 0 0 0;
  text-transform: uppercase;
  letter-spacing: 3px;
}


.table-one .btn-signup:hover.btn-signup:after{
 border-color: #0b598d transparent transparent;
}


.table-two .btn-signup.btn-signup:hover:after {
  border-color: #831c20 transparent transparent;
}

.table-three .btn-signup.btn-signup:hover:after {
 border-color: #bd7014 transparent transparent;
}

.table-four .btn-signup.btn-signup:hover:after{
  border-color: #3d4b35 transparent transparent;
}






.gy-60 {
  --bs-gutter-y: 60px;
}

/*------------------- 4.00. Process section  -------------------*/
.process-card {
  border-radius: 40px;
  padding: 40px 40px 32px 40px;
  position: relative;
  background-color: #ffffff;
}

.process-card .process-number {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background-color: #dbeaf7;
  color: #262f7e;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 50px;
  position: absolute;
  top: 35px;
  right: -30px;
}

.process-card .process-direction {
  position: absolute;
  left: calc(100% + 30px);
  top: 42px;
}

.process-card .process-head {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.process-card .process-icon {
  width: 50px;
  margin-right: 20px;
}

.process-card .process-title {
  max-width: 130px;
  margin-bottom: 0;
}

.process-card .process-text {
  margin-bottom: 0;
}

.process-area {
  position: relative;
}

.process-area .process-line {
  width: calc(100% + 80px);
  position: absolute;
  top: 44%;
  left: -30px;
  z-index: 0; /*-1;*/
}

.process-box-body {
  width: 200px;
  height: 210px;
  box-shadow: 0px 20px 60px 0px rgba(16, 55, 65, 0.06);
  background-color: #ffffff;
  text-align: center;
  margin-left: 24px;
  border-radius: 0 50% 50% 50%;
  position: relative;
  z-index: 1;
}

.process-box-body:before {
  content: "";
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  border: 2px solid #f2f4f9;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 0 50% 50% 50%;
  z-index: 0; /*-1;*/
}

.process-box-body .process-number {
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  color: #ffffff;
  background-color: #262f7e;
  display: block;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  transform: translate(-24px, -24px);
  position: relative;
}

.process-box-body .process-number:before,
.process-box-body .process-number:after {
  content: "";
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  background-color: #262f7e;
  position: absolute;
  top: -20px;
  left: -20px;
  border-radius: 50%;
  box-shadow: 0px 20px 60px 0px rgba(0, 35, 160, 0.06);
  opacity: 0.6;
  z-index: -1;
  -webkit-animation: numPulse 4s infinite;
  animation: numPulse 4s infinite;
}

.process-box-body .process-number:after {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.process-box-body .process-content {
  padding: 0 23px;
}

.process-box-body .process-icon {
  margin-bottom: 12px;
  display: block;
}

.process-box-body .process-name {
  font-weight: 400;
  color: #00acee;
}

.process-box-body .process-name a {
  color: inherit;
}

.process-box-body .process-name a:hover {
  color: #262f7e;
}

.process-box:nth-child(even) .process-box-body {
  margin-top: 40px;
}

@-webkit-keyframes numPulse {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes numPulse {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Large devices */
@media (max-width: 1199px) {
  .process-card .process-number {
    right: -10px;
  }

  .process-card .process-direction {
    display: none;
  }

  .process-box-body {
    width: 187px;
  }

  .process-box-body .process-content {
    padding: 0 18px;
  }
}

/* Medium devices */
@media (max-width: 991px) {
  .process-card .process-number:after {
    display: none;
  }

  .process-box-body {
    width: 270px;
  }

  .process-box-body .process-content {
    padding: 0 25px;
  }

  .process-box-body.mt-40 {
    margin-top: 0;
  }

  .process-area .process-line {
    display: none;
  }
}

/* Small devices */
@media (max-width: 767px) {
  .process-title {
    max-width: 116px;
  }

  .process-box-body {
    width: 200px;
  }

  .process-box-body .process-content {
    padding: 0 30px;
  }
}

/* Extra small devices */
@media (max-width: 575px) {
  .process-card {
    border-radius: 30px;
  }

  .process-card .process-number {
    width: 45px;
    height: 45px;
    line-height: 45px;
    background-color: #dbeaf7;
    font-size: 20px;
    top: 15px;
    right: -5px;
  }

  .process-box-body {
    max-width: 280px;
  }

  .process-area .row.justify-content-between {
    justify-content: center !important;
  }
}
