.inspirational-page .pill-list { /* Inspirational page only */ } .inspirational-page .pill-list a { /* Inspirational page only */ } /* ===================================================== ADSENSE SIDEBAR ===================================================== */ .quotes-sidebar { min-height:250px; } /* RELATED QUOTES */ /* ===================================================== RELATED QUOTES ===================================================== */ /* ========================================================= SATYAMBUZZ MORE INSPIRATIONAL QUOTES PREMIUM GOLD + RED 3D LUXURY ========================================================= */ section.related-quotes { position: relative !important; width: 100% !important; max-width: 1470px !important; margin: 40px auto !important; padding: 58px 62px 70px !important; overflow: hidden !important; isolation: isolate !important; background: linear-gradient( 120deg, #9b0500 0%, #d52b05 25%, #f09a16 52%, #d94a06 75%, #a90000 100% ) !important; border: 1px solid #ffd65a !important; box-shadow: 0 20px 55px rgba(120, 35, 0, 0.30), inset 0 1px 0 rgba(255, 248, 190, 0.75) !important; } /* ========================================================= LARGE 3D GOLD / RED BALL ========================================================= */ section.related-quotes::before { content: "" !important; position: absolute !important; width: 760px !important; height: 760px !important; right: -165px !important; top: -280px !important; border-radius: 50% !important; background: /* bright sphere highlight */ radial-gradient( circle at 31% 25%, #fffde0 0%, #fff2a3 5%, #ffd34d 12%, #f4a719 23%, transparent 31% ), /* rich red body */ radial-gradient( circle at 56% 58%, #ff7b08 0%, #ed4104 24%, #bd0800 48%, #850000 67%, #560000 82%, #380000 100% ) !important; box-shadow: -25px 35px 80px rgba(105, 0, 0, 0.40), inset -55px -60px 100px rgba(70, 0, 0, 0.55), inset 45px 35px 70px rgba(255, 245, 160, 0.55) !important; opacity: 1 !important; z-index: -3 !important; } /* ========================================================= GOLD RINGS AROUND THE 3D BALL ========================================================= */ section.related-quotes::after { content: "" !important; position: absolute !important; width: 850px !important; height: 850px !important; right: -210px !important; top: -325px !important; border-radius: 50% !important; background: radial-gradient( circle, transparent 0 35%, rgba(255, 242, 157, 0.95) 35.4% 37%, rgba(222, 157, 23, 0.95) 37.5% 40%, transparent 40.5% 47%, rgba(255, 226, 94, 0.98) 47.5% 49.5%, rgba(183, 35, 0, 0.85) 50% 53%, transparent 53.5% 61%, rgba(255, 205, 52, 0.95) 61.5% 63.5%, rgba(177, 21, 0, 0.85) 64% 68%, transparent 68.5% ) !important; transform: rotate(-18deg) scaleX(1.12) !important; filter: drop-shadow(0 8px 12px rgba(85, 0, 0, 0.28)) !important; opacity: 0.95 !important; z-index: -2 !important; pointer-events: none !important; } /* ========================================================= CONTENT ========================================================= */ section.related-quotes .related-quotes-content { position: relative !important; z-index: 10 !important; } /* ========================================================= DISCOVER MORE ========================================================= */ section.related-quotes .related-quotes-label { margin: 0 0 13px !important; color: #fff4a8 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 900 !important; letter-spacing: 3.5px !important; line-height: 1.2 !important; text-transform: uppercase !important; text-shadow: 0 2px 8px rgba(100, 0, 0, 0.35) !important; } /* GOLD LINE */ section.related-quotes .related-quotes-label::after { content: "" !important; display: inline-block !important; width: 100px !important; height: 2px !important; margin-left: 18px !important; vertical-align: middle !important; background: linear-gradient( 90deg, #fff7bc, #ffd44d, rgba(255, 255, 255, 0) ) !important; } /* ========================================================= MAIN HEADING ========================================================= */ section.related-quotes h2 { position: relative !important; margin: 0 0 14px !important; padding: 0 !important; color: #ffffff !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(44px, 5vw, 68px) !important; font-weight: 700 !important; line-height: 1.02 !important; letter-spacing: -1.5px !important; text-align: left !important; text-shadow: 0 3px 12px rgba(100, 0, 0, 0.35), 0 1px 1px rgba(255, 255, 255, 0.20) !important; } /* ========================================================= DESCRIPTION ========================================================= */ section.related-quotes .related-quotes-content > p { margin: 0 0 40px !important; padding: 0 !important; color: #fffdf1 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1.5 !important; text-shadow: 0 2px 8px rgba(100, 0, 0, 0.30) !important; } /* ========================================================= CARD GRID ========================================================= */ section.related-quotes .related-quote-links, section.related-quotes .cards-grid { position: relative !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; z-index: 20 !important; } /* ========================================================= PREMIUM GOLD / RED CARDS ========================================================= */ section.related-quotes .related-quote-links a, section.related-quotes .cards-grid a { position: relative !important; display: flex !important; flex-direction: column !important; justify-content: center !important; min-height: 132px !important; padding: 26px 30px 25px 42px !important; overflow: hidden !important; color: #ffffff !important; text-decoration: none !important; border: 1px solid rgba(255, 221, 91, 0.85) !important; border-radius: 16px !important; background: linear-gradient( 135deg, rgba(255, 225, 105, 0.98) 0%, rgba(228, 82, 5, 0.98) 3%, rgba(170, 10, 0, 0.96) 48%, rgba(116, 0, 0, 0.94) 100% ) !important; box-shadow: 0 12px 25px rgba(102, 0, 0, 0.28), inset 0 1px 0 rgba(255, 247, 173, 0.65), inset 0 -10px 25px rgba(80, 0, 0, 0.18) !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; } /* ========================================================= GOLD LEFT ACCENT ========================================================= */ section.related-quotes .related-quote-links a::before, section.related-quotes .cards-grid a::before { content: "" !important; position: absolute !important; left: 0 !important; top: 23px !important; width: 6px !important; height: 72px !important; border-radius: 0 5px 5px 0 !important; background: linear-gradient( 180deg, #fffbd0 0%, #ffe56a 25%, #f3ad1b 55%, #d34805 78%, #9d0000 100% ) !important; box-shadow: 0 0 15px rgba(255, 221, 70, 0.90) !important; z-index: 30 !important; } /* ========================================================= SMALL 3D GOLD / RED BALL INSIDE EACH CARD ========================================================= */ section.related-quotes .related-quote-links a::after, section.related-quotes .cards-grid a::after { content: "" !important; position: absolute !important; width: 230px !important; height: 230px !important; right: -80px !important; bottom: -125px !important; border-radius: 50% !important; background: radial-gradient( circle at 30% 25%, #fff9c4 0%, #ffd84f 7%, #ef9e16 18%, transparent 29% ), radial-gradient( circle at 53% 55%, #ff8c08 0%, #dc3503 32%, #a50000 58%, #620000 82%, #3d0000 100% ) !important; box-shadow: inset -25px -25px 40px rgba(70, 0, 0, 0.45), inset 18px 15px 30px rgba(255, 238, 120, 0.45) !important; opacity: 0.95 !important; z-index: -1 !important; pointer-events: none !important; } /* ========================================================= PERSON NAME ========================================================= */ section.related-quotes .related-quote-links a strong, section.related-quotes .cards-grid a strong, section.related-quotes .related-quote-links a .person-name, section.related-quotes .cards-grid a .person-name { position: relative !important; margin: 0 0 12px !important; color: #ffffff !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 30px !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.3px !important; text-align: left !important; text-shadow: 0 2px 8px rgba(70, 0, 0, 0.50) !important; z-index: 40 !important; } /* ========================================================= READ QUOTES ========================================================= */ section.related-quotes .related-quote-links a span, section.related-quotes .cards-grid a span { position: relative !important; color: #fff0a0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; font-weight: 900 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; text-shadow: 0 2px 7px rgba(80, 0, 0, 0.55) !important; z-index: 40 !important; } /* ========================================================= HOVER ========================================================= */ section.related-quotes .related-quote-links a:hover, section.related-quotes .cards-grid a:hover { transform: translateY(-5px) !important; border-color: #fff4a6 !important; box-shadow: 0 18px 35px rgba(92, 0, 0, 0.35), 0 0 22px rgba(255, 213, 67, 0.25), inset 0 1px 0 rgba(255, 250, 190, 0.80) !important; } /* ========================================================= DIFFERENT CARD BALL POSITIONS ========================================================= */ section.related-quotes .related-quote-links a:nth-child(1)::after, section.related-quotes .cards-grid a:nth-child(1)::after { transform: scale(1.05) rotate(-12deg) !important; } section.related-quotes .related-quote-links a:nth-child(2)::after, section.related-quotes .cards-grid a:nth-child(2)::after { transform: scale(1.15) rotate(14deg) !important; } section.related-quotes .related-quote-links a:nth-child(3)::after, section.related-quotes .cards-grid a:nth-child(3)::after { transform: scale(1.08) rotate(-8deg) !important; } section.related-quotes .related-quote-links a:nth-child(4)::after, section.related-quotes .cards-grid a:nth-child(4)::after { transform: scale(1.12) rotate(18deg) !important; } section.related-quotes .related-quote-links a:nth-child(5)::after, section.related-quotes .cards-grid a:nth-child(5)::after { transform: scale(1.06) rotate(-15deg) !important; } section.related-quotes .related-quote-links a:nth-child(6)::after, section.related-quotes .cards-grid a:nth-child(6)::after { transform: scale(1.14) rotate(20deg) !important; } /* ========================================================= TABLET ========================================================= */ @media screen and (max-width: 1050px) { section.related-quotes { padding: 50px 36px 60px !important; } section.related-quotes .related-quote-links, section.related-quotes .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 700px) { section.related-quotes { padding: 42px 20px 50px !important; } section.related-quotes h2 { font-size: 39px !important; } section.related-quotes .related-quote-links, section.related-quotes .cards-grid { grid-template-columns: 1fr !important; gap: 15px !important; } section.related-quotes .related-quote-links a, section.related-quotes .cards-grid a { min-height: 115px !important; padding: 23px 24px 23px 38px !important; } section.related-quotes .related-quote-links a strong, section.related-quotes .cards-grid a strong, section.related-quotes .related-quote-links a .person-name, section.related-quotes .cards-grid a .person-name { font-size: 25px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media screen and (max-width: 480px) { section.related-quotes { padding: 36px 14px 42px !important; } section.related-quotes h2 { font-size: 33px !important; } section.related-quotes .related-quote-links a, section.related-quotes .cards-grid a { min-height: 108px !important; padding: 22px 20px 21px 34px !important; } section.related-quotes .related-quote-links a strong, section.related-quotes .cards-grid a strong, section.related-quotes .related-quote-links a .person-name, section.related-quotes .cards-grid a .person-name { font-size: 23px !important; } }