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

  .menu-spacer {
    padding-top: 88px;
  }

  .h1,
  h1 {
    font-size: 32px;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
  }

  h2,
  .h2 {
    font-weight: 500;
    font-size: 24px;
    line-height: 29.05px;
  }

  h3,
  .h3 {
    font-weight: 500;
    font-size: 24px;
    line-height: 29.05px;
  }


  .modal-container .modal-dialog {
    max-width: 100%;
    width: auto;
  }

  /* .content-grid {
    grid-template-columns: 1fr;
  } */
  .mt-48 {
    margin-top: 32px;
  }

  .mt-64 {
    margin-top: 48px;
  }

  .mt-24 {
    margin-top: 16px;
  }

  /* login page */

  .login-section {
    /* padding: 0; */
  }

  #login-page .content-grid {
    grid-template-columns: 1fr;
  }

  #login-page .content-left {
    padding: 48px 16px;
  }

  #login-page .right-stretch {
    order: -1;
  }

  header .logo-header {
    padding-right: 0;
  }

  /* registration signup page */

  #registration-page .content-grid {
    grid-template-columns: 1fr;
  }

  #registration-page .content-right {
    padding: 48px 16px;
  }

  /* error page  */

  #error-page {
    padding: 64px 16px;
  }

  #error-page .content-grid {
    grid-template-columns: 1fr;
  }

  #error-page .right-stretch {
    order: -1;
    margin-bottom: 32px;
  }

  #error-page .error-button-group {
    flex-direction: column-reverse;
  }

  #error-page .content-left h1 {
    text-align: left;
  }

  /* tnc page  */

  #tnc-page {
    padding: 40px 12px;
  }

  #service-page .hero-banner p {
    width: 100%;
  }

  /* Footer */
  footer .footer-content {
    grid-template-columns: 1fr
  }

  footer .payment-type img {
    margin: 40px 0
  }

  footer .footer-right .payment-type {
    justify-content: center;
  }

  footer .footer-right .footer-links {
    justify-content: center;
    flex-wrap: wrap;
  }

  footer .footer-content .footer-left {
    text-align: center;
    order: 2;
  }

  footer .footer-left .copyright {
    width: 80%;
    margin: 0 auto;
    margin-top: 24px;
  }

  .footer {
    padding: 64px 24px;
  }

  /* Footer End */

  /* Header */
  header {
    padding: 16px 0;
  }

  header .content-grid {
    display: block;
  }

  header .logo-header {
    padding-left: 24px;
  }

  header .navbar-toggler {
    padding-right: 24px;
  }

  .navbar-toggler:focus {
    box-shadow: unset;
  }

  header .navbar-collapse .navbar-nav {
    background-color: var(--accent-clr);
    padding: 32px 24px;
    align-items: center;
    position: absolute;
    top: 121%;
    width: 100%;
    gap: 24px;
  }

  header .navbar-collapse .nav-item .nav-link {
    color: var(--primary-clr);
    font-size: 24px;
  }

  header .dropdown-menu.show .dropdown-item {
    color: var(--secondary-clr) !important;
  }

  .nav-link:focus,
  .nav-link:hover,
  .navbar-nav .nav-link.show {
    color: var(--primary-clr);
    justify-content: center;
  }

  .currency-menu .dropdown-menu.show {
    display: flex;
    gap: 24px;
    padding: 0;
    border: unset;
    justify-content: center;
  }

  header .dropdown-menu.show {
    margin-top: 16px;
    border: unset;
    padding: 0;
    background: var(--accent-clr);
  }

  header .currency.dropdown-menu.show {
    margin-top: 16px;
  }

  /* Header */

  /* Service Page */
  #service-page .hero-banner {
    background-image: url(../images/service/hero-bg-resp.png);
    padding: 64px 0;
  }

  #service-page .feature-section .main-container,
  #service-page .process-section .process-wrapper,
  #service-page .timeline-section .content-grid {
    grid-template-columns: 1fr;
  }

  #service-page .process-section {
    padding: 40px 0;
  }

  #service-page .tab-content table {
    overflow-x: auto;
  }

  #service-page table .included p,
  #service-page table .not-included {
    width: auto;
  }

  #service-page table .not-included p {
    width: 110px;
  }

  #service-page .feature-section {
    padding: 64px 0 67px;
  }

  #service-page .feature-details h4 {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  #service-page .top-section-process p {
    width: 100%;
    color: var(--clr-gray);
  }

  #service-page .top-section-process h3 {
    margin-bottom: 16px;
  }

  #service-page .process-step {
    padding: 24px 0;
  }

  #service-page .top-section-process {
    margin-bottom: 48px;
  }

  #service-page .price-section {
    padding: 40px 0;
  }

  #service-page .main-title h2 {
    text-align: left !important;
  }

  #service-page .main-title {
    margin-bottom: 24px;
  }

  #service-page .timeline-detail {
    padding: 40px 24px;
  }

  #service-page .timeline-section .timeline-detail p {
    text-align: center;
  }

  #service-page .contactus-section {
    padding: 40px 24px 16px;
  }

  #service-page .contactus-section .content-grid {
    grid-template-columns: 1fr;
  }

  #service-page .contactus-section .content-left {
    width: 100%;
    padding: 0;
  }

  #service-page .name-wrapper {
    display: block !important;
  }

  #service-page .feature-img {
    height: 40px;
    width: 40px;
  }

  #service-page .timeline-section .timeline-detail {
    text-align: center;
  }

  #service-page .contactus-section h2 {
    margin-bottom: 16px;
  }

  #service-page .contactus-section .name-wrapper .first-name {
    margin-bottom: 24px;
  }

  #service-page .contactus-section .form-wrapper:last-child {
    margin-bottom: 32px;
  }

  #service-page .form-wrapper select {
    color: var(--text-off-black);
    font-weight: 500;
  }

  #service-page .hero-banner h1 {
    margin-bottom: 16px;
  }

  /* Service Page */

  /* faq */
  #faq .top-banner {
    padding: 64px 16px;
    text-align: center;
  }

  #faq .top-banner label {
    font-size: 14px;
    line-height: 20px;
    padding-bottom: 12px;
  }

  #faq .top-banner .text {
    font-size: 18px;
    line-height: 28px;
    padding-top: 16px;
  }

  #faq .second-section {
    padding: 40px 0;
  }

  #faq .second-section .info-main-section {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
  }

  #faq .second-section .info-main-section h4 {
    line-height: 28px;
    font-size: 18px;
    font-weight: var(--font-weight-600);
  }

  #faq .second-section .info-main-section .txt-standard {
    line-height: 24px;
    font-size: 16px;
    padding-top: 4px;
  }

  #faq .second-section .questions-section {
    padding: 32px 20px;
    display: unset;
  }

  #faq .second-section .questions-section .still-question {
    padding-bottom: 24px;
  }

  #faq .second-section .questions-section .txt-large {
    font-size: 16px;
    line-height: 24px;
  }

  /* faq */

  /* CONTACT US */

  /* About US */

  #home-page .benefit-section .benefit-left h2 {
    font-size: 30px;
  }

  #home-page .benefit-section .benefit-left {
    font-size: 18px;
  }

  #home-page .benefits-container h4 {
    font-size: 16px;
  }

  #home-page .hero-banner {
    /*background: var(--primary-clr);*/
  }

  #about-us .hero-banner,
  #home-page .hero-banner {
    height: auto;
  }

  #about-us .hero-content {
    width: 100%;
  }

  #about-us .card-content {
    grid-template-columns: 1fr;
  }

  #about-us .card-section {
    padding: 40px 0px;
    text-align: center;
  }

  #about-us .aboutus-content .about-wrapper .icons-section {
    height: 40px;
    width: 40px;
    padding: 8px;
  }

  #about-us .about-wrapper .about-description {
    text-align: left;
  }

  .banner-content .explore-btn .btn-secondary {
    width: 100%;
    padding: 10px 16px;
  }

  #home-page .service-section .service-detail h4 {
    font-size: 16px;
  }

  #home-page .main-service .service-detail {
    border-left: 4px solid #F2F4F7;
  }

  .services-section h2 {
    color: #1E1E1E;
    font-size: 32px;
    font-weight: 600;
  }

  #about-us .services-section {
    border: unset;
  }

  .services-section .services__arrows {
    padding-top: 24px;
  }

  #about-us .hero-banner .main-content,
  #home-page .hero-banner .main-content {
    margin-bottom: 0px;
  }

  #about-us .hero-banner .banner-content p.mb-32,
  #home-page .hero-banner .banner-content p.mb-32 {
    margin-bottom: 16px;
  }


  #about-us .hero-banner .banner-content,
  #home-page .hero-banner .banner-content {
    padding: 186px 16px 0;
  }

  #about-us .hero-banner .banner-content h3,
  #home-page .hero-banner .banner-content h3 {
    font-size: 32px;
    line-height: 50px;
  }

  #about-us .hero-banner .content-left h4 {
    width: auto;
  }

  #about-us .hero-banner .content-left,
  #about-us .hero-banner .content-right {
    padding: 0 16px;
  }

  #about-us .hero-banner .content-left {
    align-items: center;
  }

  #about-us .hero-banner .content-right .main-text {
    width: auto;
  }

  #about-us .hero-banner {
    background-image: url(../images/home/home-resp.png);
  }

  #contact-us .contact-us-info .info-sections .mb-20 {
    margin-bottom: 16px;
  }

  #about-us .wrapper-main {
    padding: 40px 16px 80px;
    text-align: center;
  }

  #about-us .wrapper-main .content-grid {
    grid-template-columns: 1fr;
  }

  #about-us .aboutus-content .about-img {
    margin-top: -45px;
    margin-bottom: 24px;
  }

  #about-us .main-card .card-icon {
    margin: 0 auto 24px;
  }

  #about-us .learn-more {
    justify-content: center;
  }

  #about-us .card-section .main-content h2 {
    margin-bottom: 16px;
    font-size: 30px;
    line-height: 38px;
    font-weight: 600;
  }

  #about-us .card-section .main-content p:first-child {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
  }

  #about-us .hero-bar {
    padding: 64px 16px 68px;
  }

  .banner-content .border-div {
    /* padding: 32px 0; */
    border-bottom: 1px solid rgb(250 250 250 / 25%);
  }

  #about-us .main-content {
    margin-bottom: 48px;
  }

  #about-us .main-card {
    padding: 20px;
  }

  #about-us .aboutus-content .content-left {
    padding-right: 0;
  }

  #about-us .aboutus-content .content-right {
    padding-left: 0;
  }

  #about-us .aboutus-content .main-content h2 {
    margin-bottom: 16px;
  }

  #about-us .about-wrapper .about-description h4 {
    font-size: 16px;
  }

  #about-us .about-wrapper p {
    color: var(--clr-gray);
  }

  #about-us .services-section {
    margin: 0;
  }

  .services-section .services__content .services__item {
    width: 300px;
    margin-right: 116px;
  }

  #about-us .get-in-touch form .form-wrapper {
    flex-direction: column;
  }

  #about-us .get-in-touch {
    padding: 24px 0px;
  }

  #about-us .get-in-touch .get-in-touch-wrapper {
    padding: 40px 24px;
  }

  #about-us .continue-btn .btn-primary {
    width: 100%;
  }

  #about-us .get-in-touch .get-in-touch-wrapper p {
    margin-top: 16px;
  }

  /* About US */

  /* Home Page */

  #home-page .service-data {
    gap: unset;
  }

  #home-page .service-grid .service-data,
  #home-page .service-section .service-grid {
    grid-template-columns: 1fr;
  }

  #home-page .service-section .full-width {
    margin-top: 47px;
  }

  #home-page .service-section {
    padding: 40px 0 0;
    margin-top: 3rem;
  }

  #home-page .home-gallery .content-grid {
    grid-template-columns: 1fr;
  }

  #home-page .service-section .service-description {
    text-align: center;
  }

  #home-page .home-gallery {
    padding: 64px 0;
  }

  #home-page .content-left {
    padding: 0 16px;
  }

  #home-page .home-gallery .learn-more .btn-secondary {
    width: 100%;
    margin-bottom: 64px;
  }

  #home-page .benefit-right,
  #home-page .benefit-grid {
    grid-template-columns: 1fr;
  }

  #home-page .benefit-wrapper h4 {
    font-size: 16px;
    margin-bottom: 16px;
  }

  #home-page .benefit-wrapper p {
    margin-bottom: 40px;
  }

  #home-page .benefit-left {
    padding-right: 0;
  }

  #home-page .benefit-section {
    padding: 40px 0 0;
    text-align: center;
  }

  #home-page .benefit-left p {
    margin-bottom: 48px;
  }

  #home-page .benefit-right {
    gap: 0;
  }

  #home-page .more-benefits .benefits-wrapper {
    grid-template-columns: 1fr;
    margin-top: 48px;
    margin-bottom: 0;
    gap: 0;
  }

  #home-page .more-benefits .benefits-container {
    margin-bottom: 40px;
  }

  #home-page .more-benefits .content-grid .benefits-wrapper:first-child {
    margin-top: 40px;
  }

  #home-page .more-benefits .benefits-wrapper:last-child {
    margin-top: 0;
  }

  #home-page .contactus {
    padding: 40px 0 16px;
  }

  #home-page .more-benefits {
    padding: 40px 0 37px;
  }

  #home-page .more-benefit-description p {
    font-size: 14px;
  }

  #home-page .more-benefit-description p.txt-standard.text-center {
    font-size: 16px;
    color: var(--clr-gray);
  }

  #home-page .more-benefit-description h2 {
    width: 55%;
    margin: 12px auto 16px;
  }

  #home-page .service-section .service-description h2 {
    width: 265px;
    margin: 12px auto 16px;
  }

  #home-page .more-benefits .benefits-container .benefits-icons {
    width: 40px;
    height: 40px;
  }

  #home-page .home-gallery .content-left h2 {
    font-size: 30px;
    line-height: 38px;
  }

  #home-page .home-gallery .content-left p {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 32px;
  }


  #home-page .benefit-section .benefit-icon {
    display: flex;
    justify-content: center;
  }

  /* Home Page */

  #contact-us .main-wrapper .banner-section {
    display: grid;
    grid-template-columns: auto;
  }

  img:first-child {
    order: 2;
  }

  #contact-us .main-wrapper .banner-section .right-stretch {
    padding: 40px 24px;
  }

  #contact-us .name-wrapper {
    display: block !important;
  }

  #contact-us .name-wrapper .first-name {
    margin-bottom: 24px;
  }

  #contact-us .form-wrapper:last-child {
    margin-bottom: 32px;
  }

  #contact-us .form-wrapper select {
    color: var(--text-off-black);
    font-weight: 500;
  }

  .contactus {
    text-align: center;
    padding: 40px 0 24px;
  }

  .contactus .contact-us-info {
    grid-template-columns: repeat(1, 1fr);
    text-align: left;
  }

  /* CONTACT US */

  /* Account detail */

  #account-detail .nav-pills {
    padding: 0 16px;
  }

  #account-detail .account-detail-tabs {
    grid-template-columns: 1fr;
  }

  #account-detail .account-detail-tabs {
    /* display: none !important; */

  }

  #account-detail .account-details-tab .account-detail-wrapper form {
    padding: 24px;
  }

  #account-detail .top-section {
    padding: 40px 0;
  }

  #account-detail .main-account .account-detail-tabs {
    padding: 24px 0 0;
  }

  #account-detail .main-account .table-responsive {
    max-width: 360px;
    margin-left: 16px;
  }

  #account-detail .main-account .table-responsive table {
    width: 640px;
  }

  #account-detail .swipe-text {
    margin-bottom: 24px;
  }

  /* Account detail */
  /* CHECKOUT PAGE */

  #checkout .main-wrapper {
    grid-template-columns: auto;

  }

  #checkout img {
    width: 100%;
    height: auto;
  }

  #checkout .center-content {
    padding: 0;
    width: 100%;
  }

  #checkout .name-wrapper {
    display: block !important;
  }

  #checkout .name-wrapper .first-name {
    margin-bottom: 24px;
  }

  #checkout .name-wrapper .first-name:last-child {
    margin-bottom: 0;
  }

  #checkout .form-wrapper:last-child {
    margin-bottom: 32px;
  }

  #checkout .form-wrapper select {
    color: var(--text-off-black);
    font-weight: 500;
  }

  #checkout .Your-details {
    font-size: 24px;
  }

  #checkout .checkout-form {
    padding: 24px;
  }

  #checkout .checkout-details {
    padding: 24px;
  }

  /* CHECKOUT PAGE */

  #account-detail .main-account .container {
    padding: 0;
  }


}

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

  #tnc-page {
    padding: 60px 48px;
  }

}

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

  #tnc-page {
    padding: 70px 80px;
  }
}

@media (min-width: 1201px) and (max-width: 1400px) {
  .dropdown-menu.show {
    top: 230%;
    left: -47%;
  }

  #home-page .benefit-grid {
    grid-template-columns: 32% 67%;
  }

  #tnc-page {
    padding: 60px;
  }

  header .logo-header {
    padding-right: 35px;
  }

  header .navbar-collapse .navbar-nav {
    padding: 38px 40px 38px 30px;
  }

  #about-us .hero-banner .content-left {
    padding-left: 53px;
    padding-right: 137px;
  }

  #about-us .hero-banner .content-right {
    padding-left: 50px;
  }

  #home-page .hero-banner .content-left {
    padding-left: 53px;
    padding-right: 137px;
  }

  #home-page .hero-banner .content-right {
    padding-left: 50px;
  }

  #home-page .hero-banner .content-right,
  #about-us .hero-banner .content-right {
    padding-right: 0;
  }

  #login-page .content-left,
  #registration-page .content-right {
    width: 360px;
    padding: 0;
    margin: 0 auto;
  }

  footer .footer-right .footer-links {
    margin-top: 10px;
  }

  #home-page .hero-banner .scroll-txt,
  #about-us .hero-banner .scroll-txt {
    padding-right: 40px;
  }

  #service-page .tab-content,
  #service-page .nav.nav-pills {
    width: 1056px;
    margin: 0 auto;
  }

  #checkout .center-content {
    padding: 60px 0 80px;
  }
}

@media (min-width: 1401px) and (max-width: 1500px) {

  #tnc-page {
    padding: 60px;
  }

  header .logo-header {
    padding-right: 105px;
  }

  header .navbar-collapse .navbar-nav {
    padding: 38px 40px 38px 110px;
  }

  #about-us .hero-banner .content-left {
    padding-left: 53px;
    padding-right: 217px;
  }

  #home-page .hero-banner .content-left {
    padding-left: 53px;
    padding-right: 217px;
  }

  #home-page .hero-banner .content-right,
  #about-us .hero-banner .content-right {
    padding-right: 90px;
  }

  #login-page .content-left,
  #registration-page .content-right {
    width: 360px;
    padding: 0;
    margin: 0 auto;
  }

  #faq .questions-section .btn-primary {
    width: 15%;
    height: 80%;
  }

  #home-page .more-benefits .more-benefit-description p {
    width: 800px;
    margin: 0 auto;
  }

  #home-page .contactus .info-sections {
    width: 410px;
  }

  #about-us .get-in-touch .form-wrapper input {
    width: 353px;
  }


  #home-page .hero-banner .content-right .main-text {
    margin-top: 128px;
  }

  footer .footer-right .footer-links {
    margin-top: 10px;
  }

  #service-page .tab-content,
  #service-page .nav.nav-pills {
    width: 1056px;
    margin: 0 auto;
  }

  #checkout .center-content {
    padding: 60px 0 80px;
  }

  #account-detail .table-responsive table thead tr th:nth-child(1) {
    width: 14%;
  }

  #account-detail .table-responsive table thead tr th:nth-child(2) {
    width: 21%;
  }

  #account-detail .table-responsive table thead tr th:nth-child(3) {
    width: 22%;
  }

  #account-detail .table-responsive table thead tr th:nth-child(4) {
    width: 25%;
  }
}

@media (min-width: 1501px) and (max-width: 1920px) {

  .content-grid {
    --padding-inline: 1rem;
    --content-max-width: 1322px;
    /* --content-max-width: 1212px; */
    --breakout-max-width: 100%;

    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
    --content-size: min(100% - (var(--padding-inline) * 2), var(--content-max-width));

    display: grid;
    grid-template-columns:
      [full-width-start left-stretch-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start left-content-start] calc(var(--content-size) / 2) [left-content-end left-stretch-end right-content-start right-stretch-start] calc(var(--content-size) / 2) [right-content-end content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [right-stretch-end full-width-end];
  }

  #service-page .timeline-section .timeline-detail p {
    width: 640px;
  }

  #tnc-page {
    padding: 80px;
  }

  #login-page .content-left,
  #registration-page .content-right {
    width: 365px;
    padding: 0;
    margin: 0 auto;
  }

  #account-detail .tab-pane .table-responsive {
    width: 1056px;
  }

  #faq .questions-section .btn-primary {
    width: 12%;
    height: 80%;
  }

  #home-page .home-gallery .content-left {
    width: 583px;
  }

  #home-page .more-benefits .more-benefit-description p {
    width: 800px;
    margin: 0 auto;
  }

  #home-page .contactus .info-sections {
    width: 410px;
  }

  #about-us .get-in-touch .form-wrapper input {
    width: 353px;
  }


  #home-page .hero-banner .content-right .main-text {
    margin-top: 128px;
  }

  footer .footer-right .footer-links {
    margin-top: 10px;
  }

  #about-us .content-right h1 {
    width: 75%;
  }

  #service-page .tab-content,
  #service-page .nav.nav-pills {
    width: 1056px;
    margin: 0 auto;
  }

  #checkout .center-content {
    padding: 60px 0 80px;
  }

  #account-detail .table-responsive table thead tr th:nth-child(1) {
    width: 14%;
  }

  #account-detail .table-responsive table thead tr th:nth-child(2) {
    width: 21%;
  }

  #account-detail .table-responsive table thead tr th:nth-child(3) {
    width: 22%;
  }

  #account-detail .table-responsive table thead tr th:nth-child(4) {
    width: 25%;
  }

}