/* ========================================== RESPONSIVE ========================================== */ @media(max-width:992px){ .nav-links{ display:none; } .header-btn{ display:none; } .menu-toggle{ display:flex; } } @media(max-width:768px){ .navbar{ height:80px; } .logo img{ width:150px; } .mobile-menu{ top:80px; height:calc(100vh - 80px); width:100%; } } @media(max-width:480px){ .logo img{ width:130px; } } @media (max-width:992px){ .hero-content{ grid-template-columns:1fr; text-align:center; } .hero-text p{ margin-inline:auto; } .hero-buttons{ justify-content:center; } .hero-cards{ margin-top:40px; } } @media (max-width:768px){ .hero-cards{ grid-template-columns:1fr; } } /*========================================= ABOUT RESPONSIVE =========================================*/ @media(max-width:992px){ .about-grid{ grid-template-columns:1fr; } .about-content{ text-align:center; } .about-features{ grid-template-columns:1fr; max-width:400px; margin:40px auto; } .experience-card{ right:20px; } } /*========================================= SERVICES =========================================*/ @media(max-width:1100px){ .services-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .services-grid{ grid-template-columns:1fr; } .section-header h2{ font-size:2.3rem; } } /*========================================= PROJECTS =========================================*/ @media(max-width:992px){ .projects-grid{ grid-template-columns:1fr; } } @media(max-width:768px){ .project-card{ min-height:340px; } .project-overlay{ padding:30px; } .project-overlay h3{ font-size:1.6rem; } } /*========================================= WHY CHOOSE US =========================================*/ @media(max-width:992px){ .why-grid{ grid-template-columns:1fr; } .why-content{ text-align:center; } .why-cards{ grid-template-columns:1fr; } } /*========================================= STATISTICS =========================================*/ @media(max-width:1100px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .stats-grid{ grid-template-columns:1fr; } } /*========================================= CLIENTS =========================================*/ @media(max-width:768px){ .logo-item{ width:150px; height:90px; } .logo-track{ gap:35px; } } /*========================================= NEWS =========================================*/ @media(max-width:1100px){ .news-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .news-grid{ grid-template-columns:1fr; } } /*========================================= TESTIMONIALS =========================================*/ @media(max-width:768px){ .testimonial-card{ padding:35px 25px; } .testimonial-card p{ font-size:1rem; } } /*========================================= CTA =========================================*/ @media(max-width:768px){ #cta{ padding:120px 0; } .cta-content p{ font-size:1rem; } } /*========================================= FOOTER =========================================*/ @media(max-width:1100px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .footer-grid{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; text-align:center; } .newsletter{ flex-direction:column; border-radius:20px; } .newsletter button{ width:100%; } } /*========================================= COMPANY STORY =========================================*/ @media(max-width:992px){ .story-grid{ grid-template-columns:1fr; } .story-content{ text-align:center; } .story-highlights{ justify-content:center; flex-wrap:wrap; } .story-badge{ right:20px; } } @media(max-width:576px){ .story-highlights{ flex-direction:column; gap:25px; } } /*========================================= MISSION =========================================*/ @media(max-width:1100px){ .mission-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .mission-grid{ grid-template-columns:1fr; } } /*========================================= PROCESS =========================================*/ @media(max-width:1200px){ .process-wrapper{ grid-template-columns:repeat(2,1fr); } .process-wrapper::before{ display:none; } } @media(max-width:768px){ .process-wrapper{ grid-template-columns:1fr; } } /*========================================= TEAM =========================================*/ @media(max-width:1100px){ .team-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .team-grid{ grid-template-columns:1fr; } .team-image{ height:360px; } } /*========================================= FAQ =========================================*/ @media(max-width:768px){ .faq-question{ padding:25px; font-size:1rem; text-align:left; } .faq-answer p{ padding:0 25px 25px; } } /*========================================= FOUNDER =========================================*/ @media(max-width:992px){ .founder-grid{ grid-template-columns:1fr; } .founder-content{ text-align:center; } .founder-image{ max-width:420px; margin:auto; } } @media(max-width:992px){ .featured-grid{ grid-template-columns:1fr; } .featured-content{ text-align:center; } .featured-list{ grid-template-columns:1fr; justify-content:center; } } /*========================================= PORTFOLIO =========================================*/ @media(max-width:1100px){ .portfolio-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .portfolio-grid{ grid-template-columns:1fr; } .portfolio-item{ min-height:340px; } } /*========================================= VIDEO SHOWCASE =========================================*/ @media(max-width:768px){ .video-content h2{ font-size:2.5rem; } .play-button{ width:90px; height:90px; font-size:28px; } } /*========================================= JOURNEY =========================================*/ @media(max-width:992px){ .journey-grid{ grid-template-columns:1fr; } } @media(max-width:768px){ .journey-gallery{ grid-template-columns:1fr; } } @media(max-width:1100px){ .achievement-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .achievement-grid{ grid-template-columns:1fr; } } /*========================================= SUCCESS STORIES =========================================*/ @media(max-width:992px){ .success-grid{ grid-template-columns:1fr; } } @media(max-width:576px){ .success-stats{ flex-direction:column; gap:20px; } } /*========================================= PROJECT INQUIRY =========================================*/ @media(max-width:1100px){ .inquiry-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .inquiry-grid{ grid-template-columns:1fr; } .inquiry-header h2{ font-size:2.3rem; } } @media(max-width:992px){ .intro-grid{ grid-template-columns:1fr; } .intro-content{ text-align:center; } } /*========================================= SERVICES PAGE =========================================*/ @media(max-width:992px){ .service-block{ grid-template-columns:1fr; gap:50px; margin-bottom:100px; } .service-block.reverse .service-image, .service-block.reverse .service-details{ order:unset; } .service-details{ text-align:center; } .service-details li{ justify-content:center; } } /*========================================= SERVICE BENEFITS =========================================*/ @media(max-width:1100px){ .benefits-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .benefits-grid{ grid-template-columns:1fr; } } /*========================================= SERVICE PROCESS =========================================*/ @media(max-width:768px){ .process-timeline::before{ left:30px; } .timeline-item{ gap:20px; } .timeline-number{ width:60px; height:60px; min-width:60px; font-size:1.2rem; } .timeline-content{ padding:25px; } .timeline-content:hover{ transform:none; } } /*========================================= INDUSTRIES =========================================*/ @media(max-width:1100px){ .industries-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .industries-grid{ grid-template-columns:1fr; } } /*========================================= PACKAGES =========================================*/ @media(max-width:1100px){ .packages-grid{ grid-template-columns:1fr; } .package-card.featured{ transform:none; } } @media(max-width:768px){ .package-note{ flex-direction:column; text-align:center; align-items:center; } } /*========================================= SERVICE CTA =========================================*/ @media(max-width:768px){ .service-cta-box{ padding:50px 30px; } .service-cta-box h2{ font-size:2.3rem; } } @media(max-width:992px){ .intro-grid{ grid-template-columns:1fr; } .intro-content{ text-align:center; } } /*========================================= CONTACT METHODS =========================================*/ @media(max-width:1100px){ .contact-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .contact-grid{ grid-template-columns:1fr; } } /*========================================= CONTACT FORM =========================================*/ @media(max-width:768px){ .form-grid{ grid-template-columns:1fr; } .radio-group{ flex-direction:column; gap:15px; } } /*========================================= NEXT STEPS =========================================*/ @media(max-width:1100px){ .steps-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .steps-grid{ grid-template-columns:1fr; } } /*========================================= BUSINESS INFORMATION =========================================*/ @media(max-width:1100px){ .business-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .business-grid{ grid-template-columns:1fr; } } /*========================================= LOCATION MAP =========================================*/ @media(max-width:768px){ .map-wrapper iframe{ height:450px; } .map-card{ position:relative; width:100%; top:auto; left:auto; border-radius:0; } } /*========================================= CONTACT CTA =========================================*/ @media(max-width:768px){ .contact-cta-box{ padding:50px 30px; } .contact-cta-box h2{ font-size:2.3rem; } } @media(max-width:992px){ .featured-news{ grid-template-columns:1fr; } .featured-content{ text-align:center; } } /*========================================= LATEST NEWS =========================================*/ @media(max-width:992px){ .news-grid{ grid-template-columns:1fr; } } @media(max-width:576px){ .news-image{ height:220px; } .news-content{ padding:25px; } } /*========================================= UPCOMING EVENTS =========================================*/ @media(max-width:768px){ .event-card{ grid-template-columns:1fr; text-align:center; } .event-date{ max-width:140px; margin:auto; } .event-meta{ justify-content:center; } } /*========================================= NEWSLETTER =========================================*/ @media(max-width:768px){ .newsletter-box{ padding:50px 30px; } .newsletter-box h2{ font-size:2.2rem; } .newsletter-form{ flex-direction:column; } } /*========================================= SOCIAL GALLERY =========================================*/ @media(max-width:768px){ .social-grid{ grid-template-columns:repeat(2,1fr); } }