/*-----------------------------------1.navbar-----------------------------*/
 
 @media (max-width: 768px) {
            .hamburger {
                display: block;
            }

            .hamburger.active .bar:nth-child(2) {
                opacity: 0;
            }
            .hamburger.active .bar:nth-child(1) {
                transform: translateY(8px) rotate(45deg);
            }
            .hamburger.active .bar:nth-child(3) {
                transform: translateY(-8px) rotate(-45deg);
            }

            .nav-menu {
                position: fixed;
                left: -100%;
                top: 70px; /* Adjust based on header height */
                gap: 0;
                flex-direction: column;
                background-color: var(--color-white);
                width: 100%;
                text-align: center;
                transition: 0.3s;
                box-shadow: 0 10px 10px rgba(0,0,0,0.1);
                padding-bottom: 2rem;
            }

            .nav-menu.active {
                left: 0;
            }

            .nav-links {
                flex-direction: column;
                width: 100%;
                gap: 0;
            }

            .nav-link-item {
                display: block;
                padding: 1.5rem 0;
                width: 100%;
            }

            .auth-buttons {
                flex-direction: column;
                margin-top: 1.5rem;
                width: 100%;
                gap: 1.5rem;
            }
        }

 /*-----------------------------------2.hero-----------------------------*/
        /* =========================================
   RESPONSIVE STYLES
   Add this at the very bottom of your CSS
   ========================================= */

/* --- GLOBAL RESET FIX --- */
* {
    box-sizing: border-box;
}

/* --- TABLET / SMALL LAPTOPS (Max-width: 1024px) --- */
@media screen and (max-width: 1024px) {
    .hero-title {
        font-size: 3rem; /* Smaller font */
    }

    /* Bring the phone back to center/left */
    .phone-wrapper {
        transform: translateX(100px); 
    }

    /* Scale down the image track slightly */
    .track-container {
        transform: translateX(-50%) scale(0.8);
        top: 400px;
    }
  

    .phone-container {
   
    transform: translateX(120px);
}

}

/* --- MOBILE DEVICES (Max-width: 768px) --- */
@media screen and (max-width: 768px) {
    
    .hero {
        height: auto;
        min-height: 100vh;
        padding-bottom: 2rem;
        overflow-x: hidden; /* Prevents horizontal scrollbar */
    }

    /* 1. Typography Adjustments */
    .hero-title {
        font-size: 2.2rem;
        margin-top: 1rem;
    }

    /* 2. Phone Positioning */
    .phone-wrapper {
        width: 220px;
        height: 440px;
        transform: translateX(0) !important; /* Centers the phone */
        margin: 0 auto;
        margin-bottom: 250px; /* IMPORTANT: Adds space for the images below */
    }

    /* 3. The Curved Gold Background */
    .curved-banner {
        width: 250%;       /* Make much wider for a flatter curve on mobile */
        height: 400px;
        bottom: 0;
        top: auto;         /* Unset the desktop top position */
        border-radius: 50% 50% 0 0; /* Optional: forces a curve if radial gradient fails */
    }
    
    .curve-text {
        font-size: 1rem;
        padding: 0 20px;
        margin-bottom: 20px;
        width: 100%;
    }

    /* 4. THE IMAGE TRACK (Visible & Scaled) */
    .track-container {
        display: block;    /* Ensure it is visible */
        width: 1200px;     /* Keep original width for layout stability */
        top: auto;         /* Unset desktop top */
        bottom: 100px;     /* Position from bottom */
        left: 50%;
        
        /* THE MAGIC TRICK: */
        /* Scale 1200px down to roughly 360px (0.3 scale) */
        transform: translateX(-50%) scale(0.45); 
        transform-origin: bottom center; /* Scale from the bottom up */
        pointer-events: none;
    }

    /* Optional: Adjust individual image borders for mobile so they aren't too thick */
    .img-wrap-image {
        border-width: 3px; 
    }
    .img-wrap{
          width: 250px;
    height: 250px;
    }
      .curve-text{
          position: absolute !important;
    top:280px !important;
    max-width: 400px;
    }
        .phone-container {
   
    transform: translateX(10px);
}

}

@media(max-width:500px)
{
    .track-container {
       
        transform: translateX(-50%) scale(0.35); 

    }
          .curve-text{
          position: absolute !important;
    top:350px !important;
    max-width: 400px;
    }
}

@media(max-width:400px)
{
    .track-container {
       
        transform: translateX(-50%) scale(0.30); 

    }
    .curve-text{
          position: absolute !important;
    top:300px !important;
    max-width: 400px;
    }
       
}




 /*-----------------------------------3.Pricing-----------------------------*/
/* =========================================
   RESPONSIVE PRICING STYLES
   ========================================= */

/* --- TABLET (Max-width: 1024px) --- */
@media screen and (max-width: 1024px) {
    .pricing-title {
        font-size: 2.5rem;
    }
    
    .pricing-grid {
        /* Ensure grid has space on sides for shadows */
        padding: 20px; 
        gap: 2rem;
    }

    /* Reset the scale of the featured card so it doesn't overlap rows */
    .price-card.featured {
        transform: scale(1);
        order: -1; /* Optional: Move featured card to top if grid wraps weirdly */
    }

    .price-card.featured:hover {
        transform: translateY(-5px); /* Gentle hover instead of scale */
    }
}

/* --- MOBILE DEVICES (Max-width: 768px) --- */
@media screen and (max-width: 768px) {
    
    .pricing-section {
        padding: 4rem 1rem; /* Reduce vertical padding */
    }

    /* 1. Header Adjustments */
    .pricing-header {
        margin-bottom: 2.5rem;
    }

    .pricing-title {
        font-size: 2rem; /* Smaller title */
    }
    
    .pricing-desc {
        font-size: 1rem;
        padding: 0 10px;
    }

    /* 2. Toggle Switch */
    .pricing-toggle {
        width: 100%;
        justify-content: space-between; /* Spread options */
        padding: 8px 15px;
        font-size: 0.9rem;
    }

    .toggle-option {
        font-size: 0.85rem;
    }
    
    .discount-pill {
        display: block; /* Stack "Save 20%" below text if tight */
        width: fit-content;
        margin-top: 2px;
        margin-left: 0;
        font-size: 0.65rem;
    }

    /* 3. Grid & Cards */
    .pricing-grid {
        display: flex;
        flex-direction: column; /* Force vertical stack */
        gap: 2rem;
        padding: 10px 5px; /* Tighten padding */
    }

    .price-card {
        padding: 2rem 1.5rem; /* Less internal padding */
    }

    /* 4. Taming the Featured Card */
    .price-card.featured {
        transform: scale(1) !important; /* Strictly remove zoom */
        box-shadow: 0 10px 30px rgba(11, 36, 71, 0.15); /* Softer shadow */
        margin: 10px 0; /* Add space above/below */
        order: initial; /* Keep it in the middle (or use order:-1 to put top) */
    }
    
    /* Adjust huge font size for price */
    .amount {
        font-size: 3rem;
    }
    
    /* 5. Background Glow */
    .glow-bg {
        width: 100%;
        height: 100%;
        opacity: 0.5;
    }
}

/* --- SMALL MOBILE (Max-width: 380px) --- */
@media screen and (max-width: 380px) {
    .pricing-title {
        font-size: 1.75rem;
    }
    
    .price-card {
        padding: 1.5rem 1rem;
    }
    
    /* Make buttons fit */
    .btn-price-solid, 
    .btn-price-outline {
        padding: 14px;
        font-size: 0.9rem;
    }
}


 /*-----------------------------------4.Meet the doctor-----------------------------*/

 /* =========================================
   RESPONSIVE GEOMETRIC SECTION
   ========================================= */

/* Fix: You missed a dot in your original CSS selector */
.doctor-section-geo {
    padding: 5rem 5%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-white);
}

/* --- TABLET (Max-width: 1024px) --- */
@media screen and (max-width: 1024px) {
    .container-2 {
        gap: 2rem;
        grid-template-columns: 1fr 1fr; /* Equal width columns */
    }

    .doctor-title {
        font-size: 2.5rem; /* Smaller title */
    }

    /* Scale down visual elements slightly */
    .shape-navy { width: 350px; height: 350px; }
    .shape-gold { width: 355px; height: 355px; }
    .doctor-img-geo { width: 330px; height: 330px; }
    .visual-wrapper { height: 450px; }
}

/* --- MOBILE DEVICES (Max-width: 768px) --- */
@media screen and (max-width: 768px) {
    
    .doctor-section-geo {
        padding: 4rem 1.5rem;
    }

    .container-2 {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        gap: 3rem;
    }

    /* 1. Content Wrapper (Text) Changes */
    .content-wrapper {
        text-align: center; /* Center text on mobile */
        align-items: center;
        order: 2; /* Place text BELOW image */
    }

    .doctor-subtitle {
        justify-content: center; /* Center the "Meet Dr. Dental" label */
    }
    
    .doctor-title {
        font-size: 2.2rem;
        margin-bottom: 1.5rem;
    }

    .doctor-desc {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    /* Center the metrics pills */
    .metrics-pills {
        justify-content: center;
        gap: 1rem;
    }

    .metric-pill {
        min-width: 100px;
        padding: 0.8rem 1rem;
        flex: 1; /* Distribute space evenly */
    }

    /* 2. Visual Wrapper (Image) Changes */
    .visual-wrapper {
        order: 1; /* Place image ON TOP */
        height: 320px; /* Reduced height container */
        margin-bottom: 0;
    }

    /* Drastically resize the shapes for phone screens */
    .shape-navy {
        width: 280px;
        height: 280px;
    }

    .shape-gold {
        width: 285px;
        height: 285px;
        border-width: 3px; /* Thinner border */
    }

    .doctor-img-geo {
        width: 260px;
        height: 260px;
    }
}

/* --- SMALL MOBILE (Max-width: 400px) --- */
@media screen and (max-width: 400px) {
    /* Prevent overflow on very small screens (iPhone SE) */
    .shape-navy { width: 240px; height: 240px; }
    .shape-gold { width: 245px; height: 245px; }
    .doctor-img-geo { width: 220px; height: 220px; }
    
    .metric-number { font-size: 1.2rem; }
    .metric-label { font-size: 0.75rem; }
}

 /*-----------------------------------5.Services-----------------------------*/

 /* =========================================
   RESPONSIVE ACCORDION STYLES
   ========================================= */

/* --- TABLETS & MOBILE (Max-width: 1024px) --- */
@media screen and (max-width: 1024px) {
    
    .services-container {
        /* Switch from Horizontal Row to Vertical Stack */
        flex-direction: column;
        height: auto;       /* Allow it to grow if needed */
        min-height: 100vh;  /* But keep it tall */
    }

    .pillar {
        width: 100%;
        height: 15vh; /* Collapsed Height on Mobile */
        min-height: 120px; /* Ensure it's never too small to tap */
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        overflow: hidden; /* Keep content inside */
    }

    /* THE MOBILE "HOVER" (TAP) EFFECT */
    /* When a user taps (activates) a pillar, it expands vertically */
    .pillar:hover,
    .pillar:active,
    .pillar:focus {
        flex: 10; /* Expand significantly to show content */
        height: auto;
    }

    /* Content Styling Updates for Mobile */
    .pillar-content {
        padding: 0px 25px; /* Reduce padding */
        width: 100%;
        /* Ensure content sits at bottom */
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .pillar-num {
        margin-bottom: 10px;
        font-size: 1.2rem;
    }

    .pillar-title {
        font-size: 2rem; /* Smaller title */
        white-space: normal; /* CRITICAL: Allows text to wrap on phone screens */
        margin-bottom: 10px;
    }

    .pillar-desc {
        font-size: 0.95rem;
        max-width: 100%; /* Use full width */
        line-height: 1.5;
    }

    /* Background Images on Mobile */
    .pillar-bg {
        opacity: 0.6 !important; /* Make images more visible by default */
        filter: grayscale(0%) !important; /* Remove BW filter so it looks lively */
    }

    /* Adjust gradient so text is readable */
    .pillar::after {
        height: 100%;
        background: linear-gradient(to top, rgba(5, 17, 36, 0.9) 0%, rgba(5, 17, 36, 0.4) 60%, transparent 100%) !important;
    }

    /* Button Visibility */
    .pillar-btn {
        margin-top: 15px;
        font-size: 0.8rem;
    }
}

/* --- SMALL MOBILE (Max-width: 480px) --- */
@media screen and (max-width: 480px) {
    .pillar-title {
        font-size: 1.8rem; /* Even smaller for iPhone SE etc */
    }
    
    /* Make collapsed state slightly smaller to fit 4 on one screen */
    .pillar {
        min-height: 100px; 
    }
}

 /*-----------------------------------6.FAQ-----------------------------*/




/* =========================================
   RESPONSIVE FAQ STYLES
   ========================================= */

/* --- TABLET (Max-width: 1024px) --- */
@media screen and (max-width: 1024px) {
    .faq-section {
        padding: 6rem 20px;
    }
    
    .faq-title {
        font-size: 3rem;
    }
    
    .faq-question {
        padding: 25px 30px;
    }
}

/* --- MOBILE DEVICES (Max-width: 768px) --- */
@media screen and (max-width: 768px) {
    
    .faq-section {
        padding: 4rem 15px; /* Significantly reduce vertical padding */
    }

    /* 1. Header Adjustments */
    .faq-header {
        margin-bottom: 2rem;
    }

    .faq-title {
        font-size: 2.2rem; /* Prevent wrapping issues */
        margin-bottom: 10px;
    }

    .faq-subtitle {
        font-size: 1rem;
        padding: 0 10px;
    }

    /* 2. FAQ Item Layout */
    .faq-list {
        gap: 15px; /* Tighter spacing between items */
    }

    .faq-question {
        padding: 20px 20px; /* Maximize space for text */
        gap: 15px; /* Ensure space between text and icon */
        align-items: flex-start; /* Align icon with top of text if text wraps */
    }

    .question-text {
        font-size: 1.1rem;
        line-height: 1.4;
        max-width: 85%; /* Leave room for the icon */
    }

    /* 3. Icon Stability */
    .toggle-icon {
        flex-shrink: 0; /* CRITICAL: Prevents icon from getting squashed */
        margin-top: 2px; /* Visual alignment with text */
    }

    /* 4. Answer Text */
    .faq-answer-text {
        padding: 0 20px 25px 20px; /* Match header padding */
        font-size: 0.95rem;
    }
    
    /* 5. Search Input (If used) */
    .faq-search-input {
        padding: 18px 20px 18px 50px; /* Smaller padding */
        font-size: 1rem;
    }
    
    .search-icon {
        left: 20px;
        font-size: 1rem;
    }
}

/* --- SMALL MOBILE (Max-width: 380px) --- */
@media screen and (max-width: 380px) {
    .faq-title {
        font-size: 1.8rem;
    }
    
    .question-text {
        font-size: 1rem;
    }
    
    .faq-question {
        padding: 18px 15px;
    }
}