/*--------------------------------------------------------------
# Bail bond pay page css  Start
--------------------------------------------------------------*/


    .bail_banner{
   
  }
  .bail_banner img{
    float: left;
  }

  .bail_banner, #bail_banner {
    /* background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(/assets/img/bb/greybg.png); */
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(247,249,250,1) 35%, rgba(235,235,236,1) 100%);
    padding-top: 60px;
    padding-bottom: 0;
    overflow: clip;
    padding-bottom: 20px;

  }
  .bail_banner .col-md-6{
    text-align: center;



  }
  .bail_banner .b_container {
    /* padding-top: 40px; */

    background: url(../img/hero-bg.png) top center no-repeat;
    background-size: cover;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(247,249,250,1) 35%, rgba(235,235,236,1) 100%);



padding-top: 70px;
  }
  
  .bail_banner h1 {
    margin: 0;
   
    line-height: 70px;
    color: #000;
    margin-bottom: 10px;
   
font-size: 117px;
font-weight: 600;
line-height: 117px;
text-align: left;


  }
  .bail_banner h1 span{
    color: #8F42A9;
  }
  .bail_banner p {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    margin: 5px 0 10px 0;
   

font-size: 47px;
font-weight: 400;
line-height: 54px;
text-align: left;

  }
  

  @media (min-width: 1200px) {

      
  .bail_banner img{
    float: right;
  }

  
  }


  /*--------------------------------------------------------------
# What do you get? Section start
--------------------------------------------------------------*/
.wht_container{
  padding-top: 80px;
  padding-bottom: 100px;
overflow: clip;

 
}
.wht_gt .container h2 {
  text-align: center;

font-size: 50px;
font-weight: 600;
line-height: 70px;

margin-bottom: 60px;

}

.wht_gt .d-item {
  background-color: var(--surface-color);
  /* box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1); */
  height: 100%;
  padding: 34px 30px 24px ;
  text-align: center;
  transition: 0.3s;

  border-top: 3px solid #0dcaf0;
  border-width: 14px 1px 1px 1px;

border-style: solid;

border-color: #8F42A9;


}

.wht_gt .d-item .icon {
  font-size: 36px;
  padding: 20px 20px;
  border-radius: 4px;
  position: relative;
  margin-bottom: 25px;
  display: inline-block;
  line-height: 0;
  transition: 0.3s;
}


.wht_gt .d-item h3 {

color: #000;
margin-bottom: 10px;
font-size: 38px;
font-weight: 600;
line-height: 55px;
letter-spacing: -1px;
text-align: center;
}
.wht_gt .d-item  p {
color: #000;
margin-bottom: 20px;
font-size: 30px;
font-weight: 400;
line-height: 50px;
text-align: center;


}
.txt_alrt{

  background: url(../../assets/img/bb/text_alert_bg.svg) no-repeat bottom center;
  background-size: 1850px auto;
}
.txt_alrt .d-item img{
  margin-bottom: 20px;
}
.txt_alrt .d-item h3{
text-align: left;
font-size: 34px;
font-weight: 400;
margin-bottom: 20px;

}




.txt_alrt .d-item ul{
  

  color:  #3D3D3D;
  margin-bottom: 20px;
  padding: 0;
  margin: 0;
  padding-bottom: 20px;
  font-family: Segoe UI;
font-size: 24px;
font-weight: 400;
line-height: 28px;
text-align: left;

   }
  
  
   .txt_alrt .d-item ul li{
      list-style: none;
      margin-bottom: 20px;
      
   }
   .txt_alrt .d-item ul li:before {
      content: "";
      display: inline-block;
      width: 18px;
      height: 17px;
      background-image: url("assets/images/tick1.png");
      background-image: url(../../assets/img/bb/dot_square.svg);
      /* background: url(/assets/img/); */
      background-size: contain;
      background-repeat: no-repeat;
      margin-right: 5px; /* Adjust the margin as needed */
      /* vertical-align: middle; */
    }


@media (min-width: 1200px) {
  .wht_container{
    max-width: 1322px;
    width: 100%;
    margin: 0 auto;
    }
}




/*--------------------------------------------------------------
# BailbondPay Options Section Start
--------------------------------------------------------------*/
.pay_option2, #pay_option2{
  padding-top: 0;
  padding-bottom: 100px;
}
.pay_option2 img{
  max-width: 100%;
}


.pay_option2 h2 {

  font-size: 50px;
  font-weight: 600;
  line-height: 66.5px;
  text-align: left;
  color: #000;
  }

  .pay_option2 p {

    font-family: Segoe UI;
font-size: 22px;
font-weight: 400;
line-height: 36px;
text-align: left;

  }

  @media (min-width: 1200px) {
    .pay_container{
        max-width: 1322px;
      }
  }


  /*--------------------------------------------------------------
# Call Section Start
--------------------------------------------------------------*/

.call_container {
  background: #8F42A908;
  border: 1px solid #8F42A9;
  border-radius: 10px;
 


}
.call_container .row{
  align-items: center;
}
.call, #call{
  padding-top: 0;
  padding-bottom: 100px;
  margin-right: 20px;
  margin-left: 20px;

}
.call img{
  max-width: 100%;

  display: block;
  margin: 0 auto;
}


.call h2 {




  color: #3D3D3D;
  color: #000;


font-size: 43px;
font-weight: 600;
line-height: 52px;
text-align: left;
margin-bottom: 30px;

  }

  .call h3 {
color: #8F42A9;
font-size: 50px;
font-weight: 600;
line-height: 29px;
text-align: left;

  }

  .call p {

 



font-size: 26px;
font-weight: 400;
line-height: 29px;
text-align: left;


  }
  @media (max-width: 991px) {
   
   
    .bail_banner .col-md-6 { align-items: center;}
  .bail_banner h1 {
    margin: 0;
   
    
   
font-size: 70px;
font-weight: 600;
line-height: 80px;
text-align: left;


  }

  .bail_banner img{

    float: none;
  }
  .wht_gt .container h2{
    font-size: 40px;
  }
  .wht_gt .d-item h3{
    font-size: 30px;
    line-height: 38px;
  }
  .wht_gt .d-item p{
   font-size: 25px;
   line-height: 32px; 
  }
  .call h2{

    font-size: 35px;
    
  }
  .call h3{
    font-size: 35px;
  }
  }
  @media (min-width: 1200px) {
    .call_container{
        max-width: 1322px;
      }
  }