@media (max-width:400px) {
    .topbar{
        background: #F3525A;
    }
    .section1{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: baseline;
        margin: 0px 0px;
        padding: 10px 0px;
    }
    .topbar1{
        padding: 10px 0;
        border-bottom: 1px solid #ffffff;
    }
    .topbar1>a{
        border-right: none ;
        padding: 10px 17px 10px 11px;
        color: #ffffff;
    }
    .topbar2{
        padding: 0 10px;
        padding-top: 10px;
    }
    .mail{
        border-right:none;
        padding: 10px 15px 10px 10px;
    }

    /* <!-- Navbar Starts from here  --> */
    .navbar{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 5px 0px 10px 15px;
        background-color: #ffffff;
        position: sticky;
        top: 0px;
        z-index: 10000000000;
    }
    .logo{
        padding: 5px 5px;
        font-size: 20px;
        text-align: center;
    }
    .menu{
        margin-top: 0px;
        margin-right: 0px;
    }
    .menu>a{
        padding: 0px 5px;
        font-size: 14px;
        font-weight: 600;
        
    }

    /* * <!-- Main starts form here --> */ 
    .background-img{
        padding: 90px 0;
    }
    .text-main>span{
        font-size: 18px;
    }
    .text-main>h1{
        font-size: 40px;
    }
    .button1 {
        padding: 15px 25px;
        margin-right: 15px;
    }
    .button2{
        padding: 15px 25px;
        margin-right: 15px;
    }

    /* <!-- business-planning --> */
    .plans{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
    }
    .plan1 {
        padding: 50px 45px 70px 45px;
    }   
    .plan2{
        background-color: #F14D5D;
        padding: 50px 45px;
    }
    .plan-head>h1{
        font-size: 24px;
    }
    .plan-head>span{
        font-size: 16px;
    }
    .plan-icon>i{
        padding: 22px;
    } 

    /* services */ 
    .services>h1{
        font-size: 40px;
    }
    .services>hr{
        width: 40%;
    }
    .services-detail{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    margin: 10px;
    }
    .service-item>h3{
        font-size: 22px;
    }

    /* <!-- why choose us --> */
    .choose-us>h1{
    font-size: 40px;
    }
    .choose-us>hr{
        width: 40%;
    }
    .choose{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        align-items: center;
    }
    /* ----quotes---- */
    .quotes{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        margin: 60px 0px;
    }
    .quotes-data{
        margin: 50px 15px; 
    }
    .quotes-form{
        display: flex;
        flex-direction: column;
    }
    .form{
        margin-bottom: 10px;
        margin-left: 2px;
    }
    .form-color{
        margin-bottom: 10px;
        margin-left: 2px;
    }
    .quotes-img>img{
        width: 100%;
        height: 100%;
    }
    /* <!-- our team --> */
    .team>h1{
        font-size: 40px;
    }
    .team>hr{
        width: 40%;
    }
    .team1{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        margin: 20px 15px;
    }
    .name {
    padding: 15px 0px;
    margin-top: -13px;
    }
    /* ---<!-- testimonial -->--- */
    .testimonial{
        display: grid;
        grid-template-columns:100%;
        grid-template-rows: auto;
        margin: 60px 0px;
    }
    .testimonial-data {
        margin: 50px 60px 50px 10px;
    }
    .testimonial-data > h1 {
        font-size: 35px;
    }
    .testimonial-data > p {
        font-size: 19px;
    }
    .img-test > img {
        width: 70px;
        height: 70px;
    }
    .data-test > h3 {
        font-size: 28px;
    }
    .data-test > span {
        font-size: 15px;
    }
    .test-icon > i {
        margin: 0 0px;
        font-size: 30px;
    }
    /* ----blogs----- */
    .blogs>h1{
    font-size: 40px;
    }
    .blogs>hr{
        width: 40%;
    }
    .blog-main{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        margin: 50px 10px; 
    }
    .blog-date {
        padding: 20px;
    }
    .blog-text1{
    font-size: 14px;
    }
    .blog-text{
    padding: 20px 25px;
    }
    .blog-text > a {
        font-size: 18px;
    }

    /* stay update */
    .stay-update>h1{
        font-size: 40px;
    }      
    .email {
        padding: 16px 80px 16px 10px;
    }
    .button{
        padding: 16px 10px;
    }

    /*----footer---- */
    .footer{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        background-color: #152440;
        padding: 20px 30px;
    }
    .quick-links, .popular-links, .get-in-touch {
        display: flex;
        flex-direction: column;
        justify-content: baseline;
        flex-wrap: wrap;
        margin: 10px 28px;
    }
    .follow-us{
        margin: 10px 0px 0 27px;
    }
    .follow-us>a{
        font-size: 18px;
    }
    .socialmediaicon.facebook {
        font-size: 20px;
    }
    /* ---last section--- */
    .last-section>span{
        margin: 20px 0;
        font-size: 12px;
}
}
/*very Small devices (landscape phones, 576px and up) */
@media (min-width: 300px) and (max-width: 575.98px){
    .topbar1 > a {
        padding: 10px 8px 10px 11px;
    }
    .mail {
        padding: 10px 5px 10px 0px;
    }
    .menu > a {
        padding: 0px 5px;
        font-size: 12px;
        font-weight: bolder;
    }

    .service-item > h3 {
        font-size: 19px;
    }
    .choose-us > h1 {
        font-size: 30px;
    }
    .choose-data1 > h1 {
        margin-bottom: 20px;
        font-size: 24px;
    }
    .quotes-data > h1 {
        font-size: 22px;
        margin-bottom: 30px;
        margin-left: 11px;
    }
    .team > h1 {
        font-size: 30px;
    }
    .name > h1 {
        font-size: 20px;
    }
    .name > span {
        font-size: 14px;
    }
    .blogs > h1 {
        font-size: 30px;
    }
    .email {
        padding: 16px 30px 16px 10px;
    }

    .contact {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
    }
    .blog-detail {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        padding: 30px 60px;
    }

    .blog-grid {
        padding: 30px 30px;
        display: grid;
        grid-template-columns: auto ;
        grid-template-rows: auto;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px)  and (max-width: 767.98px){
    .topbar{
        background: #F3525A;
    }
    .section1 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0 0px;
        padding: 0px 0;
        align-items: center;
    }
    .topbar1{
        padding: 10px 0;
    }
    .topbar1 > a {
        padding: 10px 0px 10px 1px;
        border-right: 0px solid #dee2e6;
        color: #ffffff;
    }
    .topbar2{
        padding: 10px 10px;
        padding-top: 10px;
    }
    .mail {
        padding: 10px 0px 10px 0px;
        border-right: 0px solid #dee2e6;
    }

    /* <!-- Navbar Starts from here  --> */
    .navbar{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 5px 0px 10px 15px;
        background-color: #ffffff;
        position: sticky;
        top: 0px;
        z-index: 10000000000;
        align-items: center;
    }
    .logo {
        padding: 5px 5px;
        font-size: 11px;
    }
    .fa-regular{
        padding-right: 15px; ;
    }
    .menu{
        margin-top: 5px;
        margin-right: 35px;
    }
    .menu > a {
        padding: 0px 5px;
        font-size: 14px;
        font-weight: bolder;
    }

    .background-img {
        padding: 120px 0;
    }
    .text-main > span {
        font-size: 20px;
        font-weight: 400;
    }
    .text-main > h1 {
        font-size: 30px;
    }

    .button1 {
        padding: 13px 25px;
    }
    .button2 {
        padding: 13px 21px;
    }

    .plan1 > h1 {
        font-size: 24px;
    }
    .plan1 > h3 {
        font-size: 14px;
    }
    .plan1 > p {
        font-size: 13px;
    }
    .button3 {
        padding: 8px 18px;
    }
    .plan-icon > i {
        padding: 25px;
        font-size: 22px;
    }
    .plan-head > h1 {
        font-size: 25px;
    }
    .plan-head > span {
        font-size: 15px;
    }

    .services-detail {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        margin: 2px;
    }
    .services > h1 {
        font-size: 35px;
    }
    .service-item {
        margin: 20px 10px;
        padding: 60px 25px;
    }
    .service-item > h3 {
        font-size: 20px;
        margin: 20px 0px;
        line-height: 23px;
    }
    .service-item > p {
        font-size: 15px;
    }

    /* <!-- why choose us --> */
    .choose-us>h1{
        font-size: 40px;
    }
    .choose-us>hr{
        width: 40%;
    }
    .choose{
        display: grid;              grid-template-columns: auto;
        grid-template-rows: auto;
        align-items: center;
    }
    .choose2 {
        background-color: #F3525A;
        width: 385px;
        text-align: center;
        padding-bottom: 80px;
        margin-left: 90px;
    }

    .quotes-data > h1 {
        font-size: 25px;
        margin-bottom: 30px;
        margin-left: 11px;
    }

    .quotes-form {
        display: none;
    }

     /* <!-- our team --> */
    .team>h1{
        font-size: 40px;
    }
    .team>hr{
        width: 40%;
    }
    .team1{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        margin: 20px 15px;
    }
    .name {
    padding: 15px 0px;
    margin-top: -13px;
    }

     /* <!-- our team --> */
    .team>h1{
        font-size: 40px;
    }
    .team>hr{
        width: 40%;
    }
    .team1{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        margin: 20px 15px;
    }
    .name {
        padding: 15px 0px;
        margin-top: -13px;
    }

    .testimonial-data > h1 {
        font-size: 26px;
    }
    .testimonial-data > p {
        font-size: 15px;
    }
    .data-test > h3 {
        font-size: 16px;
        font-weight: 600;
    }
    .data-test > span {
        font-size: 14px;
        margin-left: 0px;
    }
    .img-test > img {
        width: 60px;
        height: 60px;
    }
    .test-icon > i {
        margin: 0 5px;
        width: 33px;
        height: 24px;
        font-size: 25px;
    }

    .blogs > h1 {
        font-size: 40px;
    }

    .blog-main{
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        margin: 50px 10px; 
    }
    .blog-date {
        padding: 20px;
    }
    .blog-text1{
    font-size: 14px;
    }
    .blog-text{
    padding: 20px 25px;
    }
    .blog-text > a {
        font-size: 18px;
    }

    .stay-update > h1 {
        font-size: 40px;
    }

    .email {
        padding: 16px 30px 16px 10px;
    }

    .footer {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        background-color: #152440;
        padding: 50px 20px;
    }

    .contact {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
    }

    .blog-detail {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        padding: 30px 60px;
    }
    .blog-grid {
        padding: 30px 30px;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px)
and (max-width: 991.98px){ 
    .section1 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 0 0px;
        padding: 0px 0;
    }
    .topbar1 > a {
        padding: 10px 10px 10px 10px;
    }
    /* <!-- Navbar Starts from here  --> */
    .navbar{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 5px 0px 10px 15px;
        background-color: #ffffff;
        position: sticky;
        top: 0px;
        z-index: 10000000000;
        text-align: center;
    }
    .logo{
        padding: 5px 5px;
        font-size: 20px;
        text-align: center;
    }
    .menu{
        margin-top: 0px;
        margin-right: 0px;
    }
    .menu>a{
        padding: 0px 5px;
        font-size: 14px;
        font-weight: 600;
        
    }

    .background-img {
        padding: 160px 0;
    }
    .text-main > span {
        font-size: 20px;
        font-weight: 400;
    }
    .text-main > h1 {
        font-size: 29px;
    }

    .service-item {
        margin: 20px 10px;
        padding: 60px 50px;
    }
    .service-item > h3 {
        font-size: 27px;
        font-weight: 600;
        line-height: 25px;
        margin:20px 0 ;
    }
    .quotes-form {
        display: flex;
        flex-direction: column;
    }

    .choose2 {
        width: 285px;
    }
    .members {
        margin: 20px 10px;
    }

    .name > h1 {
        font-size: 18px;
    }
    .name > span {
        font-size: 14px;
    }

    .testimonial-data > h1 {
        font-size: 26px;
    }
    .testimonial-data > p {
        font-size: 16px;
    }
    .data-test > h3 {
        font-size: 25px;
        font-weight: 500;
    }

    .blog-main {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        margin: 50px 10px;
    }

    .contact {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
    }
    .blog-detail {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        padding: 30px 60px;
    }

    .blog-grid {
        padding: 30px 30px;
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto;
    }

    
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .topbar {
        background: linear-gradient(39deg, rgb(246, 246, 246) 50%, rgb(243, 82, 90) 10%);
    }

    .service-item > h3 {
        font-size: 27px;
        font-weight: 600;
        line-height: 25px;
        margin: 20px 0;
    }
    .blog-detail {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        padding: 30px 60px;
    }
    .blog-grid {
        padding: 30px 30px;
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto;
    }
}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1399.98px) {}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { }

/* @media (min-width: 760px) and (max-width: 1250px){} */
@media (min-width: 760px) and (max-width: 1250px){
    .topbar2 {
        background-color: #F3525A;
        padding: 0 5px;
    }
    .service-item > h3 {
        font-size: 24px;
    }
    .blog-text1>span {
        font-size: 14px;
    }
    .blog-text > a {
        font-size: 18px;
    }

}