Home

/* ===== FULL WIDTH WORDPRESS FIX ===== */ html, body { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } .sunnah-footer, .sunnah-footer * { box-sizing: border-box; } /* IMPORTANT: This makes the footer escape WordPress/Elementor's narrow content container and cover the complete screen. */ .sunnah-footer { position: relative !important; width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; margin: 0 !important; padding: 0 !important; background: #d8b88c !important; color: #4b2e1f !important; font-family: Arial, Helvetica, sans-serif; overflow: hidden !important; } /* FOOTER CONTENT */ .sunnah-footer-inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: 65px 45px 25px; } /* GRID */ .sunnah-grid { width: 100%; display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.25fr; gap: 55px; } /* BRAND */ .brand-name { font-family: Georgia, "Times New Roman", serif; font-size: 44px; font-weight: bold; color: #4b2e1f; line-height: 1.1; margin: 0 0 12px; } .tagline { color: #704832; font-size: 15px; line-height: 1.7; margin-bottom: 20px; } .description { color: #704832; font-size: 14px; line-height: 1.8; max-width: 330px; } /* TITLES */ .footer-title { font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 500; color: #3d2418; line-height: 1.25; margin: 0 0 26px; } /* LINKS */ .links { list-style: none; padding: 0; margin: 0; } .links li { margin: 0 0 15px; } .links a { color: #5b3826; text-decoration: none; font-size: 15px; transition: all .25s ease; } .links a:hover { color: #fff; padding-left: 5px; } /* CONTACT */ .contact { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; color: #5b3826; font-size: 14px; line-height: 1.7; } .contact-icon { width: 22px; min-width: 22px; text-align: center; color: #4b2e1f; font-size: 17px; } .contact a { color: #5b3826; text-decoration: none; } .contact a:hover { color: #fff; } /* SOCIAL */ .social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 23px; } .social a { width: 38px; height: 38px; border: 1px solid #8c6949; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #4b2e1f; text-decoration: none; font-size: 16px; transition: all .3s ease; } .social a:hover { background: #4b2e1f; color: #fff; transform: translateY(-3px); } /* NEWSLETTER */ .newsletter { color: #704832; font-size: 14px; line-height: 1.7; margin-bottom: 16px; max-width: 310px; } .email-box { display: flex; width: 100%; max-width: 320px; margin: 0; } .email-box input { flex: 1; min-width: 0; height: 54px; border: 0; outline: 0; padding: 0 13px; background: #f4e4ce; color: #4b2e1f; font-size: 13px; } .email-box input::placeholder { color: #8c6949; } .email-box button { width: 96px; min-width: 96px; height: 54px; border: 0; cursor: pointer; background: #4b2e1f; color: #fff; font-size: 13px; font-weight: 600; transition: .3s ease; } .email-box button:hover { background: #6b432c; } /* DIVIDER */ .divider { width: 100%; height: 1px; background: rgba(75,46,31,.25); margin: 58px 0 22px; } /* BOTTOM */ .bottom { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #68432d; font-size: 13px; } .bottom a { color: #4b2e1f; text-decoration: none; } /* DECORATION */ .decor { position: absolute; right: -75px; top: -75px; width: 225px; height: 225px; border: 1px solid rgba(75,46,31,.10); border-radius: 50%; pointer-events: none; } .decor:after { content: ""; position: absolute; right: 34px; top: 34px; width: 155px; height: 155px; border: 1px solid rgba(75,46,31,.08); border-radius: 50%; } /* ===== TABLET ===== */ @media (max-width: 950px) { .sunnah-footer-inner { padding: 55px 30px 25px; } .sunnah-grid { grid-template-columns: 1fr 1fr; gap: 45px 35px; } } /* ===== MOBILE ===== */ @media (max-width: 600px) { .sunnah-footer { width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; } .sunnah-footer-inner { padding: 48px 22px 22px; } .sunnah-grid { grid-template-columns: 1fr; gap: 38px; } .brand-name { font-size: 36px; } .footer-title { font-size: 22px; } .description { max-width: 100%; } .newsletter { max-width: 100%; } .email-box { max-width: 100%; } .email-box button { width: 92px; min-width: 92px; } .divider { margin-top: 40px; } .bottom { flex-direction: column; text-align: center; line-height: 1.6; } } /* ===== VERY SMALL PHONES ===== */ @media (max-width: 380px) { .sunnah-footer-inner { padding-left: 17px; padding-right: 17px; } .brand-name { font-size: 32px; } .email-box input { font-size: 12px; } .email-box button { width: 82px; min-width: 82px; font-size: 12px; } }