html{
	font-size: 62.5%; 
	scroll-behavior: smooth;
}
@font-face{
  font-family: "Ubuntu_light";
	src:url('../fonts/Ubuntu-Light.ttf');
}
@font-face{
  font-family: "Ubuntu_regular";
  src:url('../fonts/Ubuntu-Regular.ttf');
}
@font-face{
  font-family: "Ubuntu_medium";
  src:url('../fonts/Ubuntu-Medium.ttf');
}
@font-face{
  font-family: "Ubuntu_bold";
  src:url('../fonts/Ubuntu-Bold.ttf');
}



@font-face {
  font-family:'FontAwesome';
  src:url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2');
  font-weight: normal;
  font-style: normal;
}
body{
	box-sizing: border-box;
  font-family: var(--ubuntu_regular);
	overflow-x: hidden!important;

}
.container-fluid, .row{
	margin:0px;
	padding:0px;
}
h1,h2,h3,h4,h5,h6{font-family: var(--heading);}
p{font-family: var(--desc);}
:root{
  --ubuntu_light:"Ubuntu_light";
	--ubuntu_regular:"Ubuntu_regular";
  --ubuntu_medium:"Ubuntu_medium";
  --ubuntu_bold:"Ubuntu_bold";
   --white: #fefefd;
  --dark-slate-grey: #333a44;
  --black: #181b20;
  --dark-grey: #555d6a;
  --blue-violet: #723cdc;
  --dim-grey: #979797;
  --light-grey: #dfdfdf;
  --light-salmon: #ffb2a4;
  --lavender: #ded6fe;
  --misty-rose: #f2dbd7;
  --lavender-lite: #efeafb;
  --white-smoke: #f4f8fb;
  --medium-slate-blue: #896cff;
}
.navbar{
  width:100%;
  height:6.4rem;
  padding:0;

}
.main_logo{
  max-height: 3.1rem;
}
.my_menu{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-link{
  font-size:1.6rem;
  color:var(--dark-slate-grey);
  text-transform: capitalize;
  margin-right:2rem;
  font-family:var(--ubuntu_regular);
}
.nav-link:hover{
  color:var(--blue-violet);
}

.navbar .offcanvas.show {
  background:var(--white-smoke);
}

.navbar .offcanvas.show .contact_btn:hover{
  background: black;
}
.menu_icon{
  font-size: 2.6rem;
  color:var(--blue-violet);

}



.navbar-toggler:focus{
  outline: none;
  box-shadow: none;

}
.nav-link.active{
  color:var(--blue-violet)!important;
}
.outline_btn{
    border:.1rem solid  var(--black);
    color: var(--black);
    border-radius: 1rem;
    height: 3.8rem;
    width:12.3rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
    transition: border .2s, color .2s, background-color .2s;
}
.fill_bg{
  background: var(--black);
  color:white;
    transition: border .2s, color .2s, background-color .2s;
  height: 3.8rem;
  width: 7.8rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.fill_bg:hover{
  background: var(--blue-violet);
  color:white;
}


/*2.hero_section*/
.hero_section{
  background-image: url(../images/hero_bg.png), linear-gradient(to bottom, var(--lavender), var(--misty-rose));
  background-position: 0 0, 0 0;
  background-size: 16px, auto;
  padding:4rem 0;
  position: relative;
}
.hero_heading{
  font-size: 6rem;
  line-height: 6.6rem;
  font-family: var(--ubuntu_medium);
  color: var(--black);
}
.hero_desc{
  font-size: 1.8rem;
  line-height: 2.6rem;
  font-family: var(--ubuntu_regular);
  color: var(--dark-slate-grey);
  margin:1.5rem 0;
}
.forflex{
  display: flex;
  align-items: center;
}
.hero_btns{
  display: flex;
  gap:2rem;
}
.hero_btn{
  width:13rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  text-decoration: none;
  font-family: var(--ubuntu_regular);
  border:.1rem solid var(--black);
  border-radius: 1rem;
}
.hero_filled_btn{
  background: var(--black);
  color:var(--white);
}
.hero_outline_btn{
  color:var(--black);
}
.hero_filled_btn:hover{
  background: var(--blue-violet);
  border:.1rem solid var(--blue-violet);
  color:white;
}
.hero_outline_btn:hover{
  border:.1rem solid var(--blue-violet);
  color:var(--blue-violet);
}


.hero_right_circle {
  width: 14rem;
  height: 14rem;
  background-color: #1f2123;
   background-image: linear-gradient(to bottom, #fff, var(--medium-slate-blue)); 
  border-radius: 15rem;
  position: absolute;
  right:4%;
  bottom:0%;

  animation: circlup2 10s infinite linear;
  z-index: 1;;

}




@keyframes circlup2{
  0% {
    top: 2%;
  }
  50% {
    top: 8%;
  }
  100% {
    top: 2%;
  }
}






.hero_left_circle {
  width: 14rem;
  border-radius: 15rem;
  position: absolute;

  bottom: auto;
  left: auto;
  right: 1%;
  height: 14rem;
  background-color: #1f2123;
  background-image: linear-gradient(to bottom, #fff, var(--light-salmon));
  bottom: -30%;
  left: 46%;
  right: auto;

  animation: circledown2 10s infinite linear;
}
@keyframes circledown2 {
  0% {
    bottom: 0%;
  }
  50% {
    bottom: 10%;
  }
  100% {
    bottom: 0%;
  }
}

.hero_img{
  position: relative;
  z-index: 4;
}

/*2. heroslider section*/
.hero_slider_section{
  background-image: linear-gradient(to bottom, var(--misty-rose), var(--white));
    overflow: hidden;
  padding:5rem 0rem;
}
.scroll-parent {
  position: relative;
  width: 100vw;
  height: 7rem;
  overflow-x: hidden;
  overflow: hidden;
}

.scroll-element {
  width: inherit;
  height: inherit;
  position: absolute;
  left: 0%;
  top: 0%;
  animation: primary 3s linear infinite;
}
.hero_slider_heading{
  font-size: 2rem;
  color: var(--black);
  font-family: var(--ubuntu_medium);
  text-align: center;
}
.primary {
  animation: primary 20s linear infinite;
}

.secondary {
  animation: secondary 20s linear infinite;
}

@keyframes primary {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}

@keyframes secondary {
  from {
    left: 100%;
  }
  to {
    left: 0%;
  }
}
.scroll-element img{
  max-height: 5rem;
  max-width: 14rem;
  margin:2rem 3rem;
}

/*4.flowchart section*/
.py_6{
  padding:6rem 0;
}
.sec_heading{
  font-family: var(--ubuntu_medium);
  font-size: 4rem;
  line-height: 4.8rem;
  color: var(--black);
  position: relative!important;
  z-index: 1;
}
.mt_5{
  margin-top: 5rem;
}
.mt_3{
  margin-top: 3rem;
}
.mt_4{
  margin-top: 4rem;
}
.simple_card{
  text-align: center;
}
.simple_cd_img{
  width:100%;
  height: 19rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white-smoke);
}
.simple_cd_img img{
  max-width: 13rem;
}
.simple_card .sub_sub_heading{
  margin:2.5rem 0;
}
.simple_card .gen_p{
  margin-top: 0;
}
.feature_card{
    display: grid;
    grid-template-columns: 1fr 6fr;
    border-radius: 1rem;
    background: var(--white-smoke);
    padding:2rem;
}
.feature_heading{
  font-family: var(--ubuntu_medium);
  font-size: 1.8rem;
  color: var(--black);
}
.gen_p{
  font-size: 1.5rem;
  color: var(--dark-slate-grey);
  line-height: 2.5rem;
}
.sec_desc{
  font-size: 1.7rem;
  color: var(--dark-slate-grey);
  line-height: 2.5rem;
}
.feature_left img{
  max-width: 3.2rem;
}
a{
  text-decoration: none;
}
.learn_more_link{
  color:#383b40;
  font-size: 1.6rem;
}
.learn_more_link:hover{
  color: var(--blue-violet);
}
.piot_color{
  color: var(--blue-violet);
}

.sol_card{
  position: relative;
  background: var(--white-smoke);
  border-radius: .5rem;
  border:.1rem solid var(--light-grey);
  padding:2rem;
  overflow: hidden;
  max-width: 60rem;
}

.w_80{
  width:100%;
  margin:0 auto;
  display: block;
}
.icons_list ul{
  display: flex;
  align-items: center;
  justify-content: center;
}
.icons_list ul li{
  list-style: none;
  display: inline-block;
  margin-right: 1rem;
  width:7.4rem;
  height: 7.4rem;
  background: var(--white-smoke);
  box-shadow: 0 1px 30px 1px rgba(0, 0, 0, .1);
  border-radius: 100%;

}
.icons_list ul li img{
  width:3rem;
  display: block;
  margin-top: ;
  margin:0 auto;
  line-height: 8rem;
  margin-top: 2.2rem;
  z-index: 3;
}
.w_70{

  width:90%;
}
.sub_heading{
  font-family: var(--ubuntu_medium);
  font-size: 3.5rem;
  line-height: 4rem;
  color: var(--black);
}
.sub_sub_heading{
  font-family: var(--ubuntu_medium);
  font-size: 2.5rem;
  line-height: 3.5rem;
  color: var(--black);
}

.circle_3{
  z-index: 0;
    width: 20rem;
    height: 20rem;
    background-image: linear-gradient(to bottom, var(--misty-rose), var(--lavender));
    border-radius: 15rem;
    position: absolute;
    top: auto;
    bottom: 45%;
    left: auto;
    right: -7rem;
    z-index: 1;

}
.desc_height{
  height: 10rem;
  margin:2rem 0;
  z-index: 3;
  position: relative;
}
.chat_white{
  max-width: 28.8rem;
  display: block;
  margin:0 auto;
}
.circle_4{
  top: 85%;
    bottom: auto;
    left: auto;
    right: 10%;
    z-index: 0;
    width: 18rem;
    height: 18rem;
    background-image: linear-gradient(to bottom, var(--misty-rose), var(--lavender));
    border-radius: 15rem;
    position: absolute;
}

.feature_card_2{
  position: relative;
  background: var(--white-smoke);
  border-radius: .5rem;
  border:.1rem solid var(--light-grey);
  padding:2rem;
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.feature_circle_1{
  
    top: 0%;
    bottom: auto;
    left: 75%;
    right: auto;

}
.feature_card_2 .gen_p{
  z-index: 3!important;
  position: relative;
}
.same_bg{
   width: 17rem;
    height:17rem;
    background-color: #1f2123;
    background-image: linear-gradient(to bottom, var(--lavender), var(--lavender-lite));
    border-radius: 15rem;
    position: absolute;

}
.feature_circle_2{
 top: 10%;
    bottom: auto;
    left: -3rem;

    z-index: 1;
}
.feature_card_2 .sub_sub_heading, .feature_circle_2 .gen_p, .feature_card_2 img{
  position: relative;
  z-index: 3!important;
}
.feature_card_2 .gen_p{
  color: var(--black);
}
.feature_circle_3{
  top: 6%;
    bottom: 0;
    right: -3rem;

    z-index: 1;
}
.feature_circle_4{
 
    bottom: -9rem;
    left: -3rem;

    z-index: 1;
}

.testi_card{

  position: relative;
  background: var(--white-smoke);
  border-radius: .5rem;
  border:.1rem solid var(--light-grey);
  padding:2rem;
  overflow: hidden;
}
.user_flex{
  display: flex;
  align-items: center;
}

.user_flex_left{
  width:5rem;
  margin-right: 1rem;
}
.user_flex_left img{
  width: 5rem;
  height: 5rem;
  border-radius: 100%;
}
.testi_name{
  font-family:var(--ubuntu_medium);
  font-size: 1.7rem;
  margin:0;
  color: var(--black);
}
.user_flex p{
  color: var(--dark-slate-grey);
  margin:0;
}
.fa-quote-left{
  position: absolute;
  display: inline-block;
  margin-top: 0rem;
}
.fa-quote-right{
  position: absolute;
  display: inline-block;
  margin-top: 0rem;
  padding-left: .5rem;
}
.testi_card .testi_desc::first-letter {
 
  margin-left: 1.9rem;
}
.testi_desc{
  font-size: 1.5rem;
  color: var(--dark-slate-grey);
  line-height: 2.5rem;
}
.blog_image_div{
   width: 100%; /* Set your desired width */
    height: auto; /* Set your desired height */
    overflow: hidden; /* Hide anything that overflows the container */
    position: relative;
    border-radius: .5rem;

}
.blog_img {
    width: 100%; /* Ensure the image covers the container width */
    height: 23.3rem; /* Ensure the image covers the container height */
    object-fit: cover; /* Maintain aspect ratio and cover the container */
    transition: transform 1s ease; /* Smooth zoom effect */
    cursor: pointer;
    border-radius: .5rem;
}
.blog_image_div:hover .blog_img {
    border-radius: .5rem;

    transform: scale(1.2); /* Scale the image on hover */
}
.blog_cate{
  margin:1.5rem 0;
  font-family: var(--ubuntu_bold);
  font-size: 1.7rem;
  color:var(--blue-violet);

}
.blog_title_div{
  width: 100%;
  height: 7rem;

}
.blog_link{
  color:var(--dark-grey);
  font-family: var(--ubuntu_medium);
  font-size: 2.3rem;
  line-height: 2.9rem;
  text-decoration: none;
}
.blog_link:hover{
  color: var(--black);
}
.blog_desc{
  font-size: 1.6rem;
  color: var(--black);
  margin-bottom: 2rem;
  font-family: var(--ubuntu_regular);
}
.dot{
  font-size: 3rem;
 padding:0 1rem;
 display: block;
 margin-top: -1.5rem;
}
.blog_card .user_flex .gen_p{
  display: flex;
  align-items: center;
  height: auto;
}
.main_faq{
  max-width: 64.8rem;
  margin:0 auto;
}
.accordion-header button{
  font-size: 1.5rem;
  font-family: var(--ubuntu_bold);
  background: var(--white-smoke);
  padding:1.5rem 1rem;
  border-radius: .5rem;
  border:.1rem solid var(--light-grey);
}
.accordion-header{
  border-radius: .5rem;
  background: var(--white-smoke);
}
.accordion-item .accordion-collapse{
  background: var(--white-smoke);
  margin-top: 0!important;
}
.accordion-item{
  margin-bottom: 1.7rem;
}
.accordion-button:focus {
    z-index: 3;
      border:transparent!important;

    outline: 0;
    box-shadow: none;
    color:black;
    background: transparent;
    outline:none;
}
.accordion-body{
  font-size: 1.6rem;
  color: var(--black);
}
.accordion-button:focus .accordion-item{

}
.accordion-item{
  border:none;
}

.accordion-button::after{
 
}
.accordion-button:not(.collapsed){
  box-shadow: none;
  background: transparent;
  color:var(--black);
}

/* Remove the default arrow icon */
.accordion-button::after {
    content: ''; /* Remove default content */
    background-image: none; /* Ensure no background image */
}

/* Default state: collapsed with plus icon */
.accordion-button.collapsed::after {
    content: '';
    background-image: url('../images/icons/plus.png'); /* Replace with your plus icon image */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center right; 
    width: 30px; 
    height: 30px;
    margin-left: auto; 
}

.accordion-button:not(.collapsed)::after {
    content: '';
    background-image: url('../images/icons/cross.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
    width: 30px;
    height: 30px;
    margin-left: auto;
    transform: rotate(45deg);
}


.cta_section{
      background-image: url(../images/hero_bg.png), linear-gradient(to bottom, var(--lavender), var(--misty-rose));
    background-position: 0 0, 0 0;
    background-size: 16px, auto;
    border-radius: 2rem;
    overflow: hidden;
  position: relative;
    padding:8rem 0;
}
.forcircles{
 
}

.circle{
  width: 14rem;
  height: 14rem;
  border-radius: 100%;
  
}
.left_circle{
  background-color: #1f2123;
  background-image: linear-gradient(to bottom, #fff, var(--light-salmon));
  border-radius: 15rem;
  position: absolute;

  left:auto;
  right:77%;
  animation: circledown 10s infinite linear;
 
}
.right_circle{
    background-color: #1f2123;
  background-image: linear-gradient(to bottom, #fff, var(--medium-slate-blue));
  border-radius: 15rem;
  position: absolute;
  bottom:10%;
  left:80%;
  animation: circlup 10s infinite linear;
}


@keyframes circledown {
  0% {
    bottom: 0%;
  }
  50% {
    bottom: 10%;
  }
  100% {
    bottom: 0%;
  }
}

@keyframes circlup{
  0% {
    top: 5%;
  }
  50% {
    top: 10%;
  }
  100% {
    top: 5%;
  }
}
.forzindex{
  position: relative;
}

.newsletter_section{
  background: var(--white-smoke);
  padding:2rem 1rem;
  border-radius: .5rem;
  border:.1rem solid var(--light-grey);
}
.newsletter_right_side{
  max-width: 50rem;
  float: right;
}
.newsletter_right_side form input[type="text"]{
  width: 25rem;
  margin-right: 1rem;
  height: 4.3rem;

    border: 1px solid var(--dim-grey);
    color: var(--dark-grey);
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
    margin-bottom: 0;
    padding: .5rem .75rem;
    font-size: 1.6rem;
    line-height: 1.6;
}
.newsletter_right_side form input[type="submit"]{
  width: 10.3rem;
  height: 4.3rem;

    text-align: center;
    border: 1px solid #d0d6de;
    border-radius: 10px;
    background: transparent;

    border-color: var(--black);
    color: var(--black);
    background-color: rgba(0, 0, 0, 0);
    transition: border .2s, color .2s, background-color .2s;
    font-size: 1.6rem;
}
.newsletter_right_side form input[type="submit"]:hover{
    border: 1px solid var(--blue-violet);
    color: var(--blue-violet);

}
.small_p{
  margin:0;
}
footer{
  margin-top:9rem;
}
.footer_logo{
  width: 14rem;
}
.footer_heading{
  font-size: 1.7rem;
  font-family: var(--ubuntu_medium);
  margin:0;
  padding:0;
  margin-left: 0;
}
.footer_link{
    color: var(--dark-slate-grey);
    padding-top: .5rem;
    padding-bottom: .5rem;
    text-decoration: none;
    transition: color .2s;
    font-size: 1.4rem;
    line-height: 3.5rem;
}
.footer_list{
  padding:0;
  margin-top: 1rem;
}
.footer_list li{
  list-style: none;
}
.footer_link:hover{
  color: var(--blue-violet);
}
.footer_left_flex{
  display: flex;
  align-items: center;
  gap:2rem;
}
.footer_left_flex p{
  font-size: 1.3rem;
}
.footer_left_flex ul li{
  list-style: none;
  display: inline-block;
  margin-right: 1rem;
}
.footer_left_flex ul li a{
  text-decoration: underline;
}
.social_list{
  padding:0;
}
.social_list li{
  list-style: none;
  display: inline-block;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 100%;
  padding:.5rem;
  margin-right: 1rem;

}
.social_list li a{
display: flex;
align-items: center;

}
.social_list li a img{
  max-width: 2.4rem;

}
.social_list li:hover{
  background: var(--lavender);
  width: 3.4rem;
  height: 3.4rem;
}

.use_case_section
      .feature_card {
        grid-template-columns: 1fr 8fr;
        gap: 0;
    
}
.main_blog_section .blog_card{
  margin-bottom: 4rem;
}

.switch {
    width: 18rem;
    display: flex;
    height: 4rem;
    margin: 0 auto;
    border-radius: 2.5rem;
    margin-top: 2rem;
    border: .1rem solid var(--blue-violet);
    background: white!important;
}

.switch button {
    height: 100%;
    font-size: 1.6rem;
    text-transform: capitalize;
    width: 50%;
    border: none;
    cursor: pointer;
    background: white;
    transition: background-color 0.3s ease, color 0.3s ease;

}

.monthly_btn {
    border-bottom-left-radius: 2.5rem;
    border-top-left-radius: 2.5rem;
}

.yearly_btn {
    border-bottom-right-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
}

.foractive {
    background-color: var(--lavender)!important;
 
}

.fornonactive {
    background-color: white!important;
    opacity: 1;
}


/*second switch*/

.switch2 {
    width: 18rem;
    display: flex;
    height: 4rem;
    margin: 0 auto;
    border-radius: 2.5rem;
    margin-top: 2rem;
    border: .1rem solid var(--blue-violet);
    background: white!important;
}

.switch2 button {
    height: 100%;
    font-size: 1.6rem;
    text-transform: capitalize;
    width: 50%;
    border: none;
    cursor: pointer;
    background: white;
    transition: background-color 0.3s ease, color 0.3s ease;

}

.monthly_btn2 {
    border-bottom-left-radius: 2.5rem;
    border-top-left-radius: 2.5rem;
}

.yearly_btn2 {
    border-bottom-right-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
}

.foractive2 {
    background-color: var(--lavender)!important;
 
}

.fornonactive2 {
    background-color: white!important;
    opacity: 1;
}


.prc_desc_flex{
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.prc_desc_flex img{
  width:2.6rem;
  height: 2.6rem;
  margin-right: 2rem;
}
.prc_desc_flex .gen_p{
  color: var(--black);
  font-size: 1.7rem;
  margin:0;
}
.pricing_card{
  background: white;
  border:.1rem solid var(--light-grey);
  padding:3rem;
  box-sizing: border-box;
  border-radius:2rem;
  background: var(--white-smoke);
}
.prc_name{
  font-size: 2.2rem;
  color:var(--black);
  margin-bottom: 1rem;
}
.divider{
    width: 100%;
    height: 2px;
    border: 1px solid var(--light-grey);
    background-color: var(--light-grey);
    opacity: 1;
    margin:2rem 0;
}
.big_price{
  font-size: 4.6rem;
  color: var(--blue-violet);
  margin:0;
  line-height: 4.6rem;
  font-family: var(--ubuntu_regular);
}
.small_time{
   font-size: 2.6rem;
  color: var(--blue-violet);
  margin:0;
  line-height: 2.6rem;
  font-family: var(--ubuntu_regular);
}
.pricing_card a{
  margin: 2.5rem 0;
  margin-bottom: 3rem;
}

.prc_desc{
  height: 18rem;
}
.switch2{
  border:.1rem solid var(--lavender);

}
.pricing_card_2{
  text-align: center;
}
.pricing_2_main_pricing{
  margin:2rem 0;
}
.pricing_2_main_pricing .big_price, .pricing_2_main_pricing .small_time{
  font-family: var(--ubuntu_medium)!important;
  margin:1rem 0!important;
  display: inline-block;
}
.pricing_card_2 .prc_name{
  font-family: var(--ubuntu_medium);
}
.pricing_card_2 a{
  margin-top: .6rem;
}
.colorbg{
  background: var(--white-smoke);
  padding:1.6rem 2rem;

}
.colorbg .sec_desc, .nocolor .sec_desc{
  margin:0;
}
.nocolor{
  padding:1.6rem 2rem;
}
.pricing_details img{
   width:2.6rem;
  height: 2.6rem;
}
.nocolor .sec_desc{
  line-height: auto!important;
}

.logos_flex{
  align-items: center;
  display: flex;
  gap:0rem;
  margin-top: 2rem;
}
.logos_flex img{
  max-width: 18rem;
  height: auto;
  display: block;
  margin:0 auto;
}
.test_img{
  border-radius: 2rem;
}
.test_right ul{
  padding:0;
  margin:0;
}
.test_right ul li{
  list-style: none;
  display: inline-block;
}
.test_right ul li img{
  width: 2.4rem;
  height: 2.4rem;
}
.test_text{
  font-size: 2.4rem;
  margin-top: 2rem;
  color:var(--black);
}
.test_flex{
  display: flex;
  align-items: center;
  gap:3rem;
  margin-top: 3rem;

}
.test_flex .prc_name{
  font-size: 1.8rem;
  font-family: var(--ubuntu_bold);
  color: var(--black);
  margin:0;
}
.test_flex img{
  max-width: 18rem;
}
.slash{
  font-size: 3rem;
  font-weight: normal;
  font-family: var(--ubuntu_regular);
}
.yearlyprice{
  display: none;
}
.save_percent{
  display: block;
  font-size: 1.8rem;
  margin-top:.5rem;
  color:var(--black);
  font-family: var(--ubuntu_medium);
  margin-bottom: 1rem;
}
.pricing_yearlly{
  display: none;
}


/*sign up */
.sign_main{
  width: 100%;
  height: auto;
  min-height: 100vh;
  background-image: url(../images/hero_bg.png), linear-gradient(to bottom, var(--lavender), var(--misty-rose));

    background-position: 0 0, 0 0;
    background-size: 16px, auto;
}
.sign_main .hero_desc a{
  color:var(--black);
  text-decoration: underline;
}
.last_p{
  margin:0;
}

.form_main_section{
  margin-top: 1rem;
}
.form_wraper{
  max-width: 48rem;
  display: block;
  margin:0 auto;
      border: 1px solid var(--light-grey);
    background-image: linear-gradient(to bottom, var(--lavender), var(--misty-rose));
    border-radius: 10px;
    padding: 2rem;
    display: block;
}
.form_wraper form input{
  width: 100%;
  height: 4.4rem;
  border:.1rem solid var(--dim-grey);
  padding:.8rem 1.2rem;
  border-radius: 1rem;
  background: transparent;
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
}
.form_wraper form input:focus{
  outline: .1rem solid var(--black);
  color: var(--dark-grey);
}
.form_wraper form input::placeholder{
  text-transform: capitalize;
}
.form_wraper form input[type="submit"]{
  background: var(--black);
  text-transform: capitalize;
  color: white;
}
.form_wraper form input[type="submit"]:hover{
  background: var(--blue-violet);
}
.signup_btns a{
  display: block; width: 100%;
  height: 4.9rem;
  border:.1rem solid var(--black);
  line-height: 4.9rem;
  border-radius: 1rem;
  background: transparent;
  margin-bottom: 2rem;
  font-size: 1.6rem;
  text-align: center;
  color: var(--black);
}
.signup_btns a i{
  margin-right: 1rem;
}
.signup_btns a:hover{
  color: var(--blue-violet);
  border:.1rem solid var(--blue-violet);

}

.forgot_link{
  text-align: center;
  font-size: 1.6rem;
  margin:3rem 0;
  text-align: center;
  display: block;
  text-decoration: underline;
  color: var(--black);
}
.forgot_link:hover{
  color: var(--blue-violet);
}