@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/PlusJakartaSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/PlusJakartaSans-Bold.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/PlusJakartaSans-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/PlusJakartaSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { --primary-color: #006187; --primary-dark: #004a63; --primary-light: #0088b3; --bs-primary-rgb: 0, 97, 135; --bs-link-color: var(--primary-color); --bs-link-hover-color: var(--primary-dark); --bs-link-color-rgb: 0, 97, 135; --bs-primary: var(--primary-color); --bs-primary-bg-subtle: #dcf2fa; --bs-primary-border-subtle: #0088b3; --bs-primary-text-emphasis: #004a63; --secondary-color: #c46200; --secondary-dark: #c86200; --accent-color: #af1212; --text-light: #6b7280; --text-muted: #9ca3af; --bg-light: #faf3e1; --bg-white: #ffffff; --border-color: #e5e7eb; --p-text-color: #1e1e1e; --text-dark: #121212; --deep-blue: #005673; --bg-dark-blue: #006080; --text-heading: #1a1a1a; --navy-blue: #0b1c2c; --bg-navy-dark: #081420; --grey-333: #333; --grey-444: #444; --grey-555: #555; --grey-666: #666; --grey-888: #888; --bg-grey-light: #f4f4f4; --bg-grey-medium: #e0e0e0; --bg-grey-soft: #f0f0f0; --bg-grey-softest: #f8f9fa; --bg-input: #e6e6e6; --bg-black: #000000; --border-light: #e5e5e5; --primary-accent: #006b91; --primary-darker: #004a63; --accent-orange: #ff9933; --accent-orange-light: #ff9d33; --bg-blue-soft: #dcf2fa; --bg-blue-pale: #f2f5f9; --bg-white-soft: #fcfcfc; --bg-body-light: #f8f8f8; --color-success: #28a745; --color-whatsapp: #25d366; --color-error: #ed1c24; --color-orange-bright: #ff8c00; --grey-eee: #eee; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.18); } .btn-primary { --bs-btn-bg: var(--primary-color); --bs-btn-border-color: var(--primary-color); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); --bs-btn-active-bg: var(--primary-dark); --bs-btn-disabled-bg: var(--primary-color); --bs-btn-disabled-border-color: var(--primary-color); background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; } .text-primary { color: var(--primary-color) !important; } .bg-primary { background-color: var(--primary-color) !important; } .border-primary { border-color: var(--primary-color) !important; } .btn-outline-primary { --bs-btn-color: var(--primary-color); --bs-btn-border-color: var(--primary-color); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--primary-color); --bs-btn-hover-border-color: var(--primary-color); --bs-btn-focus-shadow-rgb: 0, 97, 135; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--primary-color); --bs-btn-active-border-color: var(--primary-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--primary-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--primary-color); color: var(--primary-color) !important; border-color: var(--primary-color) !important; } .btn-outline-primary:hover { background-color: var(--primary-color) !important; color: #fff !important; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Plus Jakarta Sans", "Inter", sans-serif; font-size: 15px; color: var(--text-dark); line-height: normal; overflow-x: hidden; background: var(--bg-white); padding-top: 74px; } h1, h2, h3, h4, h5, h6 { font-family: "Plus Jakarta Sans", sans-serif; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .breadcrumb-section { padding: 10px 0; border-bottom: 2px solid var(--border-color); } .breadcrumb-list { display: flex; align-items: center; list-style: none; padding: 0; margin: 5px 0 0; flex-wrap: wrap; gap: 8px; justify-content: center; } .breadcrumb-item { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; } .breadcrumb-item a { color: var(--primary-color); text-decoration: none; font-weight: 500; transition: color 0.2s; font-size: 15px; } .breadcrumb-item a:hover { color: var(--secondary-color); } .breadcrumb-item.active { color: var(--text-dark); font-weight: 600; font-size: 13px; } .modal-content { border: none; border-radius: 12px; } .modal-icon { font-size: 4rem; line-height: 1; } .modal-icon.success { color: var(--color-success); } .modal-icon.error { color: var(--accent-color); } .modal-title { color: var(--accent-color); font-weight: 700; width: 100%; text-align: center; } .btn-close-modal { background: var(--accent-color); color: var(--bg-white); padding: 10px 30px; font-weight: 600; border-radius: 6px; transition: all 0.3s ease; } .btn-close-modal:hover { background: var(--accent-color); color: var(--bg-white); } .mobile-menu-toggle { display: none; background: none; border: none; font-size: 24px; color: var(--primary-color); cursor: pointer; padding: 5px; z-index: 1002; } .mobile-nav-drawer { position: fixed; top: 0; left: -300px; width: 280px; height: 100%; background: var(--bg-white); z-index: 2000; transition: left 0.3s ease; display: flex; flex-direction: column; } .mobile-nav-drawer.active { left: 0; } .drawer-header { padding: 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-light); } .drawer-close { background: none; border: none; font-size: 32px; line-height: 1; cursor: pointer; color: var(--grey-333); } .mobile-nav-drawer-body { padding: 20px 0; overflow-y: auto; } .mobile-nav-drawer-body .nav-list { flex-direction: column; display: flex; gap: 0; } .mobile-nav-drawer-body .nav-list li { width: 100%; height: auto; } .mobile-nav-drawer-body .nav-list a { padding: 15px 20px; width: 100%; height: auto; font-weight: 500; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--bg-grey-soft); background: transparent; position: relative; } .mobile-nav-drawer-body .nav-list a.active { background-color: var(--bg-grey-softest); } .mobile-nav-drawer-body .nav-list a.active::after { content: ""; position: absolute; left: 0; width: 4px; height: 100%; top: 0; background: var(--secondary-color); } .mobile-nav-drawer-body .nav-submenu { position: static; visibility: visible; opacity: 1; transform: none; pointer-events: auto; box-shadow: none; background: #fdfdfd; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; border-radius: 0; } .mobile-nav-drawer-body .nav-submenu li { border-bottom: 1px solid #efefef; } .mobile-nav-drawer-body .nav-submenu a { padding: 12px 35px; font-size: 14px; border-bottom: none; } .mobile-nav-drawer-body .nav-item-has-submenu.open .nav-submenu { max-height: 500px; } .mobile-nav-drawer-body .nav-item-has-submenu > a .nav-arrow { transition: transform 0.3s ease; } .mobile-nav-drawer-body .nav-item-has-submenu.open > a .nav-arrow { transform: rotate(180deg); } .mobile-nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1999; display: none; opacity: 0; transition: opacity 0.3s ease; } .mobile-nav-overlay.active { display: block; opacity: 1; } .site-header { position: fixed; top: 0; left: 0; width: 100%; background: var(--bg-white); height: 74px; display: flex; align-items: center; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } .header-top { width: 100%; height: 100%; } .header-top__inner { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; height: 100%; } .main-nav { display: flex; height: 100%; z-index: 1005; } .nav-list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; height: 100%; } .nav-list li { height: 100%; position: relative; } .nav-list a { font-size: 15px; font-weight: 500; color: var(--text-heading); text-decoration: none; transition: all 0.3s ease; position: relative; display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px; } .nav-arrow { width: 10px; height: 10px; transition: transform 0.3s ease; opacity: 0.7; } .nav-item-has-submenu:hover .nav-arrow { transform: rotate(180deg); opacity: 1; } .nav-list a::after { content: ""; position: absolute; left: 0; bottom: 0px; width: 0; height: 2px; background: var(--secondary-color); transition: width 0.3s ease; } .nav-list a:hover::after, .nav-list a.active::after { width: 100%; } .nav-list a:hover { color: var(--secondary-color); background-color: var(--bg-grey-light); } .nav-list a.active { background-color: var(--bg-grey-light); color: var(--secondary-color); } .nav-submenu { position: absolute; top: 100%; left: 0; min-width: 260px; background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%); list-style: none; margin: 0; border-top: 2px solid var(--secondary-color); z-index: 2000; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; overflow: hidden; visibility: hidden; opacity: 0; transform: translateY(4px); transition: all 0.3s ease; pointer-events: none; padding: 0px; } .nav-submenu::before { content: ""; position: absolute; top: -10px; left: 0; width: 100%; height: 100px; z-index: -1; } .nav-submenu li { height: auto; background-color: #ffffff; } .nav-submenu li:nth-child(even) { background-color: #f9fbfd; } .nav-submenu a { display: block; padding: 10px 14px; line-height: 1.2; white-space: nowrap; color: var(--text-heading); font-weight: 600; transition: color 0.25s ease, background-color 0.25s ease; } .nav-submenu a:hover { background: var(--primary-color); color: white; } .nav-item-has-submenu:hover .nav-submenu { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; } .absolute-orange-container { position: absolute; top: 0; right: 0; width: 260px; height: 100px; display: flex; flex-direction: column; z-index: 1001; } .header-top-blue { background-color: var(--primary-color); color: white; height: 50px; display: flex; align-items: center; padding: 0px 15px; gap: 12px; } .reach-text { font-size: 14px; font-weight: 500; } .social-icons-wrapper { display: flex; gap: 8px; } .social-icon-circle { width: 32px; height: 32px; background: white; color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; text-decoration: none; transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; } .social-icon-circle:hover { background: var(--secondary-color); color: white; transform: translateY(-2px); } .header-bottom-orange { background-color: var(--secondary-color); flex: 1; display: flex; align-items: center; padding: 0 12px; gap: 10px; } .cta-icon-box { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .cta-icon-link { width: 100%; height: 100%; background: var(--secondary-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; } .cta-icon-link img { width: 13px; height: 13px; object-fit: contain; } .cta-text-box { display: flex; flex-direction: column; justify-content: center; gap: 2px; } .cta-label { font-size: 13px; color: var(--bg-white); font-weight: 500; line-height: 1; } .absolute-orange-mail { width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; background: var(--primary-color); text-decoration: none; flex-shrink: 0; display: none; } .absolute-orange-mail img { width: 13px; height: 13px; object-fit: contain; } .cta-text-box .cta-phone-num { font-size: 19px; font-weight: 700; color: var(--bg-white); text-decoration: none; line-height: 1; } .header-bottom-left { position: absolute; bottom: 0; left: 0px; z-index: 5; } .site-footer { background-color: var(--navy-blue); color: var(--bg-white); padding-top: 35px; position: relative; } .footer-top-row { padding-bottom: 24px; border-bottom: 2px solid rgba(255, 255, 255, 0.05); margin-bottom: 6px; } .footer-logo-box { background: var(--bg-white); padding: 10px 18px; border-radius: 10px; } .footer-logo { height: 30px; width: auto; } .payment-mode { display: flex; justify-content: center; align-items: center; } .footer-heading.payment { margin-bottom: 5px; font-size: 17px; } .payment-icons { display: flex; } .payment-icons img { height: 30px; width: auto; } .footer-social-links { display: flex; gap: 15px; } .social-icon-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease; font-size: 15px; background-color: var(--bg-white); color: var(--navy-blue); } .social-icon-btn:hover { background-color: var(--secondary-color); opacity: 1; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .footer-main-content { padding-top: 10px; padding-bottom: 10px; } .footer-heading { font-size: 20px; font-weight: 700; margin-bottom: 22px; color: var(--bg-white); white-space: nowrap; } .footer-links { list-style: none; padding: 0; } .footer-links li { margin-bottom: 15px; } .footer-links a { color: var(--bg-white); text-decoration: none; font-size: 16px; opacity: 0.85; transition: opacity 0.3s ease; } .footer-links a:hover { color: var(--secondary-color); } .contact-item-box { display: flex; gap: 15px; margin-bottom: 10px; } .contact-icon { width: 40px; height: 40px; background: var(--bg-white); color: var(--bg-dark-blue); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .contact-text span { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-bottom: 2px; } .contact-text a, .contact-text p { color: var(--bg-white); font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; } .footer-bottom-part { position: relative; background-color: var(--bg-navy-dark); display: flex; justify-content: space-between; padding: 0 20px; align-items: center; } .footer-bottom-tag { color: var(--accent-orange); font-weight: 500; text-decoration: none; } .floating-contact-card { background: var(--bg-white); border-radius: 40px 40px 0 0; padding: 10px 0px; width: 100%; max-width: 700px; margin: 0 auto; position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); color: var(--grey-333); z-index: 10; } .contact-card-inner { display: flex; align-items: center; justify-content: center; gap: 20px; } .card-segment { display: flex; align-items: center; gap: 15px; } .segment-icon { width: 50px; height: 50px; background: var(--primary-accent); color: var(--bg-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; } .segment-info { display: flex; flex-direction: column; } .segment-label { font-size: 15px; color: var(--bg-black); } .segment-value { font-weight: 800; color: var(--bg-black); font-size: 19px; } .segment-divider { width: 1px; height: 70px; background: var(--primary-accent); opacity: 0.5; } .footer-copyright-bar, .footer-design-by { padding: 18px; text-align: center; background-color: var(--bg-navy-dark); } .footer-copyright-bar p, .footer-design-by p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.4); } @media (min-width: 1400px) { .header-top__inner { padding-right: 260px; width: 100%; justify-content: space-between; gap: 8px; } } @media (max-width: 1155px) { .header-top__inner { padding-right: 0; gap: 8px; } .absolute-orange-container { width: fit-content; } .header-top-blue { justify-content: center; } .reach-text { display: none; } .header-bottom-orange { justify-content: center; } .cta-text-box { display: none; } } @media (max-width: 1080px) { .header-top__inner { justify-content: space-between; } .absolute-orange-container { height: 100%; background-color: transparent; position: relative; } .header-bottom-orange { height: 100%; background-color: transparent; } .cta-icon-box { background-color: var(--secondary-color); border-radius: 50%; } .header-top-blue { display: none; } .cta-icon-link { background-color: var(--secondary-dark); border-radius: 50%; } .absolute-orange-mail { display: flex; } } @media (max-width: 992px) { .site-header { padding-left: 1rem; } .header-top__inner { gap: 1.5rem; justify-content: flex-start; } .nav-list a { font-size: 13px; } .contact-card-inner { gap: 40px; } } @media (max-width: 767px) { .mobile-menu-toggle { display: flex; flex-direction: column; justify-content: space-around; align-items: center; width: 40px; height: 40px; z-index: 1000; } .mobile-menu-toggle .bar { display: block; width: 25px; height: 3px; background-color: var(--primary-color); border-radius: 3px; transition: all 0.3s ease-in-out; } .mobile-menu-toggle.open .bar-1 { transform: translateY(11px) rotate(45deg); } .mobile-menu-toggle.open .bar-2 { opacity: 0; transform: translateX(-20px); } .mobile-menu-toggle.open .bar-3 { transform: translateY(-11px) rotate(-45deg); } .main-nav { display: none; } .nav-submenu { border-top: none; } .header-top { justify-content: flex-start; } .header-top__inner { justify-content: flex-start; gap: 1rem; } .floating-contact-card { display: none; } .contact-card-inner { flex-direction: column; gap: 25px; } .segment-divider { display: none; } } @media (max-width: 480px) { .header-logo { width: 120px; } .absolute-orange-container { width: 180px; height: 100px; } .header-top-blue { padding: 15px; } .header-bottom-orange { gap: 10px; padding: 15px; } .cta-icon-box, .absolute-orange-mail { width: 30px; height: 30px; } .cta-label { font-size: 13px; } .cta-text-box .cta-phone-num { font-size: 14px; } .absolute-orange-container .social-icons-wrapper { display: none; } } .breadcrumb-slider-wrap { background: #fff; border-bottom: 1px solid var(--border-color); position: sticky; top: 74px; z-index: 100; padding: 12px 0; min-height: 48px; } .breadcrumb-slider { display: flex; overflow-x: auto; white-space: nowrap; gap: 25px; scrollbar-width: none; -ms-overflow-style: none; padding: 0 50px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; justify-content: center; } .breadcrumb-slider::-webkit-scrollbar { display: none; } .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: #fff; border: 1px solid var(--border-color); border-radius: 50%; z-index: 10; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); transition: all 0.3s ease; } .slider-arrow:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; } .prev-arrow { left: 8px; } .next-arrow { right: 8px; } .arrow-icon { width: 8px; height: 8px; border-top: 2px solid var(--primary-color); border-right: 2px solid var(--primary-color); display: inline-block; } .prev-arrow .arrow-icon { transform: rotate(-135deg); margin-left: 3px; } .next-arrow .arrow-icon { transform: rotate(45deg); margin-right: 3px; } .breadcrumb-slider-wrap::before, .breadcrumb-slider-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; pointer-events: none; z-index: 5; } .breadcrumb-slider-wrap::before { left: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0.9), transparent); } .breadcrumb-slider-wrap::after { right: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0.9), transparent); } .breadcrumb-item-link { color: var(--text-heading); text-decoration: none; font-size: 14px; font-weight: 600; transition: color 0.3s; } .breadcrumb-item-link:hover, .breadcrumb-item-link.active { color: var(--primary-color); } .cta-banner { position: relative; overflow: hidden; background-color: var(--primary-color) !important; background-image: linear-gradient( 30deg, var(--deep-blue) 12%, transparent 12.5%, transparent 87%, var(--deep-blue) 87.5%, var(--deep-blue) ), linear-gradient( 150deg, var(--deep-blue) 12%, transparent 12.5%, transparent 87%, var(--deep-blue) 87.5%, var(--deep-blue) ), linear-gradient( 30deg, var(--deep-blue) 12%, transparent 12.5%, transparent 87%, var(--deep-blue) 87.5%, var(--deep-blue) ), linear-gradient( 150deg, var(--deep-blue) 12%, transparent 12.5%, transparent 87%, var(--deep-blue) 87.5%, var(--deep-blue) ), linear-gradient( 60deg, var(--deep-blue) 77 25%, transparent 25.5%, transparent 75%, var(--deep-blue) 77 75%, var(--deep-blue) 77 ), linear-gradient( 60deg, var(--deep-blue) 77 25%, transparent 25.5%, transparent 75%, var(--deep-blue) 77 75%, var(--deep-blue) 77 ) !important; background-size: 80px 140px !important; background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px !important; } .cta-banner::before { content: ""; position: absolute; inset: 0; background-image: url("../img/pattern-bg.webp"); background-repeat: repeat; background-size: 2200px auto; pointer-events: none; z-index: 1; opacity: 0.6; } .cta-banner .container { position: relative; z-index: 2; } @media (max-width: 767px) { .breadcrumb-slider { justify-content: flex-start; padding: 0 40px; } } .fleet-explorer-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 30px; } .fleet-explorer-card { background: var(--bg-white); border: 1px solid #e2e8f0; border-top: 4px solid var(--primary-color); border-radius: 16px; padding: 22px 20px; text-align: center; transition: all 0.3s ease; display: flex; flex-direction: column; min-width: 300px; flex: 1; max-width: 400px; } .fleet-explorer-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); } .fleet-explorer-card h5 { font-size: 1.1rem; font-weight: 700; color: var(--text-heading); margin-bottom: 8px; } .fleet-explorer-card .fleet-meta { font-size: 0.85rem; color: var(--grey-666); margin-bottom: 15px; } .fleet-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 15px; border-top: 1px solid #f1f5f9; gap: 8px; } .fleet-explorer-card .fleet-price { font-size: 1.1rem; font-weight: 800; color: var(--primary-color); margin: 0; } .fleet-explorer-card .btn-fleet { display: inline-block; padding: 8px 18px; border-radius: 20px; border: 1.5px solid var(--primary-color); color: var(--primary-color); font-weight: 600; font-size: 0.85rem; text-decoration: none; transition: all 0.3s; } .fleet-explorer-card .btn-fleet:hover { background: var(--primary-color); color: white; } @media (max-width: 1200px) { .fleet-explorer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .fleet-explorer-grid { grid-template-columns: 1fr; } } .bg-section-white { background-color: #ffffff !important; } .bg-section-gray { background-color: #f4f4f4 !important; } .rounded-pill.badge { background-color: var(--accent-color); color: white; padding: 5px 10px; border-radius: 20px; font-size: 13px; font-weight: 600; border: none; } .badge-premium { background-color: var(--secondary-color); color: white; padding: 5px 10px; border-radius: 20px; font-size: 13px; } .feature-card-new { background: #fff; border: 1px solid var(--border-color); border-radius: 12px; padding: 1.25rem; height: 100%; } .feature-card-new h4 { font-size: 16px; font-weight: 700; margin-bottom: 0; color: var(--primary-dark); } .feature-card-new p { font-size: 14px; line-height: 1.5; margin-bottom: 0; } .feature-icon-new { flex-shrink: 0; margin-right: 12px; display: flex; align-items: center; justify-content: center; } .feature-icon-new img { width: 30px; height: 30px; object-fit: contain; } .pricing-card-custom { height: 100%; border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; padding: 0; font-size: 14px; } .pricing-card-custom .card-header { padding: 1rem 1.22rem; border-bottom: 0; } .pricing-card-custom .card-body { padding: 1rem 1.22rem; font-size: 15px; } .pricing-card-custom .card-footer { padding: 1rem 1.22rem; background-color: #f4f4f4; border-top: 0; display: flex; gap: 10px; } .card-category { font-size: 13px; font-weight: 700; text-transform: uppercase; margin-bottom: 0.5rem; width: 100%; text-align: center; background-color: var(--accent-orange); width: fit-content; padding: 2px 10px; border-radius: 20px; } .pricing-card-custom h5 { font-size: 14px; font-weight: 700; text-transform: uppercase; margin-bottom: 0.5rem; width: 100%; text-align: center; } .pricing-card-custom h3 { font-size: 16px; font-weight: 700; color: var(--primary-color); margin-bottom: 0; text-align: center; } .pricing-card-custom .price-tag { font-size: 1rem; font-weight: 700; color: var(--text-dark, #333); } .pricing-card-custom ul li { font-size: 14px; margin-bottom: 0.5rem; } .pricing-card-custom.featured { box-shadow: none; } .pricing-card-custom.featured .card-header { background-color: var(--primary-color); color: white; } .pricing-card-custom.featured h5 { color: rgba(255, 255, 255, 0.8); } .pricing-card-custom.featured h3 { color: white; } .pricing-card-custom.featured .price-tag { color: var(--primary-color); } .whatsapp-btn-card { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background-color: #fff; border-radius: 50%; transition: transform 0.2s ease; flex-shrink: 0; text-decoration: none; } .whatsapp-btn-card img { width: 20px; height: 20px; } .whatsapp-btn-card:hover { background-color: var(--secondary-color); transform: scale(1.05); } .stat-card-horizontal { display: flex; align-items: center; background: #fff; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); height: 100%; border: 1px solid var(--border-color, #e5e7eb); } .stat-card-icon { flex-shrink: 0; width: 60px; height: 60px; background-color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .stat-card-icon img { filter: brightness(0) invert(1); width: 32px; height: 32px; object-fit: contain; } .stat-card-info { margin-left: 1rem; text-align: left; } .stat-card-value { font-size: 1.25rem; font-weight: 800; color: var(--primary-dark, #1e3a5f); line-height: 1.2; } .stat-card-label { font-size: 0.85rem; color: #4b5563; font-weight: 500; margin: 0; } .testi-card-new { background: var(--bg-white, #fff); border-radius: 30px; padding: 0; height: 100%; position: relative; overflow: hidden; border: 1px solid var(--bg-grey-soft, #f0f0f0); transition: all 0.3s ease; } .testi-card-header { position: relative; display: flex; align-items: center; padding: 30px 20px 10px; gap: 15px; min-height: 120px; } .testi-card-header::before { content: ""; position: absolute; top: 40px; left: 0; width: 57px; height: 60px; background: var(--bg-dark-blue, #1e3a5f); z-index: 0; } .testi-user-img { width: 65px; height: 65px; border-radius: 50%; object-fit: cover; position: relative; z-index: 2; margin-left: 16px; border: none; } .testi-name-group { position: relative; z-index: 2; flex-grow: 1; } .testi-name-group h4 { color: var(--text-heading, #111); font-size: 15px; font-weight: 800; margin-bottom: 2px; } .testi-name-group p { color: #888; font-size: 14px; margin: 0; } .testi-body-new { padding: 0px 30px 40px; } .testi-content-text { color: #333; font-size: 14px; line-height: 1.7; } .testi-accent { position: absolute; bottom: 20px; right: 30px; opacity: 0.1; } .related-pages-section { padding: 48px 0 24px; background: linear-gradient(180deg, #fbfcfd 0%, #ffffff 100%); border-top: 1px solid var(--border-color, #e5e7eb); } .related-pages-title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; color: var(--text-heading, #1a1a1a); margin: 0 0 24px; text-align: center; } .related-pages-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .related-pages-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: #fff; border: 1px solid var(--border-color, #e5e7eb); border-radius: 14px; text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; position: relative; } .related-pages-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 97, 135, 0.08); border-color: var(--primary-color, #006187); } .related-pages-card-label { font-size: 1rem; font-weight: 700; color: var(--text-heading, #1a1a1a); } .related-pages-card-subtitle { font-size: 0.85rem; color: var(--text-light, #6b7280); line-height: 1.4; } .related-pages-card-arrow { position: absolute; right: 18px; top: 18px; font-size: 1.1rem; color: var(--secondary-color, #c46200); transition: transform 0.18s ease; } .related-pages-card:hover .related-pages-card-arrow { transform: translateX(4px); } @media (max-width: 768px) { .related-pages-grid { grid-template-columns: 1fr; } .related-pages-section { padding: 32px 0 16px; } }