/* ------------------------------------------------
--------------------------------------------------
            Navigation
--------------------------------------------------
------------------------------------------------ */

@media only screen and (max-width: 900px) {
    html {
      font-size: 50%;
    }
  
    .header-area .header-container .site-nav-menu {
      float: none;
      position: absolute;
      background: #000;
      width: 100%;
      left: 0;
      top: 7.5rem;
      padding: 3rem 0 15rem 0;
      border-top: 0.1rem solid #fff;
      clip-path: circle(0% at 100% 0%);
      transition: all 0.8s;
    }
  
    .header-area .header-container .site-nav-menu ul.primary-menu li {
      display: block;
      text-align: center;
      margin: 0.5rem;
    }
  
    .header-area .header-container .site-nav-menu ul.primary-menu li a {
      font-size: 1.5rem;
    }
  
    .header-area .header-container .mobile-nav {
      display: block;
      flex: 1;
      text-align: right;
    }
  
    .header-area .header-container .mobile-menu {
      clip-path: circle(112% at 100% 0%);
      text-align: center;
    }
  
    .header-area .header-container .mobile-menu {
      max-height: 100vh;
    }
  
    .header-area .header-container .site-nav-menu ul.primary-menu li .mega-div {
      width: 90%;
    }
  
    .header-area
      .header-container
      .site-nav-menu
      ul.primary-menu
      li
      .mega-div
      h3 {
      text-align: left;
      margin-top: 2rem;
      border-top: 0.1rem solid #bbbcbc;
      border-bottom: 0.1rem solid #bbbcbc;
      padding: 2rem 1rem;
    }
    .header-area .header-container .site-nav-menu ul.primary-menu li .mega-div a {
      line-height: 4.8rem;
      color: #bbbcbc;
      font-size: 1.7rem;
      font-weight: 500;
      letter-spacing: normal;
      padding: 0;
    }
  
    .header-area .header-container .mobile-menu ul.primary-menu,
    .header-area .header-container .site-nav-menu ul.primary-menu {
      flex-direction: column;
    }
  
    .header-area
      .header-container
      .mobile-menu
      ul.primary-menu
      li
      ul.drop-down.open,
    .header-area
      .header-container
      .mobile-menu
      ul.primary-menu
      li:hover
      ul.drop-down.open {
      top: initial;
      position: relative;
      display: block;
      opacity: 1;
      visibility: visible;
    }
  
    .header-area .header-container .mobile-menu ul.primary-menu li .mega-container.open,
    .header-area
      .header-container
      .mobile-menu
      ul.primary-menu
      li:hover
      .mega-conatiner.open {
      top: initial;
      position: relative;
      left: 0;
      opacity: 1;
      visibility: visible;
    }

    .header-area .header-container .mobile-menu ul.primary-menu li .mega-container.open .mega-div,
    .header-area
    .header-container
    .mobile-menu
    ul.primary-menu
    li:hover
    .mega-conatiner.open .mega-div{
        display: block;
    }
  
    .header-area .header-container .mobile-menu.over {
      overflow: scroll;
    }
  
    .header-area .header-container .site-nav-menu ul.primary-menu li a::after {
      display: none;
    }
  
    .header-area
      .header-container
      .mobile-menu
      ul.primary-menu
      li:hover
      ul.drop-down {
      display: none;
    }
  
    .header-area
      .header-container
      .mobile-menu
      ul.primary-menu
      li:hover
      .mega-div {
      display: none;
    }
  
    section.slide .main-slide .slide-content .wrapper {
      width: 38rem;
      margin: 0 auto;
    }
  
    section.slide .main-slide .slide-content .search-bar {
      width: 32rem;
    }
  
    .slide-content .heading h3 {
      font-size: 6rem;
      text-align: center;
    }
  
    .slide-content .heading p {
      text-align: center;
    }
  
    section.service .service-box {
      margin: 4rem;
      padding: 3rem;
    }
  
    section.icon-box {
      text-align: center;
    }
  
    .icon-box .box .content .details p {
      text-align: justify;
    }
  
    section.intro .intro-img {
      margin: 2rem auto;
      width: 90%;
    }

    section.unique{
      margin-bottom: 20rem;
    }

    section.register .row{
        flex-direction: column-reverse;
    }

    section.intro .content {
      margin: 1.5rem;
    }
  
    section.register .register-img {
      margin-bottom: 30rem;
    }
  
    section.register .register-img img {
      max-width: 75%;
      max-height: unset;
      position: absolute;
      bottom: -27rem;
      left: 50%;
    }
  
    section.post .blog {
      margin-top: 4rem;
    }
    .icon-box .icon-container:not(:last-child) {
      border: 0;
    }
  
    footer {
      text-align: center;
    }
  
    footer .newsletter-container {
      margin-top: 2rem;
    }

    footer .newsletter{
      max-width: 30rem;
    }
  
    footer .site-logo {
      float: none;
      margin: 0 auto;
    }
    .close,
    .mobile-search {
      font-size: 2.4rem;
      color: var(--primary);
      display: inline-block;
    }
  
    .close {
      margin: 0 auto;
    }
  
    .mobile-search {
      flex: 4;
      text-align: right;
    }
  
    .search-form {
      align-items: center;
      padding: 2.3rem 0;
    }
  
    .search-form form.p {
      display: inline-block;
    }
  
    .search-form .p .wrapper {
      border-radius: 0;
      width: 36rem;
    }
  
    .search-form .p .wrapper .search-bar {
      width: 30rem;
    }
  
    .search-form .p .wrapper #search-btn {
      font-size: 2.4rem;
    }
    .header-area .header-container .site-nav-menu ul.primary-menu li.none {
      display: none;
    }
  
    .servicePG section.service.post .overlay {
      background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0),
        rgba(142, 198, 64, 0.5)
      );
    }
    .servicePG section.post .content h3 {
      text-align: center;
    }
  
    .servicePG section.post .content p {
      text-align: center;
    }
  
    .servicePG section.service-desc .serv-box {
      margin-top: 5rem;
      margin-right: 2rem;
    }
  
    .servicePG section.service-desc .serv-box h3 {
      text-align: center;
    }
    .servicePG section.service-desc .serv-box p {
      text-align: center;
    }
    .blog section.content {
      margin: 0 2rem;
      text-align: center;
    }

    .loginPG section.log-section{
      background-size: cover;
    }

    .loginPG section.log-section .card{
      width: 90%;
      margin: 0 auto;
    }

    .professional section.register .register-img{
        margin: 2rem 0;
    }

    .contact section.contactSection{
        padding: 2rem;
    }

    .contact section.contactSection .details{
        margin: 4rem auto;
    }

    .s-cunslt section.single .row{
        margin: 0 2rem;
      }

      .s-cunslt section.single .row .img-details .img-container{
        height: unset;
        width: 100%;
      }

      .s-cunslt section.single .row .img-details .img-container img{
        width: 100%;
        height: auto;
      }
      .s-cunslt section.single .row .img-details .details{
        width:100%;
      }
      .s-cunslt section.single .row .info-box{
          margin-top: 5rem;
      }

      .cunslt-list section.list .cunslt-card .img{
        min-height:40rem;
    }

      .cunslt-list section.list .cunslt-card .details{
          padding: 2rem 3.5rem;
      }

      .cunslt-list section.list .cunslt-card .details .row{
          margin: 2rem 0;
      }

      .cunslt-list section.list .cunslt-card .details .row .center{
          margin-bottom: 1rem;
          justify-content: center;
      }
      .cunslt-list section.list .cunslt-card .details h4.post{
          font-size: 1.5rem;
      }

      .cunslt-list section.list .cunslt-card .details p {
        font-size: 1.3rem;
    }
    .cunslt-list section.list .cunslt-card .details .row .center a.btn-secondary{
        font-size: 1.75rem;
    }

    .cunslt-list section.list .cunslt-card{
        margin: 2rem 1rem;
    }

      .cunslt-list section.list .cunslt-card .details .row .center h4{
          font-size: 1.75rem;
      }

      .cart{
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .header-area .header-container .site-nav-menu ul.primary-menu .mega-container{
        z-index:0;
    }
  }
  
  @media only screen and (max-width: 768px) {
    section.unique .details {
      margin-top: 3rem;
    }
  }
  /* --------------------------------------------- */