/* ===================================================================== MIPL — DARK GREY / LIGHT GREEN / WHITE THEME OVERRIDE Load this AFTER all existing theme CSS files (last in ) ===================================================================== */ :root{ --mipl-dark-1:#141617; /* deepest bg (footer bottom, nav) */ --mipl-dark-2:#1c1f21; /* main dark sections */ --mipl-dark-3:#24282b; /* cards / panels on dark bg */ --mipl-dark-4:#2e3336; /* hover / border on dark */ --mipl-green:#7ED957; /* primary light green accent */ --mipl-green-2:#9EE87A; /* lighter green (hover) */ --mipl-green-soft:#E9F9DD; /* pale green tint bg for light sections */ --mipl-white:#ffffff; --mipl-grey-text:#c7cdd1; /* body copy on dark */ } /* ---------- global resets ---------- */ body, .site-content{ background:var(--mipl-dark-2) !important; color:var(--mipl-grey-text) !important; } a{ color:var(--mipl-green); } a:hover{ color:var(--mipl-green-2); } h1,h2,h3,h4,h5,h6, .title, .title_all_box .title{ color:var(--mipl-white) !important; } p, .description_text, .content_box p, .text p{ color:var(--mipl-grey-text) !important; } /* ---------- header ---------- */ .header_top{ background:var(--mipl-dark-1) !important; border-bottom:1px solid var(--mipl-dark-4); } @media (max-width: 991px) { .header_top { display: none !important; } } .header_top .top-links li, .header_top .contact_info_two li p, .header_top a{ color:var(--mipl-grey-text) !important; } .header_top .get_a_quote{ background:var(--mipl-green) !important; color:var(--mipl-dark-1) !important; padding:6px 16px; border-radius:30px; font-weight:600; } .header_top .icon-telephone, .header_top .icon-mail, .header_top .icon-location2{ color:var(--mipl-green) !important; } .navbar_outer{ background:var(--mipl-dark-1) !important; border-bottom:1px solid var(--mipl-dark-4); } .navbar_outer.get_sticky_header.fixed-header{ background:rgba(20,22,23,0.97) !important; } .header_logo_box{ background:var(--mipl-white); display:inline-flex; align-items:center; padding:8px 16px; border-radius:8px; } .header_logo_box .logo{ display:inline-flex; align-items:center; } #myNavbar > li > a span, .navigation_menu a span{ color:var(--mipl-white) !important; } #myNavbar > li > a:hover span, #myNavbar > li.current-menu-item > a span{ color:var(--mipl-green) !important; } .dropdown-menu{ background:var(--mipl-dark-3) !important; border:1px solid var(--mipl-dark-4) !important; } .dropdown-menu .dropdown-item span{ color:var(--mipl-grey-text) !important; } .dropdown-menu .dropdown-item:hover span{ color:var(--mipl-green) !important; } .navbar_togglers .line{ background:var(--mipl-green) !important; } /* ---------- hero slider ---------- */ .slider .image-layer::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(20,22,23,.92) 0%, rgba(20,22,23,.55) 55%, rgba(20,22,23,.85) 100%); } .slide-item{ position:relative; } .slider_content h1{ color:var(--mipl-white) !important; } .slider_content h1::selection{ background:var(--mipl-green); color:var(--mipl-dark-1); } .slider_content p{ color:var(--mipl-grey-text) !important; } /* container for the three.js geometric canvas dropped into the hero */ .three-geo-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.55; } .slider .slide-item-content{ position:relative; z-index:2; } /* ---------- feature section ---------- */ .feature-section{ background:var(--mipl-dark-2) !important; } .icon_box_new_box{ background:var(--mipl-dark-3) !important; border:1px solid var(--mipl-dark-4) !important; border-radius:12px; transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .icon_box_new_box:hover{ transform:translateY(-8px); border-color:var(--mipl-green) !important; box-shadow:0 15px 40px rgba(126,217,87,0.15); } .icon_box_new_box .icon_box{ background:var(--mipl-white) !important; border-radius:50%; width:70px; height:70px; display:flex; align-items:center; justify-content:center; } .icon_box_new_box .icon_box img.svg_image{ width:34px; height:auto; } .icon_box_new_box .content h2 a{ color:var(--mipl-white) !important; } .icon_box_new_box .content p{ color:var(--mipl-grey-text) !important; } .icon_box_new_box .read_more{ color:var(--mipl-green) !important; } .icon_box_new_box .read_more:hover{ color:var(--mipl-green-2) !important; letter-spacing:.5px; } /* ---------- feature card expandable "Read More" content ---------- */ .icon_box_new_box .extra_content{ max-height:0; opacity:0; overflow:hidden; margin-top:0; transition:max-height .45s ease, opacity .35s ease, margin-top .45s ease; } .icon_box_new_box.is-expanded .extra_content{ max-height:260px; opacity:1; margin-top:14px; } .icon_box_new_box .read_more.expandable-toggle .icon-arrow-right{ display:inline-block; transition:transform .3s ease; } .icon_box_new_box.is-expanded .read_more.expandable-toggle .icon-arrow-right{ transform:rotate(90deg); } /* ---------- about section ---------- */ .about-section.bg_light_1{ background:var(--mipl-dark-1) !important; } .icon_carousel_box_all .icon_caro{ background:var(--mipl-dark-3) !important; border:1px solid var(--mipl-dark-4); border-radius:10px; padding:20px; transition:border-color .3s ease; } .icon_carousel_box_all .icon_caro:hover{ border-color:var(--mipl-green); } .icon_caro .icon img.svg_image{ filter:brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(500%) hue-rotate(50deg); width:36px; } .icon_caro .text h2 a{ color:var(--mipl-white) !important; } .icon_caro .text p{ color:var(--mipl-grey-text) !important; } .icon_caro .read_more{ color:var(--mipl-green) !important; } .image_box_new .quote{ background:var(--mipl-green) !important; } .image_box_new .quote h2{ color:var(--mipl-dark-1) !important; } /* ---------- about-section auto image slider (no nav / no dots) ---------- */ .about_image_slider_wrap{ position:relative; } .about_image_slider{ border-radius:12px; overflow:hidden; border:1px solid var(--mipl-dark-4); } .about_image_slider .about_slide img{ width:100%; height:420px; object-fit:cover; display:block; } .about_image_slider .owl-nav, .about_image_slider .owl-dots{ display:none !important; } .about_image_slider_wrap .quote{ position:absolute; left:24px; bottom:24px; background:var(--mipl-green); padding:18px 26px; border-radius:8px; max-width:80%; z-index:3; box-shadow:0 12px 30px rgba(0,0,0,.35); } .about_image_slider_wrap .quote h2{ color:var(--mipl-dark-1) !important; margin:0; font-size:18px; line-height:1.4; } .curve_shape_bottom_1 .elementor-shape-fill{ fill:var(--mipl-dark-1); } .curve_shape_bottom_1 .shape_bg_white{ fill:var(--mipl-dark-2); } /* ---------- process section ---------- */ .process-section{ background:var(--mipl-dark-2) !important; } .choose_box{ background:var(--mipl-dark-3) !important; border:1px solid var(--mipl-dark-4) !important; border-radius:12px; transition:transform .35s ease, border-color .35s ease; } .choose_box:hover{ transform:translateY(-6px); border-color:var(--mipl-green) !important; } .choose_box .icon_image img.svg_image{ filter:brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(500%) hue-rotate(50deg); } .choose_box .content_box h2 a{ color:var(--mipl-white) !important; } .choose_box .step .step_no{ color:var(--mipl-green) !important; opacity:.4; } /* ---------- "who we are" image box ---------- */ .image-box-section .image_box_new.type_three{ position:relative; overflow:hidden; } .image-box-section .image_box_new.type_three::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(20,22,23,.92), rgba(20,22,23,.55)); } .image-box-section .content_box_inner{ position:relative; z-index:2; } .image-box-section .content_box_inner h1{ color:var(--mipl-white) !important; } .image-box-section .content_box_inner p{ color:var(--mipl-grey-text) !important; } .image-box-section .read_more{ background:var(--mipl-green) !important; color:var(--mipl-dark-1) !important; padding:10px 24px; border-radius:30px; display:inline-block; transition:background .3s ease, transform .3s ease; } .image-box-section .read_more:hover{ background:var(--mipl-green-2) !important; transform:translateX(4px); } /* ---------- services (dark section) ---------- */ .service-section.bg_dark_1{ background:var(--mipl-dark-1) !important; position:relative; overflow:hidden; } .service_box.type_two{ background:var(--mipl-dark-3) !important; border:1px solid var(--mipl-dark-4) !important; border-radius:12px; overflow:hidden; transition:transform .35s ease, border-color .35s ease; } .service_box.type_two:hover{ transform:translateY(-8px); border-color:var(--mipl-green) !important; } .service_box .entry-title a{ color:var(--mipl-white) !important; } .service_box p{ color:var(--mipl-grey-text) !important; } .service_box .icon_box .icon{ color:var(--mipl-green) !important; } .service_box .btn_box .read_more{ color:var(--mipl-green) !important; } .service_box .btn_box .read_more:hover{ color:var(--mipl-green-2) !important; } /* footer-area geometric canvas mount point (optional, add div manually) */ .service-section .three-geo-bg{ opacity:.35; } /* ---------- projects / materials handled ---------- */ .project-section{ background:var(--mipl-dark-2) !important; } .project_box .entry-title a{ color:var(--mipl-white) !important; } .project_box .read_more{ color:var(--mipl-green) !important; } .project_box .read_more:hover{ color:var(--mipl-green-2) !important; } .project_box .image_box{ border-radius:10px; border:1px solid var(--mipl-dark-4); } .project_box .gradient{ background:linear-gradient(to top, rgba(20,22,23,.85), transparent) !important; } .project_box .zoom_icon_link{ color:var(--mipl-green) !important; } .theme-btn.one{ background:var(--mipl-green) !important; color:var(--mipl-dark-1) !important; border:none !important; border-radius:30px; font-weight:600; transition:background .3s ease, transform .3s ease; } .theme-btn.one:hover{ background:var(--mipl-green-2) !important; transform:translateY(-3px); } /* ---------- contact / quote section ---------- */ .contact-section.bg_op_1{ position:relative; } .contact-section.bg_op_1::before{ content:""; position:absolute; inset:0; background:rgba(20,22,23,.90); } .contact-section .container{ position:relative; z-index:2; } .contact-section .title_all_box.dark_color .title, .contact-section .before_title{ color:var(--mipl-white) !important; } .contact-section p{ color:var(--mipl-grey-text) !important; } .divider_2{ border-color:var(--mipl-dark-4) !important; } .footer_contact_list .same_contact .icon-telephone{ color:var(--mipl-green) !important; } .footer_contact_list .titles{ color:var(--mipl-grey-text) !important; } .footer_contact_list a{ color:var(--mipl-white) !important; } /* ---------- section title blocks (light variants used across page) ---------- */ .title_all_box .before_title{ color:var(--mipl-green) !important; font-weight:600; letter-spacing:1px; } .title_all_box .small_text_sub{ color:var(--mipl-grey-text) !important; } .title_all_box.dark_color .title{ color:var(--mipl-white) !important; } .title_all_box.light_color .title{ color:var(--mipl-white) !important; } /* ---------- footer ---------- */ .footer_logo a { background: #ffffff !important; display: inline-flex !important; align-items: center !important; padding: 10px 18px !important; border-radius: 8px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .footer_logo a img { height: 60px; width: auto; object-fit: contain; } .footer_widgets_wrap.bg_dark_2{ background:var(--mipl-dark-1) !important; position:relative; overflow:hidden; } .footer_widgets_wrap .three-geo-bg{ opacity:.30; } .fo_wid_title h2{ color:var(--mipl-white) !important; position:relative; padding-bottom:10px; } .fo_wid_title h2::after{ content:""; position:absolute; left:0; bottom:0; width:36px; height:2px; background:var(--mipl-green); } .navigation_foo .menu li a{ color:var(--mipl-grey-text) !important; transition:color .3s ease, padding-left .3s ease; } .navigation_foo .menu li a:hover{ color:var(--mipl-green) !important; padding-left:4px; } .about_company .content_box p{ color:var(--mipl-grey-text) !important; } .get_intouch_inrfo .top h6, .get_intouch_inrfo .bottom h6{ color:var(--mipl-green) !important; } .get_intouch_inrfo .con_content h5{ color:var(--mipl-grey-text) !important; } .get_intouch_inrfo a{ color:var(--mipl-white) !important; } .creote-footer-copyright.bg_dark_3{ background:var(--mipl-dark-1) !important; border-top:1px solid var(--mipl-dark-4); } .copyright p, .copyright a{ color:var(--mipl-grey-text) !important; } .copyright a{ color:var(--mipl-green) !important; } .social_media_v_one ul li a{ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; background: var(--mipl-dark-3) !important; color: var(--mipl-green) !important; border: 1px solid var(--mipl-dark-4) !important; font-size: 18px !important; text-decoration: none !important; transition: background .3s ease, color .3s ease, transform .3s ease; } .social_media_v_one ul li a i { font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important; font-style: normal !important; } .social_media_v_one ul li a:hover{ background: var(--mipl-green) !important; color: var(--mipl-dark-1) !important; transform: translateY(-4px); } /* ---------- modal popup ---------- */ .modal_popup .modal-popup-inner{ background:var(--mipl-dark-3) !important; } .modal_popup .text p{ color:var(--mipl-grey-text) !important; } .modal_popup a{ color:var(--mipl-green) !important; } .modal_contact_info h2{ color:var(--mipl-white) !important; } .modal_contact_info i{ color:var(--mipl-green) !important; } .close-modal{ color:var(--mipl-white) !important; } /* ---------- mobile menu ---------- */ .crt_mobile_menu .menu-box{ background:var(--mipl-dark-1) !important; } .crt_mobile_menu .menu-outer a{ color:var(--mipl-grey-text) !important; } .crt_mobile_menu .menu-outer a:hover{ color:var(--mipl-green) !important; } .crt_mobile_menu .close-btn{ color:var(--mipl-green) !important; } /* ---------- back to top progress ---------- */ .prgoress_indicator{ background:var(--mipl-dark-3) !important; } .prgoress_indicator path{ stroke:var(--mipl-green) !important; } /* ---------- generic buttons everywhere ---------- */ .theme_btn_all a, .read_more.type_one, .read_more.type_two{ color:var(--mipl-green) !important; } .read_more.type_one:hover, .read_more.type_two:hover{ color:var(--mipl-green-2) !important; } /* ===================================================================== INNER PAGES (about.php and similar) — page header, about-section, icon boxes, team section, industries-served process section ===================================================================== */ /* ---------- page header banner ---------- */ .page_header_default{ position:relative; } .page_header_default::before{ content:""; position:absolute; inset:0; background:rgba(20,22,23,.72); z-index:1; } .page_header_default .page_header_content{ position:relative; z-index:2; } .page_header_default .title_page{ color:var(--mipl-white) !important; } .page_header_default .breadcrumbs a, .page_header_default .breadcrumbs li{ color:var(--mipl-grey-text) !important; } .page_header_default .breadcrumbs li.active{ color:var(--mipl-green) !important; } /* ---------- generic title_all_box used across inner pages (style_one/three/six/seven) ---------- */ .title_all_box .before_title{ color:var(--mipl-green) !important; } .title_all_box h2, .title_all_box h2 a{ color:var(--mipl-white) !important; } .title_all_box p{ color:var(--mipl-grey-text) !important; } /* ---------- about-section (about.php) ---------- */ .about-section{ background:var(--mipl-dark-2) !important; } .about-section .description_box p{ color:var(--mipl-grey-text) !important; } .icon_box_all .icon{ background:var(--mipl-white); border-radius:50%; width:56px; height:56px; min-width:56px; display:flex; align-items:center; justify-content:center; } .icon_box_all .icon img{ width:28px; } .icon_box_all .icon .icon-bow-and-arrow, .icon_box_all .icon .icon-growth, .icon_box_all .icon .icon-binoculars{ color:var(--mipl-green); } .icon_box_all .txt_content h3, .icon_box_all .txt_content h3 a{ color:var(--mipl-white) !important; } .icon_box_all .txt_content p{ color:var(--mipl-grey-text) !important; } .icon_box_all .txt_content ul li{ color:var(--mipl-grey-text) !important; } .theme-btn.five{ background:var(--mipl-green) !important; color:var(--mipl-dark-1) !important; border:none !important; border-radius:30px; transition:background .3s ease, transform .3s ease; } .theme-btn.five:hover{ background:var(--mipl-green-2) !important; transform:translateY(-2px); } /* about-page image block + quote badge (also used by the slider version below) */ .image_boxes .authour_quotes{ background:var(--mipl-green) !important; color:var(--mipl-dark-1) !important; } .image_boxes .authour_quotes h6, .image_boxes .authour_quotes p{ color:var(--mipl-dark-1) !important; } /* ---------- about-page image auto-slider (mirrors homepage about slider) ---------- */ .about_page_slider_wrap{ position:relative; } .about_page_slider{ border-radius:12px; overflow:hidden; border:1px solid var(--mipl-dark-4); } .about_page_slider .about_slide img{ width:100%; height:460px; object-fit:cover; display:block; } .about_page_slider .owl-nav, .about_page_slider .owl-dots{ display:none !important; } .about_page_slider_wrap .authour_quotes{ position:absolute; right:24px; bottom:24px; z-index:3; background:var(--mipl-green) !important; padding:18px 24px; border-radius:8px; box-shadow:0 12px 30px rgba(0,0,0,.35); } .about_page_slider_wrap .authour_quotes i{ color:var(--mipl-dark-1) !important; } .about_page_slider_wrap .authour_quotes h6, .about_page_slider_wrap .authour_quotes p{ color:var(--mipl-dark-1) !important; margin:0; } /* ---------- service-icon-section ("Stand Out From The Rest") ---------- */ .service-icon-section.bg_light_1{ background:var(--mipl-dark-1) !important; } .icon_box_all.style_three{ background:var(--mipl-white); border-radius:12px; padding:30px; } .icon_box_all.style_three .icon span{ color:var(--mipl-green) !important; font-size:34px; } .icon_box_all.style_three .txt_content h3, .icon_box_all.style_three .txt_content h3 a{ color:var(--mipl-dark-1) !important; } .icon_box_all.style_three .txt_content p, .icon_box_all.style_three .txt_content ul li{ color:#4a4f52 !important; } .icon_box_all.style_three .btn_left .theme-btn.one{ background:var(--mipl-green) !important; color:var(--mipl-dark-1) !important; border-radius:30px; } /* ---------- team-section ("Professional Individuals") ---------- */ .team-section{ background:var(--mipl-dark-2) !important; } .team-section .description_box p{ color:var(--mipl-grey-text) !important; } .icon_box_all.style_four .icon{ background:var(--mipl-white); border-radius:12px; width:64px; height:64px; display:flex; align-items:center; justify-content:center; position:relative; } .icon_box_all.style_four .icon img.svg_image{ width:30px; } .icon_box_all.style_four .txt_content h3, .icon_box_all.style_four .txt_content h3 a{ color:var(--mipl-white) !important; } .icon_box_all.style_four .txt_content p{ color:var(--mipl-grey-text) !important; } /* ---------- process-section / "Industries Served" (style_three) ---------- */ .process-section{ background:var(--mipl-dark-2) !important; } .title_sections.three .before_title{ color:var(--mipl-green) !important; } .title_sections.three h2{ color:var(--mipl-white) !important; } .title_sections.three p{ color:var(--mipl-grey-text) !important; } .process_box.style_three .content_box h2, .process_box.style_three .content_box h2 a{ color:var(--mipl-white) !important; } .process_box.style_three .content_box p{ color:var(--mipl-grey-text) !important; } .process_box.style_three .number h6{ color:var(--mipl-green) !important; opacity:.55; } .divider_1{ border-top:1px solid var(--mipl-dark-4) !important; } .image_boxes.style_three.border_yes{ border:1px solid var(--mipl-dark-4) !important; border-radius:12px; overflow:hidden; } /* ---------- final polish pass for about.php and similar inner pages ---------- */ /* breadcrumb separator arrow between Home / About Us */ .page_header_default .breadcrumbs li:not(:last-child)::after{ color:var(--mipl-grey-text) !important; } /* hover lift for the "Stand Out From The Rest" white cards */ .icon_box_all.style_three{ transition:transform .3s ease, box-shadow .3s ease; } .icon_box_all.style_three:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.35); } /* hover lift for team-section cards */ .icon_box_all.style_four{ transition:transform .3s ease; } .icon_box_all.style_four:hover{ transform:translateY(-4px); } .icon_box_all.style_four .icon img.shape{ opacity:.15; /* the decorative shape overlay reads too strong on white circle otherwise */ } /* consistent rounded corners on the simple supporting images */ .simple_image_boxes{ border-radius:12px; overflow:hidden; } .simple_image_boxes .simp_img{ border-radius:12px; } /* about-section two-icon row: give each a light divider so they don't run together on mobile */ .about-section .icon_box_all.style_two{ border-bottom:1px solid var(--mipl-dark-4); padding-bottom:14px; } /* process_box number hover-accent for a touch of interactivity matching the rest of the site */ .process_box.style_three{ transition:transform .3s ease; } .process_box.style_three:hover .number h6{ opacity:1; } /* ---------- scroll reveal (elements start hidden, JS adds .is-in) ---------- */ .reveal-up{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.22,.68,.35,1), transform .7s cubic-bezier(.22,.68,.35,1); } .reveal-up.is-in{ opacity:1; transform:translateY(0); } /* staggered children — JS sets --d (delay index) on each item */ .reveal-up{ transition-delay:calc(var(--d, 0) * 90ms); } /* ---------- hover tilt (JS sets rotateX/rotateY via inline transform) ---------- */ .tilt-card{ transform-style:preserve-3d; will-change:transform; transition:transform .25s ease, border-color .35s ease, box-shadow .35s ease; } /* ---------- continuous icon ring rotation ---------- */ .icon_box_new_box .icon_bg_rotate, .choose_box .icon_bg_rotate{ position:absolute; inset:-6px; border:1.5px dashed rgba(126,217,87,0.45); border-radius:50%; animation:mipl-spin 9s linear infinite; pointer-events:none; } .icon_box_new_box .icon_box, .choose_box .icon_box{ position:relative; } @keyframes mipl-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } /* ---------- magnetic quote button ---------- */ .magnetic-btn{ display:inline-block; will-change:transform; transition:transform .18s ease-out; } /* ---------- small drifting-particle accents (feature / process sections) ---------- */ .three-dust-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; /* keep the line animation only in the empty side margins — fade it out completely behind the centered container content */ -webkit-mask-image:linear-gradient(to right, black 0%, black 12%, transparent 24%, transparent 76%, black 88%, black 100%); mask-image:linear-gradient(to right, black 0%, black 12%, transparent 24%, transparent 76%, black 88%, black 100%); } .feature-section{ position:relative; overflow:hidden; } .feature-section .container{ position:relative; z-index:1; } .process-section{ position:relative; overflow:hidden; } .process-section .container{ position:relative; z-index:1; } /* ---------- image parallax drift (about section) ---------- */ .image_box_new.type_two .image_box_inner{ will-change:transform; } /* ---------- underline draw-in for section titles ---------- */ .title_sections .title{ position:relative; display:inline-block; } .title_sections .title::after{ content:""; position:absolute; left:0; bottom:-8px; height:2px; width:0; background:var(--mipl-green); transition:width .8s cubic-bezier(.22,.68,.35,1) .15s; } .title_sections.is-in .title::after{ width:64px; } .text-center .title_sections .title::after{ left:50%; transform:translateX(-50%); } /* ---------- scrollbar accent (nice touch, optional) ---------- */ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:var(--mipl-dark-1); } ::-webkit-scrollbar-thumb{ background:var(--mipl-green); border-radius:10px; } .laser_swiper_wrapper { max-width: 1300px; /* was 1100px — bigger container */ margin: 0 auto; padding: 0 60px; } .laser-swiper { overflow: hidden; border-radius: 10px; } .laser-swiper .swiper-slide { aspect-ratio: 16 / 8; /* slightly taller than 16/9 for more presence */ overflow: hidden; border-radius: 10px; } .laser_slide_img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .laser-swiper .swiper-button-next, .laser-swiper .swiper-button-prev { color: #fff; background: rgba(0,0,0,0.4); width: 44px; height: 44px; border-radius: 50%; } .laser-swiper .swiper-button-next::after, .laser-swiper .swiper-button-prev::after { font-size: 18px; } .laser-swiper .swiper-pagination-bullet { background: #fff; opacity: 0.5; } .laser-swiper .swiper-pagination-bullet-active { background: #a4e83f; opacity: 1; } @media (max-width: 768px) { .laser_swiper_wrapper { padding: 0 40px; } .laser-swiper .swiper-slide { aspect-ratio: 4 / 3; } } .machine_card { background: #1c1c1c; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 40px 30px; text-align: center; height: 100%; transition: transform 0.3s ease, border-color 0.3s ease; } .machine_card:hover { transform: translateY(-8px); border-color: #a4e83f; } .machine_icon { width: 70px; height: 70px; background: #a4e83f; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; } .machine_icon img { width: 34px; height: 34px; /* filter forces a light icon dark, useful if using free black/white line icons */ filter: brightness(0) saturate(100%); } .machine_card h5 { color: #fff; font-size: 18px; font-weight: 600; margin-bottom: 12px; } .machine_card p { color: #a0a0a0; font-size: 14px; line-height: 1.6; margin-bottom: 0; } .machine_card { background: #1c1c1c; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 40px 30px; text-align: center; height: 100%; transition: transform 0.3s ease, border-color 0.3s ease; } .machine_card:hover { transform: translateY(-8px); border-color: #a4e83f; } .machine_icon { width: 70px; height: 70px; background: #a4e83f; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; } .machine_icon i { font-size: 28px; color: #111; /* dark icon on the green circle, matches homepage style */ } .machine_card h5 { color: #fff; font-size: 18px; font-weight: 600; margin-bottom: 12px; } .machine_card p { color: #a0a0a0; font-size: 14px; line-height: 1.6; margin-bottom: 0; }