/* ========================================================= IMPORTERS ZONE BD — Unique Section Redesign Loaded LAST in (after the inline override block) so these rules win the cascade without !important spam. ========================================================= */ :root { --iz-ink: #10233F; --iz-emerald: #1E6FD8; --iz-emerald-d: #124D9E; --iz-amber: #123A66; --iz-mist: #F0F5FB; --iz-line: rgba(16, 35, 63, 0.10); --iz-white: #FFFFFF; --iz-radius: 10px; } /* ======================================================= HERO / CAROUSEL — left text, right image, dot indicators ======================================================= */ .iz-hero { position: relative; overflow: hidden; } .iz-carousel { position: relative; } .iz-carousel__track { position: relative; height: 560px; } @media (max-width:767px) { .iz-carousel__track { height: 620px; } } .iz-carousel__slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; z-index: 1; transition: opacity .6s ease; } .iz-carousel__slide.active { opacity: 1; visibility: visible; z-index: 2; } .iz-carousel__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .iz-carousel__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11, 110, 79, 0.92) 0%, rgba(11, 110, 79, 0.72) 38%, rgba(11, 110, 79, 0) 62%); } @media (max-width:767px) { .iz-carousel__bg::after { background: linear-gradient(180deg, rgba(11, 110, 79, 0.88) 15%, rgba(11, 110, 79, 0.6) 55%, rgba(11, 110, 79, 0.2) 100%); } } .iz-carousel__slide>.container { position: relative; z-index: 1; } .iz-carousel__panel { position: relative; } .iz-hero__eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--iz-amber); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); padding: 6px 16px; border-radius: 30px; margin-bottom: 18px; } .iz-hero__title { color: #fff; font-size: 42px; line-height: 1.22; font-weight: 700; max-width: 640px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); } @media (max-width:767px) { .iz-hero__title { font-size: 28px; } } .iz-carousel__image { position: relative; z-index: 1; } .iz-carousel__image img { border-radius: var(--iz-radius); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35); } /* prev / next icon buttons */ .iz-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); height: 48px; width: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--iz-ink); border: none; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; z-index: 5; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.4); transition: all .2s ease; } .iz-carousel__nav:hover { background: var(--iz-emerald); color: #fff; } .iz-carousel__nav--prev { left: 22px; } .iz-carousel__nav--next { right: 22px; } @media (max-width:575px) { .iz-carousel__nav { height: 38px; width: 38px; font-size: 13px; } .iz-carousel__nav--prev { left: 12px; } .iz-carousel__nav--next { right: 12px; } } /* bottom dot indicators */ .iz-carousel__dots { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; background: rgba(0, 0, 0, 0.2); padding: 9px 14px; border-radius: 30px; z-index: 5; } .iz-carousel__dot { height: 9px; width: 9px; border-radius: 30px; background: rgba(255, 255, 255, 0.55); border: none; padding: 0; cursor: pointer; transition: all .25s ease; } .iz-carousel__dot.active { width: 26px; background: var(--iz-amber); } /* ======================================================= INTRO BANNER (IMPORTERS ZONE BD strip) ======================================================= */ .iz-intro-banner { border: none !important; box-shadow: none !important; background: var(--iz-mist); border-radius: var(--iz-radius); padding: 22px 30px !important; margin-top: -34px; position: relative; z-index: 5; display: flex; align-items: center; gap: 18px; border-left: 5px solid var(--iz-emerald) !important; } .iz-intro-banner .iz-intro-icon { flex: 0 0 auto; height: 46px; width: 46px; border-radius: 50%; background: var(--iz-emerald); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; } .iz-intro-banner h2 { font-size: 20px !important; color: var(--iz-ink) !important; margin-bottom: 2px !important; } .iz-intro-banner h4 { font-size: 14px !important; font-weight: 400 !important; color: #5a6b70 !important; margin: 0 !important; } /* ======================================================= SECTION HEAD — left aligned, chip + title + gradient rule ======================================================= */ .iz-section-head { position: static !important; text-align: left !important; display: block !important; margin-bottom: 44px !important; max-width: 640px; } .iz-section-head::before, .iz-section-head::after { display: none !important; content: none !important; } .iz-section-head .iz-chip { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--iz-emerald); background: rgba(11, 110, 79, 0.08); padding: 7px 18px; border-radius: 30px; margin-bottom: 16px; } .iz-section-head .title { display: block !important; background: none !important; padding: 0 !important; text-align: left !important; font-size: 32px !important; line-height: 1.25 !important; color: var(--iz-ink) !important; position: relative; z-index: 1; } .iz-section-head .title::after { content: ""; display: block; width: 74px; height: 5px; background: linear-gradient(90deg, var(--iz-emerald) 0%, var(--iz-amber) 100%); margin: 18px 0 0 0; border-radius: 6px; } /* ======================================================= POPULAR CATEGORIES — ring badge cards ======================================================= */ .p-single-category.iz-cat-card { height: auto !important; padding: 30px 20px !important; border: 1px solid var(--iz-line) !important; border-radius: var(--iz-radius) !important; background: #fff; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .p-single-category.iz-cat-card:hover { transform: translateY(-6px); border-color: var(--iz-emerald) !important; box-shadow: 0 20px 40px -22px rgba(11, 110, 79, 0.35); } .p-single-category.iz-cat-card img { height: 110px !important; width: 110px; object-fit: contain; margin: 0 auto 14px; border-radius: 50%; border: 2px dashed var(--iz-line); padding: 10px; display: block; } .p-single-category.iz-cat-card h4 { font-size: 16px !important; color: var(--iz-ink) !important; font-weight: 600 !important; } /* ======================================================= PRODUCT CARDS v2 — floating badge + soft shadow + pill CTAs ======================================================= */ .product-item.iz-product-card { height: auto !important; border: none !important; border-radius: 16px !important; overflow: visible; background: #fff; box-shadow: 0 14px 30px -16px rgba(22, 35, 43, 0.22); transition: box-shadow .25s ease, transform .25s ease; } .product-item.iz-product-card:hover { transform: translateY(-6px); box-shadow: 0 26px 48px -18px rgba(22, 35, 43, 0.30); } .product-item.iz-product-card .product-thumb { position: relative; border-radius: 16px 16px 0 0; overflow: hidden; } .product-item.iz-product-card .product-thumb img { height: 200px !important; width: 100%; object-fit: cover; transition: transform .45s ease; } .product-item.iz-product-card:hover .product-thumb img { transform: scale(1.08); } .product-item.iz-product-card .product-thumb::after { content: none !important; } /* floating icon badge, overlaps image + body */ .product-item.iz-product-card .product-thumb .iz-badge { position: absolute; left: 18px; bottom: -22px; height: 44px; width: 44px; border-radius: 50%; background: var(--iz-emerald); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; border: 3px solid #fff; box-shadow: 0 8px 16px -6px rgba(11, 110, 79, 0.55); z-index: 3; } .product-item.iz-product-card .product-content { padding: 32px 18px 22px !important; } .product-item.iz-product-card .product-content .title a { font-size: 16px !important; color: var(--iz-ink) !important; font-weight: 700 !important; min-height: 40px; display: block; } .product-item.iz-product-card .product-content .title a:hover { color: var(--iz-emerald) !important; } .product-item.iz-product-card .button { display: flex; gap: 10px; margin-top: 16px; } .product-item.iz-product-card .button .btn { flex: 1; border-radius: 30px !important; font-weight: 600 !important; font-size: 13px !important; padding: 10px 12px !important; border: 2px solid transparent !important; transition: all .2s ease; } .product-item.iz-product-card .button .btn-danger { background: #fff !important; color: var(--iz-ink) !important; border-color: var(--iz-ink) !important; } .product-item.iz-product-card .button .btn-danger:hover { background: var(--iz-ink) !important; color: #fff !important; } .product-item.iz-product-card .button .btn-success { background: var(--iz-amber) !important; color: #fff !important; border-color: var(--iz-amber) !important; } .product-item.iz-product-card .button .btn-success:hover { background: #fff !important; color: var(--iz-amber) !important; } /* ======================================================= FEATURED-CATEGORY BANDS — alternating tint, zig-zag feel ======================================================= */ .iz-feature-section { padding: 70px 0; } .iz-feature-section.iz-band-alt { background: var(--iz-mist); } /* ======================================================= MISSION & VISION — below hero ======================================================= */ .iz-mv-section { padding: 70px 0 20px; } .iz-mv-card { height: 100%; background: #fff; border: 1px solid var(--iz-line); border-top: 4px solid var(--iz-emerald); border-radius: 14px; padding: 38px 34px; box-shadow: 0 14px 30px -20px rgba(22, 35, 43, 0.18); transition: transform .25s ease, box-shadow .25s ease; } .iz-mv-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -20px rgba(22, 35, 43, 0.25); } .iz-mv-card__icon { display: inline-flex; align-items: center; justify-content: center; height: 64px; width: 64px; border-radius: 50%; background: rgba(11, 110, 79, 0.08); color: var(--iz-emerald); font-size: 26px; margin-bottom: 22px; } .iz-mv-card h3 { font-size: 22px; color: var(--iz-ink); margin-bottom: 14px; } .iz-mv-card p { color: #5a6b70; font-size: 15px; line-height: 1.8; margin: 0; } .iz-mv-card--dark { background: var(--iz-ink); border-top-color: var(--iz-amber); border-color: var(--iz-ink); } .iz-mv-card--dark .iz-mv-card__icon { background: rgba(232, 121, 43, 0.15); color: var(--iz-amber); } .iz-mv-card--dark h3 { color: #fff; } .iz-mv-card--dark p { color: rgba(255, 255, 255, 0.72); } /* ======================================================= CLIENT TESTIMONIALS — reuses the .iz-carousel engine ======================================================= */ .iz-testi-carousel .iz-carousel__track { height: 300px; } @media (max-width:767px) { .iz-testi-carousel .iz-carousel__track { height: 420px; } } .iz-testi-slide { align-items: flex-start; padding-top: 6px; } .iz-testi-card { max-width: 720px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 40px 44px; text-align: center; box-shadow: 0 18px 40px -22px rgba(22, 35, 43, 0.22); position: relative; } .iz-testi-card__quote { font-size: 28px; color: var(--iz-amber); opacity: 0.9; margin-bottom: 18px; } .iz-testi-card__text { font-size: 16px; line-height: 1.8; color: #46545a; font-style: italic; margin-bottom: 18px; } .iz-testi-card__stars { color: var(--iz-amber); font-size: 14px; margin-bottom: 18px; letter-spacing: 3px; } .iz-testi-card__author { display: flex; align-items: center; justify-content: center; gap: 14px; } .iz-testi-card__avatar { height: 48px; width: 48px; border-radius: 50%; background: var(--iz-emerald); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .iz-testi-card__author h5 { font-size: 15px; color: var(--iz-ink); margin-bottom: 2px; text-align: left; } .iz-testi-card__author span { font-size: 12px; color: #86949a; text-align: left; display: block; } .iz-testi-carousel .iz-carousel__nav { background: rgba(11, 110, 79, 0.08); color: var(--iz-emerald); box-shadow: none; } .iz-testi-carousel .iz-carousel__nav:hover { background: var(--iz-emerald); color: #fff; } .iz-testi-carousel .iz-carousel__dots { position: static; transform: none; justify-content: center; background: transparent; margin-top: 18px; } .iz-testi-carousel .iz-carousel__dot { background: rgba(11, 110, 79, 0.25); } .iz-testi-carousel .iz-carousel__dot.active { background: var(--iz-amber); } /* ======================================================= Light header/footer reskin via existing selectors (full markup redesign will follow once partials arrive) ======================================================= */ .header-topbar { border-bottom-color: var(--iz-line) !important; } .header-navigation .primary-menu li a:hover, .header-navigation .primary-menu li.current>a { color: var(--iz-emerald) !important; } .header-navigation .primary-menu li .submenu li a:hover { background-color: var(--iz-emerald) !important; } .btn-quote, .navbar-btn a { background-color: var(--iz-emerald) !important; border-color: var(--iz-emerald) !important; } .quick_call_area .ph { background: var(--iz-emerald) !important; } .quick_call_area .wp { background: #1EBE5D !important; } .back-to-top a { background: var(--iz-emerald) !important; } .footer-area .footer-overlay { background-color: rgba(30 111 216) !important; } .footer-area .widget-item-2 ul li a:hover, .footer-area .widget-item-3 ul li a:hover { color: var(--iz-amber) !important; } /* ========================================================= CONTACT PAGE — unique redesign Depends on :root tokens already defined in the main CSS: --iz-ink, --iz-emerald, --iz-emerald-d, --iz-amber, --iz-mist, --iz-line ========================================================= */ /* ---- Section wrapper ---- */ .iz-contact-info-section { background: var(--iz-mist); padding-bottom: 90px; } /* ---- Info cards (left column) ---- */ .contact-info-items.iz-contact-info-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 20px; border: none !important; flex-wrap: unset !important; height: 100%; } @media (max-width: 767px) { .contact-info-items.iz-contact-info-grid { grid-template-columns: 1fr; } } .contact-info-item.iz-contact-info-card { width: auto !important; flex: none !important; border: none !important; background: #fff; border-radius: 14px; padding: 34px 22px !important; box-shadow: 0 14px 30px -20px rgba(22, 35, 43, 0.18); transition: transform .25s ease, box-shadow .25s ease; } .contact-info-item.iz-contact-info-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -20px rgba(22, 35, 43, 0.25); } .iz-contact-info-card__icon { display: inline-flex; align-items: center; justify-content: center; height: 60px; width: 60px; border-radius: 50%; background: rgba(11, 110, 79, 0.08); color: var(--iz-emerald); font-size: 22px; margin-bottom: 16px; } .contact-info-item.iz-contact-info-card .title { font-size: 16px !important; color: var(--iz-ink) !important; margin-bottom: 8px; } .contact-info-item.iz-contact-info-card p { color: #5a6b70; font-size: 14px; margin-bottom: 2px; } /* ---- Standalone contact form (right column, replaces the map) ---- */ .iz-contact-form-standalone { height: 100%; background: #fff; border-radius: 18px; padding: 44px 40px; box-shadow: 0 20px 44px -22px rgba(22, 35, 43, 0.22); } @media (max-width: 575px) { .iz-contact-form-standalone { padding: 30px 24px; } } .iz-contact-form-standalone .form-title { color: var(--iz-ink) !important; font-size: 24px !important; margin-bottom: 6px; } .iz-input-group { position: relative; } .iz-input-group input, .iz-input-group textarea { background: var(--iz-mist) !important; border: 2px solid transparent !important; border-radius: 12px !important; height: 54px !important; padding: 0 46px 0 20px !important; color: var(--iz-ink) !important; font-size: 14px; transition: all .2s ease; } .iz-input-group textarea { height: 120px !important; padding-top: 16px !important; } .iz-input-group input:focus, .iz-input-group textarea:focus { background: #fff !important; border-color: var(--iz-emerald) !important; box-shadow: 0 0 0 4px rgba(11, 110, 79, 0.12); } .iz-input-group .icon { color: var(--iz-emerald) !important; } .iz-input-group.textarea-group .icon { top: 22px !important; } .iz-contact-submit { background: var(--iz-amber) !important; border-radius: 30px !important; padding: 16px 36px !important; font-weight: 600 !important; } .iz-contact-submit::before { background: var(--iz-emerald-d) !important; } .contact-info-items .contact-info-item i { background: var(--iz-emerald) !important; } /* ========================================================= PRODUCT CATEGORY SIDEBAR — unique redesign Depends on :root tokens already defined in the main CSS: --iz-ink, --iz-emerald, --iz-mist, --iz-line ========================================================= */ .iz-cat-widget { background: #fff !important; border: none !important; border-radius: 16px !important; padding: 28px 24px !important; box-shadow: 0 14px 30px -20px rgba(22, 35, 43, 0.18); } .iz-cat-widget .widget-title { font-size: 20px !important; color: var(--iz-ink) !important; margin: 8px 0 20px !important; padding: 0 !important; } .iz-cat-widget .widget-title::before, .iz-cat-widget .widget-title::after { display: none !important; content: none !important; } .iz-cat-widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .iz-cat-widget ul li { margin: 0 !important; } .iz-cat-widget ul li a { display: flex; align-items: center; gap: 12px; padding: 12px 14px !important; border-radius: 10px; background: var(--iz-mist); color: var(--iz-ink) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; width: 100%; transition: all .2s ease; } .iz-cat-widget ul li a:hover { background: rgba(30, 111, 216, 0.08); transform: translateX(3px); } .iz-cat-list__icon, .iz-cat-list__text, .iz-cat-list__arrow { position: static !important; top: auto !important; right: auto !important; height: auto !important; width: auto !important; background: transparent !important; color: inherit !important; line-height: normal !important; text-align: left !important; font-weight: inherit !important; padding: 0 !important; } .iz-cat-list__icon { display: inline-flex !important; align-items: center; justify-content: center; height: 32px !important; width: 32px !important; border-radius: 50% !important; background: #fff !important; color: var(--iz-emerald) !important; font-size: 13px !important; flex-shrink: 0; } .iz-cat-list__text { flex: 1; } .iz-cat-list__arrow { font-size: 11px !important; color: var(--iz-line) !important; opacity: 0; transform: translateX(-4px); transition: all .2s ease; } .iz-cat-widget ul li a:hover .iz-cat-list__arrow { opacity: 1; transform: translateX(0); color: var(--iz-emerald) !important; } .iz-cat-widget ul li.active a { background: var(--iz-emerald); color: #fff !important; } .iz-cat-widget ul li.active .iz-cat-list__icon { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; } .iz-cat-widget ul li.active .iz-cat-list__arrow { opacity: 1; color: #fff !important; } /*About us*/ .service-item-three:hover { background-color: var(--iz-ink) !important; } .service-item-three .icon { color: var(--iz-ink) !important; } .service-item-three:hover .icon { color: #fff !important; }