:root {
  --primary-color: #0b5daa;
  --sec-color: #1b1b1b;
  --font: "Plus Jakarta Sans", serif;
  --border: 1px solid #ffffff1a;
}

@media (max-width: 1200px) {
  .navbar {
    padding: 10px;
  }

  .navbar-nav .nav-link {
    font-size: 16px;
  }
}

@media (max-width: 992px) {
  .navbar-nav .nav-item {
    margin-bottom: 10px;
  }

  .navbar-nav .nav-link {
    font-size: 18px;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 576px) {
  .navbar {
    padding: 2px;
  }

  .navbar-nav .nav-link {
    font-size: 14px;
  }

  h1 {
    font-size: 24px;
  }

  p {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  div#main-home-page,
  div#footer-section {
    overflow: hidden;
  }
  section p {
    font-size: 14px;
    line-height: inherit;
  }
  .home-page-banner-div h1 {
    font-size: 35px;
  }

  .dynamic-text {
    min-height: 100%;
  }

  .home-page-banner-div {
    min-height: 400px;
  }
  div#main-home-page p {
    font-size: 14px;
    line-height: 1.5em;
  }
  .btn.btn-button {
    font-size: 13px;
    padding: 8px 20px;
  }
  a.btn.btn-button::before {
    width: 35px;
    height: 35px;
    right: -40px;
  }
  .navbar-brand img {
    max-width: 150px;
  }
  div#custom-cursor {
    display: none;
  }
  button.navbar-toggler.collapsed,
  button.navbar-toggler {
    background: #fff;
    font-size: 15px;
  }

  nav.navbar.sub-nav-bar li.nav-item {
    margin-bottom: 0;
  }

  #marquee span,
  #marquee p {
    font-size: 15px;
  }
  .sub-heading {
    font-size: 12px;
    margin-bottom: 12px;
  }
  h2.main-heading {
    font-size: 27px;
  }

  .video-play-about {
    margin: 0;
    margin-top: 20px;
  }
  .video-play-about video {
    height: 300px;
  }
  .sep-div-about-us p:nth-of-type(1)::before {
    left: -34px;
  }
  .services-card-company p > br {
    display: none;
  }
  section {
    padding: 40px 0;
  }
  .card-service {
    margin-bottom: 20px;
  }
  .percentage-sec {
    text-align: center;
    margin-top: 20px;
  }
  ul.e-con-list li {
    font-size: 14px;
    text-wrap-style: balance;
  }
  ul.e-con-list {
    padding-left: 25px;
  }
  section.e-con-section .border-left-dashed {
    border-right: 0px dashed #f7fbfa1a;
  }
  .social-icons-div {
    height: 50px;
    width: 50px;
    top: auto;
    left: auto;
    position: relative;
  }
  .social-icons-div i {
    font-size: 20px;
  }
  #social-media-card {
    margin-bottom: 20px;
    padding: 10px;
    display: grid;
    align-items: center;
    align-content: center;
    gap: 14px;
    justify-content: center;
    justify-items: center;
    border-radius: 0;
  }
  .feature-count {
    position: relative;
    bottom: auto;
    left: auto;
  }
  .feature-icon {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    float: inline-end;
  }
  .feature-footer {
    justify-content: space-between;
  }
  .pricing-head {
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .pricing-card {
    margin-bottom: 20px;
  }
  .feature-card {
    min-height: auto;
  }
  section.testimonial-section.text-white button.slick-prev.slick-arrow {
    right: 15%;
  }
  .slick-next {
    right: 0px !important;
  }

  .blog-body h4 {
    font-size: 17px;
    margin-bottom: 10px;
  }

  .blog-card {
    margin-bottom: 25px;
  }

  #collaborate-text-div h2 {
    font-size: 60px !important;
    opacity: 0.5;
  }
  #getin-touch-div {
    height: 80px;
    width: 80px;
    opacity: 1;
    background-color: #0b5daa;
  }
  #getin-touch-div p {
    font-size: 10px;
  }
  .footer-row {
    padding: 30px 0;
  }
  .con-add a {
    font-size: 16px;
  }
  .footer-sec {
    margin-top: 24px;
  }

  /*--------------------*/
  .breadcrumb-title h1 {
    font-size: 30px;
  }
  ol.breadcrumb li.breadcrumb-item {
    font-size: 14px;
  }

  ol.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    font-size: 23px;
    line-height: initial;
  }
  section.breadcrumb-section {
    height: 100%;
  }

  .sidebar.service-sidebar {
    margin-bottom: 30px;
  }
  section#service-in-page h2 {
    font-size: 30px;
    margin-bottom: 15px;
  }
  li.in-page-list-item {
    color: #a1a1a1;
    font-size: 14px;
  }

  .sub-ser-body h3,
  .main-ser-body h3 {
    font-size: 20px;
  }

  img.abt-top-left.hidden.bottom-move.show {
    display: none;
  }
  section#why-choose {
    background-size: inherit;
    background-color: #020301;
    background-repeat: no-repeat;
    padding-top: 180px;
  }
  .sec-heading {
    margin-bottom: 10px;
  }
  section#why-choose .row {
    flex-flow: column;
  }
  .why-choose-card {
    height: 100%;
  }
  .what-we-do-text {
    margin: 0;
    padding-left: 0;
  }
  .background-overlay::before {
    width: 100%;
  }
  section#service-section-4::before {
    width: 400px;
    height: 400px;
    bottom: -10pc;
    right: -10pc;
  }
  section#service-section-4::after {
    width: 400px;
    height: 400px;
    top: -10pc;
    left: -10pc;
  }
  section .accordion-header h5 {
    font-size: 14px;
  }

  section.service-section-7 .sec-heading.text-end {
    margin-top: 50px;
    display: block;
  }

  .popular-card {
    height: auto;
    margin-bottom: 25px;
  }
  img.digital-marketing-img {
    display: none;
  }
  .email-marketing h1 {
    font-size: 35px;
  }
  .black-card {
    margin-bottom: 20px;
  }
  .testimonial-main-card {
    margin-bottom: 10px;
  }
  .testimonial-content {
    font-size: 15px;
  }
  section.testimonial-section.text-white button.slick-prev.slick-arrow,
  section.testimonial-section.text-white button.slick-next.slick-arrow {
    bottom: -50px;
  }
  .side-bar-img {
    padding: 20px;
    justify-content: center;
  }
  a.mobile-number-sidebar {
    font-size: 18px;
  }
  .side-bar-img p {
    font-size: 12px;
  }
  .sidebar.service-sidebar {
    padding: 16px;
  }
  li.sidebar-list-item a {
    font-size: 14px;
  }
  .dropdown-toggle.custom-dropdown-button {
    pointer-events: none;
  }
  .form-input {
    margin-bottom: 10px;
  }
  .port-count-num {
    font-size: 35px;
  }
  .portfolio-content {
    padding-top: 0px;
  }
  .project-card {
    flex-wrap: wrap;
    flex-direction: column;
    height: auto;
    margin-bottom: 20px;
  }
  .num-frame {
    font-size: 35px;
    width: 80px;
    height: 80px;
  }
}