/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Responsive Stylesheet
Project:    Vesto-Minimal Portfolio Template
Author:     Syed Mehdi Hasan
Author URI: http://hmehdi.com/
 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++ Table of contents +++++++++
		1. Desktop
		2. Tablet Landscape
		3. Tablet Portrait
		4. Phone
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* -------------------------------
   desktop
   ------------------------------- */
@media screen and (max-width: 1199px) {
  section#banner-section .banner-text h4 {
    font-size: 60px;
  }
}
/* -------------------------------
   Tablet Landscape
   ------------------------------- */
@media screen and (max-width: 992px) {
  section#banner-section .banner-text {
    padding: 25% 0%;
    width: 100%;
  }
  section#banner-section .banner-text h4 {
    font-size: 34px;
    line-height: 50px;
  }
  section#banner-section .banner-text p {
    font-size: 12px;
    margin: 20px 0px;
  }
  section#about-me-section .about-text {
    padding: 20px 20px;
    width: 100%;
    transform: translate(-12px, 5%);
  }
  section#about-me-section .img-wrapper {
    width: 90%;
  }
  section#projects-section .wrapper {
    height: 300px;
  }
  section#projects-section .wrapper .text h1 {
    font-size: 60px;
    opacity: 0.2;
  }
}
/* -------------------------------
   Tablet Portrait
   ------------------------------- */
@media screen and (max-width: 767px) {
   .menus {
       top: 14px;
   }
   .menu-overlay .menu-list {
       right: 20px;
       top: 160px;
   }
   .menu-overlay .menu-list nav ul li a {
       font-size: 20px;
       line-height: 60px;
       font-weight: 700;
       letter-spacing: 4px;
   }
   section#about-me-section .about-header h6 {
       font-size: 20px;
       font-weight: 600;
       color: #5918df;
       letter-spacing: 2px;
       margin-top: 30px;
   }
   .menu-overlay .menu-list:after, section#about-me-section:after, section#service-section:before, section#all-projects-section:after, footer:after {
      font-size: 70px;
      letter-spacing: 8px;
      z-index: 99;
      color: rgba(0, 0, 0, 0.08);
   }
   section#about-me-section {
       padding-bottom: 40px;
   }
   section#about-me-section .about-text {
      padding-top: 0px;
      width: 100%;
      padding: 40px 20px;
      transform: translate(0px, 0%);
      margin: 50px 0px;
   }
   section#about-me-section .img-wrapper {
       width: 100%;
   }
   section#service-section:before {
      top: 10%;
    /* left: 5%; */
   }
   section#service-section .background-title h6 {
       font-size: 20px;
   }
   section#service-section .service-contents .single-service {
      float: none;
      width: 90%;
      margin: 0px auto;
      margin-bottom: 40px;
   }
   section#projects-section .wrapper {
       height: 400px;
   }


   section#projects-section .wrapper .text h1 {
      font-size: 36px;
      letter-spacing: 14px;
   }
   section#projects-section .wrapper .text p {
       font-size: 12px;
       margin-top: 25px;
   }

   section#all-projects-section .background-title h6 {
       font-size: 22px;
       letter-spacing: 12px;
       line-height: 30px;
   }
   section#all-projects-section:after {
       left: 0%;
   }
  /* .swiper-slide {
        width: 100% !important;
    }
   .swiper-slide.swiper-slide-active {
        width: 100% !important;
    }*/

    section#all-projects-section:after, footer:after {
      /* font-size: 50px; */
      letter-spacing: 8px;
      z-index: 99;
      color: rgba(45, 45, 45, 0.25);
    } 
    section#all-projects-section:after,footer:after  {
      opacity: 1;
    }
  footer .contact-form form .form-group .label {
    margin-bottom: 20px;
  }
  footer .contact-form form .form-group .text-wrapper .form-control {
    padding-left: 0px;
  }
  footer .contact-form .contact-details {
     text-align: center;
    margin-bottom: 15px;
  }
  .contact-details.text-right {
    text-align: center !important;
  }
    footer .background-title {
      margin-top: 90px;
  }
  footer .background-title h6 {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 15px;
  }
  section#about-me-section .about-header {
    text-align: center;
  }
  section#about-me-section:after {
    top: 10%;
    left: 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
}
@media screen and (max-width: 580px) {
  section#service-section:before {
    top: 6%;
  }
}
/* -------------------------------
   Phone
   ------------------------------- */
@media screen and (max-width: 479px) {
   section#banner-section .banner-text {
       padding: 50% 0%;
       z-index: 999;
   }
   section#banner-section .banner-text h4 {
       font-size: 22px;
       line-height: 33px;
   }
   section#banner-section .banner-text p {
    font-size: 12px;
    margin: 20px 0px;
    padding: 0px;
   }
   section#about-me-section:after {
       top: 8%;
   }
  section#about-me-section .about-header {
    transform: translateX(0px);
    text-align: center;
  }
   section#projects-section .wrapper .text h1 {
      font-size: 36px;
      letter-spacing: 14px;
   }
   section#all-projects-section .all-proejcts .drag-section .noUi-handle.noUi-handle-lower {
       left: 40%;
   }

   section#get-started .get-started-content h6 {
       font-size: 20px;
   }
  .menu-overlay .menu-list:after, section#about-me-section:after, section#service-section:before, section#all-projects-section:after, footer:after {
    font-size: 42px;
    width: 100%;
    text-align: center;
    left: 0px !important;
  }

  section#get-started .get-started-content p {
    letter-spacing: 0px;
    line-height: 25px;
    font-weight: 500;
  }
  footer .background-title {
      margin-top: 80px;
  }
  footer .background-title h6 {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 15px;
  }
  .btton-design-1 {
    padding: 10px 20px;
    letter-spacing: 4px;
    font-size: 10px;
    margin-top: 20px;
}
section#banner-section .scroll-down {
  bottom: 70px;
}
section#projects-section .wrapper .shadows {
    width: 200px;
  }
  
}