@media screen and (min-width: 0px) and (max-width: 575px) {
    .navbar-nav li a {
        color: var(--primary-color);
        font-size: 1rem;
        border-bottom: 2px solid #e9e4e4;
    }
    .privacy {
        padding: 35px 0px;
    }
    .logo {
        height: 60px;
        object-fit: cover;
    }
    .service-card .right-col .small-img img {
        width: 100%;
        height: 300px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .service-card .right-col img {
        height: 293px;
        width: 100%;
    }

    .service-card .right-col .small-img {
        display: flex;
        gap: 1rem;
        width: 100%;
        margin: 30px 0;
        flex-direction: column;
    }
    .service-card {
        padding: 39px 0;
    }

    .service-card .left-col-service {
        position: relative;
        padding-left: 16px;
        visibility: visible;
        /* margin-top: 40px; */
    }
   
    .my-topbar{
        display: none;
    }
    .contact_area {
        padding: 50px 5px;
    }

    .section_title h1 {
        font-size: 28px;
    }

    .contact-form-box {
        padding: 20px;
    }

    .contact-form button {
        font-size: 14px;
    }

    /* hero section  */
    .hero-section {
        height: 75vh; 
    }

    .section-bg{
        padding: 0;
        padding-bottom: 1px;
    }

    .hero-section .caption {
        min-width: 70%; 
        max-width: 90%;
        bottom: 1.5em; 
        padding: 1em; 
        font-size: 1rem; 
    }

    .hero-section .caption h1{
        font-size: 20px;
      }

    /* about section   */

    .about-section h5 {
        font-size: 1.5rem; 
    }

    .gallery-section{
        padding: 0 15px 60px;
    }

    .product-section{
        padding: 40px 15px;
    }

    .about-section .btn-blue {
        padding: 0.5em 1em; 
        font-size: 1rem; 
    }

    /* trustsed section  */
    .trusted-brands .section-title {
        text-align: center;
        font-weight: 800;
        font-size: 1.8rem;
      }

      /* latest tool  */

      .latest-tool {
        padding: 22px 0;
        background-color: #f9f9f9;
      }

      .latest-tool h2 {
        font-size: 1.8em; 
        margin-bottom: 20px;
    }

    .latest-tool .thumbnail {
        height: 8em; 
    }

    .toolbox-item a {
        padding: 10px; 
    }

    .toolbox-item .title {
        font-size: 1em; 
    }

    .toolbox-item .preview {
        font-size: 0.9em; 
    }

    /* location section ww */
    .cta {
        text-align: center;
        padding: 30px 10px;
        margin-top: 40px;
    }

      .product-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        max-width: 5000px;

        width: 100%;
      }


      .marquee-section {
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 0px 0;
      }
      .marquee-inner {
        gap: 27px;
      }
      .marquee-section {
        margin-top: 20px;
        margin-bottom: 20px;
      }
      .marquee-inner {
        gap: 27px;
      }
      
      .marquee-item {
        font-size: 48px;
      }
      
      .marquee-star {
        font-size: 48px;
      }
      .section {
        flex-direction: column;
        height: auto;
        /* margin-bottom: 35px; */
        gap: 0;
    }

    .header {
        position: relative;
        width: 100%;
        height: 217px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--primary-color);
        color: white;
    }

    .section__image,
    .section__content {
        width: 100%;
    }

    .section__image {
        height: 200px;
    }

    .section__content {
        padding: 20px;
        /* text-align: center; */
    }

    .service-card .left-col {
        position: absolute;
        padding-left: 16px;
        visibility: hidden;
    }
      
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    /* hero section  */
    .about-section h5 {
        font-size: 1.75rem; 
    }

    .privacy {
        padding: 35px 0px;
    }
    .contact_area {
        padding: 50px 20px;
    }
    .service-card {
        padding: 39px 0;
    }
    .service-card .right-col img {
        height: 293px;
        width: 100%;
    }

    .service-card .right-col .small-img {
        display: flex;
        gap: 1rem;
        width: 100%;
        margin: 30px 0;
        flex-direction: column;
    }

    .service-card .right-col .small-img img {
        width: 100%;
        height: 300px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .service-card .left-col-service {
        position: relative;
        padding-left: 16px;
        visibility: visible;
        /* margin-top: 40px; */
    }

    .service-card .left-col {
        position: absolute;
        padding-left: 16px;
        visibility: hidden;
    }
    .section_title h1 {
        font-size: 28px;
    }

    .contact-form-box {
        padding: 20px;
    }

    .contact-form button {
        font-size: 14px;
    }
    .header {
        position: relative;
        width: 100%;
        height: 269px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--primary-color);
        color: white;
    }

    .navbar-nav li a {
        color: var(--primary-color);
        font-size: 1.3rem;
        border-bottom: 2px solid #e9e4e4;
    }
    .section {
        flex-direction: column;
       height: auto;
        gap: 20px;
        text-align: center;
        margin-bottom: 45px;
        margin-top: 0;
    }

    .section-bg{
        margin-bottom: 0;
        padding: 0;
    }

    .section__image, .section__content {
        width: 100%;
        min-height: 300px;
    }

    .section__image {
        height: 250px;
    }

    .section__content {
        padding: 20px;
    }

    .section__text {
        text-align: center;
    }

    ul {
        text-align: center;
    }

    .about-section .btn-blue {
        padding: 0.6em 1.2em;
        font-size: 1.1rem;
    }


    /* lattest tool  */
    .latest-tool h2 {
        font-size: 2.2em; 
        margin-bottom: 25px;
    }

    .latest-tool .thumbnail {
        height: 9em; 
    }

    .toolbox-item a {
        padding: 12px; 
    }

    .toolbox-item .title {
        font-size: 1.1em; 
    }

    .toolbox-item .preview {
        font-size: 0.95em; 
    }

    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 5000px;
        width: 100%;
      }
}

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

    /* hero section  */
    .hero-section .caption {
        min-width: 60%; 
        max-width: 80%;
        bottom: 2em;
        font-size: 0.5rem; 
        background-color: red;
    }

    .logo {
        height: 64px;
    }

    .privacy {
        padding: 60px 0px;
    }

    .service-card .right-col img {
        height: 411px;
        width: 100%;
    }
    .service-card {
        padding: 39px 0;
    }
    .service-card .left-col {
        position: absolute;
        padding-left: 16px;
        visibility: hidden;
    }
    .pbmit-all-post-list li a {
        padding: 8px 12px;
        font-size: 14px;
    }
    .service-card .left-col-service {
        position: relative;
        padding-left: 16px;
        visibility: visible;
        /* margin-top: 40px; */
    }
    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 5000px;
        width: 100%;
      }
    .section {
        flex-direction: column;
       height: auto;
        gap: 20px;
        text-align: center;

    }

    .header {
        position: relative;
        width: 100%;
        height: 269px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--primary-color);
        color: white;
    }

    .section__image, .section__content {
        width: 100%;
        min-height: 300px;
    }

    .section__image {
        height: 250px;
    }

    .section__content {
        padding: 20px;
    }


    .section-bg {
        background-color: #d1d1d1;
        /* padding: 30px 0 50px; */
        margin-bottom: 80px;
        padding: 1px 0 10px;
      }

    ul {
        text-align: center;
    }

    .hero-section .caption h1{
        font-size: 28px;
      }
      

    /* about section  */

    .about-section h5 {
        font-size: 1.8rem; 
    }

    .about-section .btn-blue {
        padding: 0.7em 1.3em; 
        font-size: 1.2rem; 
    }

    /* trustesd section  */
    .trusted-brands .section-title {
        text-align: center;
        font-weight: 800;
        font-size: 2.2rem;
      }

      /* latest tool  */

      .latest-tool h2 {
        font-size: 2.4em; 
    }

    .latest-tool .thumbnail {
        height: 9.5em; 
    }

    .toolbox-item a {
        padding: 13px; 
    }

    .toolbox-item .title {
        font-size: 1.15em; 
    }

    .toolbox-item .preview {
        font-size: 1em; 
    }

    .navbar-nav li a {
    
        border-bottom: 2px solid #e9e4e4;
    }
    


    .marquee-inner {
        gap: 27px;
      }
        .marquee-star {
          font-size: 60px;
      }
      
      .marquee-item {
        font-size: 60px;
      }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .navbar-nav li a {
        color: var(--primary-color);
        font-size: 0.9rem;
        text-wrap: nowrap;
    }
    .logo {
        height: 55px;
        object-fit: cover;
    }
    .section {
        display: flex;
        align-items: center;
        gap: 40px;
        margin-top: 80px;
        width: 100%;
        height: 574px;
        /* padding: 80px 0 40px; */
        color: black;
        margin-bottom: 80px;
    }
    .section-bg {
        background-color: #d1d1d1;
        /* padding: 30px 0 50px; */
        margin-bottom: 80px;
      }

    /* latest tool  */

    .latest-tool h2 {
        font-size: 2.5em; 
    }

    .latest-tool .thumbnail {
        height: 10em; 
    }

    .toolbox-item a {
        padding: 15px;
    }

    .toolbox-item .title {
        font-size: 1.2em;
    }

    .toolbox-item .preview {
        font-size: 1em;
    }

    .marquee-section {
        margin-top: 0px;
        margin-bottom: 0px;
        padding:0 0 20px;
      }
}