/*

Template: Vasudha - The complete agency template
Version: 1.0
Author: vedhathemes

NOTE: This file contain responsive style of template

*/
/*================================================
  [  Table of contents  ]
  ================================================
  
  :: Large devices (desktops, 992px and more)
  :: Large devices (desktops, 992px and less)
  :: Medium devices (tablets, 768px and up)
  :: Small device (Mobile, 480px and less)

======================================
[ End table content ]
======================================*/
/*---------------- 01. Large devices (desktops, 1300px and less) ----------------*/
 @media screen and (max-width: 1300px) {
    .contact-banner-icons,
    .social-banner-icons,
    .banner-social_media,.email_id
    {
        display: none;
    }
 }
/*---------------- 01. Large devices (desktops, 992px and more) ----------------*/
 @media screen and (min-width: 992px) {
     .blank-menu {
         width: 100%;
         background:#fff;
         z-index: 999;
    }
    /*========================== Single menu ==========================*/
     .dropdown-list {
         display: block;
         flex-wrap: wrap;
         position: absolute;
         background: #fff;
         visibility: hidden;
         opacity: 0;
         top: 100%;
         left: 0;
         transform: translateY(-2em);
         z-index: -1;
         transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
         margin-top: 0px;
         border:0px;
         border-radius: 0px 0px 2px 2px;
         box-shadow: 0 6px 9px rgba(0,0,0,0.05);
         padding: 0;
    }
     .dropdown-list li {
         display: block !important;
    }
     .dropdown-list a {
         padding: 5px 15px;
         font-size: 13px;
         color: #717171;
         font-family: 'Open Sans', sans-serif;
         display: block;
         flex-basis: 50%;
         -webkit-box-pack: justify;
         justify-content: space-between;
         text-transform: none;
         font-weight: 400;
         opacity:1;
         text-transform: capitalize;
    }
     .menu-list .dropdown {
         position: relative;
    }
     .dropdown:hover .dropdown-list{
         visibility: visible;
        /* shows sub-menu */
         opacity: 1;
         z-index: 1;
         transform: translateY(0%);
         transition-delay: 0s, 0s, 0.3s;
        /* this removes the transition delay so the menu will be visible while the other styles transition */
    }
}
/*---------------- 02. Large devices (desktops, 992px and less) ----------------*/
 @media screen and (max-width: 991px) and (min-width: 768px) {
    /*header*/
     .navbar {
         background: #fff;
    }
     .login-btn {
         display: none;
    }
    .white-logo {
         display: none;
    }
     header.white-head img.black-logo {
         display: block;
    }
     header.white-head nav ul li.nav-item a.nav-link {
         color: #000;
    }
    header.white-head nav ul li.nav-item a.nav-link::before
    {
        content: "";
        background: none;
    }
    header.white-head nav ul li.nav-item.active a.nav-link::before
    {
        background: none;
    }
    header.white-head nav ul li.nav-item.active a.nav-link::before
    {
        background: none;
    }
    header.white-head nav ul li.nav-item a.nav-link:hover::before
    {
        background: none;
    }
    /*end of header*/
    /*homepage*/
     .box-services ul li {
         width: calc(100% / 2);
    }
     .box-services ul li.box-third-list {
         margin-top: 0px;
    }
    /*end of home page*/
    /*footer*/
     .footer-logo-wrapper {
         margin: 0 auto 20px;
    }
     ul.small-footer-icons {
         padding: 0px;
         margin: 20px 0 0;
         text-align: center;
    }
    /*end of footer*/
    /*contact page*/
     .info-form-inner {
         position: relative;
         margin-top: 50px;
         height: auto;
         padding: 30px 0;
    }
    /*end of contact page*/
    /*login page*/
     .login-left-wrapper {
         width: 100%;
    }
     .login-right-wrapper {
         display: none;
    }
    /*end of login page*/
}
/*end of tab*/
/*---------------- 03. Medium devices (tablets, 768px and less) ----------------*/
 @media screen and (max-width: 767px) {
     .get-it-now {
         border-radius: 0;
         text-align: center;
    }
    /*general*/
     .side-left-img, .side-right-img {
         display: none;
    }
    /*end of general*/
    /*header*/
     .navbar-nav {
         width: 100%;
    }
     .white-logo {
         display: none;
    }
     header.white-head img.black-logo {
         display: block;
    }
     header.white-head nav ul li.nav-item a.nav-link {
         color: #000;
    }
    header.white-head nav ul li.nav-item a.nav-link::before
    {
        content: "";
        background: none;
    }
    header.white-head nav ul li.nav-item.active a.nav-link::before
    {
        background: none;
    }
    header.white-head nav ul li.nav-item.active a.nav-link::before
    {
        background: none;
    }
    header.white-head nav ul li.nav-item a.nav-link:hover::before
    {
        background: none;
    }
    /*end of header*/
    /****************home page****************/
     .services ul {
         margin-top: 50px;
    }
     .services ul li {
         width: 100%;
         margin: 0px 0 5px;
    }
     .banner-content-inner {
         text-align: center;
    }
     header.fixed-head {
         padding: 10px;
         background: #fff;
    }
    .banner-para-shadow
    {
        margin: 0 auto;
    }
    .home_banner_inner_slider
    {
        margin-top: 30px;
    }
    .about img
    {
        margin: 0 auto;
    }
    /*end of home page*/
    /*footer*/
     .footer-logo-wrapper {
         margin: 0 auto 10px;
    }
     ul.small-footer-icons {
         margin: 10px 0 0;
         text-align: center;
    }
    /*end of footer*/
     .make-flex {
         display: block;
    }
     .boxed-deliver.second-section {
         margin-top: 0px;
    }
     .left-deliver ul {
         display: block;
    }
     .right-deliver {
         display: block;
    }
     .right-deliver .boxed-deliver {
         width: 100%;
    }
     .right-deliver h2 {
         padding: 30px 20px;
    }
    /*home 3*/
     .slider-image-banner .owl-stage-outer .owl-item .item .container .banner-content {
         width: 100%;
    }
     .service-block a {
         margin-bottom: 20px;
         display: inline-block;
    }
     .side-1, .side-2 {
         background: #fff !important;
    }
     .about-img-wrapper .about-content-inner-wrapper {
         padding: 20px;
    }
     .about-saas {
         margin:20px 0 0;
         padding: 30px 0;
         text-align: center;
    }
     .blog-wrapper a {
         display: block;
         margin-bottom: 30px;
    }
    .about-saas img
    {
        margin-top: 30px;
    }
    .service-box
    {
        padding: 30px 0;
    }
    .service-box img
    {
        margin-bottom: 30px;
    }
    .shadow-effect
    {
        padding: 25px 15px 35px;
    }
    /*end of home 3*/
    /*about*/
     .inner-banner {
         padding-top: 70px;
    }
     .we_deliver {
         padding: 20px 0;
    }
     .work-process {
         padding: 50px 0 20px;
    }
     .about-2-deliver .para-intro {
         width: 100%;
    }
    /*end of about*/
    /*blog page*/
     .blog-sec ul li {
         width: 100%;
    }
     .comment-author-wrapper {
         width: 40px;
         height: 40px;
    }
     .comment-reply-sec {
         margin-left: 30px;
    }
    /*end of blog page*/
    /*career page*/
     .career-sec .para-intro {
         width: 100%;
         margin: 0 auto 0px;
    }
     .career-sec {
         padding: 50px 0;
    }
     .opening-wrapper {
         margin-top: 30px;
    }
     .career-add-ons {
         padding: 40px 0;
         text-align: center;
    }
     .career-add-ons i {
         font-size: 56px;
    }
    /*end of career page*/
    /*career single*/
     .career-single-inner {
         padding: 20px;
    }
     .career-detail {
         padding: 30px 20px;
    }
    /*end of career single*/
    /*feature page*/
     .content-inner {
         width: 100%;
    }
     .feature-inner {
         margin-bottom: 20px;
    }
    /*end of feature page*/
    /*how it works*/
     .link-line {
         display: none;
    }
     .it-works .row {
         padding: 10px 0;
    }
     .inner-port-flex {
         display: block;
    }
     .portfolio-img, .portfolio-inner {
         width: 100%;
    }
    /*end of how it works*/
    /*pricing*/
     .pricing-left ul {
         margin: 0 auto 40px;
    }
     .pricing-outter-wrapper {
         width: 100%;
         margin-bottom: 20px;
    }
    /*end of pricing*/
    /*login*/
     .login-wrapper {
         display: block;
         padding: 20px;
    }
     .login-right-wrapper {
         display: none;
    }
     .login-left-wrapper {
         width: 100%;
    }
     .login-content-inner-wrapper {
         width: 100%;
         max-width: 100%;
    }
    /*end of login*/
    /*terms*/
     .terms-container {
         width: 100%;
    }
    /*end of terms*/
    /*contact*/
     .contact-form form .form-input {
         padding: 0px;
         width: 100%;
         margin-bottom: 10px;
    }
     .info-form-inner {
         position: relative;
         margin-top: 20px;
         height: auto;
         padding: 6px 15px 20px;
    }
     .contact-form form .form-input.form-full-input.btn-input input {
         width: 100%;
    }
    /*end of contact*/

    /*about*/
    .about img
    {
        margin-top: 20px;
    }
    .box-wrapper p
    {
        font-size: 13px;
    }
    .flexed_delivery
    {
        display: block;
    }
    .we_deliver .para-intro
    {
        width: 100%;
    }
    .make-flex
    {
        width: 100%;
    }
    .left-deliver
    {
        padding: 0px;
    }
    .left-deliver ul li
    {
        width: 100%;
        float: unset;
    }
    .client_wrapper
    {
        text-align: center;
    }
    .company-mission
    {
        margin-bottom: 20px;
    }
    .accordian_wrapper
    {
        padding: 15px;
    }
    /*end of about*/

    /*blog*/
    .pagination_wrapper ul
    {
        margin-bottom: 20px;
        text-align: center;
    }
    .inner-banner-content h1 {
        font-size: 34px;
        color: #fff;
        margin-bottom: 20px;
    }
        /*end of blog*/
}
/*end of medium device*/
/*---------------- 04. Small device (Mobile, 480px and less) ------------------*/
 @media screen and (max-width: 480px) {
    p
    {
        font-size: 14px;
    }
    /*general*/
     .side-left-img, .side-right-img {
         display: none;
    }
    /*end of general*/
    /*header*/
     header nav .navbar-brand {
         width: 110px;
    }
     header {
         padding: 2px 10px !important;
    }
     header nav ul li.nav-item a.nav-link {
         padding: 7px 10px;
    }
     .navbar-toggler-icon {
         margin-top: 7px;
         color: #222;
    }
     header.scrolled .navbar-toggler-icon {
         color: #222;
    }
     .navbar-nav {
         background: #fff;
         width: 100%;
    }
     .navbar-nav a {
         color: #222 !important;
    }
     .login-btn {
         display: none;
    }
    /*end of header*/
    /*****************home page****************/
    .banner-social_media,.email_id,
    .social-banner-icons,.contact-banner-icons
    {
        display: none;
    }
    .box-services ul li {
         width: calc(100% / 2);
    }
     .box-services ul li.box-third-list {
         margin-top: 0px;
    }
    .prch-btn a
    {
        margin-bottom: 11px;
        margin-right: 0px;
    }
    /**************end of home page************/
    /*saas-index*/
    .saas-banner
    {
        padding-top: 83px;
    }
    .services-saas {
         padding: 50px 0 0;
    }
     .side-left-img {
         margin: 50px 0;
    }
     .business_settings {
         padding: 50px 0;
    }
     .blog {
         padding: 50px 0;
    }
     .get-it-now {
         border-radius: 0px;
         padding: 30px 0;
    }
    .get-it-now .btn-inner-sec{
        margin-top: 15px;
    }
    .footer-logo-wrapper {
         margin: 0 auto 20px;
    }
     ul.small-footer-icons {
         margin: 15px 0 0;
         text-align: center;
    }
     .home-counter-up .col-md-4
     {
        margin-bottom: 30px;
     }
}