/*
|----------------------------------------------------------------------------
	AboutMe - Personal Portfolio Resume Template (Bootstrap 5) Main CSS
	Author: MGScoder
	Author URL: https://themeforest.net/user/mgscoder
	primary color: #000099 rgba(4, 185, 98, 0.8)
|----------------------------------------------------------------------------
*/
@media screen and (max-width: 1024px) {
    .timeline > li > .timeline-panel {
        width: 45%;
    }
}

@media screen and (max-width: 991px) {
    nav.navbar.mgsb4navbar .navbar-brand {
        padding: 0;
    }

    #header nav.navbar.mgsb4navbar .navbar-collapse {
        background-color: #f2f2f2;
        width: 200px;
        padding: .5rem 1rem;
        margin-top: 0;
    }

    nav.navbar.mgsb4navbar .navbar-nav a.nav-link, .mgsfixed-nav nav.navbar.mgsb4navbar .navbar-nav a.nav-link {
        padding: .5rem 1rem;
        color: #000;
    }

    nav.navbar.mgsb4navbar .navbar-nav a.nav-link:hover, nav.navbar.mgsb4navbar .navbar-nav a.nav-link.active,
    .mgsfixed-nav nav.navbar.mgsb4navbar .navbar-nav a.nav-link:hover, .mgsfixed-nav nav.navbar.mgsb4navbar .navbar-nav a.nav-link.active {
        color: #fff;
    }

    nav.navbar.mgsb4navbar .navbar-brand {
        padding: 0;
    }

    .mgsfixed-nav nav.navbar.mgsb4navbar .navbar-brand > img.logo, .mgsfixed-nav .navbar-brand .logo {
        height: 56px;
    }

    .navbar-collapse ul li {
        border-bottom: 1px solid #c5c5c5;
    }


    .banner-content h1 {
        font-size: 42px;
    }

    .banner-content h3 {
        font-size: 18px;
    }

    .intro-text {
        margin: 0 10% 60px;
    }

    .about-box-style .experience-content {
        padding: 20px 12px;
    }

    .service-menu a i {
        padding: 0 10px 0 0;
    }

    .footer h4.widget-title {
        font-size: 22px;
    }

    .comment-wrap {
        padding: 30px;
    }
}

@media screen and (max-width: 767px) {
    .portfolio-wrapper {
        margin: 0 auto 30px;
    }

    .no-space .portfolio-wrapper {
        margin: 0 auto;
    }

    .banner-content {
        margin-bottom: 30px;
        text-align: center;
    }

    .banner-content {
        max-width: 100%;
    }

    .banner-content h1 {
        font-size: 48px;
    }

    .banner-content h3 {
        font-size: 22px;
    }

    #home .quoteForm-holder {
        margin-top: 30px;
        position: static;
        transform: translate(0px);
    }

    .quoteForm {
        margin: 0 auto;
    }

    .breadcrumb, #single-page-banner.page-title h2 {
        text-align: center;
    }

    #about .about-text .title-box {
        margin: 60px 0 40px;
    }

    #about .profile-image {
        margin: 0 auto 50px;
    }

    .about-box-style .experience-content {
        padding: 20px 15px;
    }

    aside#pfolio-single-content {
        margin-top: 30px;
    }

    #commentform .form-group .col-sm-6 {
        margin: 0 0 30px;
    }

    #commentform .form-group .col-sm-6:last-child {
        margin: 0;
    }

    /*timeline*/
    .about-timeline-style .nav.nav-tabs, .about-box-style .nav.nav-tabs {
        max-width: 100%;
    }

    #about .icon-holder .tab-content-title {
        left: 0;
        margin-left: 90px;
    }

    #about .nav-tab-menu .nav-tabs > li {
        width: 50%;
    }

    #about .icon-holder {
        text-align: left;
    }

    #about .icon-holder i {
        left: 0;
        margin: 0 0 0 7.5px;
    }

    #about .icon-holder .sub-title {
        left: 0;
        margin-left: 90px;
    }

    ul.timeline:before {
        left: 40px;
    }

    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }

    ul.timeline > li > .timeline-badge {
        left: 15px;
        margin-left: 0;
    }

    ul.timeline > li > .timeline-panel {
        float: right;
        padding-top: 55px;
    }

    ul.timeline > li > .timeline-panel:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto;
    }

    ul.timeline > li > .timeline-panel:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto;
    }

    .timeline li p.date, .timeline li p.date-inverted {
        left: 50%;
        font-weight: 400;
        margin: 10px 0 20px 80px;
        text-align: left;
        top: 0;
    }

    .timeline .experience-content {
        margin: 10px 0 0;
        text-align: left;
    }

    #service-single-content aside {
        margin-top: 60px;
    }

    .service-menu a i {
        padding: 0 10px;
    }

    .testimonial-item {
        margin: 0 5%;
    }

    #contactForm .sub-text {
        bottom: 70px;
    }

    .parallax, .home-top-banner, .home-top-banner-2 {
        background-attachment: scroll;
    }

    .footer-top .column {
        margin-bottom: 90px;
    }

    .footer-top .column:last-child {
        margin-bottom: 50px;
    }

    .footer h4.widget-title {
        font-size: 24px;
    }

    .breadcrumb {
        float: left;
    }
}

@media screen and (max-width: 667px) {
    .service-wrap {
        min-height: 340px;
    }

    .pricing-plan:first-child {
        margin: 0 0 30px;
    }

    .pricing-plan, .pricing-plan.active, .pricing-table .pricing-plan:last-child, .pricing-table .pricing-plan:first-child {
        border-radius: 8px;
        width: 100%;
    }

    .testimonial-item {
        margin: 0;
    }

    .post-title h1 {
        font-size: 32px;
    }
}

@media screen and (max-width: 575px) {
    #portfolio .portfolio-wrapper, .isotopeContainer .isotopeSelector {
        width: 100%;
    }

    #footer .latest-pfolio .col-sm-4.no-space {
        width: 33.33333333%;
    }
}

@media screen and (max-width: 480px) {
    .banner-content h1 {
        font-size: 42px;
    }

    .banner-content h3 {
        font-size: 20px;
    }

    .title-wrap .section-title {
        font-size: 34px;
    }

    .post-title h1 {
        font-size: 24px;
    }

    .pricing-plan-wrap h3 {
        font-size: 30px;
    }

    .pfolio-list .col-sm-3,
    .pfolio-list .col-sm-4,
    .pfolio-list .col-xs-6 {
        width: 50%
    }

    .post-navigation .col-xs-6 {
        width: 50%;
    }

    .about-wrap {
        min-height: auto;
    }

    #related-blog .col-xs-4 {
        width: 100%;
    }

    .banner-content h1.type-animate a.typewrite {
        font-size: 40px;
    }
}

@media screen and (max-width: 420px) {
    .title-wrap .section-title {
        font-size: 30px;
    }

    #home .owl-carousel .slider-content h2.banner-title-text {
        font-size: 36px;
    }

    #about .nav-tab-menu .nav-tabs > li {
        width: 100%;
    }

    .pricing-plan-wrap h3 {
        font-size: 26px;
    }

    .our-team .col-sm-3,
    .our-team .col-xs-6 {
        width: 100%
    }
}

@media screen and (max-width: 375px) {
    .post-navigation a {
        font-size: 16px;
    }

    .sub-title {
        font-size: 26px;
    }

    .post-navigation .post-navbtn a.btn-transparent span {
        display: none;
    }
}

@media screen and (max-width: 360px) {
    .title-wrap .section-title {
        font-size: 26px;
    }

    .pricing-plan-wrap h3 {
        font-size: 22px;
    }

    .isotopeContainer .col-sm-3,
    .isotopeContainer .col-sm-4,
    .isotopeContainer .col-xs-6 {
        width: 100%
    }

    #about .col-sm-12 .row .col-sm-5 .profile-image {
        margin-left: 15px;
        margin-right: 15px;
    }

    .banner-content h1.type-animate a.typewrite {
        font-size: 36px;
    }

    #home .owl-carousel .slider-content h2.banner-title-text {
        font-size: 32px;
    }

    .timeline li p.date, .timeline li p.date-inverted {
        margin: 10px 0 20px 70px;
    }

    .timeline li p.date, .timeline li p.date-inverted {
        width: 155px;
    }

    .timeline > li > .timeline-panel {
        padding: 20px;
    }

    .timeline li p.date, .timeline li p.date-inverted {
        font-size: 16px;
    }
}

@media screen and (max-width: 320px) {
    .sub-title {
        font-size: 24px;
    }

    .timeline li p.date, .timeline li p.date-inverted {
        width: 135px;
    }

    .timeline li p.date, .timeline li p.date-inverted {
        font-size: 14px;
    }

    .banner-content h1.type-animate a.typewrite {
        font-size: 32px;
    }

    #home .owl-carousel .slider-content h2.banner-title-text {
        font-size: 30px;
    }

    .progressbar-wrap .col-xs-3,
    .progressbar-wrap .col-xs-6 {
        width: 100%
    }
}

@media screen and (max-height: 700px) and (max-width: 991px) {
    .home-top-banner, .home-top-banner-2 {
        padding: 30px 0;
    }

    .home-slider.home-top-banner {
        padding: 0;
    }
}

@media screen and (max-height: 420px) {
    nav.navbar.mgsb4navbar .navbar-collapse {
        max-height: 270px;
        overflow-y: auto;
    }
}

@media screen and (max-height: 360px) {
    nav.navbar.mgsb4navbar .navbar-collapse {
        max-height: 240px;
    }
}

@media screen and (max-height: 320px) {
    nav.navbar.mgsb4navbar .navbar-collapse {
        max-height: 215px;
    }
}