/*
******* :: INDEX OF RESPONSIVE CSS :: *******
:: 1.0 COMMON CSS
:: 2.0 HEADER AREA CSS
:: 3.0 WELCOME AREA CSS
:: 4.0 FEATURES AREA CSS
:: 5.0 COUNTER AREA CSS
:: 6.0 SCREENSHOTS AREA CSS
:: 7.0 TESTIMONIAL AREA CSS
:: 8.0 PRICE PLAN AREA CSS
:: 9.0 FAQ AREA CSS
:: 10.0 CONTACT AREA CSS
:: 11.0 FOOTER AREA CSS
:: 12.0 Pricing AREA CSS
:: 13.0 My Apps
****************************** */

/* ******************************
:: 1.0 COMMON CSS
****************************** */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ptb_180 {
    padding: 130px 0;
  }

  .ptb_150 {
    padding: 100px 0;
  }

  .ptb_100 {
    padding: 70px 0;
  }
}

@media (max-width: 991px) {
  .res-margin {
    margin-bottom: 45px;
  }
}

@media (max-width: 767px) {
  .ptb_180 {
    padding: 130px 0;
  }

  .ptb_150,
  .ptb_100 {
    padding: 50px 0;
  }

  .res-margin {
    margin-bottom: 30px;
  }
}

@media (max-width: 575px) {
  .store-buttons img {
    max-width: 160px;
  }

  .store-buttons.store-black img {
    max-width: 140px;
  }

  .avatar-lg {
    height: 4rem;
    width: 4rem;
  }
  .avatar-pricing {
    height: 8rem;
    width: 8rem;
  }
  .avatar-custom {
    height: 8rem;
    width: 8rem;
  }

  .ptb_180 {
    padding: 80px 0;
  }
}

@media (min-width: 991px) {
  .foxy-m-b {
    margin-bottom: 2rem !important;
  }
}

/*SECTION HEADING*/
@media (max-width: 991px) {
  h1 {
    font-size: 3em;
  }

  h2 {
    font-size: 36px;
  }

  .section-heading {
    margin-bottom: 50px;
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: 2.8em;
  }

  h2 {
    font-size: 30px;
    line-height: 1.4;
  }
}

@media (max-width: 575px) {
  h1 {
    font-size: 2em;
    line-height: 1.4;
  }

  h2 {
    font-size: 24px;
    line-height: 1.4;
  }

  h3 {
    font-size: 18px;
    line-height: 1.4;
  }

  p {
    line-height: 26px;
  }

  .section-heading > h2 {
    line-height: 1.5;
  }
}

/* ******************************
:: 2.0 HEADER AREA CSS
****************************** */
@media (min-width: 992px) {
  .navbar .navbar-nav .nav-link {
    padding-top: 1.875rem;
    padding-bottom: 1.875rem;
  }

  .navbar-sticky-on .navbar-nav .nav-link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .dropdown-menu {
    opacity: 0;
    display: block;
    visibility: hidden;
    min-width: 14.375rem;
    margin-top: 0;
    transform: translateY(20px);
  }
  .navbar-nav li:hover > ul.dropdown-menu {
    opacity: 1;
    transform: translateY(-10px);
    visibility: visible;
  }
}

@media (max-width: 991px) {
  .main:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: #000;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }

  [data-theme='dark'] .main:before {
    background: #01081f;
  }

  .canvas-open {
    overflow: hidden;
  }

  .canvas-open .main:before {
    width: 100%;
    opacity: 0.95;
    visibility: visible;
  }

  .navbar {
    padding-top: -0.625rem;
    padding-bottom: 0.625rem;
  }

  .navbar.active {
    display: block;
  }

  .navbar-sticky-on .navbar-brand-regular {
    display: none;
    padding-top: 0 !important;
  }

  .navbar-sticky-on .navbar-brand-sticky {
    display: inline;
  }

  .navbar.active .navbar-inner {
    right: 0;
  }

  .navbar .navbar-inner {
    right: -20rem;
    -webkit-transition: right 0.3s 0.2s;
    transition: right 0.3s 0.2s;
  }

  .navbar .nav-link {
    border-bottom: 1px solid #eee;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  [data-theme='dark'] .navbar .nav-link {
    border-bottom: 1px solid #1e2745;
  }

  .navbar.navbar-dark .nav-link {
    color: #54565a;
  }

  [data-theme='dark'] .navbar.navbar-dark .nav-link {
    color: #f6f8f9;
  }

  .navbar.navbar-dark .nav-link:hover,
  .navbar.navbar-dark .nav-link:focus,
  .navbar.navbar-dark .nav-link.active,
  .navbar.navbar-dark .nav-link.current-menu-item {
    color: #2c2e30;
  }

  [data-theme='dark'] .navbar.navbar-dark .nav-link {
    color: #e7eaee;
  }

  [data-theme='dark'] .navbar.navbar-dark .nav-link:hover {
    background: #01081f;
  }
  [data-theme='dark'] .dropdown-item:focus,
  [data-theme='dark'] .dropdown-item:hover {
    background: #01081f;
  }

  .navbar-inner {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 20rem;
    /* padding-top: 0.5rem; */
    background-color: #fff;
    -webkit-box-shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, 0.15);
    border-radius: 0;
    overflow-y: auto;
    z-index: 1050;
  }

  [data-theme='dark'] .navbar-inner {
    background: #151c32;
  }

  .navbar-inner .dropdown-menu:before {
    content: none;
  }

  .navbar-inner .dropdown-menu {
    border: medium none;
    background: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    float: none;
    margin: 0;
    padding-top: 0;
    position: static;
  }

  [data-theme='dark'] .navbar-inner .dropdown-menu .dropdown-item {
    color: #f6f8f9;
  }

  [data-theme='dark'] .navbar-inner .dropdown-menu .dropdown-item:hover {
    background: #01081f;
  }

  .navbar.navbar-dark .dropdown.show > .nav-link {
    color: #2c2e30;
  }
  [data-theme='dark'] .navbar.navbar-dark .dropdown.show > .nav-link {
    color: #e3e4e6;
  }

  .nav-open .main-wrapper {
    -webkit-transform: translate3d(-150px, 0, 0);
    transform: translate3d(-150px, 0, 0);
  }

  /*MOBILE NAVBAR TOGGLER*/
  .navbar-toggler {
    position: absolute !important;
    top: auto;
    right: 0;
    bottom: auto;
    left: auto;
    border: none;
    height: 100%;
    width: 3.75rem;
    background-image: none;
    border-radius: 0;
    z-index: 1;
    display: inline-block;
  }

  .navbar-inner .navbar-toggler {
    position: absolute;
    height: 2.5rem;
    top: 0;
  }

  .navbar-toggler-icon {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    background-image: none !important;
  }

  .navbar-toggler-icon,
  .navbar-toggler-icon:before,
  .navbar-toggler-icon:after {
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }

  .navbar-toggler-icon {
    height: 3px;
    width: 50%;
    background: #7e8085;
    display: inline-block;
  }

  .navbar-dark .navbar-toggler-icon {
    background: #fff;
  }

  .navbar-sticky-on .navbar-toggler-icon {
    background: #7e8085;
  }

  .navbar-dark .navbar-toggler-icon.active:before,
  .navbar-dark .navbar-toggler-icon.active:after {
    background: #fff;
  }

  .navbar-toggler-icon:before,
  .navbar-toggler-icon:after {
    content: '';
    background: #7e8085;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
  }

  .navbar-dark .navbar-toggler-icon:before,
  .navbar-dark .navbar-toggler-icon:after {
    background: #fff;
  }

  .navbar-sticky-on .navbar-toggler-icon:before,
  .navbar-sticky-on .navbar-toggler-icon:after {
    background: #7e8085;
  }

  .navbar-toggler-icon::before {
    top: -0.625rem;
  }

  .navbar-toggler-icon::after {
    top: 0.625rem;
  }

  .navbar-toggler-icon.active {
    background-color: transparent;
    -webkit-transform: scale(0.85) rotate(270deg);
    transform: scale(0.85) rotate(270deg);
  }

  .navbar-toggler-icon.active:before {
    top: 0;
    -webkit-transform: scale(0.65) rotate(45deg);
    transform: scale(0.65) rotate(45deg);
  }

  .navbar-toggler-icon.active:after {
    top: 0;
    -webkit-transform: scale(0.65) rotate(-45deg);
    transform: scale(0.65) rotate(-45deg);
  }
}

.inner-nav {
  background: linear-gradient(
    90deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(77, 70, 207, 1) 0%,
    rgba(107, 77, 214, 1) 100%
  );
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #8b8b8c;
}

.designer-playground-nav {
  position: absolute;
  top: 0;
  background: linear-gradient(
    90deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(77, 70, 207, 1) 0%,
    rgba(107, 77, 214, 1) 100%
  );
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #8b8b8c;
  width: 100%;
}

/* ******************************
:: 3.0 WELCOME AREA CSS
****************************** */

@media (max-width: 991px) {
  .welcome-area,
  .inner .welcome-area {
    height: 700px !important;
  }

  .homepage-3 .welcome-area .subscribe-form {
    width: 100%;
  }

  /* .homepage-5 .welcome-area {
    height: 1150px !important;
  } */
}

@media (max-width: 767px) {
  .welcome-area,
  .homepage-5 .welcome-area,
  .inner-pages.signup .h-100vh {
    /* height: 450px !important;
    padding-top: 90px; */
  }

  .welcome-intro {
    margin-top: 1px;
  }

  .welcome-thumb {
    max-width: 270px;
    padding-top: 20px;
  }

  .homepage-4 .welcome-thumb {
    max-width: 350px;
  }
}

.hide-details {
  display: flex;
}

.main-area-mailchimp {
  width: 100%;
}

@media (max-width: 649px) {
  .service-container {
    padding: 30px;
  }
  .service-text {
    padding-top: 12px;
  }
}

@media (min-width: 650px) {
  .service-container {
    padding: 70px 0;
  }
  .service-text {
    padding-top: 1.5rem;
  }
}

@media (max-width: 575px) {
  .main-area-mailchimp {
    margin-top: 18px;
  }
  .welcome-area,
  .inner .welcome-area {
    height: 670px !important;
  }

  .welcome-intro {
    margin-top: 26px;
  }

  .homepage-3 .welcome-area .subscribe-form input {
    text-indent: 0;
  }

  .welcome-thumb {
    max-width: 230px;
  }
  .hide-details {
    display: none;
  }
}

@media (max-width: 450px) {
  .homepage-3 .welcome-area .subscribe-form input {
    text-indent: 0;
  }

  .welcome-thumb {
    max-width: 230px;
  }
}

/* ******************************
:: 4.0 FEATURES AREA CSS
****************************** */
@media (max-width: 767px) {
  .features-slider-wrapper {
    padding: 52px 18px 90px 21px;
    max-width: 245px;
  }
}

@media (max-width: 575px) {
  .features-slider-wrapper {
    padding: 52px 18px 90px 21px;
    max-width: 220px;
  }
}

@media (min-width: 1200px) {
  .fox-m-b {
    margin-bottom: 3rem;
  }
}

/* Sizing the phones for the app examples */
@media only screen and (min-width: 471px) and (max-width: 1200px) {
  .app-examples {
    height: 425px;
    width: 218px;
    border: 9px solid #f6f9fe;
  }
  .example-sm-container {
    min-height: 435px;
    width: 228px;
  }
}

@media only screen and (max-width: 767px) {
  .howPhone {
    height: 305px;
    width: 156px;
    border: 5px solid black;
    border-radius: 12px;
  }
}

@media only screen and (max-width: 470px) {
  .app-examples {
    height: 305px;
    width: 156px;
    border: 5px solid #f6f9fe;
    border-radius: 12px;
  }
  .example-sm-container {
    min-height: 315px;
    width: 166px;
  }
}

/* ******************************
:: 5.0 COUNTER AREA CSS
****************************** */
@media (max-width: 991px) {
  .single-counter span {
    font-size: 2.5em;
  }
}

@media (max-width: 767px) {
  .single-counter::after {
    height: 45%;
  }
}

@media (max-width: 575px) {
  .counter-area .col-5.single-counter:nth-child(2n)::after {
    display: none;
  }
}

/* ******************************
:: 6.0 SCREENSHOTS AREA CSS
****************************** */
@media (max-width: 575px) {
  .single-screenshot > img {
    max-width: 270px;
    margin: 0 auto;
  }
}

/* ******************************
:: 7.0 TESTIMONIAL AREA CSS
****************************** */
@media (max-width: 767px) {
  .testimonial-area .owl-dots {
    bottom: -15px;
  }
}

/* ******************************
:: 8.0 PRICE PLAN AREA CSS
****************************** */
@media (max-width: 767px) {
  .plan-price > h1 {
    font-size: 4em;
  }

  .plan-button {
    position: inherit;
    left: inherit;
    -webkit-transform: inherit;
    transform: inherit;
  }
}

@media (max-width: 575px) {
  .plan-price > h1 {
    font-size: 3em;
  }
}

/* ******************************
:: 9.0 FAQ AREA CSS
****************************** */
@media (max-width: 575px) {
  .card-header .btn {
    line-height: 1.4;
  }
}

/* ******************************
:: 10.0 CONTACT AREA CSS
****************************** */
@media (max-width: 575px) {
  .homepage-5 .contact-top > h3 {
    font-size: 1.8em;
  }
  .homepage-5 .contact-top h5 {
    font-size: 14px;
  }
}

/* ******************************
:: 11.0 FOOTER AREA CSS
****************************** */
@media (min-width: 992px) {
  .footer-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
  }
}

@media only screen and (min-width: 576px) and (max-width: 991px) {
  .footer-items {
    margin-bottom: 30px;
  }
}

@media (max-width: 575px) {
  .footer-items {
    margin-bottom: 30px;
  }

  .footer-area .col-12:last-of-type .footer-items {
    margin-bottom: 0;
  }
}

/* Pricing Box Height */

@media (min-width: 771px) {
  .pricing-box-height {
    min-height: 713px;
  }
}

/* Login/Register responsive fixes */

@media (min-width: 1px) {
  .d-xs-none {
    display: none;
  }
}

@media (max-width: 580px) {
  .height-xs-align {
    padding-top: 90px;
    align-items: flex-start !important;
  }
}

@media (min-width: 1px) {
  .d-xs-none {
    display: none;
  }
}

@media (max-width: 991px) {
  .modal-dialog {
    min-width: 700;
  }
}
/* 991 576 */

/* .modal-dialog */