@media (min-width: 320px) and (max-width: 990px) {
    .container {
      width: 95%;
      overflow: hidden;
    }
    .blog-section .container {
      flex-direction: column !important;
    }
    .blog-section .container .main-side {
      width: 100% !important;
      margin-bottom: 10px !important;
    }
    .header-bottom .container .right-side a {
      display: none;
    }
    .blog-section .container aside {
      width: 100% !important;
    }
    .blog-section .blogs .articles-container {
      row-gap: 10px;
      flex-wrap: wrap !important;
    }
    .blog-section .container .main-side .blogs {
      display: flex;
      justify-content: space-between;
      column-gap: 20px;
      flex-wrap: wrap;
      row-gap: 20px;
    }
    .blog-section .container .main-side .blogs article {
      width: 100%;
    }
    .banner {
      background-position: center;
      height: 50vh;
    }
    .shape {
      display: none;
    }
    .banner .banner-inner {
      top: 10% !important;
    }
    .banner .banner-inner h1 {
      line-height: 30px !important;
    }
    .banner .banner-inner p {
      margin-left: 10px !important;
      font-size: 12px !important;
    }
    .banner .banner-inner a {
      font-size: 12px !important;
    }
    .banner .banner-inner h1 .little {
      font-size: 30px !important;
    }
    .banner .banner-inner h1 span {
      font-size: 40px !important;
    }
    .header-top {
      display: none !important;
    }
    .header-bottom nav {
      display: none;
    }
    .side-bar-menu-section .side-bar {
      width: 100% !important;
    }
    .side-bar-menu-section .get-in-touch {
      display: none;
    }
    .mobilenav {
      display: block;
      margin: 20px 0px !important;
    }
    .title-area h2 {
      font-size: 40px !important;
    }
    .video-section .container {
      max-height: 350px !important;
    }
    .video-section .container img {
      object-fit: cover;
    }
    .video-section .container h2 {
      font-size: 1.5rem;
    }
    .team-area-section .circle-shape {
      max-width: 333px;
      max-height: 333px;
      bottom: -45% !important;
      right: -15% !important;
    }
    .team-area-section .circle-shape h5 {
      font-size: 20px !important;
    }
    .team-area-section .circle-shape span {
      font-size: 16px !important;
    }
    .team-area-section .circle-shape .text {
      margin-left: 70px !important;
      margin-top: 80px !important;
    }
    .team-area-section .row {
      flex-wrap: wrap;
    }
    .team-area-section article {
      width: 100% !important;
    }
    .area-header h2 {
      font-size: 40px !important;
    }
    .callto-area-section h3 {
      font-size: 27px !important;
      line-height: 30px !important;
    }
    .section-header h2, .blog-header h2 {
      font-size: 30px !important;
    }
    .blog-area-section .thumbnail .image {
      height: 100% !important;
    }
    .blog-area-section .main, .blog-area-section .nomain {
      font-size: 14px !important;
    }
    .blog-area-section h5 {
      font-size: 18px !important;
    }
    .blog-area-section .row {
      flex-wrap: wrap;
    }
    .blog-area-section .row article {
      width: 100% !important;
    }
    .footer-inner input {
      max-width: 10% !important;
    }
    .row-footer {
      flex-wrap: wrap;
    }
    .row-footer article {
      width: 50% !important;
    }
    .blogs-inner article {
      display: flex !important;
      width: 100% !important;
      align-items: center;
      justify-content: space-between !important;
    }
    .swiper article {
      width: 100% !important;
    }
    .service-area-section {
      padding: 50px 0px;
    }
    .service-area-section .cards-row {
      flex-wrap: wrap;
      column-gap: 10px;
      row-gap: 30px;
    }
    .service-area-section a {
      font-size: 10px !important;
    }
    .service-area-section .cards-row article {
      width: 100% !important;
    }
    .service-area-section h2 {
      font-size: 16px !important;
    }
    .service-area-section span {
      font-size: 12px !important;
    }
    .service-area-section h5 {
      font-size: 18px !important;
      margin-bottom: 10px;
    }
    .contact-inner .right-side {
      width: 100% !important;
    }
    .about-area-section h2 {
      font-size: 24px !important;
    }
    .about-area-section .right-side {
      display: none;
    }
    .about-area-section .container .left-side {
      width: 100% !important;
      padding-right: 0px !important;
    }
    .item-check-inner {
      width: 100% !important;
    }
    .client-rating-section {
      margin-top: 100px !important;
      display: none;
    }
    .working-progress-section article h5 {
      font-size: 18px !important;
    }
    .working-progress-section .row {
      flex-wrap: wrap;
    }
    .working-progress-section .row article {
      width: 100% !important;
    }
    .portfolio-area-section .container .row {
      width: 100% !important;
    }
    .portfolio-area-section .container .row article {
      width: 100% !important;
    }
    .footer-inner .article-inner .quick-link-inner ul li {
      font-size: 13px !important;
    }
  }
  @media (min-width: 768px) and (max-width: 991px) {
    .container {
      max-width: 70%;
      overflow: hidden;
    }
    .blog-section .container {
      flex-direction: column !important;
    }
    .blog-section .container .main-side {
      width: 100% !important;
      margin-bottom: 10px !important;
    }
    .blog-section .container aside {
      width: 100% !important;
    }
    .blogs .articles-container {
      row-gap: 10px;
    }
    .banner {
      background-position: center;
    }
    .banner .banner-inner {
      top: 20% !important;
    }
    .banner .banner-inner h1 .little {
      font-size: 51px !important;
    }
    .banner .banner-inner h1 span {
      font-size: 73px !important;
      line-height: 0px;
    }
    .header-top {
      display: none !important;
    }
    .header-bottom nav, .side-bar-menu-section .get-in-touch {
      display: none;
    }
    .mobilenav {
      display: block;
      margin: 20px 0px !important;
    }
    .title-area h2 {
      font-size: 40px !important;
    }
    .video-section .container {
      max-height: 350px !important;
    }
    .video-section .container img {
      object-fit: cover;
    }
    .video-section .container h2 {
      font-size: 4.5rem;
    }
    .team-area-section .circle-shape {
      max-width: 333px;
      max-height: 333px;
      bottom: -45% !important;
      right: -15% !important;
    }
    .team-area-section .circle-shape h5 {
      font-size: 20px !important;
    }
    .team-area-section .circle-shape span {
      font-size: 16px !important;
    }
    .team-area-section .circle-shape .text {
      margin-left: 70px !important;
      margin-top: 80px !important;
    }
    .team-area-section .row {
      flex-wrap: wrap;
    }
    .team-area-section article {
      width: 50% !important;
    }
    .area-header h2 {
      font-size: 40px !important;
    }
    .callto-area-section h3 {
      font-size: 27px !important;
      line-height: 30px !important;
    }
    .section-header h2, .blog-header h2 {
      font-size: 30px !important;
    }
    .blog-area-section .thumbnail .image {
      height: 100% !important;
    }
    .blog-area-section .main, .blog-area-section .nomain {
      font-size: 14px !important;
    }
    .blog-area-section h5 {
      font-size: 18px !important;
    }
    .blog-area-section .row {
      flex-wrap: wrap;
    }
    .blog-area-section .row article {
      width: 100% !important;
    }
    .footer-inner input {
      max-width: 10% !important;
    }
    .row-footer {
      flex-wrap: wrap;
    }
    .row-footer article {
      width: 50% !important;
    }
    .blogs-inner article {
      display: flex !important;
      width: 100% !important;
      align-items: center;
      justify-content: space-between !important;
    }
    .swiper article {
      width: 100% !important;
    }
    .service-area-section {
      padding: 50px 0px;
    }
    .service-area-section .cards-row {
      flex-wrap: wrap;
      column-gap: 10px;
      row-gap: 20px;
    }
    .service-area-section .cards-row article {
      width: 48% !important;
    }
    .service-area-section h2 {
      font-size: 24px !important;
    }
    .service-area-section h5 {
      font-size: 18px !important;
      margin-bottom: 10px;
    }
    .contact-inner .right-side {
      width: 100% !important;
    }
    .about-area-section h2 {
      font-size: 24px !important;
    }
    .about-area-section .right-side {
      display: none;
    }
    .about-area-section .container .left-side {
      width: 100% !important;
      padding-right: 0px !important;
    }
    .item-check-inner {
      width: 100% !important;
    }
    .client-rating-section {
      margin-top: 100px !important;
    }
    .working-progress-section article h5 {
      font-size: 18px !important;
    }
    .portfolio-area-section .container .row {
      width: 100% !important;
    }
    .portfolio-area-section .container .row article {
      width: 100% !important;
    }
    .footer-inner .article-inner .quick-link-inner ul li {
      font-size: 13px !important;
    }
  }
  @media (min-width: 992px) and (max-width: 1199px) {
    .container {
      max-width: 80%;
    }
    .blog-section .container {
      flex-direction: column !important;
    }
    .blog-section .container .main-side {
      width: 100% !important;
      margin-bottom: 10px !important;
    }
    .blog-section .container aside {
      width: 100% !important;
    }
    .blogs .articles-container {
      row-gap: 10px;
    }
    .header-top {
      display: none !important;
    }
    .header-bottom nav, .side-bar-menu-section .get-in-touch {
      display: none;
    }
    .mobilenav {
      display: block;
      margin: 20px 0px !important;
    }
    .title-area h2 {
      font-size: 40px !important;
    }
    .video-section .container {
      max-height: 400px !important;
    }
    .video-section .container img {
      object-fit: cover;
    }
    .video-section .container h2 {
      font-size: 5.5rem;
    }
    .team-area-section .circle-shape {
      max-width: 200px;
      max-height: 200px;
      bottom: -35% !important;
      right: -10% !important;
    }
    .team-area-section .circle-shape h5 {
      font-size: 14px !important;
    }
    .team-area-section .circle-shape span {
      font-size: 12px !important;
    }
    .team-area-section .circle-shape .text {
      margin-left: 40px !important;
      margin-top: 40px !important;
    }
    .area-header h2 {
      font-size: 40px !important;
    }
    .callto-area-section h3, .section-header h2, .blog-header h2 {
      font-size: 30px !important;
    }
    .blog-area-section .thumbnail .image {
      height: 150px !important;
    }
    .blog-area-section .main, .blog-area-section .nomain {
      font-size: 14px !important;
    }
    .blog-area-section h5 {
      font-size: 18px !important;
    }
    .footer-inner input {
      max-width: 300px !important;
    }
    .row-footer {
      flex-wrap: wrap;
    }
    .row-footer article {
      width: 50% !important;
    }
    .blogs-inner article {
      display: flex !important;
      width: 100% !important;
      align-items: center;
      justify-content: space-between !important;
    }
    .swiper article {
      width: 100% !important;
    }
  }
  @media (min-width: 1200px) and (max-width: 1399px) {
    .container {
      width: 90%;
    }
    .video-section .container {
      max-height: 500px !important;
    }
    .video-section .container img {
      object-fit: cover;
    }
    .video-section .container h2 {
      font-size: 5.5rem;
    }
    .team-area-section .circle-shape {
      max-width: 200px;
      max-height: 200px;
      bottom: -20% !important;
      right: -6% !important;
    }
    .team-area-section .circle-shape h5 {
      font-size: 14px !important;
    }
    .team-area-section .circle-shape span {
      font-size: 12px !important;
    }
    .team-area-section .circle-shape .text {
      margin-left: 50px !important;
      margin-top: 50px !important;
    }
    .blog-area-section .thumbnail .image {
      height: 170px !important;
    }
    .footer-inner .article-inner .quick-link-inner ul li, opening-time-inner li {
      font-size: 14px !important;
    }
  }
  @media (min-width: 1400px) {
    .container {
      width: 1300px;
    }
  }