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

    .heading h1 {
        font-size: 20px;
    }

    #navbarSupportedContent .navbar-nav .dropdown:hover .service-list {
        flex-wrap: wrap;
        left: 0px;
        height: 400px;
        overflow: scroll;
    }

    #navbarSupportedContent .navbar-nav .dropdown:hover .service-list ul{
        width: 100%;
    }

    .navbar-brand {
        margin-left: 10px;
    }

    #first-section .box .content {
        padding: 5px;
        margin-top: 80px;
    }

    #first-section .box .content .box1 {
        padding: 0px;
    }

    #first-section .box .content .box1 h4 {
        font-size: 16px;
    }

    #first-section .box .content .box1 h1 {
        font-size: 25px;
    }

    #first-section .box .content .box1 .btns {
        flex-wrap: wrap;
        gap: 20px;
    }

    .creative-btn {
        position: relative;
        padding: 10px 20px;
        width: 80%;
    }

    .creative-btn a {
        font-size: 18px;
    }

    #pricing {
        margin-top: -80px;
        margin-bottom: 0px;
    }

    #pricing .content {
        padding: 10px;
    }

    #pricing .content h1 {
        font-size: 20px;
    }

    #pricing .content span {
        font-size: 20px;
    }

    #partners {
        margin-top: 10%;
    }

    #partners .image-slider {
        margin-top: 30px;
        padding: 20px;
    }

    #partners .images img {
        width: 10vh;
    }

    #services {
        margin-top: 10%;
    }

    #services .content {
        flex-wrap: wrap;
        margin-top: 50px;
        row-gap: 20px;
    }

    #services .content .box {
        width: 100%;
    }

    #services .content .box .title h3 {
        font-size: 1.3em;

    }

    #services .content .box .points p {
        font-size: 0.8em;
    }

    .carousel-item .text h1 {
        font-size: 30px;
        word-break: 0;
        letter-spacing: 0;
    }

    .carousel-item .text .btns {
        width: 100%;
    }

    .carousel-item .text .btns button {
        margin: 2px;
        margin-top: 20px;
        padding: 8px;
        width: 120px;
    }

    #brief-des {
        margin-top: 10%;
    }

    #brief-des .content {
        flex-wrap: wrap;
        column-gap: 20px;
    }

    #brief-des .content .box {
        width: 100%;
    }

    #brief-des .content .box1 .image img:hover {
        transform: scale(1.1);
    }

    #brief-des .content .box1 .image #brief-des1 {
        width: 250px;
        height: 150px;
    }

    #brief-des .content .box1 .image #brief-des2 {
        width: 250px;
        height: 150px;
    }

    #brief-des .content .box1 .image #brief-des3 {
        width: 250px;
        height: 100px;
        margin-top: 0px;
    }

    #brief-des .content .box1 .image #brief-des4 {
        width: 250px;
        height: 100px;
    }


    #brief-des .content .box2 {
        padding: 10px;
        padding-top: 0px;
    }

    #brief-des .content .box2 p.title {
        font-size: 14px;
    }

    #brief-des .content .box2 h1 {
        font-size: 30px;
    }

    #brief-des .content .box2 p {
        font-size: 14px;
        margin-top: 10px;
    }

    #brief-des .content .box2 .points ul li {
        font-size: 16px;
    }

    #brief-des .content .box2 .btns {
        margin-top: 30px;
    }

    #brief-des .content .box2 h1 {
        font-size: 22px;
    }

    #brief-des .content .box2 p {
        font-size: 14px;
    }

    #brief-des .content .box-about .image {
        padding: 10px;
    }

    #brief-des .content .box-about .image img {
        width: 100%;
    }

    #counter {
        margin-top: 10%;
    }

    #counter .points span {
        font-size: 30px;
    }

    #counter .points p {
        font-size: 16px;
    }

    #form {
        margin-top: 5%;
        height: 600px;
    }

    #form .text {
        width: 100%;
    }

    #form form {
        padding: 0;
    }

    #form .text form .form-group {
        column-gap: 5px;
    }

    #form .text form input {
        width: 48%;
        height: 45px;
    }

    #form .text form textarea {
        width: 98%;
    }

    .pages h6 {
        font-weight: 500;
        font-size: 16px;
    }

    #blogs .content .box {
        width: 100%;
    }

    #blogs .content .box a .text h5 {
        font-size: 18px;
    }

    #blogs .content .box a .text p {
        font-size: 14px;
    }



    /* service areas */

    #service-areas .text {
        width: 100%;
        margin-top: 50px;
    }

    #service-areas .text h1 {
        font-size: 25px;
    }

    #service-areas .text p {
        font-size: 14px;
    }

    #service-areas .text .btns {
        flex-wrap: wrap;
        row-gap: 20px;
    }

    #service-areas .btns .creative-btn {
        width: 80%;
        margin: auto;
    }

    #service-areas-services {
        margin-top: 15%;
    }

    #service-areas-services .content {
        gap: 10px;
        margin-top: 10px;
    }

    #service-areas-services .content .box {
        width: 100%;
        padding: 10px;
    }

    #pricing-part {
        margin-top: 1%;
    }

    #pricing-part .content {
        flex-wrap: wrap;
    }

    #pricing-part .content .box1 {
        width: 100%;
        padding: 10px;
    }

    #pricing-part .content .box2 {
        width: 100%;
        padding: 10px;
    }

    #pricing-part .content .box1 h1 {
        font-size: 30px;
    }

    #pricing-part .content .box1 p {
        margin-top: 10px;
    }


    #areas-mention {
        margin-top: 15%;
    }

    #areas-mention .content {
        gap: 20px;
        margin-top: 20px;
        flex-wrap: wrap;
    }

    #areas-mention .content .box {
        width: 80%;
        padding: 20px;
    }

    #cities .content {
        flex-wrap: wrap;
        gap: 10px;
        width: 80%;
        margin: auto;
        margin-top: 20px;
    }

    .service-banner {
        height: 200px;
    }

    .service-banner .text h1 {
        font-size: 30px;
    }


    #about-services .content {
        flex-wrap: wrap;
    }

    #about-services .content .box {
        width: 100%;
        padding: 10px;
    }

    #about-services .content .box1 p {
        font-size: 16px;
    }

    #about-services .content .box1 .btns {
        margin-top: 20px;
    }

    #about-services .content .box2 {
        margin-top: 20px;
    }

    #towing-services {
        margin-top: 40px;
    }

    #towing-services .content {
        width: 100%;
        row-gap: 20px;
        padding: 0px;
    }

    #towing-services .content::before {
        border-left: 0px dashed #ffffff;
    }

    #towing-services .points {
        padding: 20px;
        width: 100%;
    }

    #choose-us {
        margin-top: 15%;
    }

    .y-us-section {
        padding: 0px;
    }

    .y-us-head {
        margin: 10px;
    }

    .y-us-title h2 {
        font-size: 60px;
    }

    .service-3 .service-box .iconset {
        float: left;
        text-align: center;
        width: 15%;
    }

    .service-3 .service-box .iconset i {
        color: #000;
        font-size: 20px;
    }

    .service-3 .service-box .y-us-content {
        float: left;
        width: 80%;
    }

    .service-3 .service-box .y-us-content h4 {
        font-size: 16px;
    }

    .service-3 .service-box .y-us-content p {
        font-size: 14px;
    }

    #brief-des .content {
        flex-wrap: wrap;
    }

    #motorcycle-second-section {
        margin-top: 10%;
    }

    #motorcycle-second-section .content .points h3 {
        font-size: 16px;
    }

    #motorcycle-second-section .content .points p {
        font-size: 14px;
    }

    #remember .para {
        padding: 10px;
        width: 100%;
    }

    #remember .para p {
        font-size: 14px;
    }

    #front-contact {
        padding: 10px;
        height: 250px;
    }

    #front-contact p {
        font-size: 14px;
    }

    #contact-form {
        margin-top: 10%;
        align-items: start;
        height: 400px;
    }

    #contact-form .heading {
        margin-bottom: 0px;
    }

    #contact-form .heading h2 {
        font-size: 25px;
        font-weight: 700;
    }

    #contact-form .heading {
        margin-bottom: 20px;
    }

    #contact-form .text form .form-group {
        gap: 15px;
        margin-bottom: 15px;
    }

    #contact-form .text form input {
        width: 100%;
    }

    #contact-form .text form textarea {
        width: 100%;
    }

}


@media screen and (max-width:500px) and (min-width:414px) {

    .heading h1 {
        font-size: 20px;
    }

    #navbarSupportedContent .navbar-nav .dropdown:hover .service-list {
        flex-wrap: wrap;
        left: 0px;
        height: 400px;
        overflow: scroll;
    }

    #navbarSupportedContent .navbar-nav .dropdown:hover .service-list ul{
        width: 100%;
    }

    .navbar-brand {
        margin-left: 10px;
    }

    #first-section .box .content {
        padding: 5px;
        margin-top: 80px;
    }

    #first-section .box .content .box1 {
        padding: 0px;
    }

    #first-section .box .content .box1 h4 {
        font-size: 16px;
    }

    #first-section .box .content .box1 h1 {
        font-size: 25px;
    }

    #first-section .box .content .box1 .btns {
        flex-wrap: wrap;
        gap: 20px;
    }

    .creative-btn {
        position: relative;
        padding: 10px 20px;
        width: 80%;
    }

    .creative-btn a {
        font-size: 18px;
    }

    #pricing {
        margin-top: -80px;
        margin-bottom: 0px;
    }

    #pricing .content {
        padding: 10px;
    }

    #pricing .content h1 {
        font-size: 20px;
    }

    #pricing .content span {
        font-size: 20px;
    }

    #partners {
        margin-top: 10%;
    }

    #partners .image-slider {
        margin-top: 30px;
        padding: 20px;
    }

    #partners .images img {
        width: 10vh;
    }

    #services {
        margin-top: 10%;
    }

    #services .content {
        flex-wrap: wrap;
        margin-top: 50px;
        row-gap: 20px;
    }

    #services .content .box {
        width: 100%;
    }

    #services .content .box .title h3 {
        font-size: 1.3em;

    }

    #services .content .box .points p {
        font-size: 0.8em;
    }

    .carousel-item .text h1 {
        font-size: 30px;
        word-break: 0;
        letter-spacing: 0;
    }

    .carousel-item .text .btns {
        width: 100%;
    }

    .carousel-item .text .btns button {
        margin: 2px;
        margin-top: 20px;
        padding: 8px;
        width: 120px;
    }

    #brief-des {
        margin-top: 10%;
    }

    #brief-des .content {
        flex-wrap: wrap;
        column-gap: 20px;
    }

    #brief-des .content .box {
        width: 100%;
    }

    #brief-des .content .box1 .image img:hover {
        transform: scale(1.1);
    }

    #brief-des .content .box1 .image #brief-des1 {
        width: 250px;
        height: 150px;
    }

    #brief-des .content .box1 .image #brief-des2 {
        width: 250px;
        height: 150px;
    }

    #brief-des .content .box1 .image #brief-des3 {
        width: 250px;
        height: 100px;
        margin-top: 0px;
    }

    #brief-des .content .box1 .image #brief-des4 {
        width: 250px;
        height: 100px;
    }


    #brief-des .content .box2 {
        padding: 10px;
        padding-top: 0px;
    }

    #brief-des .content .box2 p.title {
        font-size: 14px;
    }

    #brief-des .content .box2 h1 {
        font-size: 30px;
    }

    #brief-des .content .box2 p {
        font-size: 14px;
        margin-top: 10px;
    }

    #brief-des .content .box2 .points ul li {
        font-size: 16px;
    }

    #brief-des .content .box2 .btns {
        margin-top: 30px;
    }

    #brief-des .content .box2 h1 {
        font-size: 22px;
    }

    #brief-des .content .box2 p {
        font-size: 14px;
    }

    #brief-des .content .box-about .image {
        padding: 10px;
    }

    #brief-des .content .box-about .image img {
        width: 100%;
    }

    #counter {
        margin-top: 10%;
    }

    #counter .points span {
        font-size: 30px;
    }

    #counter .points p {
        font-size: 16px;
    }

    #form {
        margin-top: 5%;
        height: 600px;
    }

    #form .text {
        width: 100%;
    }

    #form form {
        padding: 0;
    }

    #form .text form .form-group {
        column-gap: 5px;
    }

    #form .text form input {
        width: 48%;
        height: 45px;
    }

    #form .text form textarea {
        width: 98%;
    }

    .pages h6 {
        font-weight: 500;
        font-size: 16px;
    }

    /* service areas */

    #service-areas .text {
        width: 100%;
        margin-top: 50px;
    }

    #service-areas .text h1 {
        font-size: 25px;
    }

    #service-areas .text p {
        font-size: 14px;
    }

    #service-areas .text .btns {
        flex-wrap: wrap;
        row-gap: 20px;
    }

    #service-areas .btns .creative-btn {
        width: 80%;
        margin: auto;
    }

    #service-areas-services {
        margin-top: 15%;
    }

    #service-areas-services .content {
        gap: 10px;
        margin-top: 10px;
    }

    #service-areas-services .content .box {
        width: 100%;
        padding: 10px;
    }

    #pricing-part {
        margin-top: 1%;
    }

    #pricing-part .content {
        flex-wrap: wrap;
    }

    #pricing-part .content .box1 {
        width: 100%;
        padding: 10px;
    }

    #pricing-part .content .box2 {
        width: 100%;
        padding: 10px;
    }

    #pricing-part .content .box1 h1 {
        font-size: 30px;
    }

    #pricing-part .content .box1 p {
        margin-top: 10px;
    }


    #areas-mention {
        margin-top: 15%;
    }

    #areas-mention .content {
        gap: 20px;
        margin-top: 20px;
        flex-wrap: wrap;
    }

    #areas-mention .content .box {
        width: 80%;
        padding: 20px;
    }

    #cities .content {
        flex-wrap: wrap;
        gap: 10px;
        width: 80%;
        margin: auto;
        margin-top: 20px;
    }

    .service-banner {
        height: 200px;
    }

    .service-banner .text h1 {
        font-size: 30px;
    }


    #about-services .content {
        flex-wrap: wrap;
    }

    #about-services .content .box {
        width: 100%;
        padding: 10px;
    }

    #about-services .content .box1 p {
        font-size: 16px;
    }

    #about-services .content .box1 .btns {
        margin-top: 20px;
    }

    #about-services .content .box2 {
        margin-top: 20px;
    }

    #towing-services {
        margin-top: 40px;
    }

    #towing-services .content {
        width: 100%;
        row-gap: 20px;
        padding: 0px;
    }

    #towing-services .content::before {
        border-left: 0px dashed #ffffff;
    }

    #towing-services .points {
        padding: 20px;
        width: 100%;
    }

    #choose-us {
        margin-top: 15%;
    }

    .y-us-section {
        padding: 0px;
    }

    .y-us-head {
        margin: 10px;
    }

    .y-us-title h2 {
        font-size: 60px;
    }

    .service-3 .service-box .iconset {
        float: left;
        text-align: center;
        width: 15%;
    }

    .service-3 .service-box .iconset i {
        color: #000;
        font-size: 20px;
    }

    .service-3 .service-box .y-us-content {
        float: left;
        width: 80%;
    }

    .service-3 .service-box .y-us-content h4 {
        font-size: 16px;
    }

    .service-3 .service-box .y-us-content p {
        font-size: 14px;
    }

    #brief-des .content {
        flex-wrap: wrap;
    }

    #motorcycle-second-section {
        margin-top: 10%;
    }

    #motorcycle-second-section .content .points h3 {
        font-size: 16px;
    }

    #motorcycle-second-section .content .points p {
        font-size: 14px;
    }

    #remember .para {
        padding: 10px;
        width: 100%;
    }

    #remember .para p {
        font-size: 14px;
    }

    #front-contact {
        padding: 10px;
        height: 250px;
    }

    #front-contact p {
        font-size: 14px;
    }

    #contact-form {
        margin-top: 10%;
        align-items: start;
        height: 400px;
    }

    #contact-form .heading {
        margin-bottom: 0px;
    }

    #contact-form .heading h2 {
        font-size: 25px;
        font-weight: 700;
    }

    #contact-form .heading {
        margin-bottom: 20px;
    }

    #contact-form .text form .form-group {
        gap: 15px;
        margin-bottom: 15px;
    }

    #contact-form .text form input {
        width: 100%;
    }

    #contact-form .text form textarea {
        width: 100%;
    }

    #blogs .content .box {
        width: 100%;
    }

    #blogs .content .box a .text h5 {
        font-size: 18px;
    }

    #blogs .content .box a .text p {
        font-size: 14px;
    }

}







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

    .heading h1 {
        font-size: 25px;
    }

    #navbarSupportedContent .navbar-nav .dropdown:hover .service-list {
        flex-wrap: wrap;
        left: 0px;
        height: 400px;
        overflow: scroll;
    }

    #navbarSupportedContent .navbar-nav .dropdown:hover .service-list ul{
        width: 100%;
    }

    .navbar-brand {
        margin-left: 10px;
    }

    #first-section .box video {
        width: 100%;
        height: 400px;
    }

    #first-section .box .content {
        padding: 5px;
        margin-top: 80px;
    }

    #first-section .box .content .box1 {
        padding: 0px;
    }

    #first-section .box .content .box1 h4 {
        font-size: 16px;
    }

    #first-section .box .content .box1 h1 {
        font-size: 30px;
    }

    #first-section .box .content .box1 .btns {
        flex-wrap: nowrap;
        gap: 20px;
    }

    .creative-btn {
        position: relative;
        padding: 10px 20px;
        width: 40%;
    }

    .creative-btn a {
        font-size: 18px;
    }

    #pricing {
        margin-top: -30px;
        margin-bottom: 0px;
    }

    #pricing .content {
        padding: 10px;
    }

    #pricing .content h1 {
        font-size: 20px;
    }

    #pricing .content span {
        font-size: 20px;
    }

    #partners {
        margin-top: 10%;
    }

    #partners .image-slider {
        margin-top: 30px;
        padding: 20px;
    }

    #partners .images img {
        width: 10vh;
    }

    #services {
        margin-top: 10%;
    }

    #services .content {
        flex-wrap: wrap;
        margin-top: 50px;
        row-gap: 20px;
    }

    #services .content .box {
        width: 70%;
    }

    #services .content .box .title h3 {
        font-size: 1.3em;
    }

    #services .content .box .points p {
        font-size: 0.8em;
    }

    .carousel-item .text h1 {
        font-size: 40px;
        word-break: 0;
        letter-spacing: 0;
    }

    .carousel-item .text .btns {
        width: 100%;
    }

    .carousel-item .text .btns button {
        margin: 2px;
        margin-top: 20px;
        padding: 8px;
        width: 200px;
    }

    #brief-des {
        margin-top: 10%;
    }

    #brief-des .content {
        flex-wrap: wrap;
        column-gap: 20px;
    }

    #brief-des .content .box {
        width: 100%;
    }

    #brief-des .content .box1 .image img:hover {
        transform: scale(1.1);
    }

    #brief-des .content .box1 .image #brief-des1 {
        width: 300px;
        height: 200px;
    }

    #brief-des .content .box1 .image #brief-des2 {
        width: 300px;
        height: 200px;
    }

    #brief-des .content .box1 .image #brief-des3 {
        width: 300px;
        height: 150px;
        margin-top: 0px;
    }

    #brief-des .content .box1 .image #brief-des4 {
        width: 300px;
        height: 150px;
    }

    #brief-des .content .box2 {
        padding: 10px;
        padding-top: 0px;
        width: 80%;
        margin-left: -120px;
    }

    #brief-des .content .box2 p.title {
        font-size: 18px;
    }

    #brief-des .content .box2 p {
        font-size: 18px;
        margin-top: 10px;
    }

    #brief-des .content .box2 .points ul li {
        font-size: 18px;
    }

    #brief-des .content .box2 .btns {
        margin-top: 30px;
    }

    #brief-des .content .box2 h1 {
        font-size: 22px;
    }

    #brief-des .content .box2 p {
        font-size: 14px;
    }

    #brief-des .content .box-about .image {
        padding: 10px;
    }

    #brief-des .content .box-about .image img {
        width: 100%;
    }

    #counter {
        margin-top: 10%;
    }

    #counter .points span {
        font-size: 30px;
    }

    #counter .points p {
        font-size: 16px;
    }

    #form {
        margin-top: 5%;
        height: 600px;
    }

    #form .text {
        width: 100%;
    }

    #form form {
        padding: 0;
    }

    #form .text form .form-group {
        column-gap: 10px;
    }

    #form .text form input {
        width: 48%;
        height: 45px;
    }

    #form .text form textarea {
        width: 98%;
    }

    .pages h6 {
        font-weight: 500;
        font-size: 16px;
    }

    /* service areas */

    #service-areas {
        height: 400px;
    }

    #service-areas .text {
        width: 100%;
        margin-top: 50px;
    }

    #service-areas .text h1 {
        font-size: 30px;
    }

    #service-areas .text p {
        font-size: 18px;
    }

    #service-areas .text .btns {
        flex-wrap: nowrap;
        column-gap: 10px;

    }

    #service-areas .btns .creative-btn {
        width: 40%;
    }

    #service-areas-services {
        margin-top: 15%;
    }

    #service-areas-services .content {
        gap: 10px;
        margin-top: 10px;
    }

    #service-areas-services .content .box {
        width: 100%;
        padding: 10px;
    }

    #pricing-part {
        margin-top: 1%;
    }

    #pricing-part .content {
        flex-wrap: wrap;
    }

    #pricing-part .content .box1 {
        width: 100%;
        padding: 10px;
    }

    #pricing-part .content .box2 {
        width: 100%;
        padding: 10px;
    }

    #pricing-part .content .box1 h1 {
        font-size: 30px;
    }

    #pricing-part .content .box1 p {
        margin-top: 10px;
    }


    #areas-mention {
        margin-top: 15%;
    }

    #areas-mention .content {
        gap: 20px;
        margin-top: 20px;
        flex-wrap: wrap;
    }

    #areas-mention .content .box {
        width: 80%;
        padding: 20px;
    }

    #cities .content {
        flex-wrap: wrap;
        gap: 10px;
        width: 80%;
        margin: auto;
        margin-top: 20px;
    }

    .service-banner {
        height: 200px;
    }

    .service-banner .text h1 {
        font-size: 30px;
    }


    #about-services .content {
        flex-wrap: wrap;
    }

    #about-services .content .box {
        width: 100%;
        padding: 10px;
    }

    #about-services .content .box1 p {
        font-size: 16px;
    }

    #about-services .content .box1 .btns {
        margin-top: 20px;
    }

    #about-services .content .box2 {
        margin-top: 20px;
    }

    #towing-services {
        margin-top: 40px;
    }

    #towing-services .content {
        width: 100%;
        row-gap: 20px;
        padding: 0px;
    }

    #towing-services .content::before {
        border-left: 0px dashed #ffffff;
    }

    #towing-services .points {
        padding: 20px;
        width: 100%;
    }

    #choose-us {
        margin-top: 15%;
    }

    .y-us-section {
        padding: 0px;
    }

    .y-us-head {
        margin: 10px;
    }

    .y-us-title h2 {
        font-size: 60px;
    }

    .service-3 .service-box .iconset {
        float: left;
        text-align: center;
        width: 15%;
    }

    .service-3 .service-box .iconset i {
        color: #000;
        font-size: 20px;
    }

    .service-3 .service-box .y-us-content {
        float: left;
        width: 80%;
    }

    .service-3 .service-box .y-us-content h4 {
        font-size: 16px;
    }

    .service-3 .service-box .y-us-content p {
        font-size: 14px;
    }

    #brief-des .content {
        flex-wrap: wrap;
    }

    #motorcycle-second-section {
        margin-top: 10%;
    }

    #motorcycle-second-section .content .points h3 {
        font-size: 18px;
    }

    #motorcycle-second-section .content .points p {
        font-size: 16px;
    }

    #remember .para {
        padding: 10px;
        width: 100%;
    }

    #remember .para p {
        font-size: 16px;
    }

    #front-contact {
        padding: 20px;
        height: 250px;
    }

    #front-contact p {
        font-size: 16px;
    }

    #contact-form {
        margin-top: 10%;
        align-items: start;
        height: 400px;
    }

    #contact-form .heading {
        margin-bottom: 0px;
    }

    #contact-form .heading h2 {
        font-size: 25px;
        font-weight: 700;
    }

    #contact-form .heading {
        margin-bottom: 20px;
    }

    #contact-form .text form .form-group {
        gap: 15px;
        margin-bottom: 15px;
    }

    #contact-form .text form input {
        width: 100%;
    }

    #contact-form .text form textarea {
        width: 100%;
    }

    #blogs .content .box {
        width: 100%;
    }

    #blogs .content .box a .text h5 {
        font-size: 18px;
    }

    #blogs .content .box a .text p {
        font-size: 14px;
    }

}


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

    .navbar-brand {
        margin-left: 10px;
    }

    .creative-btn {
        position: relative;
        padding: 10px 20px;
        width: 40%;
    }

    .creative-btn a {
        font-size: 18px;
    }

    #pricing {
        margin-top: -30px;
        margin-bottom: 0px;
    }

    #pricing .content {
        padding: 10px;
    }

    #pricing .content h1 {
        font-size: 20px;
    }

    #pricing .content span {
        font-size: 20px;
    }

    #partners {
        margin-top: 10%;
    }

    #partners .image-slider {
        margin-top: 30px;
        padding: 30px;
    }

    #partners .images img {
        width: 8vh;
    }

    #services {
        margin-top: 10%;
    }

    #services .content {
        margin-top: 50px;
        column-gap: 10px;
        width: 100%;
        padding: 0;
    }

    #services .content .box {
        width: 35%;
    }

    #services .content .box .title h3 {
        font-size: 1.3em;
    }

    #services .content .box .points p {
        font-size: 0.8em;
    }

    .carousel-item .text h1 {
        font-size: 40px;
        word-break: 0;
        letter-spacing: 0;
    }

    .carousel-item .text .btns {
        width: 100%;
    }

    .carousel-item .text .btns button {
        margin: 2px;
        margin-top: 20px;
        padding: 8px;
        width: 200px;
    }

    #brief-des {
        margin-top: 10%;
    }

    #brief-des .content {
        column-gap: 10px;
        width: 100%;
    }

    #brief-des .content .box1 {
        width: 50%;
    }

    #brief-des .content .box1 .image img:hover {
        transform: scale(1.1);
    }

    #brief-des .content .box1 .image #brief-des1 {
        width: 250px;
        height: 150px;
    }

    #brief-des .content .box1 .image #brief-des2 {
        width: 250px;
        height: 150px;
    }

    #brief-des .content .box1 .image #brief-des3 {
        width: 250px;
        height: 100px;
        margin-top: 0px;
    }

    #brief-des .content .box1 .image #brief-des4 {
        width: 250px;
        height: 100px;
    }

    #brief-des .content .box2 {
        padding: 10px;
        padding-top: 0px;
        width: 50%;
        margin-left: 20px;
    }

    #brief-des .content .box2 p.title {
        font-size: 18px;
    }

    #brief-des .content .box2 p {
        font-size: 18px;
        margin-top: 10px;
    }

    #brief-des .content .box2 .points ul li {
        font-size: 18px;
    }

    #brief-des .content .box2 .btns {
        margin-top: 30px;
    }

    #brief-des .content .box2 h1 {
        font-size: 22px;
    }

    #brief-des .content .box2 p {
        font-size: 14px;
    }

    #brief-des .content .box-about .image {
        padding: 10px;
    }

    #brief-des .content .box-about .image img {
        width: 100%;
    }

}









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

    .navbar-brand {
        margin-left: 10px;
    }

    .navbar-brand img {
        width: 10vh;
    }


    .creative-btn {
        position: relative;
        padding: 10px 20px;
        width: 40%;
    }

    .creative-btn a {
        font-size: 18px;
    }

    #pricing {
        margin-top: -30px;
        margin-bottom: 0px;
    }

    #pricing .content {
        padding: 10px;
    }

    #pricing .content h1 {
        font-size: 20px;
    }

    #pricing .content span {
        font-size: 20px;
    }

    #partners {
        margin-top: 10%;
    }

    #partners .image-slider {
        margin-top: 30px;
        padding: 30px;
    }

    #partners .images img {
        width: 8vh;
    }

    #services {
        margin-top: 10%;
    }

    #services .content {
        margin-top: 50px;
        column-gap: 10px;
        width: 100%;
        padding: 0;
    }

    #services .content .box {
        width: 35%;
    }

    #services .content .box .title h3 {
        font-size: 1.3em;
    }

    #services .content .box .points p {
        font-size: 0.8em;
    }

    .carousel-item .text h1 {
        font-size: 40px;
        word-break: 0;
        letter-spacing: 0;
    }

    .carousel-item .text .btns {
        width: 100%;
    }

    .carousel-item .text .btns button {
        margin: 2px;
        margin-top: 20px;
        padding: 8px;
        width: 200px;
    }

    #brief-des {
        margin-top: 10%;
    }

    #brief-des .content {
        column-gap: 10px;
        width: 100%;
    }

    #brief-des .content .box1 {
        width: 50%;
    }

    #brief-des .content .box1 .image img:hover {
        transform: scale(1.1);
    }

    #brief-des .content .box1 .image #brief-des1 {
        width: 250px;
        height: 200px;
    }

    #brief-des .content .box1 .image #brief-des2 {
        width: 250px;
        height: 150px;
    }

    #brief-des .content .box1 .image #brief-des3 {
        width: 250px;
        height: 150px;
        margin-top: 0px;
    }

    #brief-des .content .box1 .image #brief-des4 {
        width: 250px;
        height: 200px;
    }

    #brief-des .content .box2 {
        padding: 10px;
        padding-top: 0px;
        width: 50%;
        margin-left: 20px;
    }

    #brief-des .content .box2 p.title {
        font-size: 18px;
    }

    #brief-des .content .box2 p {
        font-size: 18px;
        margin-top: 10px;
    }

    #brief-des .content .box2 .points ul li {
        font-size: 18px;
    }

    #brief-des .content .box2 .btns {
        margin-top: 30px;
    }

    #brief-des .content .box2 h1 {
        font-size: 22px;
    }

    #brief-des .content .box2 p {
        font-size: 14px;
    }

    #brief-des .content .box-about .image {
        padding: 10px;
    }

    #brief-des .content .box-about .image img {
        width: 100%;
    }

}


@media (min-width: 700px) {
    .mobilecall {
        display: none;
    }
}