/* --- Tablet / iPad (Between 992px and 1200px) --- */
@media (max-width: 1199px) {
    .custom-navbar {
        width: 95%; /* Make it slightly wider on tablets */
    }
    .navbar-nav .nav-link {
        font-size: 14px; /* Reduce font slightly */
        padding: 10px 10px !important;
    }
}

/* --- Mobile Menu Breakpoint (Below 991px - Bootstrap Default) --- */
@media (max-width: 991px) {
    
    .toggle-wrapper {
        width: 90%;            /* wrapper takes most of screen width */
        display: flex;         /* Use flex to distribute space */
        padding: 4px;          /* Smaller padding */
    }

    .toggle-btn {
        flex: 1;               /* Both buttons take equal width */
        padding: 8px 10px;     /* Smaller padding */
        font-size: 13px;       /* Smaller font size */
    }
    
    .pricing-content.active {
   
    width: auto;
}
    
     .info-list .info-text {
    
    font-size: 18px;
    line-height: 22px;
    
    text-align: justify;
     }
    .info-item {
            display: flex;
    flex-direction: row;
    gap: 20px;
    }
     .refotoback-form-card h2 {
  
    font-size: 25px;
   
}
    .contact-info h1 {
   
    font-size: 33px;
    
}
    .cta-section .btn-cta {
    font-size: 12px;
   
}
    .cta-section p {
    font-size: 15px;
    line-height: 18px;
    
}
     .cta-section .container {
   
    padding-top: 30px;
}
    .how-it-works-section p {
   
    font-size: 14px;
    line-height: 21px;
   
}
    .how-it-works-section .section-title {
    font-size: 35px;
}

.how-it-works-section .section-title em {
    font-size: 35px;
}

      .feature-box p {
   
    font-size: 12px;
   
}
    .about-section .text-muted {
    text-align: center;
    font-size: 12px;
    line-height: 20px;
}
    
     .about-section .text-muted {
        font-size: 12px;
        line-height: 20px;
        text-align: center;
    }
    
    .about-section h1.display-5 span {
    font-size: 40px;
   
    }
    
     .about-section h1.display-5 {
        text-align: center;
        font-size:40px;
    }
    
    .about-section .hero-badge {
    font-size: 12px;
    width: auto;
}
    
     .hero-badge {
        width: auto;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }
    
    nav.navbar.navbar-expand-lg.custom-navbar{
         padding: 12px;
         width: 100%;
    }
    
    .headerinfo {
    padding: 10px;
}
    
    /* Structure Adjustments */
    .custom-navbar {
        padding: 15px 20px;
        width: 92%;
    }

    /* Navigation Items in Dropdown */
    .navbar-nav {
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center; /* Center links on mobile */
        border-top: 1px solid #eee; /* Divider */
        padding-top: 10px;
    }

    .navbar-nav .nav-item {
        margin-bottom: 10px;
    }

    /* Adjust Active Line for Vertical List */
    .navbar-nav .nav-item.active-item::after {
        bottom: 0;
        left: 0;
        right: 0;
        width: 50px; /* Fixed width for the line */
        margin: 0 auto; /* Center the line */
    }

    /* Button Box adjustments for mobile */
    .buttonbox {
        width: auto;
        text-align: center;
        margin-top: 10px !important;
    }
    
    a.btn.btn-primary-custom {
   
    width: auto;
    display: flex;
    margin: 0 auto;
}
a.btn.btn-outline-custom{
   
    width: auto;
    display: flex;
    margin: 0 auto;
}
.showcase-section .badge-pill {
   
    font-size: 12px;
    width: auto;
}
.showcase-section .section-title {
  
    font-size: 40px;
    line-height: 47px;
}
.showcase-section .section-subtitle {
    
    font-size: 12px;
    line-height: 21px;
  
}
.feature-box {
   
    margin: 0px 50px;
}
.cinematic-section .badge-pill {
   
    width: auto;
    font-size: 12px;
   
}
.cinematic-section .section-subtitle {
   
    font-size: 12px;
    line-height: 20px;
    
}
.how-it-works-section .badge-pill {
   
    font-size: 12px;
    width: auto;
   
}
.how-it-works-section .section-title {
    
    line-height: 44px;
}
.faq-section {

   margin: 0px;
}
.faq-section .badge-pill {
   
    font-size: 12px;
    width: auto;
}
.faq-section .section-title {
    
    line-height: 50px;
}
.faq-section .accordion-body {
 
    padding: 20px;
  
    font-size: 12px;
}
.cta-title {
   
    font-size: 35px;
   
}
.cta-title em {
   
    font-size: 35px;
}
.cta-subtitle {
   
    font-size: 16px;
    line-height: 24px;
    
}
.gallerybtn {
   
    width: auto;
   
    font-size: 12px;
    
}
.footer-nav {
   
    flex-direction: column;
    gap: 15px;
}
.buttonbox {
    width: auto;
    display: flex;
    
    margin: 0 auto;
}
.btn.btn-gallery {
   
    font-size: 12px;
    
}
}

/* --- Standard Mobile (iPhone / Android) (Max 576px) --- */
@media (max-width: 576px) {
    
    .toggle-wrapper {
        width: 90%;            /* wrapper takes most of screen width */
        display: flex;         /* Use flex to distribute space */
        padding: 4px;          /* Smaller padding */
    }

    .toggle-btn {
        flex: 1;               /* Both buttons take equal width */
        padding: 8px 10px;     /* Smaller padding */
        font-size: 13px;       /* Smaller font size */
    }
    
     .pricing-content.active {
   
    width: auto;
}
    
     .info-list .info-text {
    
    font-size: 18px;
    line-height: 22px;
    
    text-align: justify;
     }
    .info-item {
            display: flex;
    flex-direction: row;
    gap: 20px;
    }
     .refotoback-form-card h2 {
  
    font-size: 25px;
   
}
     .contact-info h1 {
   
    font-size: 33px;
    
}
    .cta-section .btn-cta {
    font-size: 12px;
   
}
     .cta-section p {
    font-size: 15px;
    line-height: 18px;
    
}
     .cta-section .container {
   
    padding-top: 30px;
}
    .how-it-works-section p {
   
    font-size: 14px;
    line-height: 21px;
   
}
        .how-it-works-section .section-title {
    font-size: 35px;
}

.how-it-works-section .section-title em {
    font-size: 35px;
}
      .feature-box p {
   
    font-size: 12px;
   
}
    .about-section .text-muted {
    text-align: center;
    font-size: 12px;
    line-height: 20px;
}
    
     .about-section .text-muted {
        font-size: 12px;
        line-height: 20px;
        text-align: center;
    }
    
     .about-section h1.display-5 span {
    font-size: 40px;
   
    }
    
    
    .about-section h1.display-5 {
        text-align: center;
        font-size:40px;
    }
    
     .about-section .hero-badge {
    font-size: 12px;
    width: auto;
}
    .hero-title {
       font-size: 40px;
        line-height: 50px;
    }
    
      nav.navbar.navbar-expand-lg.custom-navbar{
          padding: 12px;
         width: 100%;
    }
    
    .headerinfo {
    padding: 10px;
}
    
    .custom-navbar {
        width: 94%;
        padding: 10px 15px;
    }

    .navbar-brand img {
        height: 32px; /* Smaller logo for phone */
    }

    .navbar-toggler {
        padding: 4px 8px; /* Slightly smaller toggler box */
    }
    
    .navbar-toggler-icon {
        width: 1.3em;
        height: 1.3em;
    }
    .hero-badge {
        width: auto;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }
    .hero-title {
    font-size: 40px;
        line-height: 50px;
}
.hero-text {
  
    font-size: 14px;
    line-height: 24px;
    max-width: 100%;
    
}
a.btn.btn-primary-custom {
   
    width: auto;
    display: flex;
    margin: 0 auto;
}
a.btn.btn-outline-custom{
   
    width: auto;
    display: flex;
    margin: 0 auto;
}
.showcase-section .badge-pill {
   
    font-size: 12px;
    width: auto;
}
.showcase-section .section-title {
  
    font-size: 40px;
    line-height: 47px;
}
.showcase-section .section-subtitle {
    
    font-size: 12px;
    line-height: 21px;
  
}
.feature-box {
   
    margin: 0px 50px;
}
.cinematic-section .badge-pill {
   
    width: auto;
    font-size: 12px;
   
}
.cinematic-section .section-subtitle {
   
    font-size: 12px;
    line-height: 20px;
    
}
.how-it-works-section .badge-pill {
   
    font-size: 12px;
    width: auto;
   
}
.how-it-works-section .section-title {
    
    line-height: 44px;
}
.faq-section {

   margin: 0px;
}
.faq-section .badge-pill {
   
    font-size: 12px;
    width: auto
}
.faq-section .section-title {
    
    line-height: 50px;
}
.faq-section .accordion-body {
 
    padding: 20px;
  
    font-size: 12px;
}
.cta-title {
   
    font-size: 35px;
   
}
.cta-title em {
   
    font-size: 35px;
}
.cta-subtitle {
   
    font-size: 16px;
    line-height: 24px;
    
}
.gallerybtn {
   
    width: auto;
   
    font-size: 12px;
    
}
.footer-nav {
   
    flex-direction: column;
    gap: 15px;
}
.buttonbox {
    width: auto;
    display: flex;
    
    margin: 0 auto;
}
.btn.btn-gallery {
   
    font-size: 12px;
    
}
}

/* --- Galaxy Fold / Small Devices (Max 320px) --- */
@media (max-width: 350px) {
     .pricing-content.active {
   
    width: auto;
}
    
    .toggle-wrapper {
        width: 90%;            /* wrapper takes most of screen width */
        display: flex;         /* Use flex to distribute space */
        padding: 4px;          /* Smaller padding */
    }

    .toggle-btn {
        flex: 1;               /* Both buttons take equal width */
        padding: 8px 10px;     /* Smaller padding */
        font-size: 13px;       /* Smaller font size */
    }
    .info-item {
            display: flex;
    flex-direction: row;
    gap: 20px;
    }
    .info-list .info-text {
    
    font-size: 18px;
    line-height: 22px;
    
    text-align: justify;
}
    .refotoback-form-card h2 {
  
    font-size: 25px;
   
}
     .contact-info h1 {
   
    font-size: 33px;
    
}
    .cta-section .btn-cta {
    font-size: 12px;
   
}
     .cta-section p {
    font-size: 15px;
    line-height: 18px;
    
}
    .cta-section .container {
   
    padding-top: 30px;
}
        .how-it-works-section .section-title {
    font-size: 35px;
    line-height: 21px;
}

.how-it-works-section .section-title em {
    font-size: 35px;
}
.how-it-works-section p {
   
    font-size: 14px;
   
}
    .feature-box p {
   
    font-size: 12px;
   
}
    .about-section .text-muted {
    text-align: center;
    font-size: 12px;
    line-height: 20px;
}
    
     .about-section h1.display-5 span {
    font-size: 40px;
   
    }
    .about-section .text-muted {
        font-size: 12px;
        line-height: 20px;
        text-align: center;
    }
    
     .about-section h1.display-5 {
        text-align: center;
        font-size:40px;
    }
    
     .about-section .hero-badge {
    font-size: 12px;
    width: auto;
}
    .btn.btn-gallery {
   
    font-size: 12px;
    
}
    .buttonbox {
    width: auto;
    display: flex;
    
    margin: 0 auto;
}
    .footer-nav {
   
    flex-direction: column;
    gap: 15px;
}
    .gallerybtn {
   
    width: auto;
   
    font-size: 12px;
    
}
    .cta-subtitle {
   
    font-size: 16px;
    line-height: 24px;
    
}
    .cta-title em {
   
    font-size: 35px;
}
    .cta-title {
   
    font-size: 35px;
   
}
    .faq-section .accordion-body {
 
    padding: 20px;
  
    font-size: 12px;
}
    .faq-section .section-title {
    
    line-height: 50px;
}
    .faq-section .badge-pill {
   
    font-size: 12px;
    width: auto;
}
    .faq-section {

   margin: 0px;
}
    .how-it-works-section .section-title {
    
    line-height: 44px;
}
    .how-it-works-section .badge-pill {
   
    font-size: 12px;
    width: auto;
   
}
    .cinematic-section .section-subtitle {
   
    font-size: 12px;
    line-height: 20px;
    
}
    .cinematic-section .badge-pill {
   
    width: auto;
    font-size: 12px;
   
}
    .feature-box {
   
    margin: 0px 50px;
}
    .showcase-section .section-subtitle {
    
    font-size: 12px;
    line-height: 21px;
  
}
    .showcase-section .section-title {
  
    font-size: 40px;
    line-height: 47px;
}
    .showcase-section .badge-pill {
   
    font-size: 12px;
    width: auto;
}
    a.btn.btn-outline-custom{
   
    width: auto;
    display: flex;
    margin: 0 auto;
}
    a.btn.btn-primary-custom {
   
    width: auto;
    display: flex;
    margin: 0 auto;
}
    .hero-text {
  
    font-size: 14px;
    line-height: 24px;
    max-width: 100%;
    
    }

    .hero-badge {
        width: auto;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }
    .hero-title {
    font-size: 40px;
        line-height: 50px;
}
     nav.navbar.navbar-expand-lg.custom-navbar{
           padding: 12px;
         width: 100%;
    }
    
    .headerinfo {
    padding: 10px;
}

    .custom-navbar {
        width: 98%; /* Use full available width */
        padding: 10px 10px;
    }

    .navbar-brand img {
        height: 28px; /* Even smaller logo to prevent wrapping */
    }
    
    .navbar-brand {
        margin-right: 0; /* Remove extra margin */
    }

    /* Stack logo and toggler if extremely small, or keep inline */
    .container {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* --- Large Screens / TV (Min 1600px) --- */
@media (min-width: 1600px) {
    .custom-navbar {
        width: 70%; /* Prevent it from stretching too wide on 4k screens */
        max-width: 1400px;
    }
    
    
   
}


 
 
 
 /* Mobile Responsiveness */
        @media (max-width: 768px) {
            .footer-bottom-content {
                flex-direction: column;
                gap: 10px;
                text-align: center;
            }
              .Home .navbar-brand img{
            width:60%;
        }
        }
        
        
          /* Media Queries for Responsiveness */
        @media (max-width: 992px) {
            .cta-banner {
                text-align: center;
                padding: 50px 0;
            }
            .cta-text-area {
                max-width: 100%;
                text-align: center;
                margin: 0 auto;
            }
            .laptop-placeholder {
                position: relative; /* Stacks image below text on mobile */
                width: 80%;
                margin: 30px auto 0;
                transform: translateY(0);
                max-width: 400px;
            }
        }