/* SMARTPHONES PORTRAIT */
    
    @media only screen and (max-width: 768px) {
        /*Header*/
        .header-mobile {
            padding: 25px 0 !important;
        }
        .mobile-logo-wrapper {
            display: flex;
            text-align: center;
        }
        .header-mid-links,
        .actionsWrapper {
            margin-top: 12px
        }
        .no-focus,
        .company-contact {
            margin: 0 !important;
        }
        .no-focus img {
            width: 90%;
        }
        .actionsWrapper {
            text-align: center;
        }
        /*Landing Page*/
        main.clientPage .intro>div {
            padding: 20px 0;
        }
        .intro .intro-wrpper-main .intro-form {
            padding: 0 12px;
        }
        .other-option {
            padding: 0;
        }
        .intro div h5,
        .intro div h1 {
            padding: 0 15px;
        }

        h1 {
            font-size: 29px;
        }

        main.clientPage .intro .callout {
            max-width: 100%;
        }
        #packages .tooltip>.tooltip-inner {
            max-width: 100%;
            width: 94%;
            color: white !important;
        }
        #packages .tooltip>.tooltip-inner>div {
            text-align: left;
            color: white !important;
        }
        .tooltip>.tooltip-inner {
            max-width: 100%;
            width: 100%;
            text-align: left;
        }
        .tooltest .tooltip-inner {
            min-width: 350px;
            width: 350px;
            text-align: left;
        }
        .banner-text {
            padding: 1.5rem 0px 1.5rem 0px !important;
        }
        .iconsize {
            width: 13%;
        }
        .display1 {
            display: none;
        }
        .display2 {
            display: block;
        }
        main.clientPage .calloutContainer {
            flex-direction: column;
            padding: 56px 56px;
        }
        .calloutContainer {
            flex-direction: column;
        }
        .caseStudyCarousal .item {
            flex-direction: column;
        }
        body {
            background: #f9f9f9 !important;
        }
        .inline-contents {
            flex-direction: column;
        }
        .inline-contents .icon-button {
            padding: 12px 23px;
            width: 100% !important;
        }
        .inline-contents .other-option {
            margin-top: 10px;
        }
        main.clientPage .intro .carouselWrapper #categoriesCarousel .carousel-inner {
            height: 182px;
        }
        .howItWorks .steps {
            margin-bottom: 12px;
            margin-top: 12px
        }
        main.clientPage .howItWorks {
            padding-bottom: 50px;
        }
        main.clientPage .trustedBy {
            padding-bottom: 0px;
        }
        main.clientPage .trustedBy .subHeading {
            margin-bottom: 2rem;
        }
        main.clientPage .calloutContainer {
            margin: 10px 0;
        }
        h5.subHeading {
            margin-bottom: 30px
        }
        #consultantCarousal {
            margin-top: 2rem;
        }
        main.clientPage .testimonials #testimonialCarousal .item {
            display: contents;
            width: 100%;
        }
        main.clientPage .testimonials #testimonialCarousal .item img {
            padding: 0;
            max-width: 100%
        }
        main.clientPage .testimonials #testimonialCarousal .item .testimonialDetails p {
            max-width: 100% !important;
        }
        main.clientPage .testimonials #testimonialCarousal .item .testimonialDetails p.footerQuote {
            position: relative;
            bottom: 0;
        }
        main.clientPage .testimonials #testimonialCarousal .item .testimonialDetails {
            background: linear-gradient(90deg, #f6f6f6 100%, #fff 100%);
            height: 100% !important;
        }
        main.clientPage .caseStudies #caseStudyCarousal .item {
            height: 550px;
            width: 100%;
            border: 1px solid #aeaeae;
        }
        main.clientPage .intro .carouselWrapper #categoriesCarousel .carousel-caption {
            bottom: 10px;
        }
        main.clientPage .intro .carouselWrapper #categoriesCarousel .carousel-indicators li.active {
            width: 30px;
            height: 3px;
        }
        main.clientPage .trustedBy #clientsCarousal .owl-stage .item {
            /* padding: 0px 74px 0px 85px; */
        }
        main.clientPage .trustedBy #clientsCarousal .owl-stage .item img,
        .main.clientPage .trustedBy #clientsCarousal .owl-stage .item img,
        section.clientPage .trustedBy #clientsCarousal .owl-stage .item img {
            width: 80%;
            height: auto;
            display: unset;
        }

        footer {
            margin-top: 4rem;
        }
        footer a {
            margin: 0;
        }
        main.clientSearchPage .searchResults .results .card,
        .main.clientSearchPage .searchResults .results .card,
        section.clientSearchPage .searchResults .results .card {
            margin-left: 0;
            margin-right: 25px;
            margin-bottom: 2rem;
            height: 300px;
            cursor: pointer;
            display: inline-block;
            width: 100%;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 0 5px 1px #00000045;
        }
        main.clientSearchPage .searchResults .results .calloutCard,
        .main.clientSearchPage .searchResults .results .calloutCard,
        section.clientSearchPage .searchResults .results .calloutCard {
            margin-left: 0;
            margin-right: 25px;
            height: 300px;
            cursor: pointer;
            display: inline-block;
            width: 100%;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 0 5px 1px #00000045;
            background: linear-gradient(180deg, #4F5BC9 0%, #0113B6 100%);
        }
        a.icon-link {
            margin-left: 0;
        }
        a.icon-link img {
            margin-right: 8px;
        }
        main.clientSearchPage .searchResults .searchResultsWrapper {
            padding: 0;
        }
        main.clientSearchPage .searchResults .criteria .activeFilters {
            margin-bottom: 0 !important;
        }
        main.clientSearchPage .searchResults .criteria .activeFilters .resetFilter {
            padding: 0;
        }
        
        .edit-prifile-nuttons .custom-buttons {
            margin-left: 0 !important;
        }
        main.consultantPage .intro .consultantBanner .consultantTestimonial:nth-child(2) {
            right: 1px;
            left: 1px;
        }
        main.consultantPage .projectList #projectsCarousel .project {
            width: 100%;
            margin-bottom: 1rem;
        }
        main.consultantPage .intro .consultantBanner {
            width: 100%;
        }
        main.consultantPage .intro .consultantBanner::before {
            width: 100%;
        }
        .projectList .subHeading {
            width: 100%;
        }
        main.consultantPage .showcase {
            flex-direction: column;
        }
        main.consultantPage .showcase>div,
        main.consultantPage .showcase>div .content,
        main.consultantPage .showcase>div img,
        main.consultantPage .projectList>p,
        .formHolder .plansWrapper .plans.consultant .plan {
            width: 100%;
        }
        main.consultantPage .showcase>div img {
            margin-top: 1rem;
        }
        .showcase .content .icon-button {
            width: 100% !important;
        }
        .showcase .content .icon-button img {
            width: 8%;
            margin-top: 0!important
        }
        .showcase .content h5 {
            margin-top: 1rem;
        }
        .formHolder .plansWrapper .plans.consultant .plan {
            margin-bottom: 1rem;
        }
        main.aboutUsPage .content .cardHolder .card,
        .main.aboutUsPage .content .cardHolder .card,
        section.aboutUsPage .content .cardHolder .card {
            width: 100%;
            margin-bottom: 10px;
        }

        .modal#loginModal .modal-dialog {
            width: 100%;
            padding: 0.5rem;
            margin: 0rem;
        }

        .modal#signupModal .modal-dialog {
            width: 100%;
            padding: 0.5rem;
            margin: 0rem;
        }

        .gurukul-dropdown {
            width:calc(100vw - 65px) !important;
        }

        .mobile-nav {
            background: #E3E3E3;
            border-radius: 4px;
            margin-top: 15px;
        }

        .mobile-nav .nav-link {
            line-height:20px;
        }
        
        .mobile-nav .public-links {
            border-bottom: 1px solid #CECECE;
        }

        main.consultantSearchPage {
            padding-top:20px;
        }

        main.consultantSearchPage .form-field {
            max-width:100%;
        }

        main.selfServiceDashboard .searchBox .actions,
        .main.selfServiceDashboard .searchBox .actions,
        section.selfServiceDashboard .searchBox .actions {
            flex-direction: column-reverse;
            align-items: center;
        }

        main.selfServiceDashboard .searchResults .card, .main.selfServiceDashboard .searchResults .card, section.selfServiceDashboard .searchResults .card {
            width: 100%;
        }

        main.selfServiceDashboard .searchResults .calloutForPayment, .main.selfServiceDashboard .searchResults .calloutForPayment, section.selfServiceDashboard .searchResults .calloutForPayment {
            width: 100%;
            position: unset;
        }

        main.selfServiceDashboard .searchResults .calloutForPayment button, .main.selfServiceDashboard .searchResults .calloutForPayment button, section.selfServiceDashboard .searchResults .calloutForPayment button {
            width: calc(100% - 70px);
            bottom: 35px;
        }

        main.selfServiceDashboard .viewStatus, .main.selfServiceDashboard .viewStatus, section.selfServiceDashboard .viewStatus {
            align-items: start;
            flex-direction: column;
        }

        main.selfServiceDashboard h5, .main.selfServiceDashboard h5, section.selfServiceDashboard h5 {
            margin-bottom: 20px;

        }

        main.selfServiceDashboard .viewStatus > div, .main.selfServiceDashboard .viewStatus > div, section.selfServiceDashboard .viewStatus > div
        {
            width: 100%;
        }

        .steps
        {
            width: 100%;
        }

        .formHolder form > div.width-60 {
            max-width: 100%;
       }

       .formHolder .steps .step:not(:last-child)::after {
        content: "";
        width: 23px;
        border: 1px solid #0C17B015;
        height: 2px;
        position: absolute;
        right: -25px;
        top: 50%;
        }

        .formHolder .steps .step {
            display: inline-block;
            background-color: #0C17B015;
            color: #0112B6;
            padding: 5px 15px;
            font-weight: 600;
            position: relative;
            margin-right: 27px;
            opacity: 0.5;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .formHolder .plansWrapper .plans .plan
        {
            width: 100%;
            margin-bottom: 20px;
        }

        .modal#selfServiceThankYou .modal-dialog, .modal#consultantThankYou .modal-dialog, .modal#enquiryThankYou .modal-dialog {
            width: 100%;
            height: 400px;
            padding: 0.5rem;
            margin: 0rem;
        }

        main.clientPage .caseStudies #caseStudyCarousal .item, .main.clientPage .caseStudies #caseStudyCarousal .item, section.clientPage .caseStudies #caseStudyCarousal .item {
            box-shadow: unset;
        }

        .client_logo_title
        {
            text-align: center;
            padding: 10px 15px;
        }

        main.consultantPage .intro {
            padding-top: 20px;
        }

        .cons-respo-pt
        {
            padding-top: 3rem !important;
        }

        .cons-testo-respo
        {
            background-color: unset;
            margin-right: 0px;
        }

        .modal#viewProject .modal-content {
            padding: 30px;
            width: 100%;
        }

        .modal#viewProject .modal-content .main > h5, .modal#viewProject .modal-content .main > p {
            width: 100%;
            line-height: 20px;
            padding: 0.5rem;
            margin: 0rem;
        }

        .btn.icon-button span, .btn.icon-button img {
            line-height: 24px;
            display: block;
            font-size: 14px;
            color: #FFFFFF;
        }

        main.consultantSearchPage .searchResults .results #projectsCarousel .project
        {
            width: 100%;
        }

        .modal#advanceFilter .modal-dialog {
            width: 100%;
            padding: 0.5rem;
            margin: 0rem;
        }

        .adv-fil-respo
        {
            padding-top: 1rem !important;
        }

        .adv-fli-text
        {
            padding-top: 20px;
        }

        .gurukul_logo {
            width: 65%;
        }

        main.faqPage .accordion, .main.faqPage .accordion, section.faqPage .accordion {
            width: 95%;
            margin: auto;
        }

        main.faqPage .accordion .card, .main.faqPage .accordion .card, section.faqPage .accordion .card
        {
            padding: 20px 11px;
        }

        main.faqPage .accordion .card .card-header::after, .main.faqPage .accordion .card .card-header::after, section.faqPage .accordion .card .card-header::after
        {
            right: 19px;
        }

        .loging-button {
            margin-right: 1.5rem !important;
        }

        .foot-respo-right
        {
            text-align: right;
        }

        main.clientPage .testimonials #testimonialCarousal .item img, .main.clientPage .testimonials #testimonialCarousal .item img, section.clientPage .testimonials #testimonialCarousal .item img {
            padding: 0px;
        }

        main.consultantPage .testimonials #testimonialCarousal .item .testimonialDetails {
            padding: 30px 20px;
            width: 47%;
        }

        main.caseStudyPage .details .content h2, main.caseStudyPage .details .content h5, main.caseStudyPage .details .content p, main.caseStudyPage .details .content img, .main.caseStudyPage .details .content h2, .main.caseStudyPage .details .content h5, .main.caseStudyPage .details .content p, .main.caseStudyPage .details .content img, section.caseStudyPage .details .content h2, section.caseStudyPage .details .content h5, section.caseStudyPage .details .content p, section.caseStudyPage .details .content img {
            padding: 0px 22px;
        }

        main.caseStudyPage .details .category, .main.caseStudyPage .details .category, section.caseStudyPage .details .category {
            position: absolute;
            left: 0;
            top: 50px;
            padding: 10px 23px;
            color: #FFFFFF;
        }

        main.caseStudyPage .details .duration, .main.caseStudyPage .details .duration, section.caseStudyPage .details .duration {
            position: absolute;
            right: auto;
            left: 0px;
            top: 100px;
            display: flex;
            padding: 10px 20px;
        }

        main.clientPage .howItWorks #firstStep::before, .main.clientPage .howItWorks #firstStep::before, section.clientPage .howItWorks #firstStep::before {
            display:none;
        }

        main.clientPage .howItWorks #secondStep::before, .main.clientPage .howItWorks #secondStep::before, section.clientPage .howItWorks #secondStep::before {
            display:none;
        }

        main.clientPage .howItWorks #thirdStep::before, .main.clientPage .howItWorks #thirdStep::before, section.clientPage .howItWorks #thirdStep::before {
            display:none;
        }

        main.consultantPage .howItWorks #firstStep::before, .main.consultantPage .howItWorks #firstStep::before, section.consultantPage .howItWorks #firstStep::before {
            display:none;
        }

        main.consultantPage .howItWorks #secondStep::before, .main.consultantPage .howItWorks #secondStep::before, section.consultantPage .howItWorks #secondStep::before {
            display:none;
        }

        main.consultantPage .howItWorks #thirdStep::before, .main.consultantPage .howItWorks #thirdStep::before, section.consultantPage .howItWorks #thirdStep::before {
            display:none;
        }

        main.clientPage .calloutContainer p
        {
            text-align: center;
            padding: 0px 0px 20px 0px;
        }

        main.clientPage .calloutContainer h5
        {
            text-align: center;
        }

        .dropdown .dropdown-menu a {
            height: 40px;
            margin: 0;
            text-overflow: ellipsis;
            width: 100%;
            overflow: hidden;
        }

        .dropdown .dropdown-menu {
            width: auto;
            max-width: calc(100% - 35px);
            margin: auto;
            margin-bottom: 15px;
            margin-top: 15px;
        }

        main.caseStudyPage .details .content .feedback > div:first-child, .main.caseStudyPage .details .content .feedback > div:first-child, section.caseStudyPage .details .content .feedback > div:first-child {
            padding-left: 0;
        }

        main.categoryDetailsPage .content, .main.categoryDetailsPage .content, section.categoryDetailsPage .content {
            padding: 50px 15px;
        }

        main.consultantPage .calloutContainer div
        {
            text-align: center;
        }

        .bootstrap-select.dropDown_list{
            width: 83%!important;
        }
        
        .bootstrap-select.select_width{
            width: 83%!important;
        }

        .actions .btn.icon-button
        {
            padding: 9px;
        }

        .modal#advanceFilter .filterForm .actions button {
            margin-left: 0px;
            font-weight: 600;
            width: 280px;
        }

        .mobile-nav
        {
            padding-bottom: 18px;
        }

        .navbar-expand-lg .navbar-nav .dropdown-menu .inner-dropdown
        {
            width: 100%;
        }

        .modal#viewProject .modal-dialog {
            width: 100%;
            padding: 0.5rem;
            margin: 0rem;
        }

        .login-respo-align
        {
                margin-left: 5%;
        }

        .formHolder .plansWrapper .plans.consultant .plan {
            height: 407px;
        }


        .modal#consultantThankYou .modal-dialog .actions a
        {
            margin: 0px 9px 0px 9px;
        }

        .modal#selfServiceThankYou .modal-dialog .actions a
        {
            margin: 0px 9px 0px 9px;
        }
     
    }