/*
@File: Arico Template Style

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

*******************************************
*******************************************

** - Default CSS
** - Home Demo One CSS
** - Home Demo Two CSS
** - Home Demo Three CSS
** - About CSS
** - Service Details CSS
** - Project Details CSS
** - Shop CSS
** - Cart CSS
** - Checkout CSS
** - Wishlist CSS
** - Shop Details CSS
** - Blog details CSS
** - Contact CSS
** - Register CSS
** - FAQ CSS
** - 404 CSS
** - Privacy Policy CSS
*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
/*----- Imported CSS links -----*/
@import url("pages-css/menu.css");
@import url("pages-css/home-one.css");
@import url("pages-css/home-two.css");
@import url("pages-css/home-three.css");
@import url("pages-css/about.css");
@import url("pages-css/services.css");
@import url("pages-css/service-details.css");
@import url("pages-css/project-details.css");
@import url("pages-css/shop.css");
@import url("pages-css/cart.css");
@import url("pages-css/checkout.css");
@import url("pages-css/wishlist.css");
@import url("pages-css/shop-details.css");
@import url("pages-css/blog-details.css");
@import url("pages-css/contact.css");
@import url("pages-css/register.css");
@import url("pages-css/team.css");
@import url("pages-css/faq.css");
@import url("pages-css/404.css");
@import url("pages-css/privacy-policy.css");
:root {
  --common-font: 'Roboto', sans-serif;
  --heading-font: 'IBM Plex Sans', sans-serif;
  --transition: .5s all ease;
  --all-size: 16px;
  --white-color: #ffffff;
  --main-color: #5a6ac8;
  --blue-color: #040f53;
  --sky-color: #04a9a9;
  --paragraph-color: #6a7c92;
}

/*----- Default -----*/
body {
  font-family: var(--common-font);
  color: var(--paragraph-color);
  background-color: var(--white-color);
  font-size: var(--all-size);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--blue-color);
  font-family: var(--heading-font);
}

p {
  line-height: 1.7;
}

p:last-child {
  margin-bottom: 0;
}

a {
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-decoration: none;
}

img {
  max-width: 100%;
}

.d-table {
  width: 100%;
  height: 100%;
}

.d-table-cell {
  vertical-align: middle;
}

.ptb-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.pt-100 {
  padding-top: 100px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-100 {
  padding-bottom: 100px;
}

button:focus {
  outline: 0;
}

.btn.focus, .btn:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.common-btn {
  display: inline-block;
  color: var(--white-color);
  padding: 10px 25px;
  font-weight: 500;
  border: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  opacity: 1 !important;
  z-index: 1;
  position: relative;
  z-index: 1;
  background-color: var(--main-color);
  font-size: var(--all-size);
  border-radius: 5px;
}

.common-btn:hover {
  color: var(--white-color);
  -webkit-transform: translate(0, -3px);
          transform: translate(0, -3px);
  background-color: var(--blue-color);
}

.common-link {
  display: inline-block;
  color: var(--main-color);
  font-weight: 500;
}

.common-link:hover {
  color: var(--blue-color);
}

.common-link i {
  position: relative;
  top: 3px;
  z-index: 1;
  font-size: 20px;
}

.common-link i:after {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  top: -1px;
  right: -6px;
  background-color: #e6e2fb;
  border-radius: 50%;
  z-index: -1;
}

.section-title {
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
  text-align: center;
}

.section-title .sub-title {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: var(--main-color);
  background-color: #ede9fb;
  padding: 6px 20px;
  border-radius: 30px;
  margin-bottom: 15px;
}

.section-title h2 {
  font-size: 38px;
  margin-bottom: 0;
  line-height: 1.3;
}

@media (min-width: 1300px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1320px;
    width: 100%;
  }
}

@media only screen and (max-width: 991px) {
  .mean-container .mean-bar {
    background-color: var(--blue-color);
    z-index: inherit;
  }
  .mean-container a.meanmenu-reveal {
    color: var(--white-color);
  }
  .mean-container a.meanmenu-reveal span {
    margin-top: 31px;
    position: relative;
    top: -10px;
    background-color: var(--white-color);
    border-radius: 0%;
  }
  .mobile-nav .logo {
    top: 9px;
  }
  .mobile-nav.mean-container .mean-nav ul li a.active {
    color: var(--main-color);
  }
  .navbar-nav {
    max-height: 425px;
    overflow-y: scroll;
  }
}

@media only screen and (max-width: 767px) {
  :root {
    --all-size: 15px;
  }
  /*----- Default -----*/
  body {
    font-size: var(--all-size);
  }
  .ptb-100 {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .pt-100 {
    padding-top: 50px;
  }
  .pb-70 {
    padding-bottom: 20px;
  }
  .pb-100 {
    padding-bottom: 50px;
  }
  .common-btn {
    padding: 10px 22px;
    font-size: var(--all-size);
  }
  .section-title {
    margin-bottom: 30px;
  }
  .section-title h2 {
    font-size: 25px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  :root {
    --all-size: 15px;
  }
  /*----- Default -----*/
  body {
    font-size: var(--all-size);
  }
  .ptb-100 {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  .pt-100 {
    padding-top: 70px;
  }
  .pb-70 {
    padding-bottom: 40px;
  }
  .pb-100 {
    padding-bottom: 70px;
  }
  .common-btn {
    font-size: var(--all-size);
  }
  .section-title {
    margin-bottom: 30px;
  }
  .section-title h2 {
    font-size: 30px;
  }
}
/*# sourceMappingURL=style.css.map */