/* hero section  */

/*  */
/*  */
/*  */




/* choose section  */
.pricing_section{
display: grid;
background: #FFF;
margin-top: 110px;
}
#pricing_section{
position: relative;
}
#pricing_section::before{
  content: '';
  width: 100vw;
  height: 2010px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('../img/backgrounds/section-bg.webp');
  background-size: cover;
  background-position: center;
  z-index: -1;
}
hr{
background: #D9D9D9;
margin: 25px 0;
height: 1px;
border: none;
}

#pricing_section h2{
font-size: 2.8rem;
font-weight: 700;
line-height: normal;
text-align: left;
}

#pricing_section p{
font-size: 1.6rem;
font-weight: 500;
line-height: 2.9rem;
margin: 10px 0 0 0;
text-align: left;
width: 100%;
}

#pricing_section h3{
color: #63635E;
font-size: 1.6rem;
font-weight: 700;
line-height: normal;
margin-top: 15px;
}

#pricing_section h3 span{
font-size: 3.2rem;
font-weight: 900;
color: #0C2139;
}

#pricing_section h4{
font-size: 2.0rem;
font-weight: 700;
line-height: normal;
margin-bottom: 5px;
}

#pricing_section li{
color: #63635E;
font-size: 1.6rem;
font-weight: 500;
line-height: 29px; 
margin-top: 10px;
display: flex;
}

#pricing_section li::before{
content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M10.0001%201.66699C5.40841%201.66699%201.66675%205.40866%201.66675%2010.0003C1.66675%2014.592%205.40841%2018.3337%2010.0001%2018.3337C14.5917%2018.3337%2018.3334%2014.592%2018.3334%2010.0003C18.3334%205.40866%2014.5917%201.66699%2010.0001%201.66699ZM13.9834%208.08366L9.25841%2012.8087C9.14175%2012.9253%208.98342%2012.992%208.81675%2012.992C8.65008%2012.992%208.49175%2012.9253%208.37508%2012.8087L6.01675%2010.4503C5.77508%2010.2087%205.77508%209.80866%206.01675%209.56699C6.25841%209.32533%206.65841%209.32533%206.90008%209.56699L8.81675%2011.4837L13.1001%207.20033C13.3417%206.95866%2013.7417%206.95866%2013.9834%207.20033C14.2251%207.44199%2014.2251%207.83366%2013.9834%208.08366Z%22%20fill%3D%22%231E72EE%22%2F%3E%3C%2Fsvg%3E");
transform: translateY(3px);
margin-right: 8px;
}
#starter li:last-child{
    opacity: 0;
    user-select: none;
}

#pricing_section h5{
font-size: 2.0rem;
font-weight: 700;
line-height: normal;
}

#pricing_section a{
border-radius: 20px;
background: rgba(30, 114, 238, 0.10);
display: grid;
width: 100%;
padding: 10px;
margin-top: 130px;

color: #1E72EE;
text-align: center;
font-family: var(--button_font);
font-size: 1.6rem;
font-style: normal;
font-weight: 700;
line-height: 35px;
text-transform: capitalize;
}
#pro{
border-radius: 20px;
background: linear-gradient(130deg, #1E72EE 2.06%, #2258D8 98.64%);
box-shadow: 0 42px 34px 0 rgba(34, 88, 216, 0.30);
padding: 30px;
perspective: 800px;
}
#pro *{
color: white !important;
}
#pro :is(p, h3, li){
color: rgba(255, 255, 255, 0.80) !important;
}
#pro li::before{
content: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.0001%201.66699C5.40841%201.66699%201.66675%205.40866%201.66675%2010.0003C1.66675%2014.592%205.40841%2018.3337%2010.0001%2018.3337C14.5917%2018.3337%2018.3334%2014.592%2018.3334%2010.0003C18.3334%205.40866%2014.5917%201.66699%2010.0001%201.66699ZM13.9834%208.08366L9.25841%2012.8087C9.14175%2012.9253%208.98342%2012.992%208.81675%2012.992C8.65008%2012.992%208.49175%2012.9253%208.37508%2012.8087L6.01675%2010.4503C5.77508%2010.2087%205.77508%209.80866%206.01675%209.56699C6.25841%209.32533%206.65841%209.32533%206.90008%209.56699L8.81675%2011.4837L13.1001%207.20033C13.3417%206.95866%2013.7417%206.95866%2013.9834%207.20033C14.2251%207.44199%2014.2251%207.83366%2013.9834%208.08366Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
}
#pro a{
background: #0C2139;
margin-top: 30px;
}


/*  */
/*  */
/*  */


/* white label section  */
#white_label{
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 15px;
    background-image: url(../img/backgrounds/white-label-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #0C2139;
    background-blend-mode: soft-light;
    border-radius: 40px;
    margin-top: 70px;
}
#white_label h2{
text-align: left;
color: #FFF;
font-size: 4.2rem;
font-weight: 900;
letter-spacing: -1.26px;
}
#white_label p{
width: 95%;
color: #FFF;
text-align: left;
opacity: 0.7;
margin: 15px 0 0 0;
}
#white_label a{
    margin: 37px 0 0 0 !important;
}
/*  */
/*  */
/*  */



/* choose us section  */
#choose_us{
display: grid;
align-items: center;
gap: 60px;
}
#choose_us h2{
font-size: 4.5rem;
line-height: normal;
text-align: left;
letter-spacing: -1.35px;
padding-bottom: 10px;
}
.featured_text {
display: flex;
align-items: flex-start;
gap: 13px;
margin-top: 20px;
}
.featured_text h3{
font-size: 2.4rem;
line-height: normal;
}
.featured_text p{
font-size: 1.6rem;
line-height: 27px;
margin-top: 7px;
}

/*  */
/*  */
/*  */










/* desktop version  */
@media screen and (min-width: 767px){
/* hero section  */
#hero h1{
    margin: 210px 100px 15px 100px;
}
#hero p{
    margin: 0 60px;
}
/*  */
/*  */
/*  */


/* choose section  */
.pricing_section{
border-radius: 40px;
border: 1px solid #EDEDED;
grid-template-columns: repeat(3, 1fr);
gap: 85px;
overflow: visible;
padding: 50px;
}
#pro{
margin: -100px -25px 0 -25px;
}
/*  */
/*  */
/*  */


/* choose us section  */
#choose_us{
    grid-template-columns: repeat(2, 1fr);
}
}









/* mobail version  */
@media screen and (max-width: 767px){
#white_label{
    flex-direction: column;
}

.pricing_section{
    margin-top: 30px;
}
.pricing_section a{
    margin-top: 30px !important;
}

.pricing_section > div{
margin-top: 30px;
border: 1px solid #EDEDED;
border-radius: 40px;
padding: 30px;
}


#white_label{
    padding: 20px;
    margin: 70px 10px 0 10px;
    gap: 20px;
}
#white_label h2{
    font-size: 3.5rem;
    text-align: center;
}


#choose_us{
    gap: 20px;
}
#choose_us h2{
    text-align: center;
}
}