@media screen and (max-width: 767px) {

    /* Header_css */
    ul.menu>li.active a {
        border-top: 0px solid #000;
        border-bottom: 0px solid #000;
    }

    .subMenu {
        position: absolute;
        right: -127px;
        top: 216%;
        min-width: 345px;
        background-color: #000;
    }


    .subMenu li {
        color: #000;
        padding: 23px 5px;
        border-bottom: 1px solid #ffffff;
        width: 100%;
        position: relative;
        max-width: 100%;
    }

    li.hasSubmenu .subMenu .row a {
        margin-bottom: 0px;
        font-size: 14px;
        font-weight: 500;
    }

    .hasSubmenu>a::after {
        left: 85px;
    }

    /* Header_css */
    .xtr-class {
        margin: 3rem 0px;
    }

    .warp-services {
        padding: 20px;
    }

    .pen-view {
        display: none;
    }

    .keyboard {
        background-image: url(../images/keyboard.png);
        background-size: cover;
        background-position: inherit;
        background-repeat: no-repeat;
        padding-top: 10px;
        padding-bottom: 34px;
        width: 100%;
    }

    .bgsec2 {
        background-image: url(../images/blue-pen.png);
        padding-bottom: 4rem;
        background-size: auto;
        background-position: right;
        background-repeat: no-repeat;
        padding-left: 0px;
        padding-right: 0;
        padding-bottom: 40px;
        padding-top: 40px;
        /* position: relative; */
        width: 100%;
    }

    .add-sec h6 {
        text-align: left;
        font-size: 26px;
    }

    .black-sec {
        background: #000000;
        padding: 5px 0px;
    }

    /* .top-banner {
        height: 66vh !important;
    } */

    .sec-toper {
        margin-top: 3rem;
    }

    .sec-who h5 {
        text-align: center;
        font-size: 27px;
        line-height: 35px;
        font-weight: bold;
        font-family: 'Raleway';
        margin-bottom: 0rem;
    }

    .warp-services-sec {
        margin-bottom: 2rem;
    }

    .blck-box {
        background: #000;
        border-radius: 6px;
        padding: 19px 20px;
        margin-bottom: 14px;
    }

    .sec-who.d-flex.justify-content-end {
        display: revert !important;
    }

    .sec-who button {
        background: #000;
        color: #fff;
        width: 100%;
        margin-bottom: 10px;
    }

    .sec-who div {
        display: revert !important;
    }

    .nft-slider h6 {
        font-size: 17px;
        text-align: center;
        font-family: 'Raleway';
        font-weight: 500;
        padding: 1px 17px;
        line-height: 29px;
        font-style: italic;
        margin-top: 0px;
    }

    .row.footer-nav div div {
        text-align: left;
    }

    footer {
        background-color: transparent;
    }

    .footer-info {
        text-align: center !important;
    }

    .copyright {
        color: #fff !important;
        text-align: center !important;
        font-size: 12px !important;
        line-height: 17px !important;
        font-family: 'Raleway' !important;
        font-weight: 300 !important;
        margin-top: 2rem !important;
    }

    .row.footer-nav h6 {
        font-size: 19px !important;
        color: #000;
        font-weight: 800;
        font-family: 'Raleway';
        margin-bottom: 8px !important;
    }

    .row.footer-nav ul li a {
        font-size: 15px !important;
        color: #000;
        font-weight: 400;
        line-height: 27px !important;
        font-family: 'Rubik';
        transition: .3s;
    }

    /* ABOUT */
    .top-banner-heading h5 {
        font-family: "Raleway", sans-serif;
        font-size: 30px;
        text-align: left;
        font-weight: 800;
        text-transform: uppercase;
        color: #fff;
        letter-spacing: 1px;
    }

    .top-banner-heading p {
        margin-top: 13px;
        font-size: 16px;
        font-weight: 500;
        font-family: 'Raleway';
        line-height: 25px;
        text-align: left;
    }

    .bgsec {
        background-image: url(assets/images/pattern.png);
        padding-bottom: 4rem;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        padding-left: revert !important;
        padding-right: revert !important;
        padding-bottom: revert !important;
        padding-top: 181px;
        position: relative;
        width: 100%;
        top: revert !important;
    }

    .brands-logo img {
        width: 18%;
        margin-bottom: 22px;
        margin-top: 25px;
    }

    /* .brands-logo-cont h6 {
        font-size: 18px;
        color: #000000;
        font-family: 'Raleway';
        line-height: 29px;
        font-weight: 600;
        text-align: center;
    } */

    .sec-who-black h5 {
        text-align: center;
        line-height: 35px;
        font-size: 28px;
        font-weight: 700;
        font-family: 'Raleway';
        margin-bottom: 1rem;
    }

    .number-content p {
        font-family: "Rubik", sans-serif;
        font-weight: 500;
        font-size: 19px;
        line-height: 21px;
        text-align: center;
        color: #000;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .bgsec-num {
        margin-top: 2rem;
    }

    .number-content div span {
        font-family: "Rubik";
        font-style: normal;
        font-weight: 400;
        font-size: 37px;
        line-height: 69px;
        color: #000;
    }

    .bgsec-pencil-bg {
        background-image: url(assets/images/pencil-bg.png);
        background-size: cover;
        background-position: unset;
        background-repeat: no-repeat;
        padding-top: 120px;
        height: revert !important;
        padding-bottom: 140px;
        width: 100%;
    }

    .warp-services {
        margin-bottom: 3rem;
    }

    .d-flex.justify-content-center.mt-4 {
        display: revert !important;
    }

    .wall button {
        background: #000;
        color: #fff;
        width: 100% !important;
    }

    .banner-splash.text-center h5 {
        text-align: center;
        font-size: 30px;
        line-height: 37px;
    }

    .banner-splash.text-center p {
        text-align: center;
        font-size: 26px;
        font-weight: 400;
        font-family: 'Raleway';
        line-height: 32px;
        margin-top: 0px;
        margin-bottom: 22px;
    }

    .banner-splash.text-center small {
        text-align: center;
        font-size: 28px;
        font-weight: 600;
        font-family: 'Raleway';
        line-height: 38px;
        margin-top: 0px;
        margin-bottom: 22px;
        text-decoration: underline;
    }

    .question h6 {
        font-size: 28px;
        font-family: 'Rubik';
        color: #fff;
        font-weight: 500;
        text-align: center;
        line-height: 39px;
    }

    .accordion button {
        position: relative;
        display: block;
        text-align: left;
        width: 100%;
        padding: 0.9rem 1rem;
        color: #ffffff;
        font-size: 16px;
        font-weight: 400;
        border: 2px solid #fff;
        background: none;
        outline: none;
        border-radius: 34px;
        margin: 10px 0px;
    }

    .accordion button .icon {
        display: inline-block;
        position: absolute;
        top: 21px;
        right: 9px;
        width: 22px;
        height: 22px;
        border: 1px solid;
        border-radius: 22px;
    }

    .accordion button .accordion-title {
        padding: 1em 1.5em 1em 0;
        font-size: 14px;
        font-weight: 300;
        line-height: 19px;
        font-family: 'Raleway';
    }

    .sec-who-black button {
        background: #fff;
        color: #000;
        width: 100%;
    }

    section.top-banner-case {
        padding-top: 44px ;
        margin-top: 4px ;
        background-position: bottom ;
        height: revert ;
    }

    .worked_with {
        margin-top: 3rem;
    }

    .case-mans button {
        width: 100% !important;
    }

    .case-author-box {
        background: #000;
        padding: 55px 0px;
    }
}

@media screen and (min-width:768px) and (max-width: 1023px) {

    .card.contact-box:before {
        left: 24px;
    }

    /* Header_css */
    ul.menu>li>a:hover {
        border-top: 0px solid #000;
        border-bottom: 0px solid #000;
    }

    ul.menu>li.active a {
        border-top: 0px solid #000;
        border-bottom: 0px solid #000;
    }

    .subMenu {
        position: absolute;
        right: -127px;
        top: 216%;
        min-width: 345px;
        background-color: #000;
    }


    .subMenu li {
        color: #000;
        padding: 23px 5px;
        border-bottom: 1px solid #ffffff;
        width: 100%;
        position: relative;
        max-width: 100%;
    }

    li.hasSubmenu .subMenu .row a {
        margin-bottom: 0px;
        font-size: 14px;
        font-weight: 500;
    }

    .hasSubmenu>a::after {
        left: 85px;
    }

    /* Header_css */
    .black-sec {
        background: #000000;
        padding: 5px 0px;
    }

    .xtr-class {
        margin: 3rem 0px;
    }

    .sec-toper {
        margin-top: 3rem;
    }

    footer {
        background-color: transparent;
    }

    .warp-services-sec {
        margin-bottom: 2rem;
    }

    .services-box-sec h5 {
        font-size: 20px;
        font-family: 'Raleway';
        font-weight: 700;
    }

    .services-box-sec h6 {
        font-size: 20px;
        font-weight: 700;
        font-family: 'Raleway';
        color: #000;
    }

    .bgsec {
        background-image: url(assets/images/pattern.png);
        padding-bottom: 4rem;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        padding-left: revert !important;
        padding-right: revert !important;
        padding-bottom: 48px !important;
        padding-top: 181px;
        position: relative;
        width: 100%;
        top: revert !important;
    }

    .brands-logo img {
        width: 18%;
        margin-bottom: 22px;
        margin-top: 25px;
    }

    .brands-logo-cont h6 {
        font-size: 18px;
        color: #fff;
        font-family: 'Raleway';
        line-height: 29px;
        font-weight: 500;
        text-align: center;
    }

    .black-box-info {
        background: #000;
        padding: 40px 6px;

    }

    .wallbook-bg {
        height: revert !important;
    }

    .wallbook-bg {
        height: revert !important;
        background-position: right !important;
        ;
    }

    .bgsec-pencil-bg {
        background-image: url(assets/images/pencil-bg.png);
        background-size: cover;
        background-position: right !important;
        background-repeat: no-repeat;
        padding-top: 120px;
        padding-bottom: 40px;
        height: revert !important;
        width: 100%;
    }

    .case-author {
        margin-top: -35px;
    }



}

@media screen and (max-width: 1024px) {

    .card.contact-box:before {
        left: 24px;
    }

    /* Header_css */
    ul.menu>li>a:hover {
        border-top: 0px solid #000;
        border-bottom: 0px solid #000;
    }

    .subMenu {
        position: absolute;
        right: -127px;
        top: 216%;
        min-width: 345px;
        background-color: #000;
    }


    .subMenu li {
        color: #000;
        padding: 23px 5px;
        border-bottom: 1px solid #ffffff;
        width: 100%;
        position: relative;
        max-width: 100%;
    }

    li.hasSubmenu .subMenu .row a {
        margin-bottom: 0px;
        font-size: 14px;
        font-weight: 500;
    }

    .hasSubmenu>a::after {
        left: 97px;
    }

    ul.menu>li.active a {
        border-top: 0px solid #000;
        border-bottom: 0px solid #000;
    }

    /* Header_css */
    .bgsec2 {
        background-image: url(../images/blue-pen.png);
        padding-bottom: 4rem;
        background-size: auto;
        background-position: right;
        background-repeat: no-repeat;
        padding-left: 0px;
        padding-right: 0;
        padding-bottom: 40px;
        padding-top: 40px;
        /* position: relative; */
        width: 100%;
    }

    .black-sec {
        background: #000000;
        padding: 5px 0px;
    }

    .xtr-class {
        margin: 3rem 0px;
    }

    .sec-toper {
        margin-top: 3rem;
    }

    footer {
        background-color: transparent;
    }

    .services-box-sec h5 {
        font-size: 20px;
        font-family: 'Raleway';
        font-weight: 700;
    }

    .services-box-sec h6 {
        font-size: 20px;
        font-weight: 700;
        font-family: 'Raleway';
        color: #000;
    }

    .bgsec {
        background-image: url(assets/images/pattern.png);
        padding-bottom: 4rem;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        padding-left: revert !important;
        padding-right: revert !important;
        padding-bottom: 48px !important;
        padding-top: 181px;
        position: relative;
        width: 100%;
        top: revert !important;
    }

    .brands-logo img {
        width: 18%;
        margin-bottom: 22px;
        margin-top: 25px;
    }

    /* .brands-logo-cont h6 {
        font-size: 15px;
        color: #fff;
        font-family: 'Raleway';
        line-height: 22px;
        font-weight: 500;
        text-align: center;
    } */

    .wallbook-bg {
        height: revert !important;
        background-position: right !important;
        ;
    }

    .bgsec-pencil-bg {
        background-image: url(assets/images/pencil-bg.png);
        background-size: cover;
        background-position: right !important;
        ;
        background-repeat: no-repeat;
        padding-top: 120px;
        padding-bottom: 40px;
        height: revert !important;
        width: 100%;
    }
}