/* =========================================
   responsive.css
   Breakpoints: 1100 | 900 | 768 | 480
========================================= */

/* =========================================
   1100px — small laptops / large tablets
========================================= */

@media(max-width:1100px){

    /* TOPBAR */
    .top-contact{
        gap:16px;
        font-size:13px;
    }

    /* NAVBAR */
    .logo{
        width:72px;
    }

    .logo-text{
        max-width:240px;
    }

    .logo-text h2{
        font-size:20px;
        line-height:1.2;
    }

    .logo-text p{
        font-size:12px;
    }

    .nav-links{
        gap:18px;
    }

    .nav-links a{
        font-size:14px;
    }

    .primary-btn{
        padding:14px 22px;
        font-size:14px;
        border-radius:14px;
    }

    /* HERO */
    .hero-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .hero-content{
        max-width:100%;
    }

    .hero-main-image{
        width:100%;
        height:auto;
        border-radius:30px;
    }

    .floating-card{
        left:10px;
    }

    /* GRIDS */
    .services-grid{
        grid-template-columns:1fr 1fr;
    }

    .philosophy-grid{
        grid-template-columns:1fr 1fr;
        margin-top:80px;
    }

    /* SECTION HEADING */
    .section-heading h2{
        font-size:36px;
    }

    /* FOOTER GRID */
    div[style*="grid-template-columns:2fr 1fr 1fr"]{
        grid-template-columns:1fr 1fr !important;
        gap:40px !important;
    }

    /* CTA */
    div[style*="padding:80px"]{
        padding:60px 40px !important;
    }

    div[style*="font-size:48px"]{
        font-size:36px !important;
    }

    /* INLINE 4-COL CARD GRID */
    div[style*="grid-template-columns:repeat(4,1fr)"]{
        grid-template-columns:1fr 1fr !important;
    }

}


@media(max-width:1200px){

    #meet-raman .hero-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

}


/* =========================================
   900px — tablets
========================================= */

@media(max-width:900px){

    /* TOPBAR — hide email, keep phone */
    .top-contact span:first-child{ display:none; }

    /* NAV */
    .nav-links{ display:none; }
    .navbar .primary-btn{ display:none; }
    .hamburger{ display:flex; }

    /* HERO */
    .hero-section{ padding:80px 0 70px; }
    .hero-content h1{ font-size:26px; }
    .hero-para{ font-size:16px; }
    .hero-stats{ flex-wrap:wrap; gap:14px; }

    /* SECTION SPACING */
    section{ padding:80px 0; }

    /* GRIDS */
    .philosophy-footer{ grid-template-columns:1fr 1fr; }

    /* TIMELINE */
    .timeline::before{ left:20px; }
    .timeline-item{
        flex-direction:column !important;
        align-items:flex-start;
        padding-left:60px;
    }
    .timeline-dot{ left:20px; }
    .timeline-year{
        width:auto;
        margin-bottom:15px;
        text-align:left;
        font-size:38px;
    }
    .timeline-content{ width:100%; }

    /* 4-COL → 2-COL */
    div[style*="grid-template-columns:repeat(4,1fr)"]{
        grid-template-columns:1fr 1fr !important;
    }

    /* FOOTER */
    div[style*="grid-template-columns:2fr 1fr 1fr"]{
        grid-template-columns:1fr !important;
        gap:40px !important;
    }

    /* CTA */
    div[style*="padding:80px"]{
        padding:50px 30px !important;
        border-radius:24px !important;
    }
    div[style*="font-size:48px"]{
        font-size:30px !important;
    }

}

/* =========================================
   768px — mobile landscape / small tablets
========================================= */

@media(max-width:768px){

    /* TOPBAR — hide entirely on small screens */
    .topbar{ display:none; }

    /* LOGO */
    .logo{ width:60px; }
    .logo-text h2{ font-size:17px; }
    .logo-text p{ display:none; }

    /* HERO */
    .hero-content h1{ font-size:24px; letter-spacing:1px; }
    .hero-para{ font-size:15px; }
    .hero-buttons{ flex-direction:column; gap:14px; }
    .hero-buttons .primary-btn,
    .hero-buttons .secondary-btn{ text-align:center; }
    .hero-stats{ gap:12px; }
    .hero-stat-card{ padding:18px; flex:1; min-width:0; }
    .hero-stat-card h3{ font-size:26px; }

    /* HERO IMAGE */
    
    .hero-main-image{
        width:100%;
        height:auto;
        border-radius:24px;
    }

    .floating-card{ left:0; right:0; margin:auto; bottom:20px; width:90%; }

    /* SERVICES */
    .services-grid{ grid-template-columns:1fr; }

    /* PHILOSOPHY */
    .philosophy-grid{ grid-template-columns:1fr; }
    .philosophy-footer{ grid-template-columns:1fr 1fr; }

    /* SECTION HEADING */
    .section-heading h2{ font-size:28px; }

    /* 4-COL → 1-COL */
    div[style*="grid-template-columns:repeat(4,1fr)"]{
        grid-template-columns:1fr !important;
    }

    /* CTA */
    div[style*="padding:80px"]{
        padding:40px 20px !important;
        border-radius:20px !important;
    }
    div[style*="font-size:48px"]{
        font-size:26px !important;
        margin-bottom:16px !important;
    }

    /* FOOTER */
    div[style*="grid-template-columns:2fr 1fr 1fr"]{
        grid-template-columns:1fr !important;
        gap:32px !important;
    }
    footer{ padding:60px 0 30px !important; }

    /* SECTION PADDING */
    section{ padding:60px 0; }

    /* SERVICE CARD PADDING */
    .service-card{ padding:32px; }

}

/* =========================================
   480px — mobile portrait (iPhone etc.)
========================================= */

@media(max-width:480px){

    /* NAVBAR */
    .navbar{ padding:16px 0; }
    .logo{ width:50px; }
    .logo-text h2{ font-size:15px; }

    /* HERO */
    .hero-section{ padding:60px 0 50px; }
    .hero-content h1{ font-size:21px; }
    .hero-badge{ font-size:12px; padding:10px 14px; }
    .hero-para{ font-size:14px; }
    .hero-points{ gap:12px; }
    .hero-stat-card h3{ font-size:22px; }

    .hero-main-image{
        width:100%;
        height:auto;
        border-radius:20px;
    }

    .floating-card{ padding:16px; gap:12px; }
    .floating-icon{ width:44px; height:44px; font-size:18px; }
    .floating-card h4{ font-size:15px; }

    /* HERO BUTTONS */
    .hero-buttons a{ width:100%; text-align:center; }

    /* SECTION */
    section{ padding:50px 0; }

    /* SERVICE CARD */
    .service-card{ padding:24px; border-radius:20px; }
    .service-card h3{ font-size:20px; }

    /* PHILOSOPHY */
    .philosophy-footer{ grid-template-columns:1fr; }
    .philosophy-card{ padding:70px 24px 30px; }

    /* SECTION HEADING */
    .section-heading{ margin-bottom:40px; }
    .section-heading h2{ font-size:24px; }

    /* CTA */
    div[style*="padding:80px"]{
        padding:30px 18px !important;
        border-radius:16px !important;
    }
    div[style*="font-size:48px"]{
        font-size:22px !important;
    }

    /* CHAT WIDGET */
    .chat-widget{ right:15px; bottom:15px; }
    .chat-popup{ width:calc(100vw - 30px); right:0; }

    /* FOOTER */
    footer{ padding:50px 0 24px !important; }

}


@media(max-width:768px){

    #meet-raman .hero-content h1{
        font-size:32px !important;
    }

    #meet-raman .hero-badge{
        font-size:14px;
    }

}


/* =========================================
   HAMBURGER — hidden on desktop
========================================= */

.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1001;
}

.hamburger span {
    display: block;
    width: 26px;
    height: 2.5px;
    background: #0f172a;
    border-radius: 4px;
    transition: 0.3s;
}

@media(max-width: 900px) {
    .hamburger { display: flex; }
    .nav-links { display: none; }
    .navbar .primary-btn { display: none; }
}

/* MOBILE MENU */

.mobile-menu{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(255,255,255,0.97);
    backdrop-filter:blur(18px);
    z-index:1000;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.mobile-menu.open{ display:flex; }

.mobile-menu ul{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin:0;
    padding:0;
}

.mobile-menu ul li a{
    font-size:26px;
    font-weight:600;
    color:#0f172a;
    display:block;
    padding:10px 0;
    transition:0.3s;
}

.mobile-menu ul li a:hover{ color:#2563eb; }

.mobile-cta{
    margin-top:30px;
    font-size:16px;
}

.mobile-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    font-size: 28px;
    color: #0f172a;
    cursor: pointer;
    z-index: 1002;
}


/* =========================================
   IPHONE FIXES
========================================= */
 
@media(max-width:480px){
 
    
 
    /* FOOTER — prevent overflow */
    footer li, footer p{
        word-break:break-word;
        overflow-wrap:break-word;
    }
 
    /* QUOTE / LARGE TEXT — scale down */
    blockquote, .quote-text,
    [style*="font-size:5"],
    [style*="font-size:6"],
    [style*="font-size:7"],
    [style*="font-size:8"]{
        font-size:22px !important;
        line-height:1.5 !important;
    }
 
    /* ANY inline font-size above 40px */
    h1{ font-size:22px !important; }
    h2{ font-size:20px !important; }
 
    
    /* FORM layout fix for contact page */
    .form-grid,
    .contact-form-grid{
        grid-template-columns:1fr !important;
    }
 
    /* CONTACT FORM ROWS — stack on mobile */
    .form-row{
        grid-template-columns:1fr !important;
    }
 
    /* Prevent horizontal scroll */
    .container{ width:92%; }
 
}


@media(max-width:480px){

    /* NEWSLETTER — stack input and button */
    form[action*="formspree"]{
        flex-direction:column;
    }
    form[action*="formspree"] input{
        width:100% !important;
    }
    form[action*="formspree"] button{
        width:100% !important;
        text-align:center;
    }

    /* STAT CARDS — 2 columns instead of 4 */
    .hero-stats{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:14px !important;
    }
    .hero-stat-card{
        min-width:0 !important;
        width:100% !important;
    }

}