/* ========================================== FREEQUOTEPRO - OUR CORE VALUES PREMIUM GLASS IMAGE FRAMES ========================================== */ /* Independent animated reflection angle */ @property --core-glass-angle { syntax: ""; inherits: false; initial-value: 225deg; } /* ========================================== 1. IMAGE FRAME FOUNDATION ========================================== */ .our-core-values .core-value-image { --core-frame-radius: 22px; --core-frame-width: 5px; position: relative; isolation: isolate; /* Keep original image dimensions */ border-radius: var(--core-frame-radius); /* Metallic depth */ box-shadow: 0 24px 48px -22px rgba(11, 49, 91, 0.38), 0 10px 24px -14px rgba(11, 49, 91, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.65); transition: box-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1); } /* Keep figure shape */ .our-core-values .core-value-image figure { border-radius: inherit; } /* Preserve image and existing animations */ .our-core-values .core-value-image figure img { border-radius: inherit; } /* ========================================== 2. GLASS GLOW BEHIND IMAGE ========================================== */ .our-core-values .core-value-image::before { content: ""; position: absolute; z-index: -1; inset: -10px; border-radius: inherit; pointer-events: none; background: radial-gradient( ellipse at 0% 15%, rgba(225, 237, 245, 0.5), transparent 48% ), radial-gradient( ellipse at 100% 75%, rgba(255, 130, 28, 0.28), transparent 48% ); filter: blur(14px); opacity: 0.65; transition: opacity 600ms ease; } /* ========================================== 3. REFLECTIVE GLASS BORDER ========================================== */ .our-core-values .core-value-image::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), inset 0 2px 2px rgba(255, 255, 255, 0.25); } /* ========================================== 4. ADVANCED GLASS RIM ========================================== */ @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .our-core-values .core-value-image::after { padding: var(--core-frame-width); background: conic-gradient( from var(--core-glass-angle), rgba(255, 255, 255, 0.12) 0%, rgba(225, 237, 245, 0.95) 12%, rgba(255, 255, 255, 0.45) 24%, transparent 42%, rgba(255, 130, 28, 0.95) 59%, rgba(255, 195, 130, 0.7) 65%, transparent 80%, rgba(255, 255, 255, 0.12) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: --core-glass-angle 900ms cubic-bezier(0.25, 1, 0.5, 1); } } /* ========================================== 5. HOVER REFLECTION ========================================== */ @media (hover: hover) and (pointer: fine) { .our-core-values .core-value-image:hover::after { --core-glass-angle: 255deg; } .our-core-values .core-value-image:hover::before { opacity: 0.9; } .our-core-values .core-value-image:hover { box-shadow: 0 26px 52px -22px rgba(11, 49, 91, 0.42), 0 12px 26px -14px rgba(11, 49, 91, 0.25), 0 0 20px rgba(255, 130, 28, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.7); } } /* ========================================== 6. RESPONSIVE ========================================== */ @media (max-width: 991px) { .our-core-values .core-value-image { --core-frame-radius: 20px; --core-frame-width: 4px; } } @media (max-width: 575px) { .our-core-values .core-value-image { --core-frame-radius: 16px; --core-frame-width: 3px; } .our-core-values .core-value-image::before { inset: -6px; filter: blur(10px); } } /* ========================================== 7. REDUCED MOTION ========================================== */ @media (prefers-reduced-motion: reduce) { .our-core-values .core-value-image, .our-core-values .core-value-image::before, .our-core-values .core-value-image::after { transition: none; } } /* ========================================== FREEQUOTEPRO - OUR ACTIVITY PREMIUM GLASS IMAGE FRAME ========================================== */ /* Independent animated angle */ @property --activity-glass-angle { syntax: ""; inherits: false; initial-value: 225deg; } /* ========================================== 1. GLASS FRAME FOUNDATION ========================================== */ .our-activity .activity-item-image figure { --activity-frame-width: 5px; position: relative; isolation: isolate; /* Preserve original image dimensions */ /* Preserve original border radius */ box-shadow: 0 24px 48px -22px rgba(11, 49, 91, 0.38), 0 10px 24px -14px rgba(11, 49, 91, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.65); transition: box-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1); } /* ========================================== 2. SOFT GLASS GLOW ========================================== */ /* The image-anime class may already use ::after for its shine animation. Use ::before for the outer glow. */ .our-activity .activity-item-image figure::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient( 115deg, rgba(255, 255, 255, 0.12) 0%, transparent 32%, transparent 72%, rgba(255, 130, 28, 0.08) 100% ); opacity: 0.5; transition: opacity 600ms ease; } /* ========================================== 3. REFLECTIVE GLASS BORDER ========================================== */ .our-activity .activity-item-image figure::after { content: ""; position: absolute; inset: 0; z-index: 5; width: auto; height: auto; transform: none; border-radius: inherit; pointer-events: none; --activity-glass-angle: 225deg; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.25); } /* ========================================== 4. ADVANCED GLASS RIM ========================================== */ @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .our-activity .activity-item-image figure::after { padding: var(--activity-frame-width); background: conic-gradient( from var(--activity-glass-angle), rgba(255, 255, 255, 0.12) 0%, rgba(225, 237, 245, 0.95) 12%, rgba(255, 255, 255, 0.45) 24%, transparent 42%, rgba(255, 130, 28, 0.95) 59%, rgba(255, 195, 130, 0.7) 65%, transparent 80%, rgba(255, 255, 255, 0.12) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: --activity-glass-angle 900ms cubic-bezier(0.25, 1, 0.5, 1); } } /* ========================================== 5. HOVER - MOVING GLASS REFLECTION ========================================== */ @media (hover: hover) and (pointer: fine) { .our-activity .activity-item:hover .activity-item-image figure::after { --activity-glass-angle: 255deg; } .our-activity .activity-item:hover .activity-item-image figure::before { opacity: 0.85; } .our-activity .activity-item:hover .activity-item-image figure { box-shadow: 0 26px 52px -22px rgba(11, 49, 91, 0.42), 0 12px 26px -14px rgba(11, 49, 91, 0.25), 0 0 20px rgba(255, 130, 28, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.7); } } /* ========================================== 6. RESPONSIVE ========================================== */ @media (max-width: 991px) { .our-activity .activity-item-image figure { --activity-frame-width: 4px; } } @media (max-width: 575px) { .our-activity .activity-item-image figure { --activity-frame-width: 3px; } } /* ========================================== 7. REDUCED MOTION ========================================== */ @media (prefers-reduced-motion: reduce) { .our-activity .activity-item-image figure, .our-activity .activity-item-image figure::before, .our-activity .activity-item-image figure::after { transition: none; } } /* ========================================== FREEQUOTEPRO - WHAT WE DO PREMIUM GLASS IMAGE FRAMES ========================================== */ /* Independent animated angle */ @property --what-we-glass-angle { syntax: ""; inherits: false; initial-value: 225deg; } /* ========================================== 1. GLASS FRAME FOUNDATION ========================================== */ .what-we-do .what-we-image figure { --what-we-frame-width: 5px; position: relative; isolation: isolate; /* Preserve original image dimensions */ /* Preserve original border radius */ box-shadow: 0 24px 48px -22px rgba(11, 49, 91, 0.38), 0 10px 24px -14px rgba(11, 49, 91, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.65); transition: box-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1); } /* ========================================== 2. GLASS REFLECTION - FALLBACK ========================================== */ .what-we-do .what-we-image figure::after { content: ""; position: absolute; inset: 0; z-index: 5; width: auto; height: auto; border-radius: inherit; pointer-events: none; transform: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.25); } /* ========================================== 3. ADVANCED GLASS BORDER ========================================== */ @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .what-we-do .what-we-image figure::after { padding: var(--what-we-frame-width); background: conic-gradient( from var(--what-we-glass-angle), rgba(255, 255, 255, 0.12) 0%, rgba(225, 237, 245, 0.95) 12%, rgba(255, 255, 255, 0.45) 24%, transparent 42%, rgba(255, 130, 28, 0.95) 59%, rgba(255, 195, 130, 0.7) 65%, transparent 80%, rgba(255, 255, 255, 0.12) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: --what-we-glass-angle 900ms cubic-bezier(0.25, 1, 0.5, 1); } } /* ========================================== 4. HOVER - MOVING REFLECTION ========================================== */ @media (hover: hover) and (pointer: fine) { .what-we-do .what-we-image:hover figure::after { --what-we-glass-angle: 255deg; } .what-we-do .what-we-image:hover figure { box-shadow: 0 26px 52px -22px rgba(11, 49, 91, 0.42), 0 12px 26px -14px rgba(11, 49, 91, 0.25), 0 0 20px rgba(255, 130, 28, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.7); } } /* ========================================== 5. RESPONSIVE ========================================== */ @media (max-width: 991px) { .what-we-do .what-we-image figure { --what-we-frame-width: 4px; } } @media (max-width: 575px) { .what-we-do .what-we-image figure { --what-we-frame-width: 3px; } } /* ========================================== 6. REDUCED MOTION ========================================== */ @media (prefers-reduced-motion: reduce) { .what-we-do .what-we-image figure, .what-we-do .what-we-image figure::after { transition: none; } } /* ========================================== FREEQUOTEPRO - WHAT WE DO COUNTER STACKING FIX ========================================== */ /* Parent container */ .what-we-do .what-we-do-image-box { isolation: isolate; } /* Images below counter */ .what-we-do .what-we-image { z-index: 1; } /* Counter above images and glass effects */ .what-we-do .what-we-counter-box { z-index: 20 !important; } /* Counter content */ .what-we-do .what-we-counter-content { z-index: 21; } /* Preserve visibility */ .what-we-do .what-we-counter-content h2, .what-we-do .what-we-counter-content h2 span { opacity: 1; visibility: visible; } /* ========================================== FREEQUOTEPRO - WHAT WE DO COUNTER LAYOUT FIX ========================================== */ .what-we-do .what-we-counter-content { display: flex; flex-wrap: nowrap !important; align-items: stretch; justify-content: center; max-height: 200px; overflow: hidden; border-radius: 20px; } /* Vertical label */ .what-we-do .what-we-counter-content p { flex: 0 0 auto; margin: 0; } /* Counter number */ .what-we-do .what-we-counter-content h2 { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; margin: 0; white-space: nowrap; font-size: clamp(38px, 5vw, 72px); line-height: 1; } /* Animated number */ .what-we-do .what-we-counter-content h2 .counter { font-size: inherit; line-height: inherit; } /* ========================================== FREEQUOTEPRO - WHY CHOOSE US PREMIUM GLASS IMAGE FRAMES ========================================== */ /* Animated glass reflection */ @property --why-glass-angle { syntax: ""; inherits: false; initial-value: 225deg; } /* ========================================== 1. IMAGE FRAME FOUNDATION ========================================== */ .why-choose-us .why-choose-item-image figure, .why-choose-us .why-choose-us-image figure { --why-frame-width: 5px; --why-glass-angle: 225deg; position: relative; isolation: isolate; /* Preserve original width, height and radius */ transition: box-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1); } /* ========================================== 2. GLASS FRAME FALLBACK ========================================== */ .why-choose-us .why-choose-item-image figure::after, .why-choose-us .why-choose-us-image figure::after { content: ""; position: absolute; inset: 0; z-index: 5; width: auto; height: auto; transform: none; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.25); } /* ========================================== 3. PREMIUM REFLECTIVE GLASS RIM ========================================== */ @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .why-choose-us .why-choose-item-image figure::after, .why-choose-us .why-choose-us-image figure::after { padding: var(--why-frame-width); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: --why-glass-angle 900ms cubic-bezier(0.25, 1, 0.5, 1); } } /* ========================================== 4. HOVER - MOVING REFLECTION ========================================== */ @media (hover: hover) and (pointer: fine) { /* Small images */ .why-choose-us .why-choose-item:hover .why-choose-item-image figure::after { --why-glass-angle: 255deg; } /* Main image */ .why-choose-us .why-choose-us-image:hover figure::after { --why-glass-angle: 255deg; } /* Metallic glow on hover */ .why-choose-us .why-choose-item:hover .why-choose-item-image figure, .why-choose-us .why-choose-us-image:hover figure { box-shadow: 0 26px 52px -22px rgba(11, 49, 91, 0.42), 0 12px 26px -14px rgba(11, 49, 91, 0.25), 0 0 20px rgba(255, 130, 28, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.7); } } /* ========================================== 5. RESPONSIVE ========================================== */ @media (max-width: 991px) { .why-choose-us .why-choose-item-image figure, .why-choose-us .why-choose-us-image figure { --why-frame-width: 4px; } } @media (max-width: 575px) { .why-choose-us .why-choose-item-image figure, .why-choose-us .why-choose-us-image figure { --why-frame-width: 3px; } } /* ========================================== 6. REDUCED MOTION ========================================== */ @media (prefers-reduced-motion: reduce) { .why-choose-us .why-choose-item-image figure, .why-choose-us .why-choose-us-image figure, .why-choose-us .why-choose-item-image figure::after, .why-choose-us .why-choose-us-image figure::after { transition: none; } } /* ========================================== FREEQUOTEPRO - OUR APPROACH OUR SERVICES GLASS CARD DESIGN ========================================== */ /* Animated reflective frame */ @property --approach-glass-angle { syntax: ""; inherits: false; initial-value: 225deg; } /* ========================================== 1. CARD FOUNDATION ========================================== */ .our-approach .approach-item { --approach-frame-width: 3px; --approach-glass-angle: 225deg; position: relative; isolation: isolate; /* Same glass surface as Our Services */ background-color: var(--dark-divider-color); backdrop-filter: blur(30px) saturate(135%); -webkit-backdrop-filter: blur(30px) saturate(135%); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; /* Preserve original dimensions and padding */ box-shadow: 0 18px 38px -22px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: background-color 400ms ease, border-color 400ms ease, box-shadow 400ms ease; } /* ========================================== 2. ORIGINAL HOVER BACKGROUND ========================================== */ /* Preserve the original approach animation, but match the glass styling of Our Services */ .our-approach .approach-item::before { border-radius: inherit; background: linear-gradient( 145deg, rgba(11, 47, 88, 0.96), rgba(11, 47, 88, 0.88) ); pointer-events: none; } /* ========================================== 3. PREMIUM GLASS BORDER ========================================== */ .our-approach .approach-item::after { content: ""; position: absolute; inset: 0; z-index: 3; width: auto; height: auto; padding: var(--approach-frame-width); border-radius: inherit; pointer-events: none; background: conic-gradient( from var(--approach-glass-angle), rgba(255, 255, 255, 0.12) 0%, rgba(225, 237, 245, 0.95) 12%, rgba(255, 255, 255, 0.45) 24%, transparent 42%, rgba(255, 130, 28, 0.95) 59%, rgba(255, 195, 130, 0.75) 65%, transparent 80%, rgba(255, 255, 255, 0.12) 100% ); /* Fallback border */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20); transition: --approach-glass-angle 900ms cubic-bezier(0.25, 1, 0.5, 1); } /* ========================================== 4. GLASS BORDER MASK ========================================== */ @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .our-approach .approach-item::after { -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } } /* ========================================== 5. KEEP ICONS AND CONTENT VISIBLE ========================================== */ .our-approach .approach-item .icon-box, .our-approach .approach-item-content { position: relative; z-index: 2; } /* Icon */ .our-approach .approach-item .icon-box img { max-width: 60px; } /* Heading */ .our-approach .approach-item-content h3 { color: #FFFFFF; } /* Description */ .our-approach .approach-item-content p { color: rgba(255, 255, 255, 0.90); } /* ========================================== 6. HOVER - GLASS REFLECTION ========================================== */ @media (hover: hover) and (pointer: fine) { .our-approach .approach-item:hover::after { --approach-glass-angle: 255deg; } .our-approach .approach-item:hover { border-color: rgba(255, 255, 255, 0.30); box-shadow: 0 22px 45px -20px rgba(0, 0, 0, 0.36), 0 0 22px rgba(255, 130, 28, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.28); } .our-approach .approach-item:hover .approach-item-content h3 { color: #FFFFFF; } .our-approach .approach-item:hover .approach-item-content p { color: #FFFFFF; } } /* Keyboard interaction */ .our-approach .approach-item:focus-within::after { --approach-glass-angle: 255deg; } /* ========================================== 7. RESPONSIVE ========================================== */ @media (max-width: 991px) { .our-approach .approach-item { --approach-frame-width: 2.5px; } } @media (max-width: 575px) { .our-approach .approach-item { --approach-frame-width: 2px; } } /* ========================================== 8. REDUCED MOTION ========================================== */ @media (prefers-reduced-motion: reduce) { .our-approach .approach-item, .our-approach .approach-item::before, .our-approach .approach-item::after { transition: none; } } /* ========================================== FREEQUOTEPRO - SUCCESS STATS PREMIUM GLASS IMAGE FRAME ========================================== */ /* Independent animated reflection */ @property --stats-glass-angle { syntax: ""; inherits: false; initial-value: 225deg; } /* ========================================== 1. IMAGE FRAME FOUNDATION ========================================== */ .success-stats .success-stats-image figure { --stats-frame-width: 5px; position: relative; isolation: isolate; /* Preserve original dimensions */ /* Preserve original border radius */ box-shadow: 0 24px 48px -22px rgba(0, 0, 0, 0.45), 0 10px 24px -14px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.65); transition: box-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1); } /* ========================================== 2. PRESERVE ORIGINAL IMAGE OVERLAY ========================================== */ /* The original ::before is responsible for the dark gradient over the image. We do not replace or modify it. */ /* ========================================== 3. GLASS BORDER - FALLBACK ========================================== */ .success-stats .success-stats-image figure::after { content: ""; position: absolute; inset: 0; z-index: 5; width: auto; height: auto; transform: none; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.40), inset 0 2px 2px rgba(255, 255, 255, 0.25); } /* ========================================== 4. PREMIUM REFLECTIVE GLASS BORDER ========================================== */ @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .success-stats .success-stats-image figure::after { padding: var(--stats-frame-width); background: conic-gradient( from var(--stats-glass-angle), rgba(255, 255, 255, 0.12) 0%, rgba(225, 237, 245, 0.95) 12%, rgba(255, 255, 255, 0.45) 24%, transparent 42%, rgba(255, 130, 28, 0.95) 59%, rgba(255, 195, 130, 0.75) 65%, transparent 80%, rgba(255, 255, 255, 0.12) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: --stats-glass-angle 900ms cubic-bezier(0.25, 1, 0.5, 1); } } /* ========================================== 5. HOVER - MOVING GLASS REFLECTION ========================================== */ @media (hover: hover) and (pointer: fine) { .success-stats .success-stats-image-box:hover .success-stats-image figure::after { --stats-glass-angle: 255deg; } .success-stats .success-stats-image-box:hover .success-stats-image figure { box-shadow: 0 26px 52px -22px rgba(0, 0, 0, 0.52), 0 12px 26px -14px rgba(0, 0, 0, 0.34), 0 0 20px rgba(255, 130, 28, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7); } } /* ========================================== 6. RESPONSIVE ========================================== */ @media (max-width: 991px) { .success-stats .success-stats-image figure { --stats-frame-width: 4px; } } @media (max-width: 575px) { .success-stats .success-stats-image figure { --stats-frame-width: 3px; } } /* ========================================== 7. REDUCED MOTION ========================================== */ @media (prefers-reduced-motion: reduce) { .success-stats .success-stats-image figure, .success-stats .success-stats-image figure::after { transition: none; } } /* About page only: light FAQ section without the blue/parallax background. */ .our-faqs.fqp-about-faqs { background: var(--white-color); } .our-faqs.fqp-about-faqs .faq-accordion .accordion-item { background: var(--white-color); border-color: var(--divider-color); } .our-faqs.fqp-about-faqs .faq-accordion .accordion-header .accordion-button:focus-visible { outline-color: var(--primary-color); } /* ========================================== WHY FREEQUOTEPRO - ICON SIZE ========================================== */ .why-choose-item .why-choose-item-image { width: 65px; height: 65px; min-width: 65px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .why-choose-item .why-choose-item-image figure { width: 100%; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; } .why-choose-item .why-choose-item-image img { width: 55px !important; height: 55px !important; max-width: none; object-fit: contain; } /* RESPONSIVE */ @media (max-width: 767px) { .why-choose-item .why-choose-item-image { width: 55px; height: 55px; min-width: 55px; } .why-choose-item .why-choose-item-image img { width: 45px !important; height: 45px !important; } }