@media screen and (max-width: 1200px) {

  /*---------------------------------*/
  /* Main Banner */
  /*---------------------------------*/
  .main-banner {padding-left: 70px; padding-right: 70px;}
  .main-banner .banner-info {margin-left: 70px; margin-right: 0; margin-top: -80px;}
  .main-banner .banner-info .main-title {font-size: 50px; line-height: 60px;}
  .main-banner .banner-list {margin-top: 10px;}

  /*---------------------------------*/
  /* Services Fancy */
  /*---------------------------------*/
  .services-fancy-main .services-fancy-item .services-details {flex-wrap: wrap;}
  .services-fancy-main .services-fancy-item .services-link {order: 2;}
  .services-fancy-main .services-fancy-item .services-content {width: 100%; order: 3; margin-top: 20px;}

  /*---------------------------------*/
  /* Privacy Priority Section */
  /*---------------------------------*/
  .double-image .small-image {width: 240px; right: 30px;}

  /*---------------------------------*/
  /* About Ovrlay Section */
  /*---------------------------------*/
  .ovrlay-section {padding: 50px; margin-top: 60px;}

  /*---------------------------------*/
  /* All Form Pages */
  /*---------------------------------*/
  .website-form-pages .website-form .form-wrapper {width: 550px;}

}

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

  h2 {font-size: 34px; line-height: 40px;}
  h3 {font-size: 26px; line-height: 32px;}

  .section-ptb {padding-top: var(--section-padding-md);  padding-bottom: var(--section-padding-md);}
  .btn.btn-lg {padding: 11px 45px; font-size: 18px; line-height: 26px;}

  /*---------------------------------*/
  /* Main Banner */
  /*---------------------------------*/
  .main-banner {padding-left: 50px; padding-right: 50px;}
  .main-banner .banner-info {margin-left: 50px; margin-right: 0; margin-top: -50px;}
  .main-banner .banner-info .main-title {font-size: 40px; line-height: 50px;}

  /*---------------------------------*/
  /* Site Header */
  /*---------------------------------*/
  .site-header .site-logo {min-width: 150px;}
  .site-header .navbar {padding-left: 50px; padding-right: 50px;}
  .site-header .site-action {margin-left: auto; margin-right: 30px;}
  .site-header .site-action .btn {padding: 7px 25px;}
  .site-header .site-menu {order: 3;}

  /*---------------------------------*/
  /* Page Header */
  /*---------------------------------*/
  .page-header {padding: 150px 0;}
  .page-header .page-header-title {font-size: 50px; line-height: 60px;}

  /*---------------------------------*/
  /* Offcanvas Mobile Menu */
  /*---------------------------------*/
  .site-header .offcanvas {background-color: var(--dark-color) !important; width: 320px; padding: 50px;}
  .site-header .offcanvas .offcanvas-header {padding: 0;}
  .site-header .offcanvas .offcanvas-body {margin-top: 50px; padding: 0;}

  .site-header .navbar .navbar-toggler {background: var(--primary-color); padding: 5px 15px; border: none; border-radius: var(--border-radius);}
  .site-header .navbar .navbar-toggler:focus {border: none; outline: none; box-shadow: none;}
  .site-header .navbar .navbar-toggler-icon {filter: brightness(0) invert(1);}

  .site-header .offcanvas .site-logo img {height: 60px;}
  .site-header .offcanvas .navbar-nav {display: flex; gap: 20px 50px;}
  .site-header .offcanvas .navbar-nav .nav-link {color: #ffffff;}
  .site-header .offcanvas .navbar-nav .nav-link:focus,
  .site-header .offcanvas .navbar-nav .nav-link.active {color: var(--primary-color);}

  /*---------------------------------*/
  /* Gallery */
  /*---------------------------------*/
  .gallery-grid.grid-4 {grid-template-columns: repeat(3, 1fr);}

  /*---------------------------------*/
  /* Services Fancy */
  /*---------------------------------*/
  .services-fancy-main {gap: 20px;}
  .services-fancy-main .services-fancy-item .services-number {width: auto; min-width: 70px;}
  .services-fancy-main .services-fancy-item .services-info {width: 100%;}
  .services-fancy-main .services-fancy-item .services-title {width: 100%; padding-right: 0;}
  .services-fancy-main .services-fancy-item .services-link {display: none;}

  /*---------------------------------*/
  /* Privacy Priority Section */
  /*---------------------------------*/
  .double-image .small-image {right: -50px;}

  /*---------------------------------*/
  /* About Ovrlay Section */
  /*---------------------------------*/
  .ovrlay-bg-image {margin-left: 0; margin-right: 0;}
  .ovrlay-section {margin-top: 0px;}
  .ovrlay-section:before {content: normal;}

  /*---------------------------------*/
  /* All Form Pages */
  /*---------------------------------*/
  .website-form-pages .website-info {width: 100%; justify-content: center; padding: 50px 0; padding-bottom: 120px;}
  .website-form-pages .website-form {width: 100%; justify-content: center; padding-bottom: 50px;}
  .website-form-pages .website-form .form-wrapper {width: 450px; margin: 0; margin-top: -60px;}
  .website-form-pages {display: flex; min-height: inherit; flex-direction: column;}

}

@media screen and (max-width: 767px) {

  .container {width: 100%; max-width: 100%;}
  .section-ptb {padding-top: var(--section-padding-sm);  padding-bottom: var(--section-padding-sm);}

  /*---------------------------------*/
  /* Site Header */
  /*---------------------------------*/
  .site-header .navbar,
  .site-header.header-sticky .navbar {padding: 5px 20px;}

  /*---------------------------------*/
  /* Page Header */
  /*---------------------------------*/
  .page-header {padding: 100px 0;}
  .page-header .page-header-title {font-size: 38px; line-height: 46px;}

  /*---------------------------------*/
  /* Main Banner */
  /*---------------------------------*/
  .main-banner {padding-left: 20px; padding-right: 20px;}
  .main-banner .banner-info {padding: 35px;}
  .main-banner .banner-info .main-title {font-size: 30px; line-height: 40px;}
  .main-banner .list-main li {min-width: 100%;}
  
  /*---------------------------------*/
  /* Gallery */
  /*---------------------------------*/
  .gallery-grid.grid-4 {grid-template-columns: repeat(2, 1fr);}

  /*---------------------------------*/
  /* Services Fancy */
  /*---------------------------------*/
  .services-fancy-main .services-fancy-item .services-image-mobile {width: 50%; padding-right: 30px;}
  .services-fancy-main .services-fancy-item .services-details {width: 50%;}
  .services-fancy-main .services-fancy-item .services-info {flex-wrap: wrap; gap: 15px;}
  .services-fancy-main .services-fancy-item .services-link {display: block; order: 4; width: auto; padding: 0; margin-top: 25px;}

  /*---------------------------------*/
  /* Privacy Priority Section */
  /*---------------------------------*/
  .double-image .small-image {right: 30px;}

  /*---------------------------------*/
  /* About Section */
  /*---------------------------------*/
  .about-info .about-image .about-shape {right: 20px; width: 100px; left: -40px;}

}

@media screen and (max-width: 479px) {
  
  /*---------------------------------*/
  /* Gallery */
  /*---------------------------------*/
  .gallery-grid.grid-4 {grid-template-columns: repeat(1, 1fr);}

  /*---------------------------------*/
  /* Services Fancy */
  /*---------------------------------*/
  .services-fancy-main .services-fancy-item {flex-wrap: wrap;}
  .services-fancy-main .services-fancy-item .services-image-mobile {width: 100%; padding-right: 0; margin-bottom: 30px;}
  .services-fancy-main .services-fancy-item .services-details {width: 100%;}

  /*---------------------------------*/
  /* About Ovrlay Section */
  /*---------------------------------*/
  .ovrlay-section {padding: 30px;}

  /*---------------------------------*/
  /* About Section */
  /*---------------------------------*/
  .about-info {gap: 15px;}
  .about-info .about-text .large-text {font-size: 60px; line-height: 60px;}

  /*---------------------------------*/
  /* All Form Pages */
  /*---------------------------------*/
  .website-form-pages .website-form {padding: 0 15px;}
  .website-form-pages .website-form .form-wrapper {padding: 30px;}
  .website-form-pages .website-form .input-fields {padding: 15px 20px; padding-left: 60px;}
  .website-form-pages .website-form .input-fields > i {top: 20px;}

}

@media screen and (max-width: 375px) {

  /*---------------------------------*/
  /* Main Banner */
  /*---------------------------------*/
  .main-banner .banner-info {margin-left: 0; margin-top: -30px; padding: 25px;}
  
}