/* media query screen size */
/* extra small */
@media (max-width: 575.98px) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 8px;
    }

    /* Banner Section */
    .circle_container .cirle span {
        width: 150px;
        height: 150px;
    }

    .banner .b_img {
        height: 640px;
        top: 0%;
    }

    .typWriter {
        width: 320px;
        height: 220px;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
    }

    #typwriter {
        font-size: 1.5rem;
    }

    .title {
        width: 100%;
        text-align: center;
    }

    .heading {
        font-size: 30px !important;
    }

    .common_section {
        padding: 3rem 0 2rem;
    }

    .common_title {
        padding-bottom: 25px;
    }

    .common_title h2 {
        font-size: 2rem;
    }

    .left {
        padding: 30px 5px 30px 5px;
    }

    .left .buttons {
        margin-top: 30px;
    }

    .actionBtn {
        padding: 10px 15px;
    }

    .right {
        padding: 10px 20px 30px 20px;
    }

    .point span {
        font-size: 1.2rem;
    }

    /* Banner Section */
    /* About Section */
    .about_text {
        margin: 0;
    }
    /* About Section */
    /* Skill Section */
    .skill .tag {
        font-size: 18px;
    }

    .skill-bar {
        height: 15px;
    }

    .skill-percent {
        font-size: 13px;
        top: -2px;
    }

    /* Skill Section */
    /* Service Section */
    .service .single_service {
        width: 100%;
        min-height: 350px;
        margin-top: 25px;
    }

    .details {
        padding: 1rem;
    }

    .details h3 {
        margin: 1.3rem 0 1rem;
    }

    /* Service Section */
    /* Portfolio Section */
    .itemBtn {
        margin-top: 0;
    }

    .itemBtn ul {
        padding: 0;
        gap: 12px;
    }

    .itemBtn ul .list {
        padding: 12px;
        font-size: 1rem;
    }

    .list {
        margin-top: 0px;
    }

    .itemBox {
        margin-top: 1rem;
    }

    /* Portfolio Section */
    /* Testimonial */
    .swiper {
        padding: 0 5px 30px 5px;
    }

    .list .item {
        padding: 1rem;
    }

    .list .item p {
        margin: .5rem;
    }

    .list .item p:last-child {
        margin-top: 0;
    }

    /* Testimonial */
    /* Contact Section */
    .contact_parent {
        margin-top: 20px;
    }

    .form {
        padding: 30px 15px 40px 15px;
    }

    .form h2 {
        margin-bottom: 20px;
    }

    /* Contact Section */
    /* Footer */
    .footer {
        height: 415px;
    }

    .firtsRow .f_right {
        margin-top: 20px;
        align-items: start;
    }

    .copyRight {
        margin-top: 80px;
    }

    /* Footer */
}

/* small */
@media (min-width: 576px) and (max-width: 767.98px) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    /* Banner Section */
    .circle_container .cirle span {
        width: 150px;
        height: 150px;
    }

    .banner .b_img {
        height: 640px;
        top: 0%;
    }

    .typWriter {
        width: 340px;
        height: 220px;
        padding: 0;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
    }

    #typwriter {
        font-size: 2rem;
    }

    .title {
        width: 100%;
        text-align: center;
    }

    .heading {
        font-size: 40px !important;
        line-height: 60px;
    }

    .common_section {
        padding: 4rem 0 2.5rem;
    }

    .common_title {
        padding-bottom: 35px;
    }

    .common_title h2 {
        font-size: 2.5rem;
    }

    .left {
        padding: 30px 5px 30px 5px;
    }

    .left .buttons {
        margin-top: 30px;
    }

    .actionBtn {
        padding: 10px 18px;
    }

    .right {
        padding: 10px 20px 30px 20px;
    }

    .point span {
        font-size: 1.2rem;
    }

    /* Banner Section */
    /* About Section */
    .about_text {
        margin: 0;
    }
    .personal_details {
        justify-content: center;
    }

    /* About Section */
    /* Skill Section */
    .skill .tag {
        font-size: 18px;
    }

    /* Skill Section */
    /* Service Section */
    .service .single_service {
        width: 100%;
        margin-top: 25px;

    }

    .details {
        padding: 1rem;
    }

    .details h3 {
        margin: 1.3rem 0 1rem;
    }

    .point span {
        font-size: 1.5rem;
    }

    /* Service Section */
    /* Portfolio Section */
    .itemBtn {
        margin-top: 0;
    }

    .itemBtn ul {
        padding: 0;
        gap: 12px;
    }

    .itemBtn ul .list {
        padding: 12px;
        font-size: 1rem;
    }

    .list {
        margin-top: 0px;
    }

    .itemBox {
        margin-top: 1rem;
    }

    /* Portfolio Section */
    /* Testimonial */
    .swiper {
        padding: 25px 50px 50px 50px;
    }

    .list .item {
        padding: 1rem;
    }

    .list .item p {
        margin: .5rem;
    }

    .list .item p:last-child {
        margin-top: 0;
    }

    /* Testimonial */
    /* Contact Section */
    .contact_parent {
        margin-top: 20px;
    }

    .form {
        padding: 30px 15px 40px 15px;
    }

    .form h2 {
        margin-bottom: 20px;
    }

    /* Contact Section */
    /* Footer */
    .footer {
        height: 415px;
    }

    .firtsRow .f_right {
        margin-top: 20px;
        align-items: start;
    }

    .copyRight {
        margin-top: 80px;
    }

    /* Footer */
}

/* medium */
@media (min-width: 768px) and (max-width: 991.98px) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    /* Banner Section */
    .circle_container .cirle span {
        width: 150px;
        height: 150px;
    }

    .banner .b_img {
        height: 640px;
        top: 0%;
    }

    .typWriter {
        width: 500px;
        height: 220px;
        padding: 0;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
    }

    #typwriter {
        font-size: 3rem;
    }

    .title {
        width: 100%;
        text-align: center;
    }

    .heading {
        font-size: 60px !important;
        line-height: 90px;
    }

    .common_section {
        padding: 4rem 0 2.5rem;
    }

    .common_title {
        padding-bottom: 40px;
    }

    .common_title h2 {
        font-size: 2.7rem;
    }

    .left {
        padding: 50px;
    }

    .left .buttons {
        margin-top: 30px;
    }

    .actionBtn {
        padding: 10px 18px;
    }

    .right {
        padding: 10px 20px 30px 20px;
    }

    .point span {
        font-size: 1.2rem;
    }

    /* Banner Section */
    /* About Section */
    .about_text {
        margin: 0;
    }
    .personal_details {
        justify-content: center;
    }

    .point span {
        font-size: 1.5rem;
    }

    /* About Section */
    /* Skill Section */
    .skill .tag {
        font-size: 23px;
    }

    /* Skill Section */
    /* Service Section */

    .service .single_service {
        width: 100%;
        min-height: 340px;
        margin-top: 25px;
    }

    .details {
        padding: 1rem;
    }

    .details h3 {
        margin: 1.3rem 0 1rem;
    }

    /* Service Section */
    /* Portfolio Section */
    .itemBtn {
        margin-top: 0;
    }

    .itemBtn ul {
        padding: 0;
        gap: 12px;
    }

    .itemBox .items {
        width: 320px;
        height: 320px;
    }

    .itemBtn ul .list {
        padding: 12px;
        font-size: 1rem;
    }

    .list {
        margin-top: 0px;
    }

    .itemBox {
        margin-top: 1rem;
    }

    /* Portfolio Section */
    /* Testimonial */
    .swiper {
        padding: 25px 50px 50px 50px;
    }

    .list .item {
        padding: 1rem;
    }

    .list .item p {
        margin: .5rem;
    }

    .list .item p:last-child {
        margin-top: 0;
    }

    /* Testimonial */
    /* Contact Section */
    .contact_parent {
        margin-top: 20px;
    }

    .form {
        padding: 50px;
    }

    .form h2 {
        margin-bottom: 20px;
    }

    /* Contact Section */
    /* Footer */
    .footer {
        height: 415px;
    }

    .firtsRow .f_right {
        margin-top: 20px;
        align-items: start;
    }

    .copyRight {
        margin-top: 80px;
    }

    /* Footer */
}

/* large */
@media (min-width: 992px) and (max-width: 1199.98px) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    /* Banner Section */
    .circle_container .cirle span {
        width: 150px;
        height: 150px;
    }

    .banner .b_img {
        height: 640px;
        top: 0%;
    }

    .typWriter {
        width: 500px;
        height: 220px;
        padding: 0;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
    }

    #typwriter {
        font-size: 3rem;
    }

    .title {
        width: 100%;
        text-align: center;
    }

    .heading {
        font-size: 60px !important;
        line-height: 90px;
    }

    .common_section {
        padding: 4rem 0 2.5rem;
    }

    .common_title {
        padding-bottom: 40px;
    }

    .common_title h2 {
        font-size: 2.7rem;
    }

    .left {
        padding: 50px;
    }

    .left .buttons {
        margin-top: 30px;
    }

    .actionBtn {
        padding: 10px 18px;
    }

    .right {
        padding: 10px 20px 30px 20px;
    }

    .point span {
        font-size: 1.2rem;
    }

    /* Banner Section */
    /* About Section */
    .about_text {
        margin: 0;
    }
    .personal_details {
        justify-content: center;
    }

    .point span {
        font-size: 1.5rem;
    }

    /* About Section */
    /* Skill Section */
    .skill .tag {
        font-size: 23px;
    }

    /* Skill Section */
    /* Service Section */

    .service .single_service {
        width: 100%;
        min-height: 340px;
        margin-top: 25px;
    }

    .details {
        padding: 1rem;
    }

    .details h3 {
        margin: 1.3rem 0 1rem;
    }

    /* Service Section */
    /* Portfolio Section */
    .itemBtn {
        margin-top: 0;
    }

    .itemBtn ul {
        padding: 0;
        gap: 12px;
    }

    .itemBox .items {
        width: 320px;
        height: 320px;
    }

    .itemBtn ul .list {
        padding: 15px;
        font-size: 1.2rem;
    }

    .list {
        margin-top: 0px;
    }

    .itemBox {
        margin-top: 1rem;
    }

    /* Portfolio Section */
    /* Testimonial */
    .swiper {
        padding: 25px 50px 50px 50px;
    }

    .list .item {
        padding: 1rem;
    }

    .list .item p {
        margin: .5rem;
    }

    .list .item p:last-child {
        margin-top: 0;
    }

    /* Testimonial */
    /* Contact Section */
    .contact_parent {
        margin-top: 20px;
    }

    .form {
        padding: 50px;
    }

    .form h2 {
        margin-bottom: 20px;
    }

    /* Contact Section */
    /* Footer */
    .footer {
        height: 330px;
    }

    .firtsRow .f_right {
        margin-top: 20px;
        align-items: end;
    }

    .copyRight {
        margin-top: 80px;
    }

    /* Footer */
}

/* extra large */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .typWriter {
        top: 0;
    }

    .common_section {
        padding: 5rem 0 4rem;
    }
    .about_text {
        margin-top: 40px;
    }

    .skills {
        padding-bottom: 0;
    }

    .service {
        padding-bottom: 0;
    }

    .service .single_service {
        width: 100%;
        min-height: 370px;
        margin-top: 40px;
    }

    .list {
        margin-top: 0px;
    }
    .itemBtn {
        margin-top: 40px;
    }
    .swiper {
        padding: 40px;
    }
    .contact_parent {
        margin-top: 40px;
    }
}

/* extra extra large */
@media (min-width: 1400px) {}

@media (max-width: 768px) {
    .menubar {
        position: fixed;
        top: 60px;
        right: 0;
        width: 320px;
        height: 100vh;
        overflow: hidden !important;
        z-index: 100000;
    }

    .menus {
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 0;
        right: 0;
        background-color: var(--heading);
        /* -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px); */
        animation: fadeIn .3s ease-in-out 1 forwards;
        z-index: 200000;
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
            right: -100%;
        }

        100% {
            opacity: 1;
            right: 0;
        }
    }

    .hide {
        display: none !important;
    }

    .navbar .toggle {
        display: block;
    }
}

@media (max-width: 576px) {
    .menubar {
        position: fixed;
        top: 60px;
        right: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden !important;
        z-index: 100000;
    }

    .menus {
        width: 100%;
    }
}