/* =========================================
   1. NAVIGATION


   ========================================= */


   @media(max-width:1300px)
   {
      .img-1{
    top:25%
  }
  .img-5{
    top:25%
  }
   }
@media (max-width: 980px) {
  /* .img-3{
    display: none;
  } */
  .right { display: none; }
  .hamburger { display: block !important; }

  .menu {
    position: fixed;
    top: 110px;
    left: 50%;
    transform: translateX(-50%) scale(.96);
    width: 85%;
    max-width: 320px;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 32px 26px;
    border-radius: 28px;
    background: rgba(var(--bg), .92);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transition: .35s;
    z-index: 1001;
  }

  .menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
  }

  .dropdown {
    position: static;
    background: transparent;
    box-shadow: none;
    padding: 0;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .dropdown-wrap.open .dropdown {
    display: block;
  }

  .img-1{
    top:25%
  }
  .img-5{
    top:25%
  }
}



/* =========================================
   2. HERO SECTION
   ========================================= */
@media (max-width: 1024px) {
  .cards-container {
    flex-wrap: wrap;
    justify-content: center;
  }

  .card {
    width: 170px;
    height: 210px;
  }

  .card:nth-child(n) {
    margin-top: 0;
  }
}



@media (max-width: 768px) {
  .hero {
    padding: 120px 16px 80px;
  }

  .hero-content {
    padding-top: 80px;
    position: relative;
  }

  /* Arch Container Fixes */
  .hero-arch-container {
    display: block;
    position: absolute;
    inset: 0;
    height: 100vh;
    pointer-events: none;
  }

  /* Image Styling & Filter */
  .arch-img {
    width: 56px;
    height: 56px;
    opacity: 0.65;
    filter: saturate(0.7) blur(0.3px);
    transform: none !important;
    transition: none !important;
    will-change: auto;
    border-width: 2px;
  }

  /* Consolidated Positions (Using your latest coordinate values) */
  .img-1 { top: 8%; left: -4%; }
  .img-2 { top: 2%; left: 18%; width: 72px; height: 72px; }
  .img-3 { 
    top: -6%; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 70px; 
    height: 70px; 
  }
  .img-4 { top: 2%; right: 18%; width: 72px; height: 72px; }
  .img-5 { top: 8%; right: -4%; }

  .subtext {
    font-size: 1rem;
  }

  .cards-container {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .card {
    width: 100%;
    max-width: 320px;
    height: auto;
    padding: 30px 20px;
  }

  .card:hover {
    transform: translateY(-8px) scale(1.02);
  }
}

@media (max-width: 480px) {
  .pill {
    font-size: .75rem;
    padding: 6px 14px;
  }

  .btn-nav {
    width: 100%;
    max-width: 280px;
  }
}

/* =========================================
   3. PRICING SECTION
   ========================================= */
@media (max-width: 1100px) {
  .pricing-grid {
    flex-direction: column;
    align-items: center;
  }

  .price-card,
  .price-card.dark-card {
    width: 100%;
    max-width: 460px;
    transform: none;
  }

  .price-card.dark-card:hover {
    transform: translateY(-8px);
  }
}

@media (max-width: 1024px) {
  .pricing-section {
    padding: 100px 6%;
  }

  .pricing-grid {
    gap: 35px;
  }

  .price-card,
  .price-card.dark-card {
    max-width: 520px;
  }

  .price-card.dark-card {
    padding: 55px 40px;
  }
}

@media (max-width: 768px) {
  .pricing-section {
    padding: 80px 5%;
  }

  .pricing-header-group h2 { font-size: 1.9rem; }
  .pricing-header-group p { font-size: 1rem; }

  .pricing-grid {
    gap: 28px;
  }

  .price-card,
  .price-card.dark-card {
    padding: 42px 28px;
    border-radius: 26px;
  }

  .plan-title { font-size: 1.7rem; }
  .amount { font-size: 2.5rem; }
  .feature-item { font-size: 0.92rem; }

  .btn-tier {
    width: 100%;
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .pricing-section {
    padding: 65px 20px;
  }

  .plan-title { font-size: 1.5rem; }
  .amount { font-size: 2.2rem; }

  .price-row { margin: 16px 0; }

  .price-card,
  .price-card.dark-card {
    padding: 36px 22px;
  }
}
@media(max-width:400px)
{
  .price-card{
   width:300px !important
  }
  
}

/* =========================================
   4. WHY CHOOSE US
   ========================================= */
@media (max-width: 1024px) {
  .why-section {
    padding: 120px 6%;
  }

  .why-grid {
    gap: 90px;
    margin-top: 70px;
  }

  .bento-card { border-radius: 42px; }
  .bento-inner { padding: 95px 36px 46px; }
  .bento-title { font-size: 1.7rem; }
}

@media (max-width: 768px) {
  .why-section {
    padding: 90px 5%;
  }
  .why-section h2 { font-size: 2rem; }
  .why-section p { font-size: 1rem; }

  .why-grid {
    grid-template-columns: 1fr !important;
    gap: 85px;
    margin-top: 60px;
  }

  .bento-card {
    padding: 12px;
    border-radius: 36px;
  }
  
  .bento-card:hover {
    transform: translateY(-10px) scale(1.02) !important;
  }

  .bento-inner {
    padding: 90px 28px 40px;
    border-radius: 30px;
    text-align: center;
  }

  .bento-icon {
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    width: 78px;
    height: 78px;
    font-size: 1.8rem;
  }

  .bento-title { font-size: 1.55rem; }
  .bento-text { font-size: 0.95rem; }

  .why-connections {
    opacity: 0.08;
    background-size: 32px 32px;
  }
}

@media (max-width: 480px) {
  .why-section { padding: 70px 20px; }
  .why-section h2 { font-size: 1.75rem; }

  .bento-inner { padding: 82px 22px 36px; }

  .bento-icon {
    width: 68px;
    height: 68px;
    font-size: 1.6rem;
    top: -40px;
  }

  .bento-title { font-size: 1.4rem; }
  .bento-text { font-size: 0.9rem; }
}

/* =========================================
   5. DOCTOR / FEATURES
   ========================================= */
/* Merged 1000px and 1024px for cleaner breakpoints */
@media (max-width: 1024px) {
  .modern-features-section {
    grid-template-columns: 1fr;
    gap: 70px;
    padding: 100px 6%;
  }

  .features-image-wrapper {
    height: 520px;
    max-width: 700px;
    margin: 0 auto;
    order: -1; /* Moved from 1000px block */
  }

  .stats-floating-card {
    width: 92%;
    padding: 22px 26px;
  }

  .stat-group { gap: 10px; }
  
  .stat-text strong { font-size: 1.1rem; }
  .stat-text span { font-size: 0.7rem; }
  
  .stat-icon-box {
    width: 40px;
    height: 40px;
  }
}
@media(max-width:900px)
{
     .modern-features-section {
            grid-template-columns: 1fr !important;
        }
}

@media (max-width: 768px) {
  .modern-features-section {
    padding: 80px 5%;
    gap: 60px;
  }

  .features-content {
    gap: 40px;
    text-align: center;
  }

  .feature-block h3 {
    font-size: 1.35rem;
    border-bottom-width: 2px;
  }

  .feature-block p { font-size: 0.95rem; }

  .features-image-wrapper {
    height: 460px;
    border-radius: 26px;
  }

  .feature-doc-img { border-radius: 26px; }

  .stats-floating-card {

    gap: 18px;
    padding: 22px;
    bottom: 20px;
  }

  .stat-group { justify-content: center; }
  .stat-icon-box { width: 44px; height: 44px; }
  .stat-text strong { font-size: 1.3rem; }
}

@media (max-width: 480px) {
  .modern-features-section { padding: 65px 20px; }

  .feature-block h3 { font-size: 1.25rem; }
  .features-image-wrapper { height: 400px; }

  .stats-floating-card {
    width: 95%;
    padding: 20px;
    border-radius: 18px;
  }

  .stat-text strong { font-size: 1.2rem; }
  .stat-text span { font-size: 0.75rem; }
}


/* RESET RULES - PUT AT THE VERY TOP OF CSS */
html, body {
    width: 100%;
    min-height: 100vh; /* Ensures it fills vertical space */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Stops horizontal scrolling */
    background: var(--bg); /* Ensures background color fills everything */
}

main, .hero {
    width: 100%;
    position: relative;
}


/**********4) About Doctor**********/


.stats-floating-card {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    
   
    width: fit-content;  
    min-width: 300px; 
    white-space: nowrap;

    background: #ffffff;
    border-radius: 20px;
    
 
    padding: 15px 20px; 
    
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px; 
    z-index: 999; 
}


@media (max-width: 500px) {
    .stats-floating-card {
    
        width: 95vw !important; 
        max-width: none !important; 
        
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important; 
        
 
        white-space: nowrap !important;
        padding: 15px 10px !important;

        gap: 5px !important;
    }
    
  }
    .stats-floating-card * {
        font-size: 12px !important;
    }

@media (max-width: 500px) {
    .stats-floating-card {

        width: 95vw !important; 
        max-width: none !important;
        

        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important; 
        
   
        white-space: nowrap !important;
        padding: 15px 10px !important;

        gap: 5px !important;
    }
    
 
    .stats-floating-card * {
        font-size: 12px !important;
    }
}

@media (max-width: 415px) {
    .stats-floating-card {
        width: 330px !important; 
        max-width: none !important;
        position: absolute;
        left: 50% !important;
        bottom: 20px !important;
        transform: translateX(-50%) scale(0.9) !important; 
        white-space: nowrap !important;
        padding: 15px 10px !important;
        gap: 10px !important;
        z-index: 100 !important;
    }
}


@media (max-width: 415px) {
    .stats-floating-card {
        width: 94vw !important; 
        max-width: 94vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 12px 4px !important; 
        gap: 2px !important;
        white-space: nowrap !important;
        display: flex !important;
        justify-content: space-around !important;
    }

  .stats-floating-card h3,
    .stats-floating-card strong {
        font-size: 14px !important; 
    }  
    .stats-floating-card p,
    .stats-floating-card span {
        font-size: 10px !important;
    }
    .stats-floating-card .icon-box, 
    .stats-floating-card img,
    .stats-floating-card svg {
        width: 25px !important;
        height: 25px !important;
    }
}


/********reviews*******/


        @media (max-width: 1000px) {
            .reviews-layout {
                grid-template-columns: 1fr;
                gap: 50px;
            }

            .reviews-header {
                text-align: center;
            }

            .google-rating-row {
                margin: 0 auto 30px;
            }

            .reviews-feed-wrapper {
                height: 600px;
            }
        }
        /* =========================================
   RESPONSIVE REVIEWS SECTION
   ========================================= */

/* TABLET & SMALL DESKTOP (Max Width: 1024px) */
@media (max-width: 1024px) {
    
    .reviews-layout {
        /* Switch from Side-by-Side to Stacked */
        grid-template-columns: 1fr; 
        gap: 50px;
        height: auto; /* Allow height to grow */
        text-align: center;
    }

    .reviews-header {
        /* Center the text for a cleaner look */
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 800px;
        margin: 0 auto;
    }

    .reviews-header p {
        margin-left: auto;
        margin-right: auto;
    }

    /* Adjust the glow background position */
    .reviews-section::before {
        left: 50%;
        top: 30%;
        width: 600px;
        height: 600px;
    }

    /* Reduce the height of the scrolling area so it doesn't take forever to scroll past */
    .reviews-feed-wrapper {
        height: 600px; 
    }
}

/* MOBILE (Max Width: 768px) */
@media (max-width: 768px) {
    
    .reviews-section {
        padding: 60px 20px; /* Reduce outer padding */
    }

    /* Make the title smaller and punchy */
    .reviews-header h2 {
        font-size: 2.5rem; 
    }
    
    .reviews-header p {
        font-size: 1rem;
    }

    /* COMPACT CARDS FOR MOBILE */
    /* We keep the dual-scroll, but make cards smaller to fit side-by-side */
    .reviews-feed-wrapper {
        gap: 15px; /* Smaller gap between columns */
        height: 500px; /* Shorter visible area */
    }

    .midnight-card {
        padding: 20px; /* Reduce padding inside cards */
        border-radius: 16px;
    }

    .reviewer-row {
        gap: 10px;
        margin-bottom: 10px;
    }

    .reviewer-pic {
        width: 35px; /* Smaller profile pic */
        height: 35px;
    }

    .reviewer-name {
        font-size: 0.9rem; /* Smaller Name */
    }

    .reviewer-meta {
        font-size: 0.65rem; /* Smaller Title */
    }

    .review-text {
        font-size: 0.85rem; /* Smaller body text */
        line-height: 1.5;
    }

    .card-stars {
        font-size: 0.8rem;
    }
}

/* SUPER SMALL MOBILE (Max Width: 480px) */
@media (max-width: 480px) {
    /* Optional: If screens are TINY, switch to 1 column to stay readable */
    /* Uncomment the lines below if you prefer 1 column on tiny phones */
    
    /* .reviews-feed-wrapper {
        grid-template-columns: 1fr; 
    }
    .col-up {
        display: none; // Hide one column so it's not too long
    }
    */
    
    .google-rating-row {
        padding: 10px 20px; /* Smaller badge */
    }
    
    .rating-num {
        font-size: 1.2rem;
    }
}


@media(max-width:900px)
{
  .reviews-layout{
    grid-template-columns: 1fr !important;
  }
}
@media(max-width:0px)
{
  .reviews-feed-wrapper{
    grid-template-columns:1fr !important;
  }
}

/* --- YOUR EXISTING DESKTOP STYLES --- */
.cards-container {
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 2;
    /* Added to center the flex items on large screens */
    justify-content: center; 
}

.card {
    width: 185px;
    height: 230px;
    background: rgba(255, 255, 255, .95);
    border-radius: 24px;
    padding: 25px;
    display: flex;
    flex-direction: column; /* Ensure content stacks nicely */
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: .6s cubic-bezier(.2, 1, .3, 1);
    
    /* Your Gradient Border Logic */
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, #8e94f2, #f5d1ff, #c5a47e, #8e94f2) border-box;
    background-size: 300% 300%;
    animation: borderTwinkle 8s linear infinite;
}

.card:hover {
    transform: translateY(-15px) scale(1.05);
}

/* Image handling (Added to ensure images fit inside the card) */
.card img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 10px;
}

/* Your Stagger Effect (Desktop Only) */
.card:nth-child(2),
.card:nth-child(4) {
    margin-top: 40px;
}

.card:nth-child(3) {
    margin-top: 80px;
}

@keyframes borderTwinkle {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- THE NEW RESPONSIVE FIX (Under 900px) --- */
@media (max-width: 900px) {
    .cards-container {
        display: grid; 
        /* This forces exactly 2 columns */
        grid-template-columns: 1fr 1fr; 
        gap: 16px;
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .card {
        /* Allow card to fill the grid column, instead of fixed 185px */
        width: auto; 
        
        /* Reset the stagger margins so the grid aligns perfectly */
        margin-top: 0 !important; 
    }
}