@media screen and (min-width: 576px) {
  /*          Navbar         */
  nav .container-fluid,
  .container {
    max-width: 560px;
  }
  /*         FAQ Section         */
  #collapseOne,
  #collapseFour {
    max-height: 142px;
  }
  #collapseTwo,
  #collapseFive,
  #collapseSix {
    max-height: 165px;
  }
  #collapseThree {
    max-height: 215px;
  }
}
@media screen and (min-width: 768px) {
  /*          Navbar         */
  nav {
    backdrop-filter: blur(12px);
  }
  nav .container-fluid,
  .container {
    max-width: 672px;
  }
  .dropdown-menu .row .col-md-6 {
    max-width: calc(50% - 10.5px);
  }
  /*       Services Section       */
  .services .row .card {
    max-width: calc(50% - 14px);
  }
  /*      Technology Section      */
  .technology button.nav-link {
    padding: 14px 28px;
  }
  .technology .row .card {
    max-width: calc(50% - 14px);
  }
  /*         FAQ Section         */
  #collapseOne,
  #collapseTwo,
  #collapseFour {
    max-height: 119px;
  }
  #collapseThree {
    max-height: 215px;
  }
  #collapseFive,
  #collapseSix {
    max-height: 142px;
  }
  /*         Contact Section         */
  .contact form .row .col-md-6 {
    max-width: calc(50% - 10.5px);
  }
  .contact form .project-budget .row label {
    max-width: calc(33.3% - 9.33px);
  }
  /*          Footer          */
  footer .top .row .left-side,
  footer .top .row .social-links {
    max-width: calc(50% - 14px);
  }
}
@media screen and (min-width: 992px) {
  /*         Navbar         */
  nav .container-fluid,
  .container {
    padding-inline: 28px !important;
    max-width: 896px;
  }
  /*        Home Section        */
  .home .row .home-text {
    padding-right: 56px !important;
  }
  h1 {
    font-size: 52.5px;
  }
  .home-image {
    transform: scale(1);
    max-width: 336px;
    max-height: 336px;
  }
  /*       Services Section       */
  .header h2 {
    font-size: 43px;
  }
  .services .row .card {
    max-width: calc(33.3% - 18.67px);
  }
  /*      Technology Section      */
  .technology .row .card {
    max-width: calc(33.3% - 18.67px);
  }
  /*        Contact Section        */
  .contact .header h2 {
    font-size: 63px;
  }
  .contact .row .col-lg-8,
  .contact .row .col-lg-4 {
    padding: 42px;
  }
}
@media screen and (min-width: 1200px) {
  /*         Navbar         */
  nav .container-fluid,
  .container {
    padding-inline: 32px !important;
    max-width: 1280px;
  }
  nav .nav {
    width: auto !important;
  }
  .navbar-brand {
    margin-right: 48px;
  }
  .navbar-brand .navbar-icon {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }
  .navbar-icon i {
    font-size: 18px;
  }
  .navbar-brand span {
    font-size: 24px;
  }
  .navbar-collapse {
    border-top: 0;
    padding-block: 16px;
  }
  ul.navbar-nav li {
    margin-bottom: 0 !important;
    margin-right: 32px;
  }
  ul.navbar-nav li a {
    font-size: 16px;
  }
  .nav-link {
    position: relative;
  }
  .navbar-nav .nav-link.active {
    color: var(--color-primary) !important;
  }
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background-color: var(--color-primary);
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav-link.active::after {
    width: 100%;
  }
  .dropdown {
    position: relative;
  }
  .dropdown-toggle::after {
    content: " " !important;
  }
  .dropdown-toggle i {
    font-size: 12px;
    line-height: 1.33333;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .dropdown-toggle.show i {
    transform: rotate(180deg);
  }
  .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-25%);
    margin-top: 8px !important;
    width: 100vw;
    height: auto;
    max-width: 1152px;
    background-color: white;
    box-shadow: 0 25px 50px -12px #00000040;
    border-radius: 16px;
    border: 1px solid #f6f3f4 !important;
    z-index: 50;
    opacity: 1;
    overflow: visible;
  }
  .dropdown-menu .row {
    padding: 32px;
    gap: 32px;
  }
  .dropdown-menu .row .col-xl-4 {
    width: calc(33% - 21.3px);
  }
  .dropdown-menu .row .col-xl-4 h3 {
    font-size: 14px;
  }
  .dropdown-menu .row .col-xl-4 a {
    padding: 12px;
  }
  .dropdown-menu .row .service-icon {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }
  .dropdown-menu .row .service-icon i {
    font-size: 14px;
  }
  .dropdown-menu .row .text-des {
    font-size: 14px;
  }
  .dropdown-menu .help {
    padding: 16px;
  }
  .dropdown-menu .help h4 {
    font-size: 16px;
  }
  .dropdown-menu .help p {
    font-size: 14px;
  }
  .dropdown-menu .help a {
    font-size: 14px !important;
  }
  .navbar-collapse div button:first-child {
    padding: 8px 24px;
    font-size: 16px;
    border: 0;
  }
  .navbar-collapse div button:last-child {
    padding: 12px 32px;
    font-size: 16px;
    width: auto !important;
    white-space: nowrap;
  }
  /*         Home Sevtion         */
  .home {
    padding-top: 96px;
    padding-bottom: 64px;
  }
  .home .row .home-text {
    padding-right: 64px !important;
  }
  .home-text .text-header {
    margin-bottom: 32px;
  }
  .home-text .text-header .experience i,
  .home-text .text-header .experience span {
    font-size: 14px;
  }
  h1 {
    font-size: 60px;
  }
  .text-header p {
    font-size: 20px;
    max-width: 672px;
  }
  .button-home button {
    padding: 16px 40px;
    font-size: 18px;
  }
  .home-text div:last-child {
    padding-top: 32px;
  }
  .home-text div:last-child .text-center {
    margin-right: 32px;
  }
  .home-text div:last-child .text-center div:first-child {
    font-size: 30px;
  }
  .home-text div:last-child .text-center div:last-child {
    font-size: 16px;
  }
  .home-img {
    padding: 32px;
  }
  .home-image {
    max-width: 483px;
    max-height: 483px;
  }
  .home-image .badge-top {
    width: 96px;
    height: 96px;
    top: -24px;
    right: -24px;
  }
  .home-image .badge-bottom i {
    font-size: 24px;
  }
  .home-image .badge-bottom {
    width: 80px;
    height: 80px;
    bottom: -24px;
    left: -24px;
  }
  .home-image .badge-bottom i {
    font-size: 20px;
  }
  /*         Services Section          */
  .services,
  .technology,
  .testimonials,
  .faq,
  .contact {
    padding-block: 96px;
  }
  .header {
    margin-bottom: 80px;
  }
  .header .section-header {
    font-size: 14px;
  }
  .header h2 {
    font-size: 48px;
  }
  .header p {
    font-size: 20px;
    max-width: 765px;
  }
  .services .row {
    gap: 32px;
    margin-bottom: 64px;
  }
  .services .card {
    max-width: calc(33.3% - 21.33px) !important;
    padding: 32px;
  }
  .services .card .icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }
  .services .card .icon i {
    font-size: 24px;
  }
  .services .card h3 {
    font-size: 20px;
  }
  .services .card p {
    font-size: 16px;
  }
  .services .card li {
    font-size: 14px;
  }
  .services .card a {
    font-size: 16px;
  }
  /*        Technology Section       */
  .technology .tabs {
    max-width: 1152px;
  }
  .technology button.nav-link {
    padding: 16px 32px;
    font-size: 18px;
  }
  .technology button.active {
    color: var(--color-primary) !important;
    border-color: transparent !important;
  }
  .technology .tab-header h3 {
    font-size: 24px;
  }
  .technology .tab-header p {
    font-size: 18px;
  }
  .technology .row {
    gap: 32px;
  }
  .technology .row .card {
    max-width: calc(33.3% - 21.3px);
    padding: 32px;
    border-radius: 16px;
  }
  .technology .card .icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }
  .technology .card .icon i {
    font-size: 24px;
  }
  .technology .card h4 {
    font-size: 20px;
    margin-bottom: 12px;
  }
  .technology .card p {
    font-size: 16px;
    margin-bottom: 16px;
  }
  .technology .card div span {
    font-size: 16px;
  }
  .technology .card div span.rounded-pill {
    padding: 4px 12px;
    font-size: 12px;
  }
  .technology .card-mongodb .icon span {
    font-size: 12px;
  }
  /*       Testimonials Section       */
  .testimonials .carousel {
    max-width: 1024px;
  }
  .testimonials .carousel-item .card {
    max-width: 1024px;
    border-radius: 24px;
    padding: 48px;
  }
  .testimonials .card .top-card {
    margin-bottom: 32px;
  }
  .testimonials .card .icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
  }
  .testimonials .card .icon i {
    font-size: 24px;
  }
  .testimonials .card .stars i {
    font-size: 16px;
  }
  .testimonials .card .rate span {
    margin-top: 6px;
  }
  .testimonials .card .verified i,
  .testimonials .card .verified span,
  .testimonials .card .author-info .verified-linkedin i,
  .testimonials .card .rate span {
    font-size: 14px;
  }
  .testimonials .card blockquote {
    font-size: 20px;
    margin-bottom: 32px;
  }
  .testimonials .card .break {
    margin-bottom: 32px;
  }
  .testimonials .card .author-info div.flex-column {
    gap: 20px;
  }
  .testimonials .card .author-info img {
    width: 80px;
    height: 80px;
  }
  .testimonials .card .author-info .check {
    width: 28px;
    height: 28px;
    bottom: -4px;
    right: -4px;
  }
  .testimonials .card .author-info .author-name {
    font-size: 18px;
  }
  .testimonials .card .author-info .author-job {
    font-size: 16px;
  }
  .testimonials .card .author-info .verified-linkedin {
    gap: 6px;
    margin-top: 6px;
  }
  .testimonials .card .author-info .percentage {
    font-size: 30px;
  }
  .testimonials .carousel-indicators {
    margin-top: 40px;
  }
  .testimonials .carousel-indicators button {
    width: 8px;
    height: 8px;
  }
  .testimonials .carousel-indicators button:hover {
    width: 32px !important;
  }
  /*         FAQ Section         */
  .accordion {
    max-width: 896px;
  }
  .accordion-item button span:first-child {
    font-size: 18px;
    padding-right: 32px;
  }
  .accordion-item button .accordion-icon {
    width: 40px;
    height: 40px;
  }
  .accordion-body p {
    font-size: 16px;
  }
  .accordion-item .accordion-body ul i {
    margin-top: 6px;
    font-size: 16px;
  }
  .accordion-item .accordion-body ul span {
    font-size: 16px;
  }
  /*        Contact Section        */
  .contact .header .section-header {
    margin-bottom: 32px !important;
    padding: 12px 24px !important;
  }
  .contact .header h2 {
    margin-bottom: 32px !important;
    font-size: 72px;
  }
  .contact .header p {
    font-size: 24px;
    max-width: 896px;
  }
  .contact-content {
    max-width: 1152px;
  }
  .contact .row .col-lg-8,
  .contact .row .col-lg-4 {
    padding: 48px;
  }
  .contact .row .col-lg-8 .top {
    margin-bottom: 32px;
  }
  .contact .row .top h3 {
    font-size: 24px;
  }
  .contact .row .top p.color-p {
    font-size: 18px;
  }
  .contact form .row,
  .contact form .interest,
  .contact form .timeline,
  .contact form .project-budget,
  .contact form .tell-us {
    margin-bottom: 32px;
  }
  .contact form .row .col-md-6 {
    max-width: calc(50% - 12px);
  }
  .contact form label {
    margin-bottom: 12px;
    font-size: 14px;
  }
  .contact form input,
  .contact form select,
  .contact form textarea {
    font-size: 16px;
  }
  .contact form .interest i,
  .contact form .timeline i {
    font-size: 16px;
  }
  .contact .project-budget .row label {
    max-width: calc(33.3% - 10.67px) !important;
  }
  .contact form .project-budget label span.text-center span:first-child {
    font-size: 16px;
  }
  .contact form .project-budget label span.text-center span:last-child {
    font-size: 14px;
  }
  .contact form .tell-us label {
    margin-bottom: 12px;
  }
  .form-check {
    padding-top: 16px;
    margin-bottom: 32px;
  }
  .form-check input {
    margin-top: 4px;
    margin-right: 12px;
    width: 20px;
    height: 20px;
  }
  form button {
    padding-block: 20px;
    font-size: 18px;
  }
  form button i {
    margin-left: 12px;
  }
  .contact .row .layer-tr {
    width: 128px;
    height: 128px;
  }
  .contact .row .layer-bl {
    width: 96px;
    height: 96px;
  }
  .contact .row .clarity h4 {
    font-size: 24px;
    margin-bottom: 32px;
  }
  .clarity .top .item {
    margin-bottom: 32px;
  }
  .clarity .top .icon {
    width: 48px;
    height: 48px;
  }
  .clarity .top h5 {
    font-size: 16px;
  }
  .clarity .top p {
    font-size: 14px;
  }
  .clarity .bottom {
    padding-top: 32px;
  }
  .clarity .bottom h5 {
    font-size: 16px;
  }
  .clarity .bottom .item {
    margin-bottom: 12px;
  }
  .clarity .bottom .item i {
    width: 16px;
    margin-right: 12px;
    font-size: 16px;
  }
  .clarity .bottom .item span {
    font-size: 16px;
  }
  /*         Footer        */
  footer .top .row {
    gap: 32px;
  }
  footer .top .row .left-side,
  footer .top .row .social-links {
    max-width: calc(50% - 16px);
  }
  .footer-head {
    margin-bottom: 12px;
  }
  .footer-head .icon {
    width: 40px;
    height: 40px;
  }
  .footer-head .icon i,
  footer .social-links a i {
    font-size: 16px;
  }
  .footer-head span {
    font-size: 20px;
  }
  footer .top .row p {
    max-width: 448px;
    font-size: 14px;
  }
  footer .social-links {
    gap: 12px;
  }
  footer .social-links a {
    width: 40px;
    height: 40px;
  }
  footer .bottom p {
    font-size: 14px;
  }
  footer .bottom .made-with,
  footer .bottom .made-with i {
    font-size: 12px;
  }
}
@media screen and (min-width: 1400px) {
  /*         Navbar         */
  nav .container-fluid,
  .container {
    max-width: 1536px;
  }
  /*       Home Section       */
  .home-image {
    max-width: 583px;
    max-height: 583px;
  }
}