/* For screens less than 576px */
@media (max-width: 575.98px) {
  /* Extra small devices */
  html {
    font-size: 45%;
  }
}

/* For screens less than 768px */
@media (max-width: 767.98px) {
  /* Small devices */
  html {
    font-size: 48%;
  }
  h1 {
    font-size: 4rem;
  }
  p {
    font-size: 1.5rem;
  }
  .wrapper-heading {
    padding: 8rem 0rem 0rem 0rem;
  }

  .wrapper {
    margin: auto;
    padding: 8rem 0;
  }

  .grid {
    display: grid;
    gap: 7rem;
  }

  .grid-two-cols {
    grid-template-columns: 1fr;
  }

  .grid-three-cols {
    grid-template-columns: 1fr;
  }

  .grid-four-cols {
    grid-template-columns: 1fr;
  }

  .grid-five-cols {
    grid-template-columns: 1fr;
  }
  /* -------preloader----- */
  .loading06 span {
    margin: 0 0.1rem;
    font-size: 2rem;
  }
  /* -----header----- */
  .top-header {
    display: none;
  }
  .main-header {
    top: 0;
  }

  /* -----slider----- */
  .slide {
    margin-top: 7rem;
  }
  .slider-heading {
    font-size: 3rem;
  }
  .carousel-item {
    height: calc(55vh - 6rem);
  }
  .carousel-caption {
    bottom: 0 !important;
    padding: 0 2rem;
  }
  .slider-para {
    width: 100%;
    margin-top: 2rem;
  }
  .slider-btn {
    margin-top: 2rem;
  }
  /* ------brand logo section------- */
  .bl-sec .wrapper-heading {
    padding-top: 4rem;
  }
  .brand-logo-heading {
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    letter-spacing: 0;
  }
  .brand-logo img {
    width: 100%;
  }
  .brand-logo-box .wrapper {
    padding: 2rem 2rem 8rem 2rem;
  }
  /* ------our features-----  */
  .feature-heading h2 {
    width: 100%;
  }
  .feature-bg .grid {
    gap: 2rem;
  }
  .left-right-margin {
    width: 100%;
  }
  .features-cards p {
    width: 100%;
  }
  /* -----choose your required services form our list-----  */
  .choose-services-heading {
    width: 100%;
  }
  .choose-serives-para {
    margin-top: 1rem;
    padding-bottom: 1rem;
  }
  .appointment-card {
    padding: 4rem 2rem;
  }
  .choose-serives-box-heading,
  .choose-serives-para p,
  .choose-serives-para {
    width: 100%;
  }
  /* --------about index ------  */
  .about-bg {
    display: none;
  }
  /* --------select language-----  */
  .lang-main-box {
    flex-direction: column;
  }
  .language-box {
    flex-direction: column;
  }
  .language-box-heading {
    writing-mode: horizontal-tb;
    height: 70px;
    width: 100vw;
  }
  .select-language {
    margin-top: 13rem;
    overflow: visible;
  }
  .language-left-data {
    top: -113px;
    transform: translate(0%, -50%);
    left: 2%;
  }
  .language-left-data h2 {
    width: 100%;
  }
  /* ---------common right left---- */
  .sec-common-right {
    order: 2;
  }
  .right-left .wrapper {
    padding-top: 0;
  }
  .common-right {
    text-align: left;
  }
  .common-right img {
    width: 100%;
  }
  /* ------testimonails------   */
  .testimonail-heading .grid {
    gap: 0rem;
  }
  .testimonail-heading .grid-two-cols {
    grid-template-columns: 1fr;
  }
  .testimonail-heading .wrapper {
    padding-bottom: 4rem;
  }
  .testi-rating {
    width: 50%;
    height: auto;
    padding-top: 0;
    margin: 2rem 0;
  }
  .test-data-main {
    padding: 0 1rem;
  }
  .test-data-main .wrapper {
    /* padding-bottom: 0; */
  }
  /* -----index contact page-----  */
  .contact-left-info p {
    font-size: 2.5rem;
  }
  .contact-left-info img {
    width: 50px;
  }
  .contact-left h3 {
    font-size: 2.8rem;
  }
  /* ------latest blogs------ */
  .latest-blog-left-right-space {
    padding: 8rem 1rem;
  }
  .owl-theme .owl-dots .owl-dot span {
    width: 15px;
    height: 15px;
  }
  .services-page .grid-two-cols {
    grid-template-columns: 1fr !important;
  }
  .services-page {
    padding-top: 0rem;
  }
  .services-page .grid {
    gap: 5rem;
  }
  /* -----index page these are most frequently asked questions---- */
  .accordion-button {
    font-size: 2rem;
  }
  .faq-heading h1 {
    width: 100%;
  }
  .accordion-body {
    font-size: 1.5rem;
  }
  .faq-right img {
    width: 100%;
  }
  /* ------footer------ */
  footer .grid-four-cols {
    grid-template-columns: 1fr;
  }
  .foooter1-mobile-img {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .footer-brand2,
  .footer-brand3 {
    height: 10rem;
  }
  .footer2 p {
    font-size: 1.8rem;
  }
  footer .grid {
    gap: 3rem;
  }
  .footer-payment {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2rem;
  }
  footer .wrapper {
    padding-bottom: 46rem;
  }
  .footer-payment-img {
    align-items: start;
    flex-direction: column;
  }
  .footer-payment-select {
    width: 100%;
  }
  .footer-heading-data {
    font-size: 2rem !important;
  }
  /* ---------about page-----  */
  .contact-banner {
    margin-top: 0rem;
  }
  .contact-banner {
    background-position: right;
    height: calc(70vh - 13rem);
  }
  .contact-banner-data h1 {
    font-size: 3rem;
  }
  .contact-banner-data p {
    width: 100%;
  }
  .about-page-data p {
    width: 100%;
  }
  .why-choose-right-data {
    padding: 4rem;
  }
  /* ------blog page-----  */
  .blog {
    margin-top: 8rem;
  }
  .blog .grid-two-cols {
    grid-template-columns: 1fr;
  }
  .blog .grid {
    gap: 5rem;
  }
  .blog .wrapper {
    padding: 0;
  }
  .contact-from select {
    font-size: 1.8rem;
  }
  .contact-from input {
    font-size: 1.8rem;
  }
  .contact-from input::placeholder {
    font-size: 1.8rem;
  }
  .blog-page-section .wrapper {
    padding: 0;
  }
  .blog-page-all-box-data {
    margin-top: 4rem;
  }
  /* --------contact-----page--------  */
  .contact-page-left-data {
    align-items: center;
  }
  .contact-page-left-data p {
    font-size: 2.5rem;
  }
  .contact-page-left-data img {
    width: 50px;
  }
  .contact-banner-btn {
    font-size: 1.6rem;
  }
  /* ------services page-----  */
  .services-page {
    margin-top: 8rem;
  }
  .services-page-links-left-data h3 {
    font-size: 2.5rem;
  }
  .services-page-links .grid {
    gap: 3rem;
  }
  .services-page-more-details .grid {
    gap: 4rem;
  }
  .services-page-more-details .grid-two-cols {
    grid-template-columns: 1fr;
  }
  .services-page-more-details .wrapper-heading h1 {
    width: 100%;
  }
  .sdan-data {
    flex-direction: column;
    gap: 2rem;
  }
  .sdan-data h3 {
    width: 100%;
  }
  .services-details-btn {
    width: 100%;
  }
  .toc-header {
    padding: 20px 20px;
  }
  .toc-link {
    padding: 1.6rem 0rem;
  }
  .choose-services-bg {
    padding: 5rem 0.5rem;
  }
}

@media (max-width: 1200px) {
  /* For screens less than 992px */
  html {
    font-size: 50%;
  }
  /* -----header----- */
  .mobile-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    background-color: var(--blue);
    transition: top var(--transition-base), transform var(--transition-base);
    transform-origin: top;
    will-change: top, transform;
  }

  /* Slide Up Effect */
  .mobile-header.move-to-top {
    top: 0; /* You can also try top: -100% if needed to hide it fully */
  }

  /* Rotate Hide Effect */
  .mobile-header.rotate-hide {
    overflow: hidden;
    transform: perspective(300px) rotateX(-90deg);
  }
  .top-header {
    display: none;
  }
  .main-header {
    top: 0;
  }
  .desktop-header {
    display: none;
  }
  .mobile-header {
    display: block;
    background-color: #fff;
  }
  .mobile-header-main-box {
    position: relative;
  }
  .mobile-header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
  }
  .mobile-header-logo img {
    height: 6rem;
  }
  .slide {
    margin-top: 0rem;
  }
  .mobile-header-humberger svg {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
    width: 70px;
    height: 70px;
  }
  .active svg {
    transform: rotate(90deg);
  }
  path {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
      stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1),
      stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  path:nth-child(1) {
    transform-origin: 36% 40%;
  }
  path:nth-child(2) {
    stroke-dasharray: 29 299;
  }
  path:nth-child(3) {
    transform-origin: 35% 63%;
  }
  path:nth-child(4) {
    stroke-dasharray: 29 299;
  }
  path:nth-child(5) {
    transform-origin: 61% 52%;
  }
  path:nth-child(6) {
    transform-origin: 62% 52%;
  }
  .active path:nth-child(1) {
    transform: translateX(9px) translateY(1px) rotate(45deg);
  }
  .active path:nth-child(2) {
    stroke-dasharray: 225 299;
    stroke-dashoffset: -72px;
  }
  .active path:nth-child(3) {
    transform: translateX(9px) translateY(1px) rotate(-45deg);
  }
  .active path:nth-child(4) {
    stroke-dasharray: 225 299;
    stroke-dashoffset: -72px;
  }
  .active path:nth-child(5) {
    transform: translateX(9px) translateY(1px) rotate(-45deg);
  }
  .active path:nth-child(6) {
    transform: translateX(9px) translateY(1px) rotate(45deg);
  }

  /* -=============- */
  .mobile-header-nav {
    background-color: #162842;
    padding: 2rem;
    position: absolute;
    width: 100%;
    z-index: 999;
    height: 100vh;
  }
  .mobile-header-nav ul {
    padding-left: 0rem;
  }
  .mobile-header-nav ul li {
    list-style: none;
    margin-bottom: 2rem;
    border-bottom: 1px solid #ffffff62;
  }
  .mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.6rem;
    color: #fff;
    padding: 2rem 0;
  }
  .hide {
    display: none;
  }
  /* -----personal dropdown menu------  */
  .personal-dropdown {
    background-color: #162842;
    padding: 2rem;
    position: absolute;
    width: 100%;
    z-index: 999;
    height: 100vh;
  }
  .pdb-back-btn {
    background-color: #e13833;
    padding: 1rem;
    color: #fff; 
    text-transform: uppercase;
    border-radius: 33rem;
  }
  .personal-heading-text {
    padding: 1.5rem 0;
    color: #e13833;
    font-weight: 900;
    border-bottom: 1px solid #e13833;
    border-top: 1px solid #e13833;
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-top: 2rem;
  }
  .personal-lists .pl-one {
    border-bottom: 1px solid #ffffff62;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 1.6rem;
    padding: 2rem 0;
  }
  /* ----personal-child-list------- */
  .personal-child-list {
    background-color: #162842;
    padding: 2rem;
    position: absolute;
    width: 100%;
    z-index: 999;
    height: 100vh;
  }

  .pcl-back-btn {
    background-color: #e13833;
    padding: 1rem;
    color: #fff; 
    text-transform: uppercase;
    border-radius: 33rem;
  }
  .pcl-heading {
    padding: 1.5rem 0;
    color: #e13833;
    font-weight: 900;
    border-bottom: 1px solid #e13833;
    border-top: 1px solid #e13833;
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-top: 2rem;
  }
  .pcl-links-data ul {
    padding-left: 0rem;
  }
  .pcl-links-data ul li {
    padding: 2rem 0;
    color: #fff;
  }
  .pcl-links-data ul li a {
    display: inline-block;
    color: #fff;
    font-size: 1.8rem;
    font-family: "regular";
  }
  /* ------about slider---  */
  .contact-banner {
    margin-top: 8rem;
  }
}

/* For screens less than 992px */
@media (max-width: 991.98px) {
  /* Medium devices */
  html {
    font-size: 55%;
  }
}

/* For screens less than 1200px */
@media (max-width: 1199.98px) {
  /* Large devices */
}

/* For screens less than 1400px */
@media (max-width: 1399.98px) {
  /* Extra large devices */
}