/* AGI Custom CSS overrides for the cloned DDA theme */ /* 1. Force hide the loading spinner that gets stuck waiting for API */ .loading-spinner { display: none !important; opacity: 0 !important; visibility: hidden !important; z-index: -999 !important; } /* 2. Force the body to be visible and scrollable */ body, html { overflow: auto !important; height: auto !important; } body.no-scroll { overflow: auto !important; } /* Ensure header shows correctly */ .new-header { opacity: 1 !important; visibility: visible !important; } /* 3. Site-wide executive brand typography for AGI Infra Limited. (Strict Corporate Hierarchy for Public Listed Infrastructure Enterprise) - Titles / Headings: Configurable via --agi-heading-font & --agi-title-weight - Paragraphs / Body: Configurable via --agi-body-font & --agi-body-weight - Subtitles: Configurable via --agi-subtitle-font & --agi-subtitle-weight */ :root { --agi-brand-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", 'Roboto Condensed', sans-serif; --agi-heading-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", 'Roboto Condensed', sans-serif; --agi-title-weight: 800; --agi-subtitle-weight: 600; --agi-body-weight: 400; --agi-body-line-height: 1.7; } html, body { font-family: var(--agi-brand-font) !important; font-weight: var(--agi-body-weight, 400) !important; line-height: var(--agi-body-line-height, 1.7) !important; color: #4b5563; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Titles & Headings: Solid Corporate Typography */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .micl-home h2, .micl-home h3, .micl-home h4, .micl-home h5, .micl-home h6, .sec-title h2, .sec-title h3, .mh-h2, .mh-h3, .mh-fs-title, .category-title h2 { font-family: var(--agi-heading-font) !important; font-weight: var(--agi-title-weight, 800) !important; color: #111827; letter-spacing: -0.02em; line-height: 1.25; } /* Decreased & unified heading scale (bold & compact as requested) */ .micl-home .mh-fs-title { font-size: 36px !important; font-weight: var(--agi-title-weight, 800) !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; } .micl-home .mh-title h3, .mh-awards-right .mh-title .mh-h3, .micl-home .mh-awards-right .mh-title h3 { font-size: 34px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; } .micl-home .mh-testimonials .mh-title h3 { font-size: 36px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; } .micl-home .mh-news h3.mh-h3, .micl-home .mh-news .mh-title h3 { font-size: 36px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; } .micl-home .mh-logo-title { font-size: 28px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; } .sec-title h2, .sec-title h3 { font-size: 34px !important; font-weight: 800 !important; } /* Compact Accordion & Section Content */ .micl-home .mh-fs-acc-btn { padding: 13px 0 !important; font-size: 15.5px !important; } .micl-home .mh-fs-acc-btn svg { width: 16px !important; height: 16px !important; } .micl-home .mh-fs-acc-inner { padding-top: 2px !important; padding-bottom: 12px !important; font-size: 13.5px !important; line-height: 1.5 !important; } .micl-home .mh-award-list-item { padding: 12px 0 !important; } .micl-home .mh-award-text h5 { font-size: 16px !important; margin-bottom: 3px !important; } .micl-home .mh-award-text p { font-size: 13.5px !important; line-height: 1.5 !important; } .micl-home .mh-award-icon { width: 38px !important; height: 38px !important; font-size: 14px !important; } /* Feature Showcase Image Full View (No Zoom/Cropping) */ .micl-home .mh-fs-right { position: relative !important; width: 100% !important; max-width: 480px !important; aspect-ratio: 1 / 1 !important; height: auto !important; min-height: auto !important; background: #0f172a !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 12px 35px rgba(0,0,0,0.08) !important; margin: 0 auto !important; } .micl-home .mh-fs-img { object-fit: contain !important; object-position: center !important; width: 100% !important; height: 100% !important; } /* Dark containers, Hero, Banner & Footer headings must remain Pure White */ .mh-footer h1, .mh-footer h2, .mh-footer h3, .mh-footer h4, .mh-footer h5, .mh-footer h6, .mh-footer-banner h1, .mh-footer-banner h2, .mh-footer-banner h3, .page-title h1, .page-title h2, .mh-hero h1, .mh-hero h2, .mh-hero h3, .footer-dark h1, .footer-dark h2, .footer-dark h3, .footer-dark h4, .mh-usp-counter h1, .mh-usp-counter h2, .mh-usp-counter h3, .mh-usp-counter h4, .tata-controls, .tata-counter { color: #ffffff !important; } /* Footer Quote Banner (Centered Text & High Contrast) */ .mh-footer-banner { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; box-sizing: border-box !important; } .mh-footer-banner h2 { color: #ffffff !important; text-align: center !important; margin: 0 auto !important; width: 100% !important; max-width: 1200px !important; display: block !important; } h1, .h1 { font-weight: 800 !important; } /* Paragraphs & Reading Prose: Normal Weight, Clean Corporate Grey */ p, .micl-home p, .legal-content p, .agi-legal-prose p, .sec-title .text, .about-section .text, .mh-fs-desc { font-family: var(--agi-brand-font) !important; font-weight: 400 !important; font-size: 15.5px; line-height: 1.75; color: #555555; } /* Key Points, Bullets, Features & Specifications: Bold Black Type */ strong, b, .bold-point, ul li strong, ol li strong, .feature-list li strong, .spec-list li strong, .mh-about-stat h3, .mh-about-stat h3 span, .contact-info-block strong, .investor-meta strong, .agi-legal-prose strong, .legal-content strong { font-family: var(--agi-brand-font) !important; font-weight: 700 !important; color: #0f172a !important; /* Bold black type */ } p, a, div, li, td, th, label, button, input, textarea, select, span:not([class*="ico-"]):not(.fa):not([class*="fa-"]):not(.fas):not(.far):not(.fab):not(.glyphicon) { font-family: var(--agi-brand-font); } /* Unified Page Banner - Sleek compact height matching brand */ .page-title { position: relative; text-align: center; padding: 95px 0 35px !important; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px !important; } .page-title::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.8)) !important; z-index: 1 !important; } .page-title .auto-container { position: relative; z-index: 2; width: 100%; } .page-title h1, .page-title h2 { font-size: 32px !important; font-weight: 800 !important; margin-bottom: 8px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; color: #ffffff !important; } .page-breadcrumb, .page-title .page-breadcrumb, .legacy-project-wrapper .page-breadcrumb, .micl-contact .page-breadcrumb, .au .page-breadcrumb, .page-wrapper .page-breadcrumb { display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; font-size: 14px !important; line-height: 1.4 !important; list-style: none !important; padding: 0 !important; margin: 8px auto 0 !important; position: relative !important; z-index: 5 !important; text-align: center !important; } .page-breadcrumb li, .page-title .page-breadcrumb li, .legacy-project-wrapper .page-breadcrumb li, .micl-contact .page-breadcrumb li, .au .page-breadcrumb li, .page-wrapper .page-breadcrumb li { display: inline-flex !important; align-items: center !important; color: #ffffff !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; margin: 0 !important; padding: 0 !important; line-height: 1.4 !important; } .page-breadcrumb li a, .page-title .page-breadcrumb li a, .legacy-project-wrapper .page-breadcrumb li a, .micl-contact .page-breadcrumb li a, .au .page-breadcrumb li a, .page-wrapper .page-breadcrumb li a { color: #ffffff !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; text-decoration: none !important; opacity: 0.9 !important; transition: color 0.25s ease, opacity 0.25s ease !important; } .page-breadcrumb li a:hover, .page-title .page-breadcrumb li a:hover, .legacy-project-wrapper .page-breadcrumb li a:hover, .micl-contact .page-breadcrumb li a:hover, .au .page-breadcrumb li a:hover, .page-wrapper .page-breadcrumb li a:hover { color: #b31b1b !important; opacity: 1 !important; } .page-breadcrumb li:not(:last-child)::after, .page-title .page-breadcrumb li:not(:last-child)::after, .legacy-project-wrapper .page-breadcrumb li:not(:last-child)::after, .micl-contact .page-breadcrumb li:not(:last-child)::after, .au .page-breadcrumb li:not(:last-child)::after, .page-wrapper .page-breadcrumb li:not(:last-child)::after { content: "/" !important; color: #b31b1b !important; font-size: 14px !important; font-weight: 700 !important; margin: 0 8px !important; position: static !important; transform: none !important; display: inline-block !important; line-height: 1 !important; } .page-breadcrumb li:last-child::after, .page-title .page-breadcrumb li:last-child::after, .legacy-project-wrapper .page-breadcrumb li:last-child::after, .micl-contact .page-breadcrumb li:last-child::after, .au .page-breadcrumb li:last-child::after, .page-wrapper .page-breadcrumb li:last-child::after { display: none !important; content: "" !important; } @media (max-width: 767px) { .page-title { padding: 80px 0 25px !important; min-height: 140px !important; } .page-title h1, .page-title h2 { font-size: 24px !important; } .page-breadcrumb, .page-title .page-breadcrumb, .legacy-project-wrapper .page-breadcrumb, .micl-contact .page-breadcrumb, .au .page-breadcrumb, .page-wrapper .page-breadcrumb { font-size: 12.5px !important; gap: 6px !important; flex-wrap: wrap !important; } .page-breadcrumb li, .page-title .page-breadcrumb li, .legacy-project-wrapper .page-breadcrumb li, .micl-contact .page-breadcrumb li, .au .page-breadcrumb li, .page-wrapper .page-breadcrumb li, .page-breadcrumb li a, .page-title .page-breadcrumb li a, .legacy-project-wrapper .page-breadcrumb li a, .micl-contact .page-breadcrumb li a, .au .page-breadcrumb li a, .page-wrapper .page-breadcrumb li a { font-size: 12.5px !important; letter-spacing: 0.4px !important; } .page-breadcrumb li:not(:last-child)::after, .page-title .page-breadcrumb li:not(:last-child)::after, .legacy-project-wrapper .page-breadcrumb li:not(:last-child)::after, .micl-contact .page-breadcrumb li:not(:last-child)::after, .au .page-breadcrumb li:not(:last-child)::after, .page-wrapper .page-breadcrumb li:not(:last-child)::after { font-size: 12.5px !important; margin: 0 5px !important; } } /* Sidenav Bar Extracted Styles */ .sidenav-bar .mCSB_inside>.mCSB_container { margin-right: 0; } .sidenav-bar .mCSB_scrollTools { opacity: 0 !important; } .sidenav-bar-visible .search-popup { width: 80%; } /*** ==================================================================== Sidenav Bar ==================================================================== ***/ .sidenav-bar { position: fixed; right: 0px; top: 0; max-width: 100%; height: 100%; width: 20%; background-color: #252525; margin: 0 auto; overflow-y: auto; opacity: 0; visibility: hidden; z-index: 999999; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } .sidenav-bar .nav-logo { position: relative; padding: 30px 20px; text-align: left; } .sidenav-bar .nav-logo img { max-width: 200px; } .sidenav-bar-visible { -webkit-transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1); -moz-transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1); -ms-transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1); -o-transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } .sidenav-bar-visible .sidenav-bar { opacity: 1; right: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); visibility: visible; box-shadow: 0 0 30px rgba(0, 0, 0, 0.40); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .sidenav-bar-visible header { width: 80%; } .sidenav-bar-visible main { /* width: 80%; */ box-shadow: 0 0 30px rgba(0, 0, 0, 0.30); } .sidenav-bar .menu-box { position: relative; left: 0px; top: 0; bottom: 0; width: 100%; height: 100%; overflow-y: auto; background: #ffffff; padding: 0px 0px; z-index: 5; opacity: 0; visibility: hidden; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .sidenav-bar-visible .sidenav-bar .menu-box { opacity: 1; visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .sidenav-bar .close-btn { position: absolute; right: 10px; top: 15px; line-height: 40px; width: 40px; text-align: center; font-size: 24px; color: #ffffff; background-color: transparent; cursor: pointer; z-index: 10; -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } .sidenav-bar-visible .sidenav-bar .close-btn { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1); -moz-transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1); -ms-transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1); -o-transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } .sidenav-bar .close-btn:hover { opacity: 0.50; } .sidenav-bar .side-nav { position: relative; margin-top: 24%; } .sidenav-bar .navigation { position: relative; display: block; margin: 0 20px; font-family: var(--agi-brand-font, 'Roboto Condensed', sans-serif); overflow: hidden; } .sidenav-bar .navigation>li { position: relative; display: block; left: 100%; margin-bottom: 5px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .sidenav-bar-visible .sidenav-bar .navigation>li { left: 0; -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -ms-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(2) { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(3) { -webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; -ms-transition-delay: 400ms; -o-transition-delay: 400ms; transition-delay: 400ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(4) { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(5) { -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; -ms-transition-delay: 600ms; -o-transition-delay: 600ms; transition-delay: 600ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(6) { -webkit-transition-delay: 700ms; -moz-transition-delay: 700ms; -ms-transition-delay: 700ms; -o-transition-delay: 700ms; transition-delay: 700ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(7) { -webkit-transition-delay: 800ms; -moz-transition-delay: 800ms; -ms-transition-delay: 800ms; -o-transition-delay: 800ms; transition-delay: 800ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(8) { -webkit-transition-delay: 900ms; -moz-transition-delay: 900ms; -ms-transition-delay: 900ms; -o-transition-delay: 900ms; transition-delay: 900ms; } .sidenav-bar-visible .sidenav-bar .navigation>li:nth-child(9) { -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; -ms-transition-delay: 1000ms; -o-transition-delay: 1000ms; transition-delay: 1000ms; } .sidenav-bar .navigation li>a { position: relative; display: block; line-height: 20px; padding: 15px 20px; font-size: 16px; color: #333333; letter-spacing: 0.02em; margin-bottom: 2px; background-color: transparent; text-transform: uppercase; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .sidenav-bar .navigation>li>a { font-weight: 400; letter-spacing: 0.08em; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); text-transform: uppercase; } .sidenav-bar .navigation li:hover>a, .sidenav-bar .navigation li.current>a { color: #b31b1b; } .sidenav-bar .navigation li.dropdown .dropdown-btn { position: absolute; right: 0px; top: 0px; width: 50px; height: 50px; text-align: center; font-size: 12px; line-height: 50px; color: #333333; cursor: pointer; z-index: 5; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .sidenav-bar .navigation li.dropdown .dropdown-btn.active .fa:before { display: inline-block; position: relative; content: "\f068"; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; display: inline-block; position: relative; content: "\f068"; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .sidenav-bar .navigation li>ul, .sidenav-bar .navigation li>ul>li>ul { display: none; background-color: #ffffff; } .sidenav-bar .navigation li>ul>li>a { padding-left: 40px !important; font-size: 14px !important; font-weight: 400 !important; color: #555555 !important; } .sidenav-bar .navigation li>ul>li:hover>a { color: #b31b1b !important; background-color: transparent !important; padding-left: 45px !important; } .sidenav-bar .contact-info-box { position: relative; padding: 0 30px; margin-top: 40px; } .sidenav-bar .contact-info-box .info-box { position: relative; padding-left: 50px; margin-bottom: 20px; } .sidenav-bar .contact-info-box .info-box .icon-box { position: absolute; left: 0; top: 0; font-size: 24px; color: #ffffff; line-height: 25px; } .sidenav-bar .contact-info-box .info-box strong { font-size: 16px; line-height: 24px; font-family: var(--agi-brand-font, 'Roboto Condensed', sans-serif); color: #ffffff; } .sidenav-bar .contact-info-box .info-box p { font-size: 14px; line-height: 24px; color: #ffffff; } .sidenav-bar .contact-info-box .info-box p a { color: #ffffff; display: inline-block; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .sidenav-bar .contact-info-box .info-box p a:hover { color: #b31b1b; } filter: grayscale(0%); /* Fix: Ensure Sidenav is visible when active */ .sidenav-bar-visible .sidenav-bar { left: 0 !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } body.sidenav-bar-visible { overflow: hidden; } /* Theme Color */ .comments-area .comment-box .date, .coming-soon .copyright-text a, .coming-soon .emailed-form .form-group input[type="submit"]:hover, .coming-soon .emailed-form button:hover, .checkout-page .default-links li a:hover, .checkout-page .default-links li .far, .cart-table tbody tr .remove-btn:hover, .shop-comment-form .rating-box .rating a:hover, .product-details .basic-details .details-header .rating, .sidebar .related-posts .post .rating .fa, .sidebar .related-posts .post a, .sidebar .related-posts .post a:hover, .shop-item .lower-content .price, .shop-item .lower-content .name a:hover, .comments-area .comment-box .reply-btn:hover, .comments-area .comment-box .rating, .blog-cat li a:before, .latest-news .post .post-info, .latest-news .post:hover h3 a, .main-footer .footer-bottom .footer-nav ul li a:hover, .main-footer .contact-list li .text a:hover, .user-links li a:hover, .recent-posts .post .date span, .recent-posts .post h4 a:hover, .social-icon-two li a:hover, .styled-pagination li a:hover, .styled-pagination li.active a, .error-section .sec-title h1, .author-box .social-icon li a:hover, .blog-single blockquote cite span, .news-block .lower-content h3 a:hover, .subscribe-form .upper-box h4 span, .testimonial-block .designation, .testimonial-block .content-box .rating, .testimonial-block .content-box .icon, .pricing-table .price-box .title, .pricing-table .title-box h3, .team-block .other-info li a:hover, .team-block .info-box .designation, .contact-info-section .number a, .contact-info-section .number, .contact-info-section .title, .contact-page-section .contact-info li a:hover, .accordion-box .block .acc-btn.active .icon-outer, .accordion-box .block .acc-btn.active, .project-section-two .filters .filter.active, .load-more-option .load-more a, .project-detail .project-info li p a:hover, .project-detail .project-info li .icon, .project-detail blockquote cite span, .project-block .caption-box h4 a:hover, .video-section .content-box .text, .help-box .info-box li .icon, .service-block-two h3 a:hover, .service-block h3 a:hover, .service-block .inner-box .icon, .feature-block-two .inner-box .icon, .fact-counter .icon, .about-me .info-column h3, .feature-block h4 a:hover, .feature-block .icon-box .icon, .theme_color, .sec-title h2, .banner-section-three .wrap, .page-breadcrumb li a:hover, .banner-section-two .slide-item .title, .sidenav-bar .navigation li:hover > a, .sidenav-bar .navigation li.current > a, .sidenav-bar .contact-info-box .info-box p a:hover, .checkout-page .default-links li a, .main-header .shopping-cart .shopping-cart-items .item-price, .search-popup .form-group input[type="submit"]:hover, .search-popup .form-group button:hover, .list-style-two li:before, .list-style-one li:before, .btn-style-four:hover, .btn-style-two:hover, a { color: #cf0a00; } .sidenav-bar-visible header, .sidenav-bar-visible main { width: 100%; } .sidenav-bar { width: 320px; } /* ENFORCE WHITE SIDENAV THEME */ .sidenav-bar .nav-box, .sidenav-bar .inner-box, .sidenav-bar { background-color: #ffffff !important; background: #ffffff !important; } .sidenav-bar .side-nav .navigation > li > a { background-color: transparent !important; color: #333333 !important; text-transform: uppercase !important; font-size: 15px !important; font-weight: 500 !important; padding: 15px 20px !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; display: block; } .sidenav-bar .side-nav .navigation > li:hover > a { background-color: #b31b1b !important; color: #ffffff !important; } .sidenav-bar .side-nav .navigation > li:hover .dropdown-btn { color: #ffffff !important; } .sidenav-bar .contact-info-box .info-box p, .sidenav-bar .contact-info-box .info-box p a, .sidenav-bar .contact-info-box .info-box .icon-box span { color: #666666 !important; } .sidenav-bar .close-btn { color: #333333 !important; } .sidenav-bar .close-btn .fa-times, .sidenav-bar .close-btn .fa-arrow-left { color: #333333 !important; } .logo-box .logo img { max-width: 250px !important; height: auto !important; display: block; } .main-header .logo-box { padding: 10px 0; } /* Main Header Extracted Styles */ /*** ==================================================================== Main Header ==================================================================== ***/ .main-header { position: fixed; left: 0; top: 30px; width: 100%; z-index: 99999; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-header.fixed-header { top: 0; position: fixed; background-color: #ffffff; box-shadow: 0 0 30px rgba(0, 0, 0, .50); } .main-header .main-box { position: relative; padding: 10px 50px; } .main-header .logo-box { position: relative; float: left; padding: 5px 0; } .main-header .outer-box { position: relative; float: right; } .main-header .btn-box { position: relative; float: right; margin-left: 20px; padding: 8px 0; } /*Search Box Widget*/ .main-header .search-box { position: relative; float: left; margin-left: 20px; padding: 8px 0; } .main-header .search-box .search-btn { position: relative; display: block; height: 44px; width: 44px; line-height: 44px; text-align: center; font-size: 22px; color: #ffffff; padding: 0; border-radius: 50%; background-color: transparent; } /*search box btn*/ .main-header .cart-btn { position: relative; float: left; padding: 8px 0; } .main-header .cart-btn:before { position: absolute; left: 0; top: 100%; height: 100%; width: 100%; content: ""; visibility: hidden; box-shadow: none !important; } .main-header .cart-btn button { position: relative; display: block; height: 40px; width: 40px; text-align: center; background-color: transparent; line-height: 40px; font-size: 28px; font-weight: 500; color: #ffffff; z-index: 9; } .main-header .cart-btn .count { position: absolute; right: 0px; top: 4px; height: 16px; width: 16px; text-align: center; line-height: 16px; font-size: 10px; color: #ffffff; background-color: #000000; border-radius: 50%; } .main-header .badge { background-color: #dddddd; border-radius: 10px; color: #000; display: inline-block; font-size: 12px; line-height: 1; padding: 3px 7px; text-align: center; vertical-align: middle; white-space: nowrap; } .main-header .shopping-cart { position: absolute; margin: 20px 0; right: 0; background: #222222; width: 300px; border-radius: 3px; padding: 20px; max-height: 450px; opacity: 0; visibility: hidden; transform: scale(.5); transform-origin: top right; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-header .cart-btn:hover:before, .main-header .cart-btn:hover .shopping-cart { opacity: 1; visibility: visible; transform: scale(1); box-shadow: 0 0 20px rgba(0, 0, 0, 0.50); } .main-header .shopping-cart .shopping-cart-header { border-bottom: 1px solid #444444; padding-bottom: 15px; } .main-header .shopping-cart .shopping-cart-total { float: right; font-size: 15px; line-height: 30px; color: #dddddd; } .main-header .shopping-cart .shopping-cart-total .lighter-text { font-size: 15px; line-height: 30px; color: #aaaaaa; } .main-header .shopping-cart .shopping-cart-items { padding-top: 20px; } .main-header .shopping-cart .shopping-cart-items li { position: relative; margin-bottom: 18px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.40); background-color: #252525; } .main-header .shopping-cart .shopping-cart-items img { float: left; margin-right: 12px; } .main-header .shopping-cart .shopping-cart-items .item-name { display: block; padding-top: 7px; font-size: 17px; color: #ffffff; } .main-header .shopping-cart .shopping-cart-items .item-price { color: #b31b1b; margin-right: 8px; } .main-header .shopping-cart .shopping-cart-items .item-quantity { color: #dddddd; } .main-header .shopping-cart .shopping-cart-items .product-detail { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .main-header .shopping-cart .cart-icon { color: #dddddd; font-size: 22px; margin-right: 7px; float: left; } .main-header .shopping-cart .theme-btn { display: block; width: 100%; box-shadow: 0 0 30px rgba(0, 0, 0, 0.50); } .main-header .mCSB_inside>.mCSB_container { margin-right: 0; } .main-header .mCSB_scrollTools { opacity: 0 !important; } .nav-toggler { position: relative; display: block; height: 59px; width: 44px; overflow: hidden; text-indent: 100%; white-space: nowrap; background-color: #ff000000; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; -ms-transition: -moz-transform 0.2s; -o-transition: -moz-transform 0.2s; transition: transform 0.2s; } .nav-toggler span { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 32px; height: 3px; background-color: #252525; } .nav-toggler span::before, .nav-toggler span:after { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: inherit; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.2s, width 0.2s; -moz-transition: -moz-transform 0.2s, width 0.2s; transition: transform 0.2s, width 0.2s; } .nav-toggler span::before { -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } .nav-toggler span::after { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } .main-header .logo-box { position: relative; float: left; padding: 5px 0; } /* Theme Color */ .comments-area .comment-box .date, .coming-soon .copyright-text a, .coming-soon .emailed-form .form-group input[type="submit"]:hover, .coming-soon .emailed-form button:hover, .checkout-page .default-links li a:hover, .checkout-page .default-links li .far, .cart-table tbody tr .remove-btn:hover, .shop-comment-form .rating-box .rating a:hover, .product-details .basic-details .details-header .rating, .sidebar .related-posts .post .rating .fa, .sidebar .related-posts .post a, .sidebar .related-posts .post a:hover, .shop-item .lower-content .price, .shop-item .lower-content .name a:hover, .comments-area .comment-box .reply-btn:hover, .comments-area .comment-box .rating, .blog-cat li a:before, .latest-news .post .post-info, .latest-news .post:hover h3 a, .main-footer .footer-bottom .footer-nav ul li a:hover, .main-footer .contact-list li .text a:hover, .user-links li a:hover, .recent-posts .post .date span, .recent-posts .post h4 a:hover, .social-icon-two li a:hover, .styled-pagination li a:hover, .styled-pagination li.active a, .error-section .sec-title h1, .author-box .social-icon li a:hover, .blog-single blockquote cite span, .news-block .lower-content h3 a:hover, .subscribe-form .upper-box h4 span, .testimonial-block .designation, .testimonial-block .content-box .rating, .testimonial-block .content-box .icon, .pricing-table .price-box .title, .pricing-table .title-box h3, .team-block .other-info li a:hover, .team-block .info-box .designation, .contact-info-section .number a, .contact-info-section .number, .contact-info-section .title, .contact-page-section .contact-info li a:hover, .accordion-box .block .acc-btn.active .icon-outer, .accordion-box .block .acc-btn.active, .project-section-two .filters .filter.active, .load-more-option .load-more a, .project-detail .project-info li p a:hover, .project-detail .project-info li .icon, .project-detail blockquote cite span, .project-block .caption-box h4 a:hover, .video-section .content-box .text, .help-box .info-box li .icon, .service-block-two h3 a:hover, .service-block h3 a:hover, .service-block .inner-box .icon, .feature-block-two .inner-box .icon, .fact-counter .icon, .about-me .info-column h3, .feature-block h4 a:hover, .feature-block .icon-box .icon, .theme_color, .sec-title h2, .banner-section-three .wrap, .page-breadcrumb li a:hover, .banner-section-two .slide-item .title, .sidenav-bar .navigation li:hover > a, .sidenav-bar .navigation li.current > a, .sidenav-bar .contact-info-box .info-box p a:hover, .checkout-page .default-links li a, .main-header .shopping-cart .shopping-cart-items .item-price, .search-popup .form-group input[type="submit"]:hover, .search-popup .form-group button:hover, .list-style-two li:before, .list-style-one li:before, .btn-style-four:hover, .btn-style-two:hover, a { color: #cf0a00; } .main-header .main-box { padding: 10px 30px; } .main-header { top: 0; } .main-header .main-box { padding: 10px 15px; } .banner-section .swiper-slide .text br, .banner-section .content .inner:before, .banner-section .content .inner:after, .video-section .content-box h2 br, .about-us .image-column .inner-column:before, .main-header .cart-btn { display: none; } .main-header .btn-box, .main-header .search-box { margin-left: 0; } .nav-toggler { position: relative; z-index: 99999999 !important; display: block; height: 59px; width: 44px; overflow: hidden; text-indent: 100%; white-space: nowrap; background-color: transparent; transition: transform 0.2s; border: none !important; padding: 0; cursor: pointer; } .nav-toggler span { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; transform: translateX(-50%) translateY(-50%); width: 32px; height: 3px; background-color: #252525; } .nav-toggler span::before, .nav-toggler span:after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: inherit; transform: translateZ(0); backface-visibility: hidden; transition: transform 0.2s, width 0.2s; } .nav-toggler span::before { transform-origin: right top; transform: translateY(-10px); } .nav-toggler span::after { transform-origin: right bottom; transform: translateY(10px); } body.sidenav-bar-visible .nav-toggler span { background: none !important; background-color: transparent !important; } body.sidenav-bar-visible .nav-toggler span::before { transform: translateX(0) translateY(0) rotate(45deg); width: 100%; top: 50%; right: auto; left: 0; transform-origin: center; } body.sidenav-bar-visible .nav-toggler span::after { transform: translateX(0) translateY(0) rotate(-45deg); width: 100%; top: 50%; right: auto; left: 0; transform-origin: center; } .sidenav-bar { position: fixed; right: -100%; left: auto; top: 0 !important; width: clamp(340px, 26vw, 420px) !important; height: 100vh !important; background: #ffffff !important; z-index: 999999999 !important; transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1); overflow-y: auto; overflow-x: hidden; padding: 0 !important; box-shadow: -8px 0 45px rgba(0,0,0,0.12); display: flex !important; flex-direction: column !important; box-sizing: border-box !important; } .sidenav-bar.active, body.sidenav-bar-visible .sidenav-bar { right: 0 !important; left: auto !important; top: 0 !important; z-index: 999999999 !important; } .sidenav-bar .nav-box, .sidenav-bar .inner-box { padding: 30px 0 !important; margin: 0 !important; min-height: 100vh !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; box-sizing: border-box !important; } .sidenav-bar .side-nav { margin: auto 0 !important; width: 100% !important; padding: 0 !important; } .sidenav-bar.active, body.sidenav-bar-visible .sidenav-bar { right: 0; left: auto; } .close-btn { display: none !important; } .sidenav-bar ul, .sidenav-bar .navigation { padding: 0 32px !important; margin: 0 !important; list-style: none !important; } .sidenav-bar ul li { list-style: none; margin: 0; } .sidenav-bar ul li a { color: #333333; display: block; padding: 15px 0; text-transform: uppercase; font-weight: 600; text-decoration: none; transition: all 0.3s ease; } .sidenav-bar ul li a:hover { color: #b31b1b; padding-left: 5px; } .sidenav-bar .contact-info-box { margin-top: 40px; color: #666; } .sidenav-bar .contact-info-box a { color: #333; text-decoration: none; transition: color 0.3s ease; } .sidenav-bar .contact-info-box a:hover { color: #b31b1b; } .sidenav-bar .contact-info-box .info-box { margin-bottom: 20px; } .sidenav-bar .contact-info-box .icon-box { color: #b31b1b; margin-bottom: 5px; font-size: 20px; } /* Google Font: Roboto Condensed loaded in head */ .sidenav-bar, .sidenav-bar a { font-family: var(--agi-brand-font, 'Roboto Condensed', sans-serif); } .sidenav-bar .fa { font-family: "Font Awesome 5 Free" !important; font-weight: 900; } .sidenav-bar ul li a { font-size: 15px !important; font-weight: 500; letter-spacing: 0.5px; border-bottom: 1px solid rgba(0,0,0,0.06) !important; padding: 16px 15px !important; border-radius: 4px; } .sidenav-bar ul li:hover > a { background-color: #b31b1b; color: #ffffff; border-bottom-color: transparent !important; } .sidenav-bar .dropdown-btn { position: absolute; right: 15px; top: 15px; width: 30px; height: 30px; text-align: center; line-height: 30px; color: #333; cursor: pointer; font-size: 16px; z-index: 5; transition: all 300ms ease; } .sidenav-bar .dropdown-btn:hover { color: #ffffff; } .sidenav-bar ul li:hover .dropdown-btn { color: #ffffff; } .sidenav-bar li { position: relative; } .sidenav-bar .close-btn { position: absolute; left: 20px; top: 20px; background: rgba(0,0,0,0.04); border: none; color: #333333; font-size: 16px; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .sidenav-bar .close-btn:hover { background: #b31b1b; color: #ffffff; transform: translateX(-3px); } .sidenav-bar .contact-info-box { padding: 20px; font-size: 14px; line-height: 1.8; } .nav-toggler span, .nav-toggler span::before, .nav-toggler span::after { background-color: #fff !important; } .sidenav-bar { background-color: #ffffff !important; } body.sidenav-bar-visible #header, body.sidenav-bar-visible .new-header__bottom, body.sidenav-bar-visible .main-header, body.sidenav-bar-visible .new-header { background-color: transparent !important; background: transparent !important; box-shadow: none !important; } /* Global Uppercase Titles as requested */ h1, h2, h3, h4, h5, h6, .mh-h3, .mh-fs-title, .page-title h2 { text-transform: uppercase !important; } /* Header Default (Inner Pages) */ #header, .new-header, .main-header { background: #ffffff !important; transition: background 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; } /* Homepage Transparent at Top */ #header, .new-header, .main-header { background: transparent !important; box-shadow: none !important; } /* Homepage Solid White When Scrolled */ #header.is-scrolled, #header.is-scrolled .new-header, #header.is-scrolled .main-header { background: #ffffff !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; } /* Clean Sidebar Nav - Remove Shadow and Add Border */ .sidenav-bar .navigation > li { margin-bottom: 0 !important; } .sidenav-bar .navigation > li > a { box-shadow: none !important; border-bottom: 1px solid #e0e0e0 !important; } .sidenav-bar .navigation > li:last-child > a { border-bottom: none !important; } /* Bulletproof Sidebar Nav */ .sidenav-bar ul li, .sidenav-bar .navigation > li { margin-bottom: 0 !important; box-shadow: none !important; } .sidenav-bar ul li a, .sidenav-bar .navigation > li > a { box-shadow: none !important; border-bottom: 1px solid #d4d4d4 !important; border-radius: 0 !important; margin-bottom: 0 !important; } .sidenav-bar ul li:last-child a, .sidenav-bar .navigation > li:last-child > a { border-bottom: none !important; } .new-header, .new-header__bottom { background: transparent !important; } /* Red Hamburger Menu */ .nav-toggler span, .nav-toggler span::before, .nav-toggler span::after { background-color: #b31b1b !important; } body.sidenav-bar-visible .nav-toggler span { background: none !important; background-color: transparent !important; } /* Mobile Header Padding */ @media (max-width: 991px) { .new-header__bottom__group { padding-top: 15px !important; padding-bottom: 10px !important; } } /* Autohide on reverse scroll */ #header { transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .sidenav-bar .contact-info-box a:hover { color: #b31b1b; } .sidenav-bar .contact-info-box .info-box { margin-bottom: 20px; } .sidenav-bar .contact-info-box .icon-box { color: #b31b1b; margin-bottom: 5px; font-size: 20px; } /* Google Font: Roboto Condensed loaded in head */ .sidenav-bar, .sidenav-bar a { font-family: var(--agi-brand-font, 'Roboto Condensed', sans-serif); } .sidenav-bar .fa { font-family: "Font Awesome 5 Free" !important; font-weight: 900; } .sidenav-bar ul li a { font-size: 15px !important; font-weight: 500; letter-spacing: 0.5px; border-bottom: 1px solid rgba(0,0,0,0.06) !important; padding: 16px 15px !important; border-radius: 4px; } .sidenav-bar ul li:hover > a { background-color: #b31b1b; color: #ffffff; border-bottom-color: transparent !important; } .sidenav-bar .dropdown-btn { position: absolute; right: 15px; top: 15px; width: 30px; height: 30px; text-align: center; line-height: 30px; color: #333; cursor: pointer; font-size: 16px; z-index: 5; transition: all 300ms ease; } .sidenav-bar .dropdown-btn:hover { color: #ffffff; } .sidenav-bar ul li:hover .dropdown-btn { color: #ffffff; } .sidenav-bar li { position: relative; } .sidenav-bar .close-btn { position: absolute; left: 20px; top: 20px; background: rgba(0,0,0,0.04); border: none; color: #333333; font-size: 16px; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .sidenav-bar .close-btn:hover { background: #b31b1b; color: #ffffff; transform: translateX(-3px); } .sidenav-bar .contact-info-box { padding: 20px; font-size: 14px; line-height: 1.8; } .nav-toggler span, .nav-toggler span::before, .nav-toggler span::after { background-color: #fff !important; } .sidenav-bar { background-color: #ffffff !important; } body.sidenav-bar-visible #header, body.sidenav-bar-visible .new-header__bottom, body.sidenav-bar-visible .main-header, body.sidenav-bar-visible .new-header { background-color: transparent !important; background: transparent !important; box-shadow: none !important; } /* Global Uppercase Titles as requested */ h1, h2, h3, h4, h5, h6, .mh-h3, .mh-fs-title, .page-title h2 { text-transform: uppercase !important; } /* Header Default (Inner Pages) */ #header, .new-header, .main-header { background: #ffffff !important; transition: background 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; } /* Homepage Transparent at Top */ #header, .new-header, .main-header { background: transparent !important; box-shadow: none !important; } /* Homepage Solid White When Scrolled */ #header.is-scrolled, #header.is-scrolled .new-header, #header.is-scrolled .main-header { background: #ffffff !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; } /* Clean Sidebar Nav - Remove Shadow and Add Border */ .sidenav-bar .navigation > li { margin-bottom: 0 !important; } .sidenav-bar .navigation > li > a { box-shadow: none !important; border-bottom: 1px solid #e0e0e0 !important; } .sidenav-bar .navigation > li:last-child > a { border-bottom: none !important; } /* Bulletproof Sidebar Nav */ .sidenav-bar ul li, .sidenav-bar .navigation > li { margin-bottom: 0 !important; box-shadow: none !important; } .sidenav-bar ul li a, .sidenav-bar .navigation > li > a { box-shadow: none !important; border-bottom: 1px solid #d4d4d4 !important; border-radius: 0 !important; margin-bottom: 0 !important; } .sidenav-bar ul li:last-child a, .sidenav-bar .navigation > li:last-child > a { border-bottom: none !important; } .new-header, .new-header__bottom { background: transparent !important; } /* Red Hamburger Menu */ .nav-toggler span, .nav-toggler span::before, .nav-toggler span::after { background-color: #b31b1b !important; } body.sidenav-bar-visible .nav-toggler span { background: none !important; background-color: transparent !important; } /* Mobile Header Padding */ @media (max-width: 991px) { .new-header__bottom__group { padding-top: 15px !important; padding-bottom: 10px !important; } } /* Auto-hide header & logo on scroll */ .header-trigger { display: none !important; } #header { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 9999999 !important; will-change: transform; transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.3s ease, box-shadow 0.3s ease !important; transform: translateY(0); } #header.is-hidden { transform: translateY(-100%) !important; } body.sidenav-bar-visible #header { transform: translateY(0) !important; } /* Header Background Rules across pages */ body:not(.is-homepage) #header { background: #ffffff !important; box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; } body.is-homepage #header { background: transparent !important; box-shadow: none !important; } body.is-homepage #header.is-scrolled { background: #ffffff !important; box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important; } @media (max-width: 767px) { .sidenav-bar { width: 230px !important; } } /* SIMPLE CROSS BUTTON FIX */ body.sidenav-bar-visible .nav-toggler span::before, body.sidenav-bar-visible .nav-toggler span::after { background-color: #b31b1b !important; } /* ULTIMATE INVISIBLE SPAN FIX */ body.sidenav-bar-visible .nav-toggler span { visibility: hidden !important; } body.sidenav-bar-visible .nav-toggler span::before, body.sidenav-bar-visible .nav-toggler span::after { visibility: visible !important; } /* FIX FONT AWESOME IN MOBILE MENU */ .sidenav-bar .fa { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; } /* Fancybox lightbox must sit above the sticky header (z-index: 9999999), otherwise the header renders on top of the opened image/gallery. */ .fancybox-container { z-index: 999999999 !important; } /* Narrower header content - keeps the header bar full-width but pulls the logo and menu button closer together instead of spanning the full page. */ .new-header .container { max-width: 1140px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Shorter header bar - reduced white space height above & below logo and toggler */ #header { height: auto !important; min-height: 0 !important; } .new-header { height: auto !important; min-height: 0 !important; padding: 0 !important; } .new-header__bottom { height: auto !important; min-height: 0 !important; padding: 2px 0 !important; } .new-header__bottom__group { min-height: 52px !important; height: auto !important; padding-top: 3px !important; padding-bottom: 3px !important; margin: 0 !important; } .logo-box { display: flex !important; align-items: center !important; padding: 0 !important; } .logo-desktop { max-height: 42px !important; width: auto !important; } .nav-toggler { margin-top: 0 !important; } p, .text-content > div, .news-block .lower-content > div.mb-3, .mh-fs-acc-inner { text-align: justify !important; text-align-last: left !important; } /* Testimonials - 3 Reviews at a time for Web, 1 for Mobile */ .mh-testimonials .mh-container, .micl-home .mh-testimonials .mh-container { max-width: 1240px !important; margin: 0 auto !important; } .mh-test-grid, .micl-home .mh-test-grid { display: flex !important; overflow-x: auto !important; gap: 24px !important; scroll-snap-type: x mandatory !important; padding: 15px 4px 25px !important; scrollbar-width: none !important; } .mh-test-grid::-webkit-scrollbar, .micl-home .mh-test-grid::-webkit-scrollbar { display: none !important; } .mh-test-card, .micl-home .mh-test-card { flex: 0 0 calc((100% - 48px) / 3) !important; width: calc((100% - 48px) / 3) !important; min-width: calc((100% - 48px) / 3) !important; max-width: calc((100% - 48px) / 3) !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; box-sizing: border-box !important; } @media (max-width: 991px) { .mh-test-grid, .micl-home .mh-test-grid { gap: 20px !important; } .mh-test-card, .micl-home .mh-test-card { flex: 0 0 calc((100% - 20px) / 2) !important; width: calc((100% - 20px) / 2) !important; min-width: calc((100% - 20px) / 2) !important; max-width: calc((100% - 20px) / 2) !important; } } @media (max-width: 767px) { .mh-testimonials .mh-container, .micl-home .mh-testimonials .mh-container { padding: 0 16px !important; } .mh-test-grid, .micl-home .mh-test-grid { gap: 16px !important; padding: 8px 0 18px !important; } .mh-test-card, .micl-home .mh-test-card { flex: 0 0 100% !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 auto !important; } } /* Guiding Principles Image Height & Frame - Precision Locked Framing */ .micl-home .mh-awards-wrap, .mh-awards-wrap { align-items: center !important; } .micl-home .mh-awards-left, .mh-awards-left { min-height: auto !important; height: auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; align-self: center !important; } .micl-home .mh-awards-media-wrap, .mh-awards-media-wrap { position: relative !important; width: 100% !important; max-width: 480px !important; height: 540px !important; min-height: 540px !important; max-height: 540px !important; display: block !important; margin: 0 auto !important; flex: none !important; } .micl-home .mh-awards-media-wrap::before, .mh-awards-media-wrap::before { content: '' !important; position: absolute !important; top: -12px !important; left: -12px !important; width: 85px !important; height: 85px !important; border-top: 3.5px solid #b31b1b !important; border-left: 3.5px solid #b31b1b !important; border-top-left-radius: 22px !important; z-index: 0 !important; pointer-events: none !important; transition: all 0.3s ease !important; } .micl-home .mh-awards-media-wrap::after, .mh-awards-media-wrap::after { content: '' !important; position: absolute !important; bottom: -12px !important; right: -12px !important; width: 85px !important; height: 85px !important; border-bottom: 3.5px solid #b31b1b !important; border-right: 3.5px solid #b31b1b !important; border-bottom-right-radius: 22px !important; z-index: 0 !important; pointer-events: none !important; transition: all 0.3s ease !important; } .micl-home .mh-awards-media-wrap:hover::before, .mh-awards-media-wrap:hover::before { top: -16px !important; left: -16px !important; } .micl-home .mh-awards-media-wrap:hover::after, .mh-awards-media-wrap:hover::after { bottom: -16px !important; right: -16px !important; } .micl-home .mh-awards-media, .mh-awards-media { position: relative !important; width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 25px 50px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04) !important; z-index: 1 !important; background: #111 !important; } .micl-home .mh-awards-media img, .mh-awards-media img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center 20% !important; display: block !important; } .mh-awards-badge { position: absolute; bottom: 20px; left: 20px; z-index: 2; background: rgba(20, 20, 20, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; padding: 7px 16px; border-radius: 30px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 4px 15px rgba(0,0,0,0.25); } .mh-awards-badge .badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #b31b1b; box-shadow: 0 0 8px #b31b1b; } @media(max-width:991px){ .micl-home .mh-awards-wrap, .mh-awards-wrap { gap: 35px !important; } .micl-home .mh-awards-left, .mh-awards-left { min-height: auto !important; margin-bottom: 25px !important; } .micl-home .mh-awards-media-wrap, .mh-awards-media-wrap { height: 440px !important; min-height: 440px !important; max-height: 440px !important; max-width: 100% !important; } } @media(max-width:576px){ .micl-home .mh-awards-media-wrap, .mh-awards-media-wrap { height: 350px !important; min-height: 350px !important; max-height: 350px !important; } .micl-home .mh-awards-media-wrap::before, .micl-home .mh-awards-media-wrap::after, .mh-awards-media-wrap::before, .mh-awards-media-wrap::after { width: 55px !important; height: 55px !important; } } /* Absolute Top Layer Guarantee for WhatsApp Floating Widget across all pages */ .whatsapp-widget-container, #wa-widget { position: fixed !important; bottom: 30px !important; right: 30px !important; z-index: 2147483647 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; pointer-events: auto !important; } .wa-chat-bubble, .wa-float-btn { z-index: 2147483647 !important; position: relative !important; } /* Project Video Theater - Clean, borderless video frame */ .video-theater-card { background: transparent !important; border-radius: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; } .video-theater-inner { border-radius: 0 !important; } /* ========================================================================== PREMIUM MICRO-ANIMATIONS & INTERACTION POLISH (21st.dev & UI/UX PRO MAX) Subtle, professional, lightweight enhancements with zero design disruption. ========================================================================== */ /* 1. Page Content Smooth Entrance */ @keyframes agiContentFadeIn { 0% { opacity: 0.94; transform: translateY(2px); } 100% { opacity: 1; transform: translateY(0); } } .micl-home, .page-wrapper { animation: agiContentFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* 2. Interactive Button Polish */ .mh-btn, .theme-btn, .btn-danger, .btn-agi-primary, button.theme-btn, a.theme-btn { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; will-change: transform, box-shadow; } .mh-btn:hover, .theme-btn:hover, .btn-danger:hover, .btn-agi-primary:hover { transform: translateY(-1.5px); box-shadow: 0 6px 16px rgba(179, 27, 27, 0.22) !important; } .mh-btn:active, .theme-btn:active, .btn-danger:active, .btn-agi-primary:active { transform: translateY(0.5px) scale(0.985); box-shadow: 0 2px 6px rgba(179, 27, 27, 0.15) !important; } .mh-btn:focus-visible, .theme-btn:focus-visible, .btn-danger:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(179, 27, 27, 0.35) !important; } /* 3. Card Hover Elevation & Smooth Shadow */ .mh-project-card, .mh-news-card, .mh-test-card, .feature-block, .project-card, .news-block-two { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important; } .mh-project-card:hover, .mh-news-card:hover, .feature-block:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.1), 0 6px 12px -4px rgba(0, 0, 0, 0.05) !important; } /* 4. Stat Counter Blocks - Subtle Ambient Hover */ .mh-about-stat { transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.22s ease !important; border-radius: 6px; } .mh-about-stat:hover { transform: translateY(-2px); background-color: rgba(255, 255, 255, 0.95); } /* 5. Smooth Image Zoom Inside Bounded Containers */ .mh-project-thumb, .mh-news-thumb, .project-image { overflow: hidden; } .mh-project-thumb img, .mh-news-thumb img, .project-image img { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .mh-project-card:hover .mh-project-thumb img, .mh-news-card:hover .mh-news-thumb img { transform: scale(1.035); } /* 6. Typography Refinement & Contrast Hierarchy */ p { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .sec-title .title, .mh-eyebrow { letter-spacing: 1.5px !important; font-weight: 700 !important; } /* 7. Accessibility - Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Discover More Button - matching See Project design */ .btn-discover-more { background: #e00000; color: #fff !important; padding: 12px 26px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; border: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; width: fit-content; text-decoration: none !important; border-radius: 2px; box-shadow: 0 8px 20px rgba(224, 0, 0, 0.25); transition: all 0.3s ease; } .btn-discover-more:hover { background: #c00000; transform: translateY(-2px); box-shadow: 0 15px 30px rgba(224, 0, 0, 0.35); color: #fff !important; } /* Hero Banner Swiper Visibility & Slide Text Fix */ .banner-slider, .banner-slider-wrapper .swiper-wrapper, #banner-slider .swiper-wrapper, .banner-section .swiper-wrapper { overflow: visible !important; } .banner-section .banner-slider-item h2, .banner-section .banner-slider-item h3, .banner-section .banner-slider-item .text, .banner-section .banner-slider-item .btn-box { opacity: 1 !important; transform: none !important; visibility: visible !important; } /* Global Horizontal Overflow Prevention */ html, body { max-width: 100% !important; overflow-x: hidden !important; } /* Hero Banner Video Overlay Full Width Fix across Mobile & Responsive */ .micl-home .video-background .video-overlay, .micl-home .video-overlay, #home .video-overlay, .banner-section .video-overlay { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } @media (max-width: 991px) { .video-overlay, .micl-home .video-overlay, .micl-home .video-background .video-overlay, #home .video-overlay { width: 100% !important; min-width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important; } } @media (max-width: 767px) { .micl-home .banner-section, .micl-home .banner-slider-wrapper, .micl-home #banner-slider { width: 100% !important; max-width: 100vw !important; overflow: hidden !important; } .micl-home .banner-section .banner-slider-item h3, .micl-home .banner-section .swiper-slide h3, #home .banner-slider-item h3 { font-size: clamp(26px, 7vw, 36px) !important; line-height: 1.22em !important; color: #ffffff !important; text-shadow: none !important; letter-spacing: 0.5px !important; margin-bottom: 15px !important; word-break: break-word !important; overflow-wrap: break-word !important; hyphens: auto; max-width: 100% !important; } .micl-home .banner-section .banner-slider-item h3 .theme_color, .micl-home .banner-section .swiper-slide h3 .theme_color, #home .banner-slider-item h3 .theme_color { color: #FF2B2B !important; text-shadow: none !important; display: inline !important; } .micl-home .banner-section .banner-slider-item .text, .micl-home .banner-section .swiper-slide .text, #home .banner-slider-item .text { font-size: 14.5px !important; line-height: 1.6em !important; color: #ffffff !important; text-shadow: none !important; letter-spacing: 0.2px !important; margin-bottom: 22px !important; word-break: break-word !important; max-width: 100% !important; opacity: 0.95 !important; } .micl-home .banner-section .banner-slider-item .text br { display: none !important; } .micl-home .banner-section .banner-slider-item .auto-container, #home .auto-container { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; box-sizing: border-box !important; } .micl-home .banner-section .swiper-slide .content { padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box !important; } .micl-home .scroll-down-btn { bottom: 22px !important; padding: 8px 20px !important; font-size: 11px !important; letter-spacing: 1.8px !important; background: rgba(14, 16, 20, 0.82) !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } .micl-home .scroll-down-btn .scroll-down-icon { width: 12px !important; height: 12px !important; } } /* Luxury Architectural Scroll Down Capsule */ .micl-home .scroll-down-btn { position: absolute !important; bottom: 36px !important; left: 50% !important; transform: translateX(-50%) !important; background: rgba(14, 16, 20, 0.72) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; padding: 10px 26px !important; font-size: 11.5px !important; font-weight: 700 !important; font-family: var(--agi-brand-font, 'Roboto Condensed', sans-serif) !important; text-transform: uppercase !important; letter-spacing: 2px !important; border-radius: 999px !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; transition: opacity 0.35s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important; } .micl-home .scroll-down-btn.active { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; opacity: 1 !important; animation: scrollFloat 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite, scrollGlowPulse 2.4s ease-in-out infinite !important; } .micl-home .scroll-down-btn:hover { background: linear-gradient(135deg, #e00000 0%, #b30000 100%) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.45) !important; box-shadow: 0 12px 35px rgba(224, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; animation-play-state: paused !important; transform: translateX(-50%) translateY(-2px) scale(1.04) !important; } .micl-home .scroll-down-btn .scroll-down-icon { color: #FF2B2B !important; stroke: currentColor !important; stroke-width: 3.5 !important; filter: drop-shadow(0 1px 4px rgba(255, 43, 43, 0.6)) !important; animation: chevronBounce 1.6s ease-in-out infinite !important; } .micl-home .scroll-down-btn:hover .scroll-down-icon { color: #ffffff !important; filter: drop-shadow(0 1px 4px rgba(255, 255, 255, 0.6)) !important; animation-play-state: paused !important; } /* Universal High-Priority Centered Video Popup */ .mh-video-popup { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 999999 !important; display: none; align-items: center !important; justify-content: center !important; padding: 20px !important; margin: 0 !important; box-sizing: border-box !important; } .mh-video-popup.mh-video-popup--open { display: flex !important; } .mh-video-popup__backdrop { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0,0,0,0.88) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; cursor: pointer !important; } .mh-video-popup__box { position: relative !important; width: 100% !important; max-width: 960px !important; aspect-ratio: 16/9 !important; background: #000 !important; border-radius: 12px !important; box-shadow: 0 25px 70px rgba(0,0,0,0.85) !important; margin: auto !important; z-index: 2 !important; } .mh-video-popup__frame { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: 12px !important; overflow: hidden !important; } .mh-video-popup__frame iframe, .mh-video-popup__frame video { width: 100% !important; height: 100% !important; border: 0 !important; display: block !important; } .mh-video-popup__close { position: absolute !important; top: -48px !important; right: 0 !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: #fff !important; border: 0 !important; font-size: 26px !important; line-height: 1 !important; cursor: pointer !important; color: #1a1a1a !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important; transition: all 0.2s ease !important; z-index: 10 !important; } .mh-video-popup__close:hover { background: #b31b1b !important; color: #fff !important; transform: scale(1.08) !important; } @media (max-width: 767px) { .mh-video-popup { padding: 15px !important; } .mh-video-popup__box { max-width: 100% !important; border-radius: 8px !important; } .mh-video-popup__close { top: -42px !important; right: 0 !important; width: 34px !important; height: 34px !important; font-size: 22px !important; } } /* Luxury Redesigned Corporate Play Button */ .ma-play-btn { position: relative !important; width: 96px !important; height: 96px !important; background: linear-gradient(135deg, #e52d27 0%, #b31b1b 55%, #8b0000 100%) !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; border: 3px solid rgba(255, 255, 255, 0.9) !important; cursor: pointer !important; text-decoration: none !important; box-shadow: 0 14px 35px rgba(179, 27, 27, 0.55), 0 0 0 10px rgba(255, 255, 255, 0.16), inset 0 1px 2px rgba(255, 255, 255, 0.45) !important; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, background 0.35s ease !important; animation: maPlayPulse 2.8s infinite ease-in-out !important; } .ma-play-btn::before { content: '' !important; position: absolute !important; inset: -14px !important; border-radius: 50% !important; border: 1.5px solid rgba(255, 255, 255, 0.45) !important; animation: maPlayRipple 2.8s infinite cubic-bezier(0.25, 1, 0.5, 1) !important; pointer-events: none !important; } .ma-play-btn::after { content: '' !important; position: absolute !important; inset: -28px !important; border-radius: 50% !important; border: 1px solid rgba(229, 45, 39, 0.55) !important; animation: maPlayRipple 2.8s infinite cubic-bezier(0.25, 1, 0.5, 1) 0.9s !important; pointer-events: none !important; } .ma-play-btn svg { width: 38px !important; height: 38px !important; margin-left: 2px !important; fill: #ffffff !important; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35)) !important; transition: transform 0.3s ease !important; } .ma-play-btn:hover { transform: scale(1.12) !important; background: linear-gradient(135deg, #ff3b30 0%, #c41c1c 55%, #9e0000 100%) !important; box-shadow: 0 18px 45px rgba(229, 45, 39, 0.75), 0 0 0 14px rgba(255, 255, 255, 0.28), inset 0 1px 3px rgba(255, 255, 255, 0.65) !important; } .ma-play-btn:hover svg { transform: scale(1.08) !important; } .ma-play-btn:active { transform: scale(0.96) !important; } /* Corporate Showcase Video Section - Clean Direct Presentation */ .ma-video { min-height: 560px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; background-size: cover !important; background-position: center !important; position: relative !important; padding: 70px 24px !important; text-align: center !important; } .ma-video::before { display: none !important; } .ma-video-vignette { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background: radial-gradient(circle at center, transparent 35%, rgba(0,0,0,0.55) 100%) !important; pointer-events: none !important; z-index: 2 !important; } .ma-video-content { position: relative !important; z-index: 3 !important; width: 100% !important; max-width: 1040px !important; margin: 0 auto !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .ma-video-card { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 0 auto !important; } .ma-video-main-heading { font-family: var(--agi-brand-font, 'Roboto Condensed', sans-serif) !important; font-size: clamp(26px, 3.8vw, 42px) !important; font-weight: 800 !important; text-transform: uppercase !important; color: #ffffff !important; margin: 0 auto !important; text-align: center !important; max-width: 960px !important; line-height: 1.28 !important; letter-spacing: 1px !important; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.95) !important; } .ma-video-divider { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; margin: 18px auto 16px !important; width: 100% !important; max-width: 220px !important; } .ma-video-divider-line { flex: 1 !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45)) !important; } .ma-video-divider-line:last-child { background: linear-gradient(90deg, rgba(255, 255, 255, 0.45), transparent) !important; } .ma-video-divider-diamond { width: 6px !important; height: 6px !important; background: #e52d27 !important; transform: rotate(45deg) !important; box-shadow: 0 0 6px rgba(229, 45, 39, 0.8) !important; } .ma-video-sub-heading { font-size: clamp(15px, 1.4vw, 18px) !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.92) !important; line-height: 1.65 !important; max-width: 820px !important; margin: 0 auto !important; text-align: center !important; letter-spacing: 0.3px !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85) !important; } .ma-video-action-area { margin: 34px auto 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; text-align: center !important; } @media (max-width: 767px) { .ma-video { min-height: 460px !important; padding: 50px 16px !important; } .ma-video-main-heading { font-size: 22px !important; line-height: 1.3 !important; } .ma-video-sub-heading { font-size: 14px !important; line-height: 1.55 !important; } .ma-video-action-area { margin-top: 28px !important; } .ma-play-btn { width: 78px !important; height: 78px !important; } .ma-play-btn svg { width: 30px !important; height: 30px !important; margin-left: 4px !important; } } /* ========================================================= UNIFIED MOBILE MENU TYPOGRAPHY (PROJECTS, RESIDENTIAL, COMMERCIAL) ========================================================= */ .sidenav-bar .navigation a, .sidenav-bar .side-nav .navigation a, .sidenav-bar .navigation > li > a, .sidenav-bar .navigation > li > ul > li > a, .sidenav-bar .side-nav .navigation > li > a, .sidenav-bar .side-nav .navigation > li > ul > li > a, .sidenav-bar .navigation li > ul > li > a { font-family: var(--agi-brand-font, 'Roboto Condensed', sans-serif) !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; line-height: 22px !important; } /* ========================================================= LUXURY NUMBERED PAGINATION (1 2 3 ... NEXT) ========================================================= */ .agi-pagination-nav { display: flex; justify-content: center; align-items: center; margin-top: 40px; width: 100%; } .agi-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; list-style: none !important; padding: 0 !important; margin: 0 !important; } .agi-page-item { display: inline-block; list-style: none !important; margin: 0 !important; padding: 0 !important; } .agi-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 16px; font-family: var(--agi-brand-font, 'Roboto Condensed', sans-serif); font-size: 15px; font-weight: 600; line-height: 1; color: #222222 !important; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; text-decoration: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); user-select: none; } a.agi-page-link:hover { background-color: #b31b1b !important; color: #ffffff !important; border-color: #b31b1b !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(179, 27, 27, 0.25); } .agi-page-item.active .agi-page-link { background-color: #b31b1b !important; color: #ffffff !important; border-color: #b31b1b !important; box-shadow: 0 6px 18px rgba(179, 27, 27, 0.35); cursor: default; font-weight: 700; } .agi-page-item.disabled .agi-page-link { background-color: #f8fafc; color: #94a3b8 !important; border-color: #e2e8f0; box-shadow: none; cursor: not-allowed; opacity: 0.6; } .agi-page-item.agi-page-dots .agi-page-link { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; color: #64748b !important; font-weight: 700; min-width: 30px; padding: 0 6px; letter-spacing: 2px; cursor: default; } @media (max-width: 767px) { .agi-pagination { gap: 5px; } .agi-page-link { min-width: 36px; height: 38px; padding: 0 10px; font-size: 13.5px; border-radius: 6px; } } /* ========================================================= VIBRANT HIGH-CONTRAST NEWS TAGS ========================================================= */ .sidebar-widget h4 { font-family: var(--agi-brand-font, 'Roboto Condensed', sans-serif) !important; font-size: 20px !important; font-weight: 800 !important; color: #1a1a1a !important; margin-bottom: 25px !important; position: relative !important; padding-bottom: 12px !important; display: block !important; visibility: visible !important; opacity: 1 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } .sidebar-widget h4::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 45px !important; height: 3px !important; background: #b31b1b !important; border-radius: 2px !important; } .news-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .news-card-tag { display: inline-flex; align-items: center; font-family: var(--agi-brand-font, 'Roboto Condensed', sans-serif); font-size: 12.5px !important; font-weight: 700 !important; background: #fdf2f2 !important; color: #b31b1b !important; border: 1px solid rgba(179, 27, 27, 0.28) !important; padding: 4px 10px !important; border-radius: 6px !important; text-decoration: none !important; transition: all 0.25s ease !important; box-shadow: 0 1px 4px rgba(179, 27, 27, 0.08); } .news-card-tag:hover { background: #b31b1b !important; color: #ffffff !important; border-color: #b31b1b !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(179, 27, 27, 0.25); } .sidebar-tags-cloud { display: flex; flex-wrap: wrap; gap: 9px; } .sidebar-tag-item { display: inline-flex; align-items: center; gap: 7px; background: #fdf2f2 !important; border: 1px solid rgba(179, 27, 27, 0.25) !important; border-radius: 6px !important; padding: 7px 14px !important; font-family: var(--agi-brand-font, 'Roboto Condensed', sans-serif); font-size: 13.5px !important; font-weight: 700 !important; color: #b31b1b !important; text-decoration: none !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; line-height: 1.3 !important; box-shadow: 0 2px 6px rgba(179, 27, 27, 0.06); } .sidebar-tag-item .tag-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px !important; color: #ffffff !important; background: #b31b1b !important; border-radius: 10px !important; font-weight: 700 !important; line-height: 1 !important; transition: all 0.25s ease !important; } .sidebar-tag-item:hover, .sidebar-tag-item.active-tag { background: #b31b1b !important; color: #ffffff !important; border-color: #b31b1b !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(179, 27, 27, 0.3) !important; } .sidebar-tag-item:hover .tag-count, .sidebar-tag-item.active-tag .tag-count { background: #ffffff !important; color: #b31b1b !important; } /* ========================================================================== Hero Banner Slider - Clean Text (Shadow Removed) ========================================================================== */ .banner-section .banner-slider-item h2, .banner-section .banner-slider-item h3, .banner-section .banner-slider-item h3 *, .banner-section .banner-slider-item .text, .banner-section .banner-slider-item .text *, .banner-section .banner-slider-item .theme_color, .banner-section .swiper-slide h2, .banner-section .swiper-slide h3, .banner-section .swiper-slide h3 *, .banner-section .swiper-slide .text, .banner-section .swiper-slide .text *, .banner-section .swiper-slide .theme_color, .micl-home .banner-section h2, .micl-home .banner-section h3, .micl-home .banner-section h3 *, .micl-home .banner-section .text, .micl-home .banner-section .text *, #home .banner-slider-item h3, #home .banner-slider-item h3 *, #home .banner-slider-item .text, #home .banner-slider-item .text * { text-shadow: none !important; filter: none !important; }