@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap');
*{
    margin:0;
    padding:0;
    font-family: "Cabin", sans-serif;
    outline:none !important;
}
:root{
  --primary-color:#7367F0;
  --primary-color-hover:#685ed7;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-family: "Cabin", sans-serif;
}
html{
  width: 100%;
}
body, html {
  line-height: 130%;
  color: #333;
  font-size: 15px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, center {
  display: block;
}
nav ul, ul {
  list-style-type: none;
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
button {
  vertical-align: middle;
}
.btn-primary{
  background: var(--primary-color) !important;
  border-color:var(--primary-color) !important;
  color: #FFF !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus{
  background: var(--primary-color-hover) !important;
  border-color:var(--primary-color-hover) !important;
  color: #FFF !important;
}
.btn-outline-primary{
  background: none !important;
  border-color:var(--primary-color) !important;
  color: var(--primary-color) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus{
  background:var(--primary-color) !important;
  border-color:var(--primary-color) !important;
  color: #FFF !important;
}
.text-primary{
  color:var(--primary-color) !important;
}
.text-success{
  color:#42BC77 !important;
}
.border-primary{
  border-color:var(--primary-color) !important;
}
.lh-150{line-height:150%;}.lh-175{line-height:175%;}.fs-12{font-size:12px;}.fs-13{font-size:13px;}.fs-14{font-size:14px;}.fs-16{font-size: 16px;}.fs-17{font-size: 17px;}.fs-18{font-size: 18px;}.fs-20{font-size: 20px;}.fs-22{font-size: 22px;}.fs-30{font-size: 30px;}.bg-primary-subtle{background-color:#EAE8FD !important;}

/***************************Default CSS Ends Here***************************/

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
  color:var(--primary-color);
}
.btn-outline-primary i{
  background: url(../images/key-icon.svg) no-repeat center center;
  width: 16px;
  height: 16px;
}
.btn-outline-primary:hover i, .btn-outline-primary:active i, .btn-outline-primary:focus i{
  background: url(../images/key-icon-hover.svg) no-repeat center center;
  width: 16px;
  height: 16px;
}
.home-banner{
  background: #F8F8F8;
}
.home-banner h1{
  font-size: 55px;
}
.home-banner h2{
  font-size: 35px;
}
.home-banner .btn{
  height: 52px;
}
.how-it-works-box{
  border:1px solid #E4E4E4;
  transition: all 0.4s;
}
.how-it-works-box:hover, .how-it-works-box:active, .how-it-works-box:focus{
  border:1px solid var(--primary-color);
  transition: all 0.4s;
}
.pricing{
  background: #F7F6FF;
}
.pricing-box .badge{
  transform: rotate(-45deg);
  top:18px;
  left: -45px;
  background: #F3943C !important;
}
.builders-box{
  background: #F6F6F6;
  border:1px solid #F6F6F6;
  transition: all 0.4s;
}
.builders-box:hover, .builders-box:active, .builders-box:focus{
  background: #FFF;
  border:1px solid var(--primary-color);
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.08);
}
.builders-box img.img-fluid{
  max-height: 215px;
  object-position: top;
  transition: all 0.4s;
}
.builders-box:hover img.img-fluid{
  max-height: 215px;
  min-height: 215px;
  object-position: bottom;
}
.slick-track{
  display: flex;
  gap:30px;
}
.slick-prev{
  left:calc(50% - 47px);
}
.slick-next{
  right:calc(50% - 47px);
}
.slick-prev, .slick-next{
  width:35px;
  top:100%;
  margin-top:60px;
  height: 35px;
  border-radius: 4px;
  padding: 10px;
  border:1px solid var(--primary-color);
  text-align: center;
  line-height: 17px;
  color:var(--primary-color);
  font-size: 16px;
  background: #FFF;
  transition: all 0.4s;
}
.slick-prev:before, .slick-next:before{
  display: none;
}
.slick-prev:hover, .slick-next:hover, .slick-prev:active, .slick-next:active, .slick-prev:focus, .slick-next:focus{
  background: var(--primary-color);
  color:#FFF;
}
.pre-templates{
  background: url(../images/pattern.png) repeat var(--primary-color);
}
.tenplate-box{
  border:10px solid #FFF;
}
.tenplate-box img{
  max-height: 350px;
  min-height: 350px;
  margin-bottom: -13px;
  object-position: top;
  transition: all 0.4s;
}
.tenplate-box .overlay{
  background: rgba(0, 0, 0, 0.6);
  margin-bottom: -125px;
  transition: all 0.4s;
}
.tenplate-box:hover .overlay{
  margin-bottom: 0;
}
.tenplate-box:hover img{
  object-position: bottom;
}
.faqs:before{
  content:"";
  display: block;
  background: url(../images/faqs-lhs.png) no-repeat center center;
  width: 315px;
  height: 202px;
  position: absolute;
  left: 0;
  top: 0;
}
.faqs:after{
  content:"";
  display: block;
  background: url(../images/faqs-rhs.png) no-repeat center center;
  width: 312px;
  height: 200px;
  position: absolute;
  right: 0;
  top: 0;
}
.accordion-item{
  border:1px solid #EEE !important;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05);
}
.accordion-button:not(.collapsed){
  background: #FFF;
  color:var(--primary-color);
}
.accordion-button::after{
  display: none;
}
.testimonials{
  background: #F9F9F9;
}
.carousel-control-next, .carousel-control-prev{
  width:35px;
  height: 35px;
  background: none;
  border:1px solid var(--primary-color);
  color: var(--primary-color);
  bottom: -100px;
  top: auto;
  opacity: 1;
}
.carousel-control-next{
  right:calc(50% - 45px);
}
.carousel-control-prev{
  left:calc(50% - 45px);
}
.carousel-control-prev:hover, .carousel-control-prev:active, .carousel-control-prev:focus,
.carousel-control-next:hover, .carousel-control-next:active, .carousel-control-next:focus{
  background: var(--primary-color);
  color: #FFF;
}
footer{
  background:#EAE8FD;
}
.social li a{
  color:#999;
}
footer ul li a:hover, footer ul li a:active, footer ul li a:focus{
  color:var(--primary-color);
}
.links li a{
  color:#333;
  transition: all 0.4s;
}
.copy{
  border-top:1px solid #CCC;
}
.banner{
  background: var(--primary-color);
}
.banner h1{
  font-size: 25px;
}
.templates-full .tenplate-box{
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}
.page-link.bg-light{
  background: #EEE !important;
}
.active>.page-link, .page-link.active{
  background: var(--primary-color) !important;
  color: #FFF !important;
}
.search a{
  right:5px;
  bottom: 7px;
}

/***************************Main CSS Ends Here**********************/

@media(min-width:1201px) and (max-width:1400px){
  .navbar-expand-lg .navbar-nav .nav-link{
    font-size: 14px;
  }
  .navbar-expand-lg .btn{
    font-size:14px;
  }
  .home-banner h1{
    font-size: 42px;
  }
  .home-banner h2{
    font-size: 32px;
  }
  .tenplate-box img{
    min-height: 300px;
    max-height: 300px;
  }
  .btn.fs-18{
    font-size: 16px;
  }
}
@media(min-width:991px) and (max-width:1200px){
  .navbar-expand-lg .navbar-nav .nav-link{
    font-size: 13px;
    padding: 0;
  }
  .navbar-expand-lg .btn{
    font-size:13px;
  }
  .home-banner h1{
    font-size: 40px;
  }
  .home-banner h2{
    font-size: 30px;
  }
  .tenplate-box img{
    min-height: 280px;
    max-height: 280px;
  }
}
@media(max-width:574px){
  .home-banner h1{
    font-size: 35px;
  }
  .home-banner h2{
    font-size: 25px;
  }
  .home-banner .btn {
    line-height: 2px;
  }
}