/* Medium Device */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .container {
        width: 970px;
    }
    .dark-switch {
        top: 100px;
    }
    .logo {
        -ms-flex-preferred-size: 15%;
            flex-basis: 15%;
    }
    .menu {
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    }
    .menu ul li a {
        font-size: 16px;
    }
    .hireme-btn {
        -ms-flex-preferred-size: 15%;
            flex-basis: 15%;
    }
    .banner {
        -webkit-box-pack: space-evenly;
            -ms-flex-pack: space-evenly;
                justify-content: space-evenly;
    }
    .blog-close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 26px;
    }
}

/* Tablet Device */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .container {
        width: 750px;
    }
    .dark-switch {
        top: 15px;
        left: inherit;
        right: 80px;
        z-index: 9999;
    }
    .header-area {
        padding: 22px 0;
    }
    .menu {
        display: none;
    }
    .hireme-btn {
        display: none;
    }
    .slicknav_menu {
        display: block;
        position: fixed;
        top: 7px;
        right: 20px;
        left: 0;
        width: 100%;
        background-color: transparent;
        z-index: 9999;
    }
    .slicknav_btn {
        background-color: var(--primary-color)
    }
    .slicknav_menu ul {
        margin-top: 56px;
        background-color: var(--white-color);
        border: 1px solid var(--gray-color);
    }
    .slicknav_menu ul li:not(:last-child) {
        border-bottom: 1px dashed var(--gray-color);
    }
    .slicknav_menu ul li a {
        text-transform: capitalize;
        color: var(--primary-color);
    }
    .slicknav_menu .slicknav_icon {
        font-size: 25px;
    }
    .banner {
        -webkit-box-pack: space-evenly;
            -ms-flex-pack: space-evenly;
                justify-content: space-evenly;
    }
    .banner-content {
        -ms-flex-preferred-size: 58%;
            flex-basis: 58%;
    }
    .banner-btn-box {
        padding: 15px 34px;
        margin-right: 25px;
    }
    .banner-img {
        -ms-flex-preferred-size: 35%;
            flex-basis: 35%;
    }
    .banner-img:before {
        right: -25px;
        bottom: -25px;
    }
    .banner-img:after {
        left: -25px;
        top: -25px;
    }
    .about-top {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }
    .about-content {
        margin-bottom: 50px;
    }
    .single-service i {
        width: 130px;
        font-size: 26px;
    }
    .resume-box ul li:before {
        left: -14px;
    }
    .resume-box ul li:after {
        left: -22px;
    }
    .resume-content {
        padding: 25px;
    }
    .project-head {
        -ms-flex-preferred-size: 30%;
            flex-basis: 30%;
    }
    .project-menu {
        -ms-flex-preferred-size: 66%;
            flex-basis: 66%;
    }
    .project-content {
        padding: 20px 40px;
    }
    .single-testimonial {
        padding: 25px;
    }
    .single-blog {
        padding: 20px;
    }
    .single-blog h4 {
        font-size: 15px;
    }
    .blog-close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 26px;
    }
}

/* Mobile Device */
@media only screen and (max-width: 767px) {
    .container {
        width: 320px;
    }
    .dark-switch {
        top: 15px;
        left: inherit;
        right: 80px;
        z-index: 9999;
    }
    .header-area {
        padding: 22px 0;
    }
    .menu {
        display: none;
    }
    .hireme-btn {
        display: none;
    }
    .slicknav_menu {
        display: block;
        position: fixed;
        top: 7px;
        right: 20px;
        left: 0;
        width: 100%;
        background-color: transparent;
        z-index: 9999;
    }
    .slicknav_btn {
        background-color: var(--primary-color)
    }
    .slicknav_menu ul {
        margin-top: 56px;
        background-color: var(--white-color);
        border: 1px solid var(--gray-color);
    }
    .slicknav_menu ul li:not(:last-child) {
        border-bottom: 1px dashed var(--gray-color);
    }
    .slicknav_menu ul li a {
        text-transform: capitalize;
        color: var(--primary-color);
    }
    .slicknav_menu .slicknav_icon {
        font-size: 25px;
    }
    .banner-area {
        padding: 170px 0 150px;
    }
    .banner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .banner-content {
        margin-bottom: 80px;
    }
    .banner-content h2 {
        font-size: 30px;
        margin: 25px 0;
        line-height: 42px;
    }
    .banner-btn {
        margin-top: 30px;
    }
    .banner-btn-box {
        font-size: 15px;
        padding: 12px 18px;
        margin-right: 12px;
    }
    .banner-btn-text i {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
    }
    .banner-img:before {
        right: -15px;
        bottom: -15px;
    }
    .banner-img:after {
        left: -15px;
        top: -15px;
    }
    .about-top {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }
    .about-info {
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    .about-info ul li {
        font-size: 14px;
    }
    .about-bottom {
        -webkit-box-pack: space-evenly;
            -ms-flex-pack: space-evenly;
                justify-content: space-evenly;
        margin-top: 70px;
    }
    .single-counter {
        padding: 30px;
    }
    .single-counter i {
        font-size: 24px;
    }
    .single-counter h4 {
        font-size: 16px;
    }
    .single-counter h4 span {
        font-size: 30px;
        margin: 20px 0;
    }
    .section-title h4 {
        font-size: 30px;
    }
    .single-service i {
        width: 160px;
    }
    .resume-box, .single-service, .single-blog, .contact-form, .contact-info {
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    }
    .resume-box:not(:last-child), .single-blog:not(:last-child), .contact-form, .about-content, .single-about, .project-menu {
        margin-bottom: 30px;
    }
    .resume-box ul li:before {
        left: -13px;
    }
    .resume-box ul li:after {
        width: 18px;
        height: 18px;
        left: -20px;
    }
    .project-title {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .project-menu {
        text-align: center;
    }
    .project-item {
        width: 100%;
    }
    .project-head {
        text-align: center;
        margin-bottom: 40px;
    }
    .project-head h4 {
        text-transform: capitalize;
        font-size: 30px;
        display: inline-block;
        position: relative;
        padding-bottom: 25px;
    }
    .project-head h4:before {
        content: '';
        position: absolute;
        width: 100px;
        height: 3px;
        left: 50%;
        bottom: 0;
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
        background-color: var(--primary-color);
    }
    .project-head h4:after {
        content: '';
        position: absolute;
        width: 20px;
        height: 8px;
        left: 50%;
        bottom: -2px;
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
        background-color: var(--primary-color);
    }
    .blog-content {
        width: 300px;
    }
    .blog-close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 26px;
    }
}

/* Wide Mobile Device */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        width: 450px;
    }
}