Pet Atlas Hero<\/title>\r\n <style>\r\n :root {\r\n --pa-navy: #0b2a4a;\r\n --pa-navy-2: #123d67;\r\n --pa-blue-soft: #eaf6ff;\r\n --pa-yellow: #ffd84d;\r\n --pa-text: #17324d;\r\n --pa-muted: #587086;\r\n --pa-white: #ffffff;\r\n --pa-shadow: 0 22px 70px rgba(11, 42, 74, 0.16);\r\n --pa-radius: 8px;\r\n --pa-font: \"Tajawal\", \"Cairo\", \"Segoe UI\", Arial, sans-serif;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n background: #ffffff;\r\n color: var(--pa-text);\r\n font-family: var(--pa-font);\r\n }\r\n\r\n .pa-hero {\r\n position: relative;\r\n min-height: 720px;\r\n overflow: hidden;\r\n isolation: isolate;\r\n background: var(--pa-blue-soft);\r\n }\r\n\r\n .pa-hero__image {\r\n position: absolute;\r\n inset: 0;\r\n z-index: -2;\r\n }\r\n\r\n .pa-hero__image picture,\r\n .pa-hero__image img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .pa-hero__image img {\r\n object-fit: cover;\r\n object-position: center;\r\n }\r\n\r\n .pa-hero::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n background:\r\n linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.56) 46%, rgba(255, 255, 255, 0.08) 76%),\r\n linear-gradient(180deg, rgba(234, 246, 255, 0.12) 0%, rgba(234, 246, 255, 0.6) 100%);\r\n }\r\n\r\n .pa-hero__wrap {\r\n width: min(1180px, calc(100% - 40px));\r\n min-height: 720px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: minmax(320px, 560px) 1fr;\r\n align-items: center;\r\n padding: 96px 0 72px;\r\n }\r\n\r\n .pa-hero__content {\r\n max-width: 560px;\r\n }\r\n\r\n .pa-hero__eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin: 0 0 18px;\r\n padding: 9px 14px;\r\n border: 1px solid rgba(18, 61, 103, 0.12);\r\n border-radius: 999px;\r\n background: rgba(255, 255, 255, 0.82);\r\n color: var(--pa-navy-2);\r\n font-size: 15px;\r\n font-weight: 700;\r\n box-shadow: 0 10px 30px rgba(11, 42, 74, 0.08);\r\n }\r\n\r\n .pa-hero__eyebrow::before {\r\n content: \"\";\r\n width: 9px;\r\n height: 9px;\r\n border-radius: 50%;\r\n background: var(--pa-yellow);\r\n box-shadow: 0 0 0 5px rgba(255, 216, 77, 0.28);\r\n }\r\n\r\n .pa-hero h1 {\r\n margin: 0;\r\n max-width: 12ch;\r\n color: var(--pa-navy);\r\n font-size: clamp(42px, 6vw, 74px);\r\n line-height: 1.04;\r\n font-weight: 900;\r\n letter-spacing: 0;\r\n }\r\n\r\n .pa-hero__lead {\r\n max-width: 590px;\r\n margin: 24px 0 0;\r\n color: var(--pa-muted);\r\n font-size: clamp(18px, 2vw, 22px);\r\n line-height: 1.75;\r\n font-weight: 500;\r\n }\r\n\r\n .pa-hero__actions {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 14px;\r\n margin-top: 34px;\r\n }\r\n\r\n .pa-hero__button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 56px;\r\n padding: 0 28px;\r\n border-radius: var(--pa-radius);\r\n text-decoration: none;\r\n font-size: 17px;\r\n font-weight: 800;\r\n transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;\r\n }\r\n\r\n .pa-hero__button--primary {\r\n background: var(--pa-yellow);\r\n color: var(--pa-navy);\r\n box-shadow: 0 16px 34px rgba(255, 216, 77, 0.38);\r\n }\r\n\r\n .pa-hero__button--secondary {\r\n background: rgba(255, 255, 255, 0.82);\r\n color: var(--pa-navy);\r\n border: 1px solid rgba(11, 42, 74, 0.12);\r\n }\r\n\r\n .pa-hero__button:hover {\r\n transform: translateY(-2px);\r\n box-shadow: var(--pa-shadow);\r\n }\r\n\r\n .pa-hero__stats {\r\n display: grid;\r\n grid-template-columns: repeat(3, max-content);\r\n gap: 22px;\r\n margin-top: 38px;\r\n padding: 18px 20px;\r\n width: fit-content;\r\n border-radius: var(--pa-radius);\r\n background: rgba(255, 255, 255, 0.84);\r\n box-shadow: 0 16px 44px rgba(11, 42, 74, 0.1);\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .pa-hero__stat strong {\r\n display: block;\r\n color: var(--pa-navy);\r\n font-size: 22px;\r\n line-height: 1;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-hero__stat span {\r\n display: block;\r\n margin-top: 7px;\r\n color: var(--pa-muted);\r\n font-size: 14px;\r\n font-weight: 700;\r\n white-space: nowrap;\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .pa-hero {\r\n min-height: auto;\r\n padding-top: 16px;\r\n overflow: visible;\r\n background:\r\n linear-gradient(180deg, var(--pa-blue-soft) 0 360px, #ffffff 360px 100%);\r\n }\r\n\r\n .pa-hero::before {\r\n display: none;\r\n }\r\n\r\n .pa-hero__image {\r\n position: relative;\r\n inset: auto;\r\n z-index: 0;\r\n width: min(calc(100% - 28px), 430px);\r\n height: clamp(260px, 68vw, 330px);\r\n margin: 0 auto;\r\n overflow: hidden;\r\n border: 5px solid rgba(255, 255, 255, 0.9);\r\n border-radius: 22px;\r\n background: #dff1ff;\r\n box-shadow: 0 22px 54px rgba(11, 42, 74, 0.18);\r\n }\r\n\r\n .pa-hero__image::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: auto 0 0;\r\n height: 34%;\r\n background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(11, 42, 74, 0.08) 100%);\r\n pointer-events: none;\r\n }\r\n\r\n .pa-hero__image img {\r\n object-position: center 34%;\r\n }\r\n\r\n .pa-hero__wrap {\r\n width: min(100% - 28px, 430px);\r\n min-height: auto;\r\n display: block;\r\n padding: 18px 0 40px;\r\n }\r\n\r\n .pa-hero__content {\r\n width: 100%;\r\n max-width: none;\r\n margin: 0 auto;\r\n padding: 0;\r\n text-align: left;\r\n border-radius: 0;\r\n background: transparent;\r\n box-shadow: none;\r\n }\r\n\r\n .pa-hero h1 {\r\n max-width: none;\r\n font-size: clamp(32px, 9.2vw, 40px);\r\n line-height: 1.06;\r\n }\r\n\r\n .pa-hero__lead {\r\n font-size: 16px;\r\n line-height: 1.55;\r\n margin-top: 14px;\r\n }\r\n\r\n .pa-hero__actions {\r\n gap: 10px;\r\n margin-top: 20px;\r\n }\r\n\r\n .pa-hero__button {\r\n flex: 1 1 100%;\r\n min-height: 54px;\r\n }\r\n\r\n .pa-hero__stats {\r\n width: 100%;\r\n grid-template-columns: 1fr;\r\n gap: 10px;\r\n padding: 0;\r\n margin-top: 26px;\r\n background: transparent;\r\n box-shadow: none;\r\n backdrop-filter: none;\r\n }\r\n\r\n .pa-hero__stat {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 14px;\r\n padding: 14px 16px;\r\n border: 1px solid rgba(11, 42, 74, 0.1);\r\n border-radius: var(--pa-radius);\r\n background: #f8fbff;\r\n }\r\n\r\n .pa-hero__stat strong {\r\n font-size: 21px;\r\n }\r\n\r\n .pa-hero__stat span {\r\n margin-top: 0;\r\n color: var(--pa-text);\r\n font-size: 14px;\r\n white-space: normal;\r\n }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .pa-hero__wrap {\r\n width: min(100% - 20px, 420px);\r\n padding: 22px 0 36px;\r\n }\r\n\r\n .pa-hero__image {\r\n width: min(calc(100% - 20px), 410px);\r\n height: clamp(250px, 70vw, 320px);\r\n border-width: 4px;\r\n border-radius: 18px;\r\n }\r\n\r\n .pa-hero__eyebrow {\r\n font-size: 13px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .pa-hero__stats {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"pa-hero\" aria-label=\"Pet Atlas hero\">\r\n <div class=\"pa-hero__image\" aria-hidden=\"true\">\r\n <picture>\r\n <source media=\"(max-width: 900px)\" srcset=\"https:\/\/pet-atlas.com\/wp-content\/uploads\/2026\/07\/pet-atlas-hero-mobile.webp\" type=\"image\/webp\">\r\n <source srcset=\"https:\/\/pet-atlas.com\/wp-content\/uploads\/2026\/07\/pet-atlas-hero.webp\" type=\"image\/webp\">\r\n <img src=\"https:\/\/pet-atlas.com\/wp-content\/uploads\/2026\/07\/pet-atlas-hero.webp\" alt=\"\" loading=\"eager\" decoding=\"async\">\r\n <\/picture>\r\n <\/div>\r\n\r\n <div class=\"pa-hero__wrap\">\r\n <div class=\"pa-hero__content\">\r\n <p class=\"pa-hero__eyebrow\">Online veterinary consultations, anytime<\/p>\r\n <h1>A trusted vet when your pet needs one<\/h1>\r\n <p class=\"pa-hero__lead\">\r\n Connect with licensed veterinarians by video or chat and get clear, friendly guidance from the first minute.\r\n <\/p>\r\n\r\n <div class=\"pa-hero__actions\" aria-label=\"Primary actions\">\r\n <a class=\"pa-hero__button pa-hero__button--primary\" href=\"#booking\">Talk to a Vet<\/a>\r\n <a class=\"pa-hero__button pa-hero__button--secondary\" href=\"#how-it-works\">See How It Works<\/a>\r\n <\/div>\r\n\r\n <div class=\"pa-hero__stats\" aria-label=\"Trust indicators\">\r\n <div class=\"pa-hero__stat\">\r\n <strong>+50K<\/strong>\r\n <span>Cases supported<\/span>\r\n <\/div>\r\n <div class=\"pa-hero__stat\">\r\n <strong>+200<\/strong>\r\n <span>Veterinarians<\/span>\r\n <\/div>\r\n <div class=\"pa-hero__stat\">\r\n <strong>4.9\/5<\/strong>\r\n <span>Client rating<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bdef767 e-con-full e-flex e-con e-parent\" data-id=\"bdef767\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b8e82d5 elementor-widget elementor-widget-html\" data-id=\"b8e82d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Pet Atlas Trust Bar<\/title>\r\n <style>\r\n :root {\r\n --pa-navy: #0b2a4a;\r\n --pa-blue-soft: #eaf6ff;\r\n --pa-text: #17324d;\r\n --pa-muted: #587086;\r\n --pa-white: #ffffff;\r\n --pa-radius: 8px;\r\n --pa-font: \"Tajawal\", \"Cairo\", \"Segoe UI\", Arial, sans-serif;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n background: #ffffff;\r\n color: var(--pa-text);\r\n font-family: var(--pa-font);\r\n }\r\n\r\n .pa-trust {\r\n background: #ffffff;\r\n border-top: 1px solid rgba(11, 42, 74, 0.08);\r\n border-bottom: 1px solid rgba(11, 42, 74, 0.08);\r\n }\r\n\r\n .pa-trust__wrap {\r\n width: min(1180px, calc(100% - 40px));\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: minmax(220px, 300px) 1fr;\r\n align-items: center;\r\n gap: 28px;\r\n padding: 24px 0;\r\n }\r\n\r\n .pa-trust__intro {\r\n margin: 0;\r\n color: var(--pa-muted);\r\n font-size: 15px;\r\n line-height: 1.45;\r\n font-weight: 700;\r\n }\r\n\r\n .pa-trust__intro strong {\r\n display: block;\r\n margin-bottom: 4px;\r\n color: var(--pa-navy);\r\n font-size: 18px;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-trust__items {\r\n display: grid;\r\n grid-template-columns: repeat(4, minmax(0, 1fr));\r\n gap: 12px;\r\n }\r\n\r\n .pa-trust__item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n min-height: 72px;\r\n padding: 14px 16px;\r\n border: 1px solid rgba(11, 42, 74, 0.1);\r\n border-radius: var(--pa-radius);\r\n background: #f8fbff;\r\n }\r\n\r\n .pa-trust__icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 0 0 38px;\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 50%;\r\n background: var(--pa-blue-soft);\r\n color: var(--pa-navy);\r\n font-size: 18px;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-trust__item strong {\r\n display: block;\r\n color: var(--pa-navy);\r\n font-size: 15px;\r\n line-height: 1.15;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-trust__item span {\r\n display: block;\r\n margin-top: 4px;\r\n color: var(--pa-muted);\r\n font-size: 13px;\r\n line-height: 1.25;\r\n font-weight: 700;\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .pa-trust {\r\n overflow: hidden;\r\n background: #f8fbff;\r\n }\r\n\r\n .pa-trust__wrap {\r\n width: 100%;\r\n display: block;\r\n padding: 22px 0 24px;\r\n }\r\n\r\n .pa-trust__intro {\r\n width: min(100% - 28px, 430px);\r\n margin: 0 auto 14px;\r\n }\r\n\r\n .pa-trust__items {\r\n display: flex;\r\n gap: 12px;\r\n overflow-x: auto;\r\n padding: 0 14px 4px;\r\n scroll-snap-type: x mandatory;\r\n scrollbar-width: none;\r\n }\r\n\r\n .pa-trust__items::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .pa-trust__item {\r\n flex: 0 0 250px;\r\n min-height: 78px;\r\n background: #ffffff;\r\n scroll-snap-align: start;\r\n box-shadow: 0 14px 34px rgba(11, 42, 74, 0.07);\r\n }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .pa-trust__intro {\r\n width: min(100% - 20px, 420px);\r\n }\r\n\r\n .pa-trust__item {\r\n flex-basis: 235px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"pa-trust\" aria-label=\"Trust and care highlights\">\r\n <div class=\"pa-trust__wrap\">\r\n <p class=\"pa-trust__intro\">\r\n <strong>Trusted care, built for pet parents.<\/strong>\r\n Professional support that feels simple, safe, and close to home.\r\n <\/p>\r\n\r\n <div class=\"pa-trust__items\">\r\n <div class=\"pa-trust__item\">\r\n <span class=\"pa-trust__icon\" aria-hidden=\"true\">\u2713<\/span>\r\n <div>\r\n <strong>Licensed vets<\/strong>\r\n <span>Verified veterinary experts<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pa-trust__item\">\r\n <span class=\"pa-trust__icon\" aria-hidden=\"true\">\u25b6<\/span>\r\n <div>\r\n <strong>Video & chat<\/strong>\r\n <span>Choose the way you talk<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pa-trust__item\">\r\n <span class=\"pa-trust__icon\" aria-hidden=\"true\">24<\/span>\r\n <div>\r\n <strong>Fast response<\/strong>\r\n <span>Guidance when it matters<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pa-trust__item\">\r\n <span class=\"pa-trust__icon\" aria-hidden=\"true\">+<\/span>\r\n <div>\r\n <strong>Follow-up care<\/strong>\r\n <span>Next steps after every visit<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-02cff71 e-con-full e-flex e-con e-parent\" data-id=\"02cff71\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6124076 elementor-widget elementor-widget-html\" data-id=\"6124076\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Pet Atlas How It Works<\/title>\r\n <style>\r\n :root {\r\n --pa-navy: #0b2a4a;\r\n --pa-navy-2: #123d67;\r\n --pa-blue-soft: #eaf6ff;\r\n --pa-yellow: #ffd84d;\r\n --pa-text: #17324d;\r\n --pa-muted: #587086;\r\n --pa-white: #ffffff;\r\n --pa-line: rgba(11, 42, 74, 0.1);\r\n --pa-shadow: 0 18px 46px rgba(11, 42, 74, 0.1);\r\n --pa-radius: 8px;\r\n --pa-font: \"Tajawal\", \"Cairo\", \"Segoe UI\", Arial, sans-serif;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n background: #ffffff;\r\n color: var(--pa-text);\r\n font-family: var(--pa-font);\r\n }\r\n\r\n .pa-steps {\r\n background:\r\n radial-gradient(circle at 12% 18%, rgba(255, 216, 77, 0.2), transparent 24%),\r\n linear-gradient(180deg, #f1f9ff 0%, var(--pa-blue-soft) 100%);\r\n padding: 84px 0;\r\n }\r\n\r\n .pa-steps__wrap {\r\n width: min(1180px, calc(100% - 40px));\r\n margin: 0 auto;\r\n }\r\n\r\n .pa-steps__head {\r\n max-width: 680px;\r\n margin: 0 auto 42px;\r\n text-align: center;\r\n }\r\n\r\n .pa-steps__eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin: 0 0 14px;\r\n padding: 9px 14px;\r\n border: 1px solid rgba(18, 61, 103, 0.12);\r\n border-radius: 999px;\r\n background: rgba(255, 255, 255, 0.72);\r\n color: var(--pa-navy-2);\r\n font-size: 14px;\r\n font-weight: 800;\r\n }\r\n\r\n .pa-steps__eyebrow::before {\r\n content: \"\";\r\n width: 9px;\r\n height: 9px;\r\n border-radius: 50%;\r\n background: var(--pa-yellow);\r\n box-shadow: 0 0 0 5px rgba(255, 216, 77, 0.25);\r\n }\r\n\r\n .pa-steps h2 {\r\n margin: 0;\r\n color: var(--pa-navy);\r\n font-size: clamp(36px, 4.4vw, 56px);\r\n line-height: 1.08;\r\n font-weight: 900;\r\n letter-spacing: 0;\r\n }\r\n\r\n .pa-steps__lead {\r\n margin: 18px auto 0;\r\n max-width: 620px;\r\n color: var(--pa-muted);\r\n font-size: 18px;\r\n line-height: 1.65;\r\n font-weight: 600;\r\n }\r\n\r\n .pa-steps__grid {\r\n position: relative;\r\n display: grid;\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n gap: 18px;\r\n }\r\n\r\n .pa-steps__grid::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 58px;\r\n left: 16%;\r\n right: 16%;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, rgba(11, 42, 74, 0.18), transparent);\r\n }\r\n\r\n .pa-step {\r\n position: relative;\r\n z-index: 1;\r\n min-height: 270px;\r\n padding: 28px;\r\n border: 1px solid var(--pa-line);\r\n border-radius: var(--pa-radius);\r\n background: rgba(255, 255, 255, 0.9);\r\n box-shadow: var(--pa-shadow);\r\n }\r\n\r\n .pa-step__top {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .pa-step__icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 50%;\r\n background: var(--pa-navy);\r\n color: #ffffff;\r\n font-size: 27px;\r\n font-weight: 900;\r\n box-shadow: 0 14px 30px rgba(11, 42, 74, 0.2);\r\n }\r\n\r\n .pa-step:nth-child(2) .pa-step__icon {\r\n background: var(--pa-yellow);\r\n color: var(--pa-navy);\r\n }\r\n\r\n .pa-step__number {\r\n color: rgba(11, 42, 74, 0.12);\r\n font-size: 54px;\r\n line-height: 1;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-step h3 {\r\n margin: 0;\r\n color: var(--pa-navy);\r\n font-size: 23px;\r\n line-height: 1.2;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-step p {\r\n margin: 12px 0 0;\r\n color: var(--pa-muted);\r\n font-size: 16px;\r\n line-height: 1.62;\r\n font-weight: 600;\r\n }\r\n\r\n .pa-steps__cta {\r\n display: flex;\r\n justify-content: center;\r\n margin-top: 36px;\r\n }\r\n\r\n .pa-steps__button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 54px;\r\n padding: 0 28px;\r\n border-radius: var(--pa-radius);\r\n background: var(--pa-yellow);\r\n color: var(--pa-navy);\r\n text-decoration: none;\r\n font-size: 17px;\r\n font-weight: 900;\r\n box-shadow: 0 16px 34px rgba(255, 216, 77, 0.32);\r\n transition: transform 180ms ease, box-shadow 180ms ease;\r\n }\r\n\r\n .pa-steps__button:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 20px 42px rgba(11, 42, 74, 0.16);\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .pa-steps {\r\n padding: 62px 0;\r\n }\r\n\r\n .pa-steps__wrap {\r\n width: min(100% - 28px, 560px);\r\n }\r\n\r\n .pa-steps__head {\r\n margin-bottom: 28px;\r\n text-align: left;\r\n }\r\n\r\n .pa-steps h2 {\r\n font-size: clamp(34px, 9vw, 44px);\r\n }\r\n\r\n .pa-steps__lead {\r\n font-size: 16px;\r\n line-height: 1.55;\r\n }\r\n\r\n .pa-steps__grid {\r\n grid-template-columns: 1fr;\r\n gap: 14px;\r\n }\r\n\r\n .pa-steps__grid::before {\r\n display: none;\r\n }\r\n\r\n .pa-step {\r\n min-height: auto;\r\n padding: 22px;\r\n }\r\n\r\n .pa-step__top {\r\n margin-bottom: 18px;\r\n }\r\n\r\n .pa-step__icon {\r\n width: 56px;\r\n height: 56px;\r\n font-size: 24px;\r\n }\r\n\r\n .pa-step__number {\r\n font-size: 44px;\r\n }\r\n\r\n .pa-step h3 {\r\n font-size: 21px;\r\n }\r\n\r\n .pa-steps__cta {\r\n margin-top: 22px;\r\n }\r\n\r\n .pa-steps__button {\r\n width: 100%;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"pa-steps\" id=\"how-it-works\" aria-label=\"How Pet Atlas works\">\r\n <div class=\"pa-steps__wrap\">\r\n <div class=\"pa-steps__head\">\r\n <p class=\"pa-steps__eyebrow\">How it works<\/p>\r\n <h2>Get veterinary help in three simple steps<\/h2>\r\n <p class=\"pa-steps__lead\">\r\n Pet Atlas makes expert care easier to reach, from the first question to the next treatment step.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"pa-steps__grid\">\r\n <article class=\"pa-step\">\r\n <div class=\"pa-step__top\">\r\n <span class=\"pa-step__icon\" aria-hidden=\"true\">1<\/span>\r\n <span class=\"pa-step__number\">01<\/span>\r\n <\/div>\r\n <h3>Create your pet profile<\/h3>\r\n <p>Add your pet's basic details, symptoms, and anything your vet should know before the consultation starts.<\/p>\r\n <\/article>\r\n\r\n <article class=\"pa-step\">\r\n <div class=\"pa-step__top\">\r\n <span class=\"pa-step__icon\" aria-hidden=\"true\">2<\/span>\r\n <span class=\"pa-step__number\">02<\/span>\r\n <\/div>\r\n <h3>Talk to a veterinarian<\/h3>\r\n <p>Connect by video or chat with a licensed vet who can listen, assess, and guide you clearly.<\/p>\r\n <\/article>\r\n\r\n <article class=\"pa-step\">\r\n <div class=\"pa-step__top\">\r\n <span class=\"pa-step__icon\" aria-hidden=\"true\">3<\/span>\r\n <span class=\"pa-step__number\">03<\/span>\r\n <\/div>\r\n <h3>Follow the care plan<\/h3>\r\n <p>Receive practical next steps, follow-up guidance, and recommendations tailored to your pet's needs.<\/p>\r\n <\/article>\r\n <\/div>\r\n\r\n <div class=\"pa-steps__cta\">\r\n <a class=\"pa-steps__button\" href=\"#booking\">Start a Consultation<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0587fc1 e-con-full e-flex e-con e-parent\" data-id=\"0587fc1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8125744 elementor-widget elementor-widget-html\" data-id=\"8125744\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Pet Atlas Services<\/title>\r\n <style>\r\n :root {\r\n --pa-navy: #0b2a4a;\r\n --pa-navy-2: #123d67;\r\n --pa-blue-soft: #eaf6ff;\r\n --pa-yellow: #ffd84d;\r\n --pa-text: #17324d;\r\n --pa-muted: #587086;\r\n --pa-white: #ffffff;\r\n --pa-line: rgba(11, 42, 74, 0.11);\r\n --pa-shadow: 0 20px 54px rgba(11, 42, 74, 0.12);\r\n --pa-radius: 8px;\r\n --pa-font: \"Tajawal\", \"Cairo\", \"Segoe UI\", Arial, sans-serif;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n background: #ffffff;\r\n color: var(--pa-text);\r\n font-family: var(--pa-font);\r\n }\r\n\r\n .pa-services {\r\n position: relative;\r\n overflow: hidden;\r\n isolation: isolate;\r\n padding: 92px 0;\r\n background:\r\n radial-gradient(circle at 12% 10%, rgba(255, 216, 77, 0.22), transparent 24%),\r\n radial-gradient(circle at 90% 22%, rgba(123, 201, 255, 0.24), transparent 28%),\r\n linear-gradient(180deg, #ffffff 0%, #edf8ff 100%);\r\n }\r\n\r\n .pa-services::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: -2;\r\n background-image:\r\n linear-gradient(rgba(11, 42, 74, 0.035) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(11, 42, 74, 0.035) 1px, transparent 1px);\r\n background-size: 44px 44px;\r\n mask-image: linear-gradient(180deg, transparent, #000 16%, #000 86%, transparent);\r\n }\r\n\r\n .pa-services::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n background:\r\n linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.58) 52%, rgba(234, 246, 255, 0.7) 100%),\r\n linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(234, 246, 255, 0.48) 100%);\r\n }\r\n\r\n .pa-services__decor {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n .pa-float {\r\n position: absolute;\r\n display: grid;\r\n place-items: center;\r\n width: var(--size);\r\n height: var(--size);\r\n border: 2px solid rgba(11, 42, 74, 0.14);\r\n border-radius: 999px;\r\n background:\r\n radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.52) 58%, rgba(234, 246, 255, 0.42) 100%);\r\n color: rgba(11, 42, 74, 0.38);\r\n box-shadow:\r\n 0 18px 48px rgba(11, 42, 74, 0.12),\r\n inset 0 1px 0 rgba(255, 255, 255, 0.9);\r\n animation: paFloat 9s ease-in-out infinite;\r\n animation-delay: var(--delay);\r\n transform: translate3d(0, 0, 0) rotate(var(--rotate));\r\n }\r\n\r\n .pa-float::before,\r\n .pa-float::after {\r\n content: \"\";\r\n position: absolute;\r\n border-radius: 999px;\r\n pointer-events: none;\r\n }\r\n\r\n .pa-float::before {\r\n inset: -9px;\r\n border: 1px dashed rgba(11, 42, 74, 0.14);\r\n opacity: 0.72;\r\n }\r\n\r\n .pa-float::after {\r\n width: 12px;\r\n height: 12px;\r\n right: 10%;\r\n top: 9%;\r\n background: var(--pa-yellow);\r\n box-shadow:\r\n -42px 50px 0 rgba(123, 201, 255, 0.55),\r\n 34px 54px 0 rgba(11, 42, 74, 0.13);\r\n }\r\n\r\n .pa-float svg {\r\n position: relative;\r\n z-index: 1;\r\n width: 58%;\r\n height: 58%;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-float--yellow {\r\n background:\r\n radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.88), rgba(255, 216, 77, 0.46) 58%, rgba(255, 216, 77, 0.24) 100%);\r\n color: rgba(11, 42, 74, 0.46);\r\n border-color: rgba(255, 216, 77, 0.46);\r\n }\r\n\r\n .pa-float--blue {\r\n background:\r\n radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.92), rgba(123, 201, 255, 0.34) 60%, rgba(234, 246, 255, 0.72) 100%);\r\n color: rgba(18, 61, 103, 0.42);\r\n border-color: rgba(123, 201, 255, 0.36);\r\n }\r\n\r\n .pa-float:nth-child(1) { --size: 112px; --delay: -1s; --rotate: -12deg; left: 4%; top: 12%; }\r\n .pa-float:nth-child(2) { --size: 84px; --delay: -4s; --rotate: 10deg; left: 34%; top: 7%; }\r\n .pa-float:nth-child(3) { --size: 136px; --delay: -2s; --rotate: 14deg; right: 5%; top: 13%; }\r\n .pa-float:nth-child(4) { --size: 96px; --delay: -6s; --rotate: -8deg; left: 43%; bottom: 11%; }\r\n .pa-float:nth-child(5) { --size: 120px; --delay: -3s; --rotate: 8deg; right: 16%; bottom: 7%; }\r\n .pa-float:nth-child(6) { --size: 74px; --delay: -7s; --rotate: -16deg; left: 10%; bottom: 18%; }\r\n\r\n @keyframes paFloat {\r\n 0%, 100% {\r\n transform: translate3d(0, 0, 0) rotate(var(--rotate));\r\n }\r\n 50% {\r\n transform: translate3d(0, -18px, 0) rotate(calc(var(--rotate) + 5deg));\r\n }\r\n }\r\n\r\n .pa-services__wrap {\r\n position: relative;\r\n z-index: 1;\r\n width: min(1180px, calc(100% - 40px));\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: minmax(280px, 390px) 1fr;\r\n align-items: start;\r\n gap: 54px;\r\n }\r\n\r\n .pa-services__eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin: 0 0 16px;\r\n padding: 9px 14px;\r\n border: 1px solid rgba(18, 61, 103, 0.12);\r\n border-radius: 999px;\r\n background: rgba(255, 255, 255, 0.72);\r\n color: var(--pa-navy-2);\r\n font-size: 14px;\r\n font-weight: 800;\r\n box-shadow: 0 10px 28px rgba(11, 42, 74, 0.06);\r\n }\r\n\r\n .pa-services__eyebrow::before {\r\n content: \"\";\r\n width: 9px;\r\n height: 9px;\r\n border-radius: 50%;\r\n background: var(--pa-yellow);\r\n box-shadow: 0 0 0 5px rgba(255, 216, 77, 0.25);\r\n }\r\n\r\n .pa-services h2 {\r\n margin: 0;\r\n color: var(--pa-navy);\r\n font-size: clamp(38px, 4.8vw, 60px);\r\n line-height: 1.06;\r\n font-weight: 900;\r\n letter-spacing: 0;\r\n }\r\n\r\n .pa-services__lead {\r\n margin: 20px 0 0;\r\n color: var(--pa-muted);\r\n font-size: 18px;\r\n line-height: 1.68;\r\n font-weight: 600;\r\n }\r\n\r\n .pa-services__note {\r\n display: flex;\r\n gap: 12px;\r\n margin-top: 26px;\r\n padding: 16px;\r\n border: 1px solid rgba(11, 42, 74, 0.1);\r\n border-radius: var(--pa-radius);\r\n background: rgba(255, 255, 255, 0.74);\r\n color: var(--pa-text);\r\n font-size: 15px;\r\n line-height: 1.45;\r\n font-weight: 700;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .pa-services__note span {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 0 0 32px;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n background: var(--pa-yellow);\r\n color: var(--pa-navy);\r\n font-weight: 900;\r\n }\r\n\r\n .pa-services__note p {\r\n margin: 0;\r\n }\r\n\r\n .pa-services__grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 16px;\r\n }\r\n\r\n .pa-service {\r\n min-height: 238px;\r\n padding: 24px;\r\n border: 1px solid var(--pa-line);\r\n border-radius: var(--pa-radius);\r\n background: rgba(255, 255, 255, 0.88);\r\n box-shadow: var(--pa-shadow);\r\n backdrop-filter: blur(12px);\r\n transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;\r\n }\r\n\r\n .pa-service:hover {\r\n transform: translateY(-4px);\r\n background: #ffffff;\r\n box-shadow: 0 26px 64px rgba(11, 42, 74, 0.16);\r\n }\r\n\r\n .pa-service__icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 54px;\r\n height: 54px;\r\n margin-bottom: 22px;\r\n border-radius: 50%;\r\n background: var(--pa-navy);\r\n color: #ffffff;\r\n font-size: 24px;\r\n font-weight: 900;\r\n box-shadow: 0 14px 30px rgba(11, 42, 74, 0.18);\r\n }\r\n\r\n .pa-service:nth-child(2) .pa-service__icon,\r\n .pa-service:nth-child(4) .pa-service__icon {\r\n background: var(--pa-yellow);\r\n color: var(--pa-navy);\r\n }\r\n\r\n .pa-service h3 {\r\n margin: 0;\r\n color: var(--pa-navy);\r\n font-size: 22px;\r\n line-height: 1.2;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-service p {\r\n margin: 11px 0 0;\r\n color: var(--pa-muted);\r\n font-size: 15.5px;\r\n line-height: 1.62;\r\n font-weight: 600;\r\n }\r\n\r\n .pa-service a {\r\n display: inline-flex;\r\n margin-top: 16px;\r\n color: var(--pa-navy);\r\n text-decoration: none;\r\n font-size: 15px;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-service a:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n @media (max-width: 960px) {\r\n .pa-services {\r\n padding: 64px 0;\r\n }\r\n\r\n .pa-services::after {\r\n background:\r\n linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(244, 250, 255, 0.7) 48%, rgba(234, 246, 255, 0.78) 100%);\r\n }\r\n\r\n .pa-float {\r\n opacity: 0.9;\r\n }\r\n\r\n .pa-float:nth-child(1) { --size: 70px; left: -42px; top: 126px; }\r\n .pa-float:nth-child(2) { --size: 62px; left: 66%; top: 70px; }\r\n .pa-float:nth-child(3) { --size: 92px; right: -30px; top: 330px; }\r\n .pa-float:nth-child(4) { --size: 66px; left: 8%; bottom: 28%; }\r\n .pa-float:nth-child(5) { --size: 82px; right: 2%; bottom: 8%; }\r\n .pa-float:nth-child(6) { display: none; }\r\n\r\n .pa-services__wrap {\r\n width: min(100% - 28px, 620px);\r\n display: block;\r\n }\r\n\r\n .pa-services__head {\r\n margin-bottom: 26px;\r\n }\r\n\r\n .pa-services h2 {\r\n font-size: clamp(34px, 9vw, 44px);\r\n }\r\n\r\n .pa-services__lead {\r\n font-size: 16px;\r\n line-height: 1.58;\r\n }\r\n\r\n .pa-services__note {\r\n margin-top: 18px;\r\n }\r\n\r\n .pa-services__grid {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 10px;\r\n }\r\n\r\n .pa-service {\r\n min-height: auto;\r\n padding: 16px;\r\n }\r\n\r\n .pa-service__icon {\r\n width: 42px;\r\n height: 42px;\r\n margin-bottom: 14px;\r\n font-size: 19px;\r\n }\r\n\r\n .pa-service h3 {\r\n font-size: 18px;\r\n }\r\n\r\n .pa-service p {\r\n font-size: 13.5px;\r\n line-height: 1.45;\r\n }\r\n\r\n .pa-service a {\r\n margin-top: 12px;\r\n font-size: 13.5px;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .pa-float {\r\n animation: none;\r\n }\r\n }\r\n\r\n @media (max-width: 420px) {\r\n .pa-services__wrap {\r\n width: min(100% - 24px, 620px);\r\n }\r\n\r\n .pa-services__grid {\r\n gap: 8px;\r\n }\r\n\r\n .pa-service {\r\n padding: 14px;\r\n }\r\n\r\n .pa-service__icon {\r\n width: 38px;\r\n height: 38px;\r\n margin-bottom: 12px;\r\n font-size: 17px;\r\n }\r\n\r\n .pa-service h3 {\r\n font-size: 16px;\r\n }\r\n\r\n .pa-service p {\r\n font-size: 12.5px;\r\n }\r\n\r\n .pa-service a {\r\n font-size: 12.5px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"pa-services\" id=\"services\" aria-label=\"Pet Atlas services\">\r\n <div class=\"pa-services__decor\" aria-hidden=\"true\">\r\n <span class=\"pa-float pa-float--yellow\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9ZM30 25c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm4 0c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm-2 8c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-float pa-float--blue\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M12 28 20 13l9 9h6l9-9 8 15v11c0 11-9 20-20 20S12 50 12 39V28Zm16 10c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm20 0c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm-20 9h8l-4 5-4-5Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-float\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M12 38c0-14 10-25 23-25 12 0 21 9 23 21l3 2-3 2c-1 12-11 21-23 21-13 0-23-9-23-21Zm10-3c-4 0-7 3-7 7v3h14v-3c0-4-3-7-7-7Zm24-9a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM25 50h20c-3-5-6-7-10-7s-7 2-10 7Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-float pa-float--yellow\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9ZM30 25c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm4 0c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm-2 8c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-float pa-float--blue\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M12 28 20 13l9 9h6l9-9 8 15v11c0 11-9 20-20 20S12 50 12 39V28Zm16 10c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm20 0c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm-20 9h8l-4 5-4-5Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-float\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M12 38c0-14 10-25 23-25 12 0 21 9 23 21l3 2-3 2c-1 12-11 21-23 21-13 0-23-9-23-21Zm10-3c-4 0-7 3-7 7v3h14v-3c0-4-3-7-7-7Zm24-9a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM25 50h20c-3-5-6-7-10-7s-7 2-10 7Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"pa-services__wrap\">\r\n <div class=\"pa-services__head\">\r\n <p class=\"pa-services__eyebrow\">Our services<\/p>\r\n <h2>Care options for everyday pet questions<\/h2>\r\n <p class=\"pa-services__lead\">\r\n Choose the support that fits the moment, from quick advice to live consultations and ongoing follow-up.\r\n <\/p>\r\n <div class=\"pa-services__note\">\r\n <span aria-hidden=\"true\">+<\/span>\r\n <p>If symptoms feel urgent or severe, Pet Atlas helps you understand the safest next step quickly.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pa-services__grid\">\r\n <article class=\"pa-service\">\r\n <span class=\"pa-service__icon\" aria-hidden=\"true\">V<\/span>\r\n <h3>Video consultation<\/h3>\r\n <p>Speak face-to-face with a licensed veterinarian and show symptoms clearly in real time.<\/p>\r\n <a href=\"#video-consultation\">Learn more<\/a>\r\n <\/article>\r\n\r\n <article class=\"pa-service\">\r\n <span class=\"pa-service__icon\" aria-hidden=\"true\">C<\/span>\r\n <h3>Chat with a vet<\/h3>\r\n <p>Get quick written guidance when you need advice, reassurance, or help deciding what to do next.<\/p>\r\n <a href=\"#vet-chat\">Learn more<\/a>\r\n <\/article>\r\n\r\n <article class=\"pa-service\">\r\n <span class=\"pa-service__icon\" aria-hidden=\"true\">F<\/span>\r\n <h3>Follow-up care<\/h3>\r\n <p>Keep track of progress after a consultation with clear next steps and practical recommendations.<\/p>\r\n <a href=\"#follow-up\">Learn more<\/a>\r\n <\/article>\r\n\r\n <article class=\"pa-service\">\r\n <span class=\"pa-service__icon\" aria-hidden=\"true\">Rx<\/span>\r\n <h3>Medication guidance<\/h3>\r\n <p>Understand treatment instructions, dosage questions, and safe care routines for your pet.<\/p>\r\n <a href=\"#medication-guidance\">Learn more<\/a>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-217c2c3 e-con-full e-flex e-con e-parent\" data-id=\"217c2c3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6bebb10 elementor-widget elementor-widget-html\" data-id=\"6bebb10\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Pet Atlas Testimonials<\/title>\r\n <style>\r\n :root {\r\n --pa-navy: #0b2a4a;\r\n --pa-navy-2: #123d67;\r\n --pa-blue-soft: #eaf6ff;\r\n --pa-yellow: #ffd84d;\r\n --pa-text: #17324d;\r\n --pa-muted: #587086;\r\n --pa-white: #ffffff;\r\n --pa-line: rgba(11, 42, 74, 0.11);\r\n --pa-shadow: 0 20px 54px rgba(11, 42, 74, 0.12);\r\n --pa-radius: 8px;\r\n --pa-font: \"Tajawal\", \"Cairo\", \"Segoe UI\", Arial, sans-serif;\r\n }\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n background: #ffffff;\r\n color: var(--pa-text);\r\n font-family: var(--pa-font);\r\n }\r\n\r\n .pa-testimonials {\r\n position: relative;\r\n overflow: hidden;\r\n isolation: isolate;\r\n padding: 88px 0;\r\n background:\r\n radial-gradient(circle at 9% 22%, rgba(255, 216, 77, 0.18), transparent 24%),\r\n radial-gradient(circle at 90% 18%, rgba(123, 201, 255, 0.22), transparent 30%),\r\n linear-gradient(180deg, #ffffff 0%, #f4fbff 100%);\r\n }\r\n\r\n .pa-testimonials::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: -2;\r\n background-image:\r\n linear-gradient(rgba(11, 42, 74, 0.035) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(11, 42, 74, 0.035) 1px, transparent 1px);\r\n background-size: 44px 44px;\r\n mask-image: linear-gradient(180deg, transparent, #000 14%, #000 88%, transparent);\r\n }\r\n\r\n .pa-testimonials__decor {\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n pointer-events: none;\r\n }\r\n\r\n .pa-bubble {\r\n position: absolute;\r\n display: grid;\r\n place-items: center;\r\n width: var(--size);\r\n height: var(--size);\r\n border: 2px solid rgba(11, 42, 74, 0.12);\r\n border-radius: 999px;\r\n background: rgba(255, 255, 255, 0.68);\r\n color: rgba(11, 42, 74, 0.28);\r\n box-shadow: 0 18px 48px rgba(11, 42, 74, 0.08);\r\n animation: paBubbleFloat 10s ease-in-out infinite;\r\n animation-delay: var(--delay);\r\n transform: rotate(var(--rotate));\r\n }\r\n\r\n .pa-bubble svg {\r\n width: 56%;\r\n height: 56%;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-bubble--yellow {\r\n background: rgba(255, 216, 77, 0.28);\r\n color: rgba(11, 42, 74, 0.34);\r\n border-color: rgba(255, 216, 77, 0.45);\r\n }\r\n\r\n .pa-bubble--blue {\r\n background: rgba(234, 246, 255, 0.85);\r\n color: rgba(18, 61, 103, 0.32);\r\n border-color: rgba(123, 201, 255, 0.34);\r\n }\r\n\r\n .pa-bubble:nth-child(1) { --size: 92px; --delay: -1s; --rotate: -12deg; left: 5%; top: 18%; }\r\n .pa-bubble:nth-child(2) { --size: 74px; --delay: -4s; --rotate: 8deg; right: 13%; top: 12%; }\r\n .pa-bubble:nth-child(3) { --size: 108px; --delay: -7s; --rotate: 14deg; left: 18%; bottom: 10%; }\r\n .pa-bubble:nth-child(4) { --size: 78px; --delay: -3s; --rotate: -8deg; right: 7%; bottom: 14%; }\r\n\r\n @keyframes paBubbleFloat {\r\n 0%, 100% {\r\n transform: translate3d(0, 0, 0) rotate(var(--rotate));\r\n }\r\n 50% {\r\n transform: translate3d(0, -16px, 0) rotate(calc(var(--rotate) + 5deg));\r\n }\r\n }\r\n\r\n .pa-testimonials__wrap {\r\n position: relative;\r\n z-index: 1;\r\n width: min(1180px, calc(100% - 40px));\r\n margin: 0 auto;\r\n }\r\n\r\n .pa-testimonials__head {\r\n display: grid;\r\n grid-template-columns: minmax(280px, 680px) auto;\r\n align-items: end;\r\n gap: 24px;\r\n margin-bottom: 34px;\r\n }\r\n\r\n .pa-testimonials__eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin: 0 0 16px;\r\n padding: 9px 14px;\r\n border: 1px solid rgba(18, 61, 103, 0.12);\r\n border-radius: 999px;\r\n background: rgba(255, 255, 255, 0.72);\r\n color: var(--pa-navy-2);\r\n font-size: 14px;\r\n font-weight: 800;\r\n box-shadow: 0 10px 28px rgba(11, 42, 74, 0.06);\r\n }\r\n\r\n .pa-testimonials__eyebrow::before {\r\n content: \"\";\r\n width: 9px;\r\n height: 9px;\r\n border-radius: 50%;\r\n background: var(--pa-yellow);\r\n box-shadow: 0 0 0 5px rgba(255, 216, 77, 0.25);\r\n }\r\n\r\n .pa-testimonials h2 {\r\n margin: 0;\r\n max-width: 680px;\r\n color: var(--pa-navy);\r\n font-size: clamp(38px, 4.6vw, 58px);\r\n line-height: 1.06;\r\n font-weight: 900;\r\n letter-spacing: 0;\r\n }\r\n\r\n .pa-testimonials__lead {\r\n margin: 18px 0 0;\r\n max-width: 590px;\r\n color: var(--pa-muted);\r\n font-size: 18px;\r\n line-height: 1.62;\r\n font-weight: 600;\r\n }\r\n\r\n .pa-testimonials__controls {\r\n display: flex;\r\n align-items: center;\r\n justify-content: end;\r\n gap: 10px;\r\n }\r\n\r\n .pa-slider-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 48px;\r\n height: 48px;\r\n border: 1px solid rgba(11, 42, 74, 0.12);\r\n border-radius: 50%;\r\n background: #ffffff;\r\n color: var(--pa-navy);\r\n cursor: pointer;\r\n box-shadow: 0 14px 34px rgba(11, 42, 74, 0.08);\r\n transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;\r\n }\r\n\r\n .pa-slider-btn:hover {\r\n transform: translateY(-2px);\r\n background: var(--pa-yellow);\r\n box-shadow: 0 18px 42px rgba(11, 42, 74, 0.12);\r\n }\r\n\r\n .pa-slider-btn svg {\r\n width: 20px;\r\n height: 20px;\r\n stroke: currentColor;\r\n stroke-width: 2.4;\r\n fill: none;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n .pa-testimonials__viewport {\r\n overflow: hidden;\r\n border-radius: var(--pa-radius);\r\n }\r\n\r\n .pa-testimonials__track {\r\n display: flex;\r\n gap: 16px;\r\n overflow-x: auto;\r\n padding: 4px 4px 24px;\r\n scroll-snap-type: x mandatory;\r\n scroll-behavior: smooth;\r\n scrollbar-width: none;\r\n }\r\n\r\n .pa-testimonials__track::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .pa-review {\r\n flex: 0 0 calc((100% - 32px) \/ 3);\r\n min-height: 316px;\r\n display: flex;\r\n flex-direction: column;\r\n padding: 24px;\r\n border: 1px solid var(--pa-line);\r\n border-radius: var(--pa-radius);\r\n background: rgba(255, 255, 255, 0.9);\r\n box-shadow: var(--pa-shadow);\r\n backdrop-filter: blur(12px);\r\n scroll-snap-align: start;\r\n }\r\n\r\n .pa-review__top {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .pa-review__person {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n min-width: 0;\r\n }\r\n\r\n .pa-review__avatar {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 0 0 54px;\r\n width: 54px;\r\n height: 54px;\r\n border-radius: 50%;\r\n background:\r\n radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.9), transparent 38%),\r\n linear-gradient(135deg, var(--pa-navy), #226191);\r\n color: #ffffff;\r\n font-size: 18px;\r\n font-weight: 900;\r\n box-shadow: 0 14px 30px rgba(11, 42, 74, 0.16);\r\n }\r\n\r\n .pa-review:nth-child(even) .pa-review__avatar {\r\n background:\r\n radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.85), transparent 38%),\r\n linear-gradient(135deg, var(--pa-yellow), #f3b92a);\r\n color: var(--pa-navy);\r\n }\r\n\r\n .pa-review__name {\r\n display: block;\r\n color: var(--pa-navy);\r\n font-size: 17px;\r\n line-height: 1.2;\r\n font-weight: 900;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .pa-review__meta {\r\n display: block;\r\n margin-top: 4px;\r\n color: var(--pa-muted);\r\n font-size: 13px;\r\n font-weight: 700;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .pa-review__country {\r\n flex: 0 0 auto;\r\n padding: 7px 10px;\r\n border-radius: 999px;\r\n background: var(--pa-blue-soft);\r\n color: var(--pa-navy);\r\n font-size: 12px;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-review__stars {\r\n display: flex;\r\n gap: 4px;\r\n margin-bottom: 18px;\r\n color: #f2b819;\r\n }\r\n\r\n .pa-review__stars svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-review__quote {\r\n margin: 0;\r\n color: var(--pa-text);\r\n font-size: 17px;\r\n line-height: 1.6;\r\n font-weight: 700;\r\n }\r\n\r\n .pa-review__pet {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: auto;\r\n padding-top: 22px;\r\n color: var(--pa-muted);\r\n font-size: 14px;\r\n font-weight: 800;\r\n }\r\n\r\n .pa-review__pet-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 34px;\r\n height: 34px;\r\n border-radius: 50%;\r\n background: rgba(255, 216, 77, 0.24);\r\n color: var(--pa-navy);\r\n }\r\n\r\n .pa-review__pet-icon svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-testimonials__dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 8px;\r\n margin-top: 4px;\r\n }\r\n\r\n .pa-dot {\r\n width: 9px;\r\n height: 9px;\r\n border: 0;\r\n border-radius: 999px;\r\n background: rgba(11, 42, 74, 0.18);\r\n cursor: pointer;\r\n transition: width 180ms ease, background 180ms ease;\r\n }\r\n\r\n .pa-dot.is-active {\r\n width: 28px;\r\n background: var(--pa-yellow);\r\n }\r\n\r\n @media (max-width: 980px) {\r\n .pa-testimonials {\r\n padding: 64px 0;\r\n }\r\n\r\n .pa-testimonials__wrap {\r\n width: min(100% - 28px, 680px);\r\n }\r\n\r\n .pa-testimonials__head {\r\n display: block;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .pa-testimonials h2 {\r\n font-size: clamp(34px, 9vw, 44px);\r\n }\r\n\r\n .pa-testimonials__lead {\r\n font-size: 16px;\r\n line-height: 1.56;\r\n }\r\n\r\n .pa-testimonials__controls {\r\n justify-content: start;\r\n margin-top: 18px;\r\n }\r\n\r\n .pa-review {\r\n flex-basis: min(82vw, 380px);\r\n min-height: 328px;\r\n padding: 22px;\r\n }\r\n\r\n .pa-bubble:nth-child(1) { --size: 68px; left: -24px; top: 90px; }\r\n .pa-bubble:nth-child(2) { --size: 62px; right: 12px; top: 52px; }\r\n .pa-bubble:nth-child(3) { --size: 78px; left: 10%; bottom: 8%; }\r\n .pa-bubble:nth-child(4) { --size: 64px; right: -18px; bottom: 24%; }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .pa-testimonials__wrap {\r\n width: min(100% - 22px, 430px);\r\n }\r\n\r\n .pa-testimonials__track {\r\n padding-right: 0;\r\n padding-left: 0;\r\n }\r\n\r\n .pa-review {\r\n flex-basis: 100%;\r\n min-width: 100%;\r\n }\r\n\r\n .pa-slider-btn {\r\n width: 44px;\r\n height: 44px;\r\n }\r\n\r\n .pa-review__top {\r\n align-items: flex-start;\r\n }\r\n\r\n .pa-review__country {\r\n font-size: 11px;\r\n padding: 6px 9px;\r\n }\r\n\r\n .pa-review__quote {\r\n font-size: 16px;\r\n line-height: 1.55;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .pa-bubble {\r\n animation: none;\r\n }\r\n\r\n .pa-testimonials__track {\r\n scroll-behavior: auto;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"pa-testimonials\" aria-label=\"Pet Atlas customer reviews\">\r\n <div class=\"pa-testimonials__decor\" aria-hidden=\"true\">\r\n <span class=\"pa-bubble pa-bubble--yellow\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9ZM30 25c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm4 0c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm-2 8c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-bubble pa-bubble--blue\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M12 28 20 13l9 9h6l9-9 8 15v11c0 11-9 20-20 20S12 50 12 39V28Zm16 10c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm20 0c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm-20 9h8l-4 5-4-5Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-bubble\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M12 38c0-14 10-25 23-25 12 0 21 9 23 21l3 2-3 2c-1 12-11 21-23 21-13 0-23-9-23-21Zm10-3c-4 0-7 3-7 7v3h14v-3c0-4-3-7-7-7Zm24-9a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM25 50h20c-3-5-6-7-10-7s-7 2-10 7Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-bubble pa-bubble--yellow\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9ZM30 25c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm4 0c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm-2 8c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"pa-testimonials__wrap\">\r\n <div class=\"pa-testimonials__head\">\r\n <div>\r\n <p class=\"pa-testimonials__eyebrow\">Customer stories<\/p>\r\n <h2>Pet parents trust Pet Atlas<\/h2>\r\n <p class=\"pa-testimonials__lead\">\r\n Real stories from pet owners across different countries who needed clear, kind veterinary guidance.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"pa-testimonials__controls\" aria-label=\"Slider controls\">\r\n <button class=\"pa-slider-btn\" type=\"button\" data-pa-prev aria-label=\"Previous review\">\r\n <svg viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M15 18 9 12l6-6\"\/><\/svg>\r\n <\/button>\r\n <button class=\"pa-slider-btn\" type=\"button\" data-pa-next aria-label=\"Next review\">\r\n <svg viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"m9 18 6-6-6-6\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pa-testimonials__viewport\">\r\n <div class=\"pa-testimonials__track\" data-pa-track>\r\n <article class=\"pa-review\">\r\n <div class=\"pa-review__top\">\r\n <div class=\"pa-review__person\">\r\n <span class=\"pa-review__avatar\">EP<\/span>\r\n <div>\r\n <strong class=\"pa-review__name\">Emily Parker<\/strong>\r\n <span class=\"pa-review__meta\">with Milo, Golden Retriever<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"pa-review__country\">USA<\/span>\r\n <\/div>\r\n <div class=\"pa-review__stars\" aria-label=\"5 out of 5 rating\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <\/div>\r\n <p class=\"pa-review__quote\">\"The vet explained everything calmly and helped me decide what Milo needed next. It felt personal, not rushed.\"<\/p>\r\n <div class=\"pa-review__pet\">\r\n <span class=\"pa-review__pet-icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\"><path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm-13 5c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/><\/svg>\r\n <\/span>\r\n Video consultation\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-review\">\r\n <div class=\"pa-review__top\">\r\n <div class=\"pa-review__person\">\r\n <span class=\"pa-review__avatar\">AH<\/span>\r\n <div>\r\n <strong class=\"pa-review__name\">Ahmed Hassan<\/strong>\r\n <span class=\"pa-review__meta\">with Biso, Persian Cat<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"pa-review__country\">Egypt<\/span>\r\n <\/div>\r\n <div class=\"pa-review__stars\" aria-label=\"5 out of 5 rating\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <\/div>\r\n <p class=\"pa-review__quote\">\"I got a clear answer at night without leaving home. The follow-up notes made it easy to care for Biso the next day.\"<\/p>\r\n <div class=\"pa-review__pet\">\r\n <span class=\"pa-review__pet-icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\"><path d=\"M12 28 20 13l9 9h6l9-9 8 15v11c0 11-9 20-20 20S12 50 12 39V28Zm16 10c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm20 0c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Z\"\/><\/svg>\r\n <\/span>\r\n Follow-up care\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-review\">\r\n <div class=\"pa-review__top\">\r\n <div class=\"pa-review__person\">\r\n <span class=\"pa-review__avatar\">AA<\/span>\r\n <div>\r\n <strong class=\"pa-review__name\">Alia Al Mansoori<\/strong>\r\n <span class=\"pa-review__meta\">with Luna, British Shorthair<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"pa-review__country\">UAE<\/span>\r\n <\/div>\r\n <div class=\"pa-review__stars\" aria-label=\"5 out of 5 rating\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <\/div>\r\n <p class=\"pa-review__quote\">\"The chat was simple and respectful. I sent photos, got practical guidance, and knew exactly when to visit a clinic.\"<\/p>\r\n <div class=\"pa-review__pet\">\r\n <span class=\"pa-review__pet-icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\"><path d=\"M12 28 20 13l9 9h6l9-9 8 15v11c0 11-9 20-20 20S12 50 12 39V28Zm16 10c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm20 0c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Z\"\/><\/svg>\r\n <\/span>\r\n Chat with a vet\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-review\">\r\n <div class=\"pa-review__top\">\r\n <div class=\"pa-review__person\">\r\n <span class=\"pa-review__avatar\">SM<\/span>\r\n <div>\r\n <strong class=\"pa-review__name\">Sophie Martin<\/strong>\r\n <span class=\"pa-review__meta\">with Oscar, Beagle<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"pa-review__country\">UK<\/span>\r\n <\/div>\r\n <div class=\"pa-review__stars\" aria-label=\"5 out of 5 rating\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <\/div>\r\n <p class=\"pa-review__quote\">\"Oscar had a stomach issue and I was worried. The vet gave me calm, sensible steps and told me what signs to watch.\"<\/p>\r\n <div class=\"pa-review__pet\">\r\n <span class=\"pa-review__pet-icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\"><path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm-13 5c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/><\/svg>\r\n <\/span>\r\n Medication guidance\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-review\">\r\n <div class=\"pa-review__top\">\r\n <div class=\"pa-review__person\">\r\n <span class=\"pa-review__avatar\">MK<\/span>\r\n <div>\r\n <strong class=\"pa-review__name\">Mona Khaled<\/strong>\r\n <span class=\"pa-review__meta\">with Simba, Mixed Cat<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"pa-review__country\">Egypt<\/span>\r\n <\/div>\r\n <div class=\"pa-review__stars\" aria-label=\"5 out of 5 rating\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <\/div>\r\n <p class=\"pa-review__quote\">\"I liked that the doctor asked detailed questions before giving advice. It made the whole experience feel safe.\"<\/p>\r\n <div class=\"pa-review__pet\">\r\n <span class=\"pa-review__pet-icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\"><path d=\"M12 28 20 13l9 9h6l9-9 8 15v11c0 11-9 20-20 20S12 50 12 39V28Zm16 10c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm20 0c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Z\"\/><\/svg>\r\n <\/span>\r\n Video consultation\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pa-testimonials__dots\" data-pa-dots aria-label=\"Review pagination\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n (function () {\r\n var root = document.querySelector(\".pa-testimonials\");\r\n if (!root) return;\r\n\r\n var track = root.querySelector(\"[data-pa-track]\");\r\n var cards = Array.prototype.slice.call(root.querySelectorAll(\".pa-review\"));\r\n var prev = root.querySelector(\"[data-pa-prev]\");\r\n var next = root.querySelector(\"[data-pa-next]\");\r\n var dotsWrap = root.querySelector(\"[data-pa-dots]\");\r\n var autoplayId = null;\r\n\r\n function getStep() {\r\n if (!cards.length) return 0;\r\n var card = cards[0];\r\n var styles = window.getComputedStyle(track);\r\n var gap = parseFloat(styles.columnGap || styles.gap || 0);\r\n return card.getBoundingClientRect().width + gap;\r\n }\r\n\r\n function currentIndex() {\r\n var step = getStep();\r\n return step ? Math.round(track.scrollLeft \/ step) : 0;\r\n }\r\n\r\n function goTo(index) {\r\n var max = cards.length - 1;\r\n var nextIndex = Math.max(0, Math.min(index, max));\r\n track.scrollTo({ left: nextIndex * getStep(), behavior: \"smooth\" });\r\n }\r\n\r\n function updateDots() {\r\n var index = currentIndex();\r\n var maxVisibleIndex = Math.max(0, cards.length - Math.round(track.clientWidth \/ getStep()));\r\n var active = Math.min(index, maxVisibleIndex);\r\n Array.prototype.forEach.call(dotsWrap.children, function (dot, i) {\r\n dot.classList.toggle(\"is-active\", i === active);\r\n });\r\n }\r\n\r\n function buildDots() {\r\n dotsWrap.innerHTML = \"\";\r\n var visible = Math.max(1, Math.round(track.clientWidth \/ getStep()));\r\n var count = Math.max(1, cards.length - visible + 1);\r\n for (var i = 0; i < count; i += 1) {\r\n var dot = document.createElement(\"button\");\r\n dot.type = \"button\";\r\n dot.className = \"pa-dot\" + (i === 0 ? \" is-active\" : \"\");\r\n dot.setAttribute(\"aria-label\", \"Go to review \" + (i + 1));\r\n dot.addEventListener(\"click\", goTo.bind(null, i));\r\n dotsWrap.appendChild(dot);\r\n }\r\n }\r\n\r\n function startAutoplay() {\r\n stopAutoplay();\r\n autoplayId = window.setInterval(function () {\r\n var visible = Math.max(1, Math.round(track.clientWidth \/ getStep()));\r\n var lastIndex = Math.max(0, cards.length - visible);\r\n var nextIndex = currentIndex() >= lastIndex ? 0 : currentIndex() + 1;\r\n goTo(nextIndex);\r\n }, 5200);\r\n }\r\n\r\n function stopAutoplay() {\r\n if (autoplayId) {\r\n window.clearInterval(autoplayId);\r\n autoplayId = null;\r\n }\r\n }\r\n\r\n prev.addEventListener(\"click\", function () {\r\n goTo(currentIndex() - 1);\r\n });\r\n\r\n next.addEventListener(\"click\", function () {\r\n var visible = Math.max(1, Math.round(track.clientWidth \/ getStep()));\r\n var lastIndex = Math.max(0, cards.length - visible);\r\n goTo(currentIndex() >= lastIndex ? 0 : currentIndex() + 1);\r\n });\r\n\r\n track.addEventListener(\"scroll\", function () {\r\n window.requestAnimationFrame(updateDots);\r\n });\r\n\r\n root.addEventListener(\"mouseenter\", stopAutoplay);\r\n root.addEventListener(\"mouseleave\", startAutoplay);\r\n root.addEventListener(\"focusin\", stopAutoplay);\r\n root.addEventListener(\"focusout\", startAutoplay);\r\n\r\n window.addEventListener(\"resize\", function () {\r\n buildDots();\r\n updateDots();\r\n });\r\n\r\n buildDots();\r\n updateDots();\r\n\r\n if (!window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\r\n startAutoplay();\r\n }\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e0e9990 e-con-full e-flex e-con e-parent\" data-id=\"e0e9990\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19a824a elementor-widget elementor-widget-html\" data-id=\"19a824a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Pet Atlas Why Choose Us<\/title>\r\n <style>\r\n :root {\r\n --pa-navy: #0b2a4a;\r\n --pa-aqua: #bfeef0;\r\n --pa-aqua-2: #d9fbfb;\r\n --pa-yellow: #ffd84d;\r\n --pa-text: #17324d;\r\n --pa-muted: #587086;\r\n --pa-white: #ffffff;\r\n --pa-shadow: 0 18px 42px rgba(11, 42, 74, 0.16);\r\n --pa-radius: 8px;\r\n --pa-font: \"Tajawal\", \"Cairo\", \"Segoe UI\", Arial, sans-serif;\r\n }\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n background: #ffffff;\r\n color: var(--pa-text);\r\n font-family: var(--pa-font);\r\n }\r\n\r\n .pa-why {\r\n position: relative;\r\n overflow: hidden;\r\n isolation: isolate;\r\n padding: 74px 0 0;\r\n background: var(--pa-aqua);\r\n }\r\n\r\n .pa-why::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: -90px -8% auto;\r\n height: 180px;\r\n z-index: -1;\r\n background: var(--pa-yellow);\r\n border-radius: 0 0 50% 50%;\r\n transform: rotate(-3deg);\r\n }\r\n\r\n .pa-why::after {\r\n content: \"\";\r\n position: absolute;\r\n left: -8%;\r\n right: -8%;\r\n bottom: -46px;\r\n height: 160px;\r\n z-index: 1;\r\n background: var(--pa-navy);\r\n border-radius: 50% 50% 0 0 \/ 48% 48% 0 0;\r\n transform: rotate(2deg);\r\n }\r\n\r\n .pa-why__wrap {\r\n position: relative;\r\n width: min(1120px, calc(100% - 40px));\r\n min-height: 610px;\r\n margin: 0 auto;\r\n z-index: 2;\r\n }\r\n\r\n .pa-why__title {\r\n margin: 0 auto;\r\n text-align: center;\r\n color: var(--pa-navy);\r\n font-size: clamp(24px, 2.8vw, 34px);\r\n line-height: 1.15;\r\n font-weight: 900;\r\n letter-spacing: 0;\r\n }\r\n\r\n .pa-why__stage {\r\n position: relative;\r\n min-height: 520px;\r\n margin-top: 22px;\r\n }\r\n\r\n .pa-why__pets {\r\n position: absolute;\r\n left: 50%;\r\n bottom: 20px;\r\n width: min(620px, 58vw);\r\n transform: translateX(-50%);\r\n z-index: 3;\r\n }\r\n\r\n .pa-why__pets img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n object-fit: contain;\r\n filter: drop-shadow(0 22px 32px rgba(11, 42, 74, 0.14));\r\n }\r\n\r\n .pa-why__path {\r\n position: absolute;\r\n inset: 38px 7% 98px;\r\n z-index: 1;\r\n pointer-events: none;\r\n }\r\n\r\n .pa-why__path path {\r\n fill: none;\r\n stroke: rgba(255, 216, 77, 0.95);\r\n stroke-width: 3;\r\n stroke-linecap: round;\r\n stroke-dasharray: 8 12;\r\n animation: paDash 18s linear infinite;\r\n }\r\n\r\n @keyframes paDash {\r\n to {\r\n stroke-dashoffset: -240;\r\n }\r\n }\r\n\r\n .pa-paw {\r\n position: absolute;\r\n z-index: 0;\r\n width: 132px;\r\n height: 132px;\r\n color: rgba(255, 255, 255, 0.28);\r\n }\r\n\r\n .pa-paw--left {\r\n left: -10px;\r\n top: 170px;\r\n transform: rotate(-18deg);\r\n }\r\n\r\n .pa-paw--right {\r\n right: -8px;\r\n bottom: 190px;\r\n transform: rotate(15deg);\r\n }\r\n\r\n .pa-paw svg {\r\n width: 100%;\r\n height: 100%;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-feature {\r\n position: absolute;\r\n z-index: 4;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n min-width: 218px;\r\n max-width: 260px;\r\n padding: 13px 16px;\r\n border: 1px solid rgba(11, 42, 74, 0.1);\r\n border-radius: var(--pa-radius);\r\n background: rgba(255, 255, 255, 0.94);\r\n box-shadow: var(--pa-shadow);\r\n color: var(--pa-navy);\r\n animation: paFloat 7s ease-in-out infinite;\r\n animation-delay: var(--delay);\r\n }\r\n\r\n .pa-feature--advice { --delay: -1s; left: 13%; top: 92px; }\r\n .pa-feature--support { --delay: -3s; right: 12%; top: 48px; }\r\n .pa-feature--deals { --delay: -5s; right: 8%; top: 238px; }\r\n .pa-feature--community { --delay: -2s; left: 7%; top: 282px; }\r\n .pa-feature--soon { --delay: -4s; left: 39%; bottom: 62px; }\r\n\r\n @keyframes paFloat {\r\n 0%, 100% {\r\n transform: translate3d(0, 0, 0);\r\n }\r\n 50% {\r\n transform: translate3d(0, -10px, 0);\r\n }\r\n }\r\n\r\n .pa-feature__icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 0 0 38px;\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 50%;\r\n background: #fff4bf;\r\n color: var(--pa-navy);\r\n box-shadow: inset 0 0 0 2px rgba(255, 216, 77, 0.55);\r\n }\r\n\r\n .pa-feature__icon svg {\r\n width: 22px;\r\n height: 22px;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-feature strong {\r\n display: block;\r\n min-width: 0;\r\n color: var(--pa-navy);\r\n font-size: 15px;\r\n line-height: 1.12;\r\n font-weight: 900;\r\n white-space: normal;\r\n overflow-wrap: anywhere;\r\n }\r\n\r\n .pa-feature__short {\r\n display: none;\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .pa-why {\r\n padding-top: 56px;\r\n }\r\n\r\n .pa-why::before {\r\n height: 130px;\r\n }\r\n\r\n .pa-why::after {\r\n height: 96px;\r\n bottom: -34px;\r\n }\r\n\r\n .pa-why__wrap {\r\n width: min(100% - 24px, 560px);\r\n min-height: 0;\r\n padding-bottom: 64px;\r\n }\r\n\r\n .pa-why__stage {\r\n display: grid;\r\n gap: 14px;\r\n min-height: 0;\r\n margin-top: 22px;\r\n }\r\n\r\n .pa-why__pets {\r\n position: relative;\r\n left: auto;\r\n bottom: auto;\r\n width: min(100%, 470px);\r\n margin: 0 auto;\r\n transform: none;\r\n order: 1;\r\n }\r\n\r\n .pa-why__path {\r\n display: none;\r\n }\r\n\r\n .pa-feature {\r\n position: relative;\r\n inset: auto;\r\n align-items: center;\r\n gap: 8px;\r\n min-width: 0;\r\n max-width: none;\r\n padding: 11px 12px;\r\n animation: none;\r\n }\r\n\r\n .pa-why__features {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 10px;\r\n order: 2;\r\n }\r\n\r\n .pa-feature--soon {\r\n grid-column: 1 \/ -1;\r\n }\r\n\r\n .pa-feature strong {\r\n font-size: 12.5px;\r\n line-height: 1.12;\r\n }\r\n\r\n .pa-feature__icon {\r\n flex-basis: 32px;\r\n width: 32px;\r\n height: 32px;\r\n }\r\n\r\n .pa-feature__icon svg {\r\n width: 19px;\r\n height: 19px;\r\n }\r\n\r\n .pa-paw {\r\n width: 98px;\r\n height: 98px;\r\n }\r\n\r\n .pa-paw--left {\r\n left: -34px;\r\n top: 124px;\r\n }\r\n\r\n .pa-paw--right {\r\n right: -38px;\r\n bottom: 240px;\r\n }\r\n }\r\n\r\n @media (max-width: 420px) {\r\n .pa-why {\r\n padding-top: 44px;\r\n }\r\n\r\n .pa-why__wrap {\r\n width: min(100% - 10px, 380px);\r\n padding-bottom: 54px;\r\n }\r\n\r\n .pa-why__title {\r\n font-size: 29px;\r\n }\r\n\r\n .pa-why__stage {\r\n gap: 10px;\r\n }\r\n\r\n .pa-why__pets {\r\n width: min(100%, 350px);\r\n }\r\n\r\n .pa-why__features {\r\n gap: 8px;\r\n }\r\n\r\n .pa-feature {\r\n gap: 7px;\r\n min-height: 74px;\r\n padding: 9px 8px;\r\n }\r\n\r\n .pa-feature strong {\r\n font-size: 11.2px;\r\n line-height: 1.08;\r\n }\r\n\r\n .pa-feature__icon {\r\n flex-basis: 29px;\r\n width: 29px;\r\n height: 29px;\r\n }\r\n\r\n .pa-feature__icon svg {\r\n width: 17px;\r\n height: 17px;\r\n }\r\n\r\n .pa-feature--soon {\r\n min-height: 60px;\r\n justify-content: center;\r\n }\r\n\r\n .pa-feature__full {\r\n display: none;\r\n }\r\n\r\n .pa-feature__short {\r\n display: inline;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .pa-feature,\r\n .pa-why__path path {\r\n animation: none;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"pa-why\" aria-label=\"Why choose Pet Atlas\">\r\n <div class=\"pa-why__wrap\">\r\n <h2 class=\"pa-why__title\">Why Choose Us<\/h2>\r\n\r\n <span class=\"pa-paw pa-paw--left\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\"><path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9ZM30 25c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm4 0c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm-2 8c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/><\/svg>\r\n <\/span>\r\n <span class=\"pa-paw pa-paw--right\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\"><path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9ZM30 25c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm4 0c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm-2 8c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/><\/svg>\r\n <\/span>\r\n\r\n <div class=\"pa-why__stage\">\r\n <svg class=\"pa-why__path\" viewBox=\"0 0 960 390\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n <path d=\"M80 120 C190 20 320 70 420 95 C550 128 655 56 780 80 C910 106 820 220 690 214 C590 210 560 316 450 302 C330 286 330 206 225 224 C112 244 40 210 80 120Z\"\/>\r\n <path d=\"M85 274 C160 322 240 258 292 300 C356 352 430 358 480 300\"\/>\r\n <\/svg>\r\n\r\n <figure class=\"pa-why__pets\">\r\n <picture>\r\n <source srcset=\"https:\/\/pet-atlas.com\/wp-content\/uploads\/2026\/07\/pet-atlas-why-choose-pets-cutout.webp\" type=\"image\/webp\">\r\n <img src=\"https:\/\/pet-atlas.com\/wp-content\/uploads\/2026\/07\/pet-atlas-why-choose-pets-cutout.webp\" alt=\"Cat and dog using a tablet together\" loading=\"lazy\" decoding=\"async\">\r\n <\/picture>\r\n <\/figure>\r\n\r\n <div class=\"pa-why__features\">\r\n <div class=\"pa-feature pa-feature--advice\">\r\n <span class=\"pa-feature__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm-1 14-4-4 1.4-1.4L11 13.2l5.6-5.6L18 9l-7 7Z\"\/><\/svg>\r\n <\/span>\r\n <strong>\r\n <span class=\"pa-feature__full\">Expert Advice and Recommendations<\/span>\r\n <span class=\"pa-feature__short\">Expert Advice<\/span>\r\n <\/strong>\r\n <\/div>\r\n\r\n <div class=\"pa-feature pa-feature--support\">\r\n <span class=\"pa-feature__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 3a8 8 0 0 0-8 8v4a3 3 0 0 0 3 3h2v-7H6a6 6 0 0 1 12 0h-3v7h2.1A5.1 5.1 0 0 1 12 22v-2a3.1 3.1 0 0 0 3.1-2H17a3 3 0 0 0 3-3v-4a8 8 0 0 0-8-8Z\"\/><\/svg>\r\n <\/span>\r\n <strong>\r\n <span class=\"pa-feature__full\">Veterinary Support at Your Fingertips<\/span>\r\n <span class=\"pa-feature__short\">Vet Support<\/span>\r\n <\/strong>\r\n <\/div>\r\n\r\n <div class=\"pa-feature pa-feature--deals\">\r\n <span class=\"pa-feature__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 7h16v2H4V7Zm1 4h14l-1.2 8H6.2L5 11Zm3-7h8l2 3H6l2-3Zm2 10v3h2v-3h-2Zm4 0v3h2v-3h-2Z\"\/><\/svg>\r\n <\/span>\r\n <strong>\r\n <span class=\"pa-feature__full\">Exclusive Pet Deals Delivered to Your Inbox<\/span>\r\n <span class=\"pa-feature__short\">Pet Deals<\/span>\r\n <\/strong>\r\n <\/div>\r\n\r\n <div class=\"pa-feature pa-feature--community\">\r\n <span class=\"pa-feature__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M8 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm8 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8ZM2 21c.5-4.2 3-7 6-7s5.5 2.8 6 7H2Zm8.5 0c.3-2.2 1.3-4.2 2.8-5.4.8-.7 1.8-1.1 2.7-1.1 3 0 5.5 2.6 6 6.5H10.5Z\"\/><\/svg>\r\n <\/span>\r\n <strong>\r\n <span class=\"pa-feature__full\">A Community for Pet Lovers<\/span>\r\n <span class=\"pa-feature__short\">Pet Community<\/span>\r\n <\/strong>\r\n <\/div>\r\n\r\n <div class=\"pa-feature pa-feature--soon\">\r\n <span class=\"pa-feature__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2 3 7v10l9 5 9-5V7l-9-5Zm0 2.3L18 7.7l-6 3.4-6-3.4 6-3.4ZM5 9.4l6 3.4v6.8l-6-3.4V9.4Zm8 10.2v-6.8l6-3.4v6.8l-6 3.4Z\"\/><\/svg>\r\n <\/span>\r\n <strong>\r\n <span class=\"pa-feature__full\">Exciting Features Coming Soon<\/span>\r\n <span class=\"pa-feature__short\">Coming Soon<\/span>\r\n <\/strong>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-10464c0 e-con-full e-flex e-con e-parent\" data-id=\"10464c0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dbd6e09 elementor-widget elementor-widget-html\" data-id=\"dbd6e09\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Pet Atlas FAQ<\/title>\r\n <style>\r\n :root {\r\n --pa-navy: #0b2a4a;\r\n --pa-navy-2: #123d67;\r\n --pa-blue-soft: #eaf6ff;\r\n --pa-yellow: #ffd84d;\r\n --pa-text: #17324d;\r\n --pa-muted: #587086;\r\n --pa-white: #ffffff;\r\n --pa-line: rgba(11, 42, 74, 0.11);\r\n --pa-shadow: 0 20px 54px rgba(11, 42, 74, 0.11);\r\n --pa-radius: 8px;\r\n --pa-font: \"Tajawal\", \"Cairo\", \"Segoe UI\", Arial, sans-serif;\r\n }\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n background: #ffffff;\r\n color: var(--pa-text);\r\n font-family: var(--pa-font);\r\n }\r\n\r\n .pa-faq {\r\n position: relative;\r\n overflow: hidden;\r\n isolation: isolate;\r\n padding: 88px 0;\r\n background:\r\n radial-gradient(circle at 10% 14%, rgba(255, 216, 77, 0.18), transparent 24%),\r\n radial-gradient(circle at 88% 24%, rgba(123, 201, 255, 0.22), transparent 28%),\r\n linear-gradient(180deg, #f8fcff 0%, var(--pa-blue-soft) 100%);\r\n }\r\n\r\n .pa-faq::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: -2;\r\n background-image:\r\n linear-gradient(rgba(11, 42, 74, 0.035) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(11, 42, 74, 0.035) 1px, transparent 1px);\r\n background-size: 44px 44px;\r\n mask-image: linear-gradient(180deg, transparent, #000 16%, #000 88%, transparent);\r\n }\r\n\r\n .pa-faq__decor {\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n pointer-events: none;\r\n }\r\n\r\n .pa-faq__bubble {\r\n position: absolute;\r\n display: grid;\r\n place-items: center;\r\n width: var(--size);\r\n height: var(--size);\r\n border: 2px solid rgba(11, 42, 74, 0.12);\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.62);\r\n color: rgba(11, 42, 74, 0.28);\r\n box-shadow: 0 18px 48px rgba(11, 42, 74, 0.08);\r\n animation: paFaqFloat 9s ease-in-out infinite;\r\n animation-delay: var(--delay);\r\n }\r\n\r\n .pa-faq__bubble svg {\r\n width: 54%;\r\n height: 54%;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-faq__bubble--yellow {\r\n background: rgba(255, 216, 77, 0.26);\r\n border-color: rgba(255, 216, 77, 0.46);\r\n color: rgba(11, 42, 74, 0.34);\r\n }\r\n\r\n .pa-faq__bubble:nth-child(1) { --size: 96px; --delay: -1s; left: 5%; top: 16%; }\r\n .pa-faq__bubble:nth-child(2) { --size: 74px; --delay: -5s; right: 9%; top: 10%; }\r\n .pa-faq__bubble:nth-child(3) { --size: 112px; --delay: -3s; right: 6%; bottom: 12%; }\r\n .pa-faq__bubble:nth-child(4) { --size: 70px; --delay: -7s; left: 14%; bottom: 14%; }\r\n\r\n @keyframes paFaqFloat {\r\n 0%, 100% {\r\n transform: translate3d(0, 0, 0) rotate(-6deg);\r\n }\r\n 50% {\r\n transform: translate3d(0, -14px, 0) rotate(4deg);\r\n }\r\n }\r\n\r\n .pa-faq__wrap {\r\n position: relative;\r\n z-index: 1;\r\n width: min(980px, calc(100% - 40px));\r\n margin: 0 auto;\r\n }\r\n\r\n .pa-faq__head {\r\n max-width: 700px;\r\n margin: 0 auto 34px;\r\n text-align: center;\r\n }\r\n\r\n .pa-faq__eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin: 0 0 16px;\r\n padding: 9px 14px;\r\n border: 1px solid rgba(18, 61, 103, 0.12);\r\n border-radius: 999px;\r\n background: rgba(255, 255, 255, 0.78);\r\n color: var(--pa-navy-2);\r\n font-size: 14px;\r\n font-weight: 800;\r\n box-shadow: 0 10px 28px rgba(11, 42, 74, 0.06);\r\n }\r\n\r\n .pa-faq__eyebrow::before {\r\n content: \"\";\r\n width: 9px;\r\n height: 9px;\r\n border-radius: 50%;\r\n background: var(--pa-yellow);\r\n box-shadow: 0 0 0 5px rgba(255, 216, 77, 0.25);\r\n }\r\n\r\n .pa-faq h2 {\r\n margin: 0;\r\n color: var(--pa-navy);\r\n font-size: clamp(38px, 5vw, 58px);\r\n line-height: 1.06;\r\n font-weight: 900;\r\n letter-spacing: 0;\r\n }\r\n\r\n .pa-faq__lead {\r\n margin: 18px auto 0;\r\n max-width: 620px;\r\n color: var(--pa-muted);\r\n font-size: 18px;\r\n line-height: 1.62;\r\n font-weight: 600;\r\n }\r\n\r\n .pa-faq__list {\r\n display: grid;\r\n gap: 12px;\r\n }\r\n\r\n .pa-faq__item {\r\n border: 1px solid var(--pa-line);\r\n border-radius: var(--pa-radius);\r\n background: rgba(255, 255, 255, 0.9);\r\n box-shadow: 0 14px 36px rgba(11, 42, 74, 0.07);\r\n backdrop-filter: blur(12px);\r\n overflow: hidden;\r\n }\r\n\r\n .pa-faq__button {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 18px;\r\n min-height: 78px;\r\n padding: 22px 24px;\r\n border: 0;\r\n background: transparent;\r\n color: var(--pa-navy);\r\n text-align: left;\r\n cursor: pointer;\r\n font: inherit;\r\n }\r\n\r\n .pa-faq__question {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n min-width: 0;\r\n font-size: 19px;\r\n line-height: 1.28;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-faq__mark {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 0 0 38px;\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 50%;\r\n background: var(--pa-blue-soft);\r\n color: var(--pa-navy);\r\n box-shadow: inset 0 0 0 2px rgba(123, 201, 255, 0.22);\r\n }\r\n\r\n .pa-faq__mark svg {\r\n width: 21px;\r\n height: 21px;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-faq__toggle {\r\n position: relative;\r\n flex: 0 0 36px;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n background: var(--pa-yellow);\r\n box-shadow: 0 12px 24px rgba(255, 216, 77, 0.24);\r\n }\r\n\r\n .pa-faq__toggle::before,\r\n .pa-faq__toggle::after {\r\n content: \"\";\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n width: 15px;\r\n height: 3px;\r\n border-radius: 999px;\r\n background: var(--pa-navy);\r\n transform: translate(-50%, -50%);\r\n transition: transform 180ms ease, opacity 180ms ease;\r\n }\r\n\r\n .pa-faq__toggle::after {\r\n transform: translate(-50%, -50%) rotate(90deg);\r\n }\r\n\r\n .pa-faq__item.is-open .pa-faq__toggle::after {\r\n opacity: 0;\r\n transform: translate(-50%, -50%) rotate(0deg);\r\n }\r\n\r\n .pa-faq__panel {\r\n display: grid;\r\n grid-template-rows: 0fr;\r\n transition: grid-template-rows 220ms ease;\r\n }\r\n\r\n .pa-faq__item.is-open .pa-faq__panel {\r\n grid-template-rows: 1fr;\r\n }\r\n\r\n .pa-faq__answer-wrap {\r\n overflow: hidden;\r\n }\r\n\r\n .pa-faq__answer {\r\n margin: 0;\r\n padding: 0 24px 24px 76px;\r\n color: var(--pa-muted);\r\n font-size: 16.5px;\r\n line-height: 1.68;\r\n font-weight: 600;\r\n }\r\n\r\n .pa-faq__cta {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 18px;\r\n margin-top: 22px;\r\n padding: 20px 22px;\r\n border: 1px solid rgba(11, 42, 74, 0.1);\r\n border-radius: var(--pa-radius);\r\n background: var(--pa-navy);\r\n color: #ffffff;\r\n box-shadow: var(--pa-shadow);\r\n }\r\n\r\n .pa-faq__cta strong {\r\n display: block;\r\n font-size: 18px;\r\n line-height: 1.25;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-faq__cta span {\r\n display: block;\r\n margin-top: 5px;\r\n color: rgba(255, 255, 255, 0.78);\r\n font-size: 14px;\r\n line-height: 1.45;\r\n font-weight: 700;\r\n }\r\n\r\n .pa-faq__cta a {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 48px;\r\n padding: 0 20px;\r\n border-radius: var(--pa-radius);\r\n background: var(--pa-yellow);\r\n color: var(--pa-navy);\r\n text-decoration: none;\r\n font-size: 15px;\r\n font-weight: 900;\r\n white-space: nowrap;\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .pa-faq {\r\n padding: 62px 0;\r\n }\r\n\r\n .pa-faq__wrap {\r\n width: min(100% - 24px, 520px);\r\n }\r\n\r\n .pa-faq__head {\r\n margin-bottom: 26px;\r\n text-align: left;\r\n }\r\n\r\n .pa-faq h2 {\r\n font-size: clamp(32px, 9vw, 40px);\r\n }\r\n\r\n .pa-faq__lead {\r\n font-size: 16px;\r\n line-height: 1.56;\r\n }\r\n\r\n .pa-faq__button {\r\n min-height: 70px;\r\n padding: 18px 16px;\r\n }\r\n\r\n .pa-faq__question {\r\n gap: 11px;\r\n font-size: 16px;\r\n }\r\n\r\n .pa-faq__mark {\r\n flex-basis: 34px;\r\n width: 34px;\r\n height: 34px;\r\n }\r\n\r\n .pa-faq__toggle {\r\n flex-basis: 32px;\r\n width: 32px;\r\n height: 32px;\r\n }\r\n\r\n .pa-faq__answer {\r\n padding: 0 16px 20px 61px;\r\n font-size: 15px;\r\n line-height: 1.58;\r\n }\r\n\r\n .pa-faq__cta {\r\n display: block;\r\n }\r\n\r\n .pa-faq__cta a {\r\n width: 100%;\r\n margin-top: 16px;\r\n }\r\n\r\n .pa-faq__bubble:nth-child(1) { --size: 68px; left: -28px; top: 96px; }\r\n .pa-faq__bubble:nth-child(2) { --size: 60px; right: 14px; top: 42px; }\r\n .pa-faq__bubble:nth-child(3) { --size: 76px; right: -22px; bottom: 16%; }\r\n .pa-faq__bubble:nth-child(4) { display: none; }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .pa-faq__bubble {\r\n animation: none;\r\n }\r\n\r\n .pa-faq__panel,\r\n .pa-faq__toggle::before,\r\n .pa-faq__toggle::after {\r\n transition: none;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"pa-faq\" id=\"faq\" aria-label=\"Frequently asked questions\">\r\n <div class=\"pa-faq__decor\" aria-hidden=\"true\">\r\n <span class=\"pa-faq__bubble pa-faq__bubble--yellow\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\"><path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9ZM32 33c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/><\/svg>\r\n <\/span>\r\n <span class=\"pa-faq__bubble\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\"><path d=\"M32 4c-12 0-22 8-22 19 0 7 4 13 10 16l-2 10 11-7h3c12 0 22-8 22-19S44 4 32 4Zm-1 29h4v4h-4v-4Zm1-22c5 0 9 3 9 8 0 6-6 7-6 11h-4c0-6 6-6 6-11 0-2-2-4-5-4s-5 2-5 5h-4c0-5 4-9 9-9Z\"\/><\/svg>\r\n <\/span>\r\n <span class=\"pa-faq__bubble pa-faq__bubble--yellow\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\"><path d=\"M12 28 20 13l9 9h6l9-9 8 15v11c0 11-9 20-20 20S12 50 12 39V28Zm16 10c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm20 0c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Z\"\/><\/svg>\r\n <\/span>\r\n <span class=\"pa-faq__bubble\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\"><path d=\"M12 38c0-14 10-25 23-25 12 0 21 9 23 21l3 2-3 2c-1 12-11 21-23 21-13 0-23-9-23-21Zm10-3c-4 0-7 3-7 7v3h14v-3c0-4-3-7-7-7Zm24-9a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z\"\/><\/svg>\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"pa-faq__wrap\">\r\n <div class=\"pa-faq__head\">\r\n <p class=\"pa-faq__eyebrow\">FAQ<\/p>\r\n <h2>Frequently asked questions<\/h2>\r\n <p class=\"pa-faq__lead\">\r\n Quick answers about online vet consultations, safety, prescriptions, and follow-up care.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"pa-faq__list\" data-pa-faq>\r\n <article class=\"pa-faq__item is-open\">\r\n <button class=\"pa-faq__button\" type=\"button\" aria-expanded=\"true\">\r\n <span class=\"pa-faq__question\">\r\n <span class=\"pa-faq__mark\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm-1 14-4-4 1.4-1.4L11 13.2l5.6-5.6L18 9l-7 7Z\"\/><\/svg>\r\n <\/span>\r\n Is Pet Atlas a replacement for an emergency clinic?\r\n <\/span>\r\n <span class=\"pa-faq__toggle\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n <div class=\"pa-faq__panel\">\r\n <div class=\"pa-faq__answer-wrap\">\r\n <p class=\"pa-faq__answer\">No. Pet Atlas is great for guidance, triage, and non-emergency questions. If your pet has severe bleeding, breathing trouble, seizures, poisoning, or collapse, go to an emergency clinic immediately.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-faq__item\">\r\n <button class=\"pa-faq__button\" type=\"button\" aria-expanded=\"false\">\r\n <span class=\"pa-faq__question\">\r\n <span class=\"pa-faq__mark\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 5h16v12H7l-3 3V5Zm4 4v2h8V9H8Zm0 4v2h6v-2H8Z\"\/><\/svg>\r\n <\/span>\r\n Can I talk to a vet by chat or video?\r\n <\/span>\r\n <span class=\"pa-faq__toggle\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n <div class=\"pa-faq__panel\">\r\n <div class=\"pa-faq__answer-wrap\">\r\n <p class=\"pa-faq__answer\">Yes. You can choose the format that fits your situation. Chat works well for quick questions and photos, while video helps when the vet needs to see symptoms more clearly.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-faq__item\">\r\n <button class=\"pa-faq__button\" type=\"button\" aria-expanded=\"false\">\r\n <span class=\"pa-faq__question\">\r\n <span class=\"pa-faq__mark\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M7 3h10v2h2v16H5V5h2V3Zm2 4H7v12h10V7h-2v2H9V7Zm1 5h4v2h-4v-2Zm0 4h5v2h-5v-2Z\"\/><\/svg>\r\n <\/span>\r\n Can the vet prescribe medication online?\r\n <\/span>\r\n <span class=\"pa-faq__toggle\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n <div class=\"pa-faq__panel\">\r\n <div class=\"pa-faq__answer-wrap\">\r\n <p class=\"pa-faq__answer\">Medication advice depends on your location, local regulations, and the pet's condition. When a prescription is not possible online, the vet can still explain safe next steps and when to visit a clinic.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-faq__item\">\r\n <button class=\"pa-faq__button\" type=\"button\" aria-expanded=\"false\">\r\n <span class=\"pa-faq__question\">\r\n <span class=\"pa-faq__mark\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z\"\/><\/svg>\r\n <\/span>\r\n What information should I prepare before a consultation?\r\n <\/span>\r\n <span class=\"pa-faq__toggle\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n <div class=\"pa-faq__panel\">\r\n <div class=\"pa-faq__answer-wrap\">\r\n <p class=\"pa-faq__answer\">Prepare your pet's age, breed, weight, symptoms, recent food or medication changes, and clear photos or videos if possible. This helps the veterinarian give faster and more accurate guidance.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-faq__item\">\r\n <button class=\"pa-faq__button\" type=\"button\" aria-expanded=\"false\">\r\n <span class=\"pa-faq__question\">\r\n <span class=\"pa-faq__mark\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 3a9 9 0 1 0 9 9h-2a7 7 0 1 1-2.1-5H14v2h6V3h-2v2.2A9 9 0 0 0 12 3Zm-1 5h2v5l4 2-1 1.7-5-2.7V8Z\"\/><\/svg>\r\n <\/span>\r\n Do you offer follow-up support?\r\n <\/span>\r\n <span class=\"pa-faq__toggle\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n <div class=\"pa-faq__panel\">\r\n <div class=\"pa-faq__answer-wrap\">\r\n <p class=\"pa-faq__answer\">Yes. Follow-up support helps you understand progress, monitor symptoms, and know when your pet needs an in-person visit or a change in care plan.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <div class=\"pa-faq__cta\">\r\n <div>\r\n <strong>Still unsure what your pet needs?<\/strong>\r\n <span>Start with a quick consultation and get clear guidance from a licensed veterinarian.<\/span>\r\n <\/div>\r\n <a href=\"#booking\">Talk to a Vet<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n (function () {\r\n var root = document.querySelector(\"[data-pa-faq]\");\r\n if (!root) return;\r\n\r\n var items = Array.prototype.slice.call(root.querySelectorAll(\".pa-faq__item\"));\r\n\r\n items.forEach(function (item) {\r\n var button = item.querySelector(\".pa-faq__button\");\r\n\r\n button.addEventListener(\"click\", function () {\r\n var isOpen = item.classList.contains(\"is-open\");\r\n\r\n items.forEach(function (other) {\r\n other.classList.remove(\"is-open\");\r\n other.querySelector(\".pa-faq__button\").setAttribute(\"aria-expanded\", \"false\");\r\n });\r\n\r\n if (!isOpen) {\r\n item.classList.add(\"is-open\");\r\n button.setAttribute(\"aria-expanded\", \"true\");\r\n }\r\n });\r\n });\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pet Atlas Hero Online veterinary consultations, anytime A trusted vet when your pet needs one Connect with licensed veterinarians by video or chat and get clear, friendly guidance from the first minute. Talk to a Vet See How It Works +50K Cases supported +200 Veterinarians 4.9\/5 Client rating Pet Atlas Trust Bar Trusted care, built […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-885","page","type-page","status-publish","hentry"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/pages\/885","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/comments?post=885"}],"version-history":[{"count":485,"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/pages\/885\/revisions"}],"predecessor-version":[{"id":2834,"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/pages\/885\/revisions\/2834"}],"wp:attachment":[{"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/media?parent=885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Pet Atlas Hero<\/title>\r\n <style>\r\n :root {\r\n --pa-navy: #0b2a4a;\r\n --pa-navy-2: #123d67;\r\n --pa-blue-soft: #eaf6ff;\r\n --pa-yellow: #ffd84d;\r\n --pa-text: #17324d;\r\n --pa-muted: #587086;\r\n --pa-white: #ffffff;\r\n --pa-shadow: 0 22px 70px rgba(11, 42, 74, 0.16);\r\n --pa-radius: 8px;\r\n --pa-font: \"Tajawal\", \"Cairo\", \"Segoe UI\", Arial, sans-serif;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n background: #ffffff;\r\n color: var(--pa-text);\r\n font-family: var(--pa-font);\r\n }\r\n\r\n .pa-hero {\r\n position: relative;\r\n min-height: 720px;\r\n overflow: hidden;\r\n isolation: isolate;\r\n background: var(--pa-blue-soft);\r\n }\r\n\r\n .pa-hero__image {\r\n position: absolute;\r\n inset: 0;\r\n z-index: -2;\r\n }\r\n\r\n .pa-hero__image picture,\r\n .pa-hero__image img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .pa-hero__image img {\r\n object-fit: cover;\r\n object-position: center;\r\n }\r\n\r\n .pa-hero::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n background:\r\n linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.56) 46%, rgba(255, 255, 255, 0.08) 76%),\r\n linear-gradient(180deg, rgba(234, 246, 255, 0.12) 0%, rgba(234, 246, 255, 0.6) 100%);\r\n }\r\n\r\n .pa-hero__wrap {\r\n width: min(1180px, calc(100% - 40px));\r\n min-height: 720px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: minmax(320px, 560px) 1fr;\r\n align-items: center;\r\n padding: 96px 0 72px;\r\n }\r\n\r\n .pa-hero__content {\r\n max-width: 560px;\r\n }\r\n\r\n .pa-hero__eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin: 0 0 18px;\r\n padding: 9px 14px;\r\n border: 1px solid rgba(18, 61, 103, 0.12);\r\n border-radius: 999px;\r\n background: rgba(255, 255, 255, 0.82);\r\n color: var(--pa-navy-2);\r\n font-size: 15px;\r\n font-weight: 700;\r\n box-shadow: 0 10px 30px rgba(11, 42, 74, 0.08);\r\n }\r\n\r\n .pa-hero__eyebrow::before {\r\n content: \"\";\r\n width: 9px;\r\n height: 9px;\r\n border-radius: 50%;\r\n background: var(--pa-yellow);\r\n box-shadow: 0 0 0 5px rgba(255, 216, 77, 0.28);\r\n }\r\n\r\n .pa-hero h1 {\r\n margin: 0;\r\n max-width: 12ch;\r\n color: var(--pa-navy);\r\n font-size: clamp(42px, 6vw, 74px);\r\n line-height: 1.04;\r\n font-weight: 900;\r\n letter-spacing: 0;\r\n }\r\n\r\n .pa-hero__lead {\r\n max-width: 590px;\r\n margin: 24px 0 0;\r\n color: var(--pa-muted);\r\n font-size: clamp(18px, 2vw, 22px);\r\n line-height: 1.75;\r\n font-weight: 500;\r\n }\r\n\r\n .pa-hero__actions {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 14px;\r\n margin-top: 34px;\r\n }\r\n\r\n .pa-hero__button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 56px;\r\n padding: 0 28px;\r\n border-radius: var(--pa-radius);\r\n text-decoration: none;\r\n font-size: 17px;\r\n font-weight: 800;\r\n transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;\r\n }\r\n\r\n .pa-hero__button--primary {\r\n background: var(--pa-yellow);\r\n color: var(--pa-navy);\r\n box-shadow: 0 16px 34px rgba(255, 216, 77, 0.38);\r\n }\r\n\r\n .pa-hero__button--secondary {\r\n background: rgba(255, 255, 255, 0.82);\r\n color: var(--pa-navy);\r\n border: 1px solid rgba(11, 42, 74, 0.12);\r\n }\r\n\r\n .pa-hero__button:hover {\r\n transform: translateY(-2px);\r\n box-shadow: var(--pa-shadow);\r\n }\r\n\r\n .pa-hero__stats {\r\n display: grid;\r\n grid-template-columns: repeat(3, max-content);\r\n gap: 22px;\r\n margin-top: 38px;\r\n padding: 18px 20px;\r\n width: fit-content;\r\n border-radius: var(--pa-radius);\r\n background: rgba(255, 255, 255, 0.84);\r\n box-shadow: 0 16px 44px rgba(11, 42, 74, 0.1);\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .pa-hero__stat strong {\r\n display: block;\r\n color: var(--pa-navy);\r\n font-size: 22px;\r\n line-height: 1;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-hero__stat span {\r\n display: block;\r\n margin-top: 7px;\r\n color: var(--pa-muted);\r\n font-size: 14px;\r\n font-weight: 700;\r\n white-space: nowrap;\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .pa-hero {\r\n min-height: auto;\r\n padding-top: 16px;\r\n overflow: visible;\r\n background:\r\n linear-gradient(180deg, var(--pa-blue-soft) 0 360px, #ffffff 360px 100%);\r\n }\r\n\r\n .pa-hero::before {\r\n display: none;\r\n }\r\n\r\n .pa-hero__image {\r\n position: relative;\r\n inset: auto;\r\n z-index: 0;\r\n width: min(calc(100% - 28px), 430px);\r\n height: clamp(260px, 68vw, 330px);\r\n margin: 0 auto;\r\n overflow: hidden;\r\n border: 5px solid rgba(255, 255, 255, 0.9);\r\n border-radius: 22px;\r\n background: #dff1ff;\r\n box-shadow: 0 22px 54px rgba(11, 42, 74, 0.18);\r\n }\r\n\r\n .pa-hero__image::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: auto 0 0;\r\n height: 34%;\r\n background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(11, 42, 74, 0.08) 100%);\r\n pointer-events: none;\r\n }\r\n\r\n .pa-hero__image img {\r\n object-position: center 34%;\r\n }\r\n\r\n .pa-hero__wrap {\r\n width: min(100% - 28px, 430px);\r\n min-height: auto;\r\n display: block;\r\n padding: 18px 0 40px;\r\n }\r\n\r\n .pa-hero__content {\r\n width: 100%;\r\n max-width: none;\r\n margin: 0 auto;\r\n padding: 0;\r\n text-align: left;\r\n border-radius: 0;\r\n background: transparent;\r\n box-shadow: none;\r\n }\r\n\r\n .pa-hero h1 {\r\n max-width: none;\r\n font-size: clamp(32px, 9.2vw, 40px);\r\n line-height: 1.06;\r\n }\r\n\r\n .pa-hero__lead {\r\n font-size: 16px;\r\n line-height: 1.55;\r\n margin-top: 14px;\r\n }\r\n\r\n .pa-hero__actions {\r\n gap: 10px;\r\n margin-top: 20px;\r\n }\r\n\r\n .pa-hero__button {\r\n flex: 1 1 100%;\r\n min-height: 54px;\r\n }\r\n\r\n .pa-hero__stats {\r\n width: 100%;\r\n grid-template-columns: 1fr;\r\n gap: 10px;\r\n padding: 0;\r\n margin-top: 26px;\r\n background: transparent;\r\n box-shadow: none;\r\n backdrop-filter: none;\r\n }\r\n\r\n .pa-hero__stat {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 14px;\r\n padding: 14px 16px;\r\n border: 1px solid rgba(11, 42, 74, 0.1);\r\n border-radius: var(--pa-radius);\r\n background: #f8fbff;\r\n }\r\n\r\n .pa-hero__stat strong {\r\n font-size: 21px;\r\n }\r\n\r\n .pa-hero__stat span {\r\n margin-top: 0;\r\n color: var(--pa-text);\r\n font-size: 14px;\r\n white-space: normal;\r\n }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .pa-hero__wrap {\r\n width: min(100% - 20px, 420px);\r\n padding: 22px 0 36px;\r\n }\r\n\r\n .pa-hero__image {\r\n width: min(calc(100% - 20px), 410px);\r\n height: clamp(250px, 70vw, 320px);\r\n border-width: 4px;\r\n border-radius: 18px;\r\n }\r\n\r\n .pa-hero__eyebrow {\r\n font-size: 13px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .pa-hero__stats {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"pa-hero\" aria-label=\"Pet Atlas hero\">\r\n <div class=\"pa-hero__image\" aria-hidden=\"true\">\r\n <picture>\r\n <source media=\"(max-width: 900px)\" srcset=\"https:\/\/pet-atlas.com\/wp-content\/uploads\/2026\/07\/pet-atlas-hero-mobile.webp\" type=\"image\/webp\">\r\n <source srcset=\"https:\/\/pet-atlas.com\/wp-content\/uploads\/2026\/07\/pet-atlas-hero.webp\" type=\"image\/webp\">\r\n <img src=\"https:\/\/pet-atlas.com\/wp-content\/uploads\/2026\/07\/pet-atlas-hero.webp\" alt=\"\" loading=\"eager\" decoding=\"async\">\r\n <\/picture>\r\n <\/div>\r\n\r\n <div class=\"pa-hero__wrap\">\r\n <div class=\"pa-hero__content\">\r\n <p class=\"pa-hero__eyebrow\">Online veterinary consultations, anytime<\/p>\r\n <h1>A trusted vet when your pet needs one<\/h1>\r\n <p class=\"pa-hero__lead\">\r\n Connect with licensed veterinarians by video or chat and get clear, friendly guidance from the first minute.\r\n <\/p>\r\n\r\n <div class=\"pa-hero__actions\" aria-label=\"Primary actions\">\r\n <a class=\"pa-hero__button pa-hero__button--primary\" href=\"#booking\">Talk to a Vet<\/a>\r\n <a class=\"pa-hero__button pa-hero__button--secondary\" href=\"#how-it-works\">See How It Works<\/a>\r\n <\/div>\r\n\r\n <div class=\"pa-hero__stats\" aria-label=\"Trust indicators\">\r\n <div class=\"pa-hero__stat\">\r\n <strong>+50K<\/strong>\r\n <span>Cases supported<\/span>\r\n <\/div>\r\n <div class=\"pa-hero__stat\">\r\n <strong>+200<\/strong>\r\n <span>Veterinarians<\/span>\r\n <\/div>\r\n <div class=\"pa-hero__stat\">\r\n <strong>4.9\/5<\/strong>\r\n <span>Client rating<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bdef767 e-con-full e-flex e-con e-parent\" data-id=\"bdef767\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b8e82d5 elementor-widget elementor-widget-html\" data-id=\"b8e82d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Pet Atlas Trust Bar<\/title>\r\n <style>\r\n :root {\r\n --pa-navy: #0b2a4a;\r\n --pa-blue-soft: #eaf6ff;\r\n --pa-text: #17324d;\r\n --pa-muted: #587086;\r\n --pa-white: #ffffff;\r\n --pa-radius: 8px;\r\n --pa-font: \"Tajawal\", \"Cairo\", \"Segoe UI\", Arial, sans-serif;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n background: #ffffff;\r\n color: var(--pa-text);\r\n font-family: var(--pa-font);\r\n }\r\n\r\n .pa-trust {\r\n background: #ffffff;\r\n border-top: 1px solid rgba(11, 42, 74, 0.08);\r\n border-bottom: 1px solid rgba(11, 42, 74, 0.08);\r\n }\r\n\r\n .pa-trust__wrap {\r\n width: min(1180px, calc(100% - 40px));\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: minmax(220px, 300px) 1fr;\r\n align-items: center;\r\n gap: 28px;\r\n padding: 24px 0;\r\n }\r\n\r\n .pa-trust__intro {\r\n margin: 0;\r\n color: var(--pa-muted);\r\n font-size: 15px;\r\n line-height: 1.45;\r\n font-weight: 700;\r\n }\r\n\r\n .pa-trust__intro strong {\r\n display: block;\r\n margin-bottom: 4px;\r\n color: var(--pa-navy);\r\n font-size: 18px;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-trust__items {\r\n display: grid;\r\n grid-template-columns: repeat(4, minmax(0, 1fr));\r\n gap: 12px;\r\n }\r\n\r\n .pa-trust__item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n min-height: 72px;\r\n padding: 14px 16px;\r\n border: 1px solid rgba(11, 42, 74, 0.1);\r\n border-radius: var(--pa-radius);\r\n background: #f8fbff;\r\n }\r\n\r\n .pa-trust__icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 0 0 38px;\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 50%;\r\n background: var(--pa-blue-soft);\r\n color: var(--pa-navy);\r\n font-size: 18px;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-trust__item strong {\r\n display: block;\r\n color: var(--pa-navy);\r\n font-size: 15px;\r\n line-height: 1.15;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-trust__item span {\r\n display: block;\r\n margin-top: 4px;\r\n color: var(--pa-muted);\r\n font-size: 13px;\r\n line-height: 1.25;\r\n font-weight: 700;\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .pa-trust {\r\n overflow: hidden;\r\n background: #f8fbff;\r\n }\r\n\r\n .pa-trust__wrap {\r\n width: 100%;\r\n display: block;\r\n padding: 22px 0 24px;\r\n }\r\n\r\n .pa-trust__intro {\r\n width: min(100% - 28px, 430px);\r\n margin: 0 auto 14px;\r\n }\r\n\r\n .pa-trust__items {\r\n display: flex;\r\n gap: 12px;\r\n overflow-x: auto;\r\n padding: 0 14px 4px;\r\n scroll-snap-type: x mandatory;\r\n scrollbar-width: none;\r\n }\r\n\r\n .pa-trust__items::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .pa-trust__item {\r\n flex: 0 0 250px;\r\n min-height: 78px;\r\n background: #ffffff;\r\n scroll-snap-align: start;\r\n box-shadow: 0 14px 34px rgba(11, 42, 74, 0.07);\r\n }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .pa-trust__intro {\r\n width: min(100% - 20px, 420px);\r\n }\r\n\r\n .pa-trust__item {\r\n flex-basis: 235px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"pa-trust\" aria-label=\"Trust and care highlights\">\r\n <div class=\"pa-trust__wrap\">\r\n <p class=\"pa-trust__intro\">\r\n <strong>Trusted care, built for pet parents.<\/strong>\r\n Professional support that feels simple, safe, and close to home.\r\n <\/p>\r\n\r\n <div class=\"pa-trust__items\">\r\n <div class=\"pa-trust__item\">\r\n <span class=\"pa-trust__icon\" aria-hidden=\"true\">\u2713<\/span>\r\n <div>\r\n <strong>Licensed vets<\/strong>\r\n <span>Verified veterinary experts<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pa-trust__item\">\r\n <span class=\"pa-trust__icon\" aria-hidden=\"true\">\u25b6<\/span>\r\n <div>\r\n <strong>Video & chat<\/strong>\r\n <span>Choose the way you talk<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pa-trust__item\">\r\n <span class=\"pa-trust__icon\" aria-hidden=\"true\">24<\/span>\r\n <div>\r\n <strong>Fast response<\/strong>\r\n <span>Guidance when it matters<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pa-trust__item\">\r\n <span class=\"pa-trust__icon\" aria-hidden=\"true\">+<\/span>\r\n <div>\r\n <strong>Follow-up care<\/strong>\r\n <span>Next steps after every visit<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-02cff71 e-con-full e-flex e-con e-parent\" data-id=\"02cff71\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6124076 elementor-widget elementor-widget-html\" data-id=\"6124076\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Pet Atlas How It Works<\/title>\r\n <style>\r\n :root {\r\n --pa-navy: #0b2a4a;\r\n --pa-navy-2: #123d67;\r\n --pa-blue-soft: #eaf6ff;\r\n --pa-yellow: #ffd84d;\r\n --pa-text: #17324d;\r\n --pa-muted: #587086;\r\n --pa-white: #ffffff;\r\n --pa-line: rgba(11, 42, 74, 0.1);\r\n --pa-shadow: 0 18px 46px rgba(11, 42, 74, 0.1);\r\n --pa-radius: 8px;\r\n --pa-font: \"Tajawal\", \"Cairo\", \"Segoe UI\", Arial, sans-serif;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n background: #ffffff;\r\n color: var(--pa-text);\r\n font-family: var(--pa-font);\r\n }\r\n\r\n .pa-steps {\r\n background:\r\n radial-gradient(circle at 12% 18%, rgba(255, 216, 77, 0.2), transparent 24%),\r\n linear-gradient(180deg, #f1f9ff 0%, var(--pa-blue-soft) 100%);\r\n padding: 84px 0;\r\n }\r\n\r\n .pa-steps__wrap {\r\n width: min(1180px, calc(100% - 40px));\r\n margin: 0 auto;\r\n }\r\n\r\n .pa-steps__head {\r\n max-width: 680px;\r\n margin: 0 auto 42px;\r\n text-align: center;\r\n }\r\n\r\n .pa-steps__eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin: 0 0 14px;\r\n padding: 9px 14px;\r\n border: 1px solid rgba(18, 61, 103, 0.12);\r\n border-radius: 999px;\r\n background: rgba(255, 255, 255, 0.72);\r\n color: var(--pa-navy-2);\r\n font-size: 14px;\r\n font-weight: 800;\r\n }\r\n\r\n .pa-steps__eyebrow::before {\r\n content: \"\";\r\n width: 9px;\r\n height: 9px;\r\n border-radius: 50%;\r\n background: var(--pa-yellow);\r\n box-shadow: 0 0 0 5px rgba(255, 216, 77, 0.25);\r\n }\r\n\r\n .pa-steps h2 {\r\n margin: 0;\r\n color: var(--pa-navy);\r\n font-size: clamp(36px, 4.4vw, 56px);\r\n line-height: 1.08;\r\n font-weight: 900;\r\n letter-spacing: 0;\r\n }\r\n\r\n .pa-steps__lead {\r\n margin: 18px auto 0;\r\n max-width: 620px;\r\n color: var(--pa-muted);\r\n font-size: 18px;\r\n line-height: 1.65;\r\n font-weight: 600;\r\n }\r\n\r\n .pa-steps__grid {\r\n position: relative;\r\n display: grid;\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n gap: 18px;\r\n }\r\n\r\n .pa-steps__grid::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 58px;\r\n left: 16%;\r\n right: 16%;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, rgba(11, 42, 74, 0.18), transparent);\r\n }\r\n\r\n .pa-step {\r\n position: relative;\r\n z-index: 1;\r\n min-height: 270px;\r\n padding: 28px;\r\n border: 1px solid var(--pa-line);\r\n border-radius: var(--pa-radius);\r\n background: rgba(255, 255, 255, 0.9);\r\n box-shadow: var(--pa-shadow);\r\n }\r\n\r\n .pa-step__top {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .pa-step__icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 50%;\r\n background: var(--pa-navy);\r\n color: #ffffff;\r\n font-size: 27px;\r\n font-weight: 900;\r\n box-shadow: 0 14px 30px rgba(11, 42, 74, 0.2);\r\n }\r\n\r\n .pa-step:nth-child(2) .pa-step__icon {\r\n background: var(--pa-yellow);\r\n color: var(--pa-navy);\r\n }\r\n\r\n .pa-step__number {\r\n color: rgba(11, 42, 74, 0.12);\r\n font-size: 54px;\r\n line-height: 1;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-step h3 {\r\n margin: 0;\r\n color: var(--pa-navy);\r\n font-size: 23px;\r\n line-height: 1.2;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-step p {\r\n margin: 12px 0 0;\r\n color: var(--pa-muted);\r\n font-size: 16px;\r\n line-height: 1.62;\r\n font-weight: 600;\r\n }\r\n\r\n .pa-steps__cta {\r\n display: flex;\r\n justify-content: center;\r\n margin-top: 36px;\r\n }\r\n\r\n .pa-steps__button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 54px;\r\n padding: 0 28px;\r\n border-radius: var(--pa-radius);\r\n background: var(--pa-yellow);\r\n color: var(--pa-navy);\r\n text-decoration: none;\r\n font-size: 17px;\r\n font-weight: 900;\r\n box-shadow: 0 16px 34px rgba(255, 216, 77, 0.32);\r\n transition: transform 180ms ease, box-shadow 180ms ease;\r\n }\r\n\r\n .pa-steps__button:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 20px 42px rgba(11, 42, 74, 0.16);\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .pa-steps {\r\n padding: 62px 0;\r\n }\r\n\r\n .pa-steps__wrap {\r\n width: min(100% - 28px, 560px);\r\n }\r\n\r\n .pa-steps__head {\r\n margin-bottom: 28px;\r\n text-align: left;\r\n }\r\n\r\n .pa-steps h2 {\r\n font-size: clamp(34px, 9vw, 44px);\r\n }\r\n\r\n .pa-steps__lead {\r\n font-size: 16px;\r\n line-height: 1.55;\r\n }\r\n\r\n .pa-steps__grid {\r\n grid-template-columns: 1fr;\r\n gap: 14px;\r\n }\r\n\r\n .pa-steps__grid::before {\r\n display: none;\r\n }\r\n\r\n .pa-step {\r\n min-height: auto;\r\n padding: 22px;\r\n }\r\n\r\n .pa-step__top {\r\n margin-bottom: 18px;\r\n }\r\n\r\n .pa-step__icon {\r\n width: 56px;\r\n height: 56px;\r\n font-size: 24px;\r\n }\r\n\r\n .pa-step__number {\r\n font-size: 44px;\r\n }\r\n\r\n .pa-step h3 {\r\n font-size: 21px;\r\n }\r\n\r\n .pa-steps__cta {\r\n margin-top: 22px;\r\n }\r\n\r\n .pa-steps__button {\r\n width: 100%;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"pa-steps\" id=\"how-it-works\" aria-label=\"How Pet Atlas works\">\r\n <div class=\"pa-steps__wrap\">\r\n <div class=\"pa-steps__head\">\r\n <p class=\"pa-steps__eyebrow\">How it works<\/p>\r\n <h2>Get veterinary help in three simple steps<\/h2>\r\n <p class=\"pa-steps__lead\">\r\n Pet Atlas makes expert care easier to reach, from the first question to the next treatment step.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"pa-steps__grid\">\r\n <article class=\"pa-step\">\r\n <div class=\"pa-step__top\">\r\n <span class=\"pa-step__icon\" aria-hidden=\"true\">1<\/span>\r\n <span class=\"pa-step__number\">01<\/span>\r\n <\/div>\r\n <h3>Create your pet profile<\/h3>\r\n <p>Add your pet's basic details, symptoms, and anything your vet should know before the consultation starts.<\/p>\r\n <\/article>\r\n\r\n <article class=\"pa-step\">\r\n <div class=\"pa-step__top\">\r\n <span class=\"pa-step__icon\" aria-hidden=\"true\">2<\/span>\r\n <span class=\"pa-step__number\">02<\/span>\r\n <\/div>\r\n <h3>Talk to a veterinarian<\/h3>\r\n <p>Connect by video or chat with a licensed vet who can listen, assess, and guide you clearly.<\/p>\r\n <\/article>\r\n\r\n <article class=\"pa-step\">\r\n <div class=\"pa-step__top\">\r\n <span class=\"pa-step__icon\" aria-hidden=\"true\">3<\/span>\r\n <span class=\"pa-step__number\">03<\/span>\r\n <\/div>\r\n <h3>Follow the care plan<\/h3>\r\n <p>Receive practical next steps, follow-up guidance, and recommendations tailored to your pet's needs.<\/p>\r\n <\/article>\r\n <\/div>\r\n\r\n <div class=\"pa-steps__cta\">\r\n <a class=\"pa-steps__button\" href=\"#booking\">Start a Consultation<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0587fc1 e-con-full e-flex e-con e-parent\" data-id=\"0587fc1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8125744 elementor-widget elementor-widget-html\" data-id=\"8125744\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Pet Atlas Services<\/title>\r\n <style>\r\n :root {\r\n --pa-navy: #0b2a4a;\r\n --pa-navy-2: #123d67;\r\n --pa-blue-soft: #eaf6ff;\r\n --pa-yellow: #ffd84d;\r\n --pa-text: #17324d;\r\n --pa-muted: #587086;\r\n --pa-white: #ffffff;\r\n --pa-line: rgba(11, 42, 74, 0.11);\r\n --pa-shadow: 0 20px 54px rgba(11, 42, 74, 0.12);\r\n --pa-radius: 8px;\r\n --pa-font: \"Tajawal\", \"Cairo\", \"Segoe UI\", Arial, sans-serif;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n background: #ffffff;\r\n color: var(--pa-text);\r\n font-family: var(--pa-font);\r\n }\r\n\r\n .pa-services {\r\n position: relative;\r\n overflow: hidden;\r\n isolation: isolate;\r\n padding: 92px 0;\r\n background:\r\n radial-gradient(circle at 12% 10%, rgba(255, 216, 77, 0.22), transparent 24%),\r\n radial-gradient(circle at 90% 22%, rgba(123, 201, 255, 0.24), transparent 28%),\r\n linear-gradient(180deg, #ffffff 0%, #edf8ff 100%);\r\n }\r\n\r\n .pa-services::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: -2;\r\n background-image:\r\n linear-gradient(rgba(11, 42, 74, 0.035) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(11, 42, 74, 0.035) 1px, transparent 1px);\r\n background-size: 44px 44px;\r\n mask-image: linear-gradient(180deg, transparent, #000 16%, #000 86%, transparent);\r\n }\r\n\r\n .pa-services::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n background:\r\n linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.58) 52%, rgba(234, 246, 255, 0.7) 100%),\r\n linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(234, 246, 255, 0.48) 100%);\r\n }\r\n\r\n .pa-services__decor {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n .pa-float {\r\n position: absolute;\r\n display: grid;\r\n place-items: center;\r\n width: var(--size);\r\n height: var(--size);\r\n border: 2px solid rgba(11, 42, 74, 0.14);\r\n border-radius: 999px;\r\n background:\r\n radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.52) 58%, rgba(234, 246, 255, 0.42) 100%);\r\n color: rgba(11, 42, 74, 0.38);\r\n box-shadow:\r\n 0 18px 48px rgba(11, 42, 74, 0.12),\r\n inset 0 1px 0 rgba(255, 255, 255, 0.9);\r\n animation: paFloat 9s ease-in-out infinite;\r\n animation-delay: var(--delay);\r\n transform: translate3d(0, 0, 0) rotate(var(--rotate));\r\n }\r\n\r\n .pa-float::before,\r\n .pa-float::after {\r\n content: \"\";\r\n position: absolute;\r\n border-radius: 999px;\r\n pointer-events: none;\r\n }\r\n\r\n .pa-float::before {\r\n inset: -9px;\r\n border: 1px dashed rgba(11, 42, 74, 0.14);\r\n opacity: 0.72;\r\n }\r\n\r\n .pa-float::after {\r\n width: 12px;\r\n height: 12px;\r\n right: 10%;\r\n top: 9%;\r\n background: var(--pa-yellow);\r\n box-shadow:\r\n -42px 50px 0 rgba(123, 201, 255, 0.55),\r\n 34px 54px 0 rgba(11, 42, 74, 0.13);\r\n }\r\n\r\n .pa-float svg {\r\n position: relative;\r\n z-index: 1;\r\n width: 58%;\r\n height: 58%;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-float--yellow {\r\n background:\r\n radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.88), rgba(255, 216, 77, 0.46) 58%, rgba(255, 216, 77, 0.24) 100%);\r\n color: rgba(11, 42, 74, 0.46);\r\n border-color: rgba(255, 216, 77, 0.46);\r\n }\r\n\r\n .pa-float--blue {\r\n background:\r\n radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.92), rgba(123, 201, 255, 0.34) 60%, rgba(234, 246, 255, 0.72) 100%);\r\n color: rgba(18, 61, 103, 0.42);\r\n border-color: rgba(123, 201, 255, 0.36);\r\n }\r\n\r\n .pa-float:nth-child(1) { --size: 112px; --delay: -1s; --rotate: -12deg; left: 4%; top: 12%; }\r\n .pa-float:nth-child(2) { --size: 84px; --delay: -4s; --rotate: 10deg; left: 34%; top: 7%; }\r\n .pa-float:nth-child(3) { --size: 136px; --delay: -2s; --rotate: 14deg; right: 5%; top: 13%; }\r\n .pa-float:nth-child(4) { --size: 96px; --delay: -6s; --rotate: -8deg; left: 43%; bottom: 11%; }\r\n .pa-float:nth-child(5) { --size: 120px; --delay: -3s; --rotate: 8deg; right: 16%; bottom: 7%; }\r\n .pa-float:nth-child(6) { --size: 74px; --delay: -7s; --rotate: -16deg; left: 10%; bottom: 18%; }\r\n\r\n @keyframes paFloat {\r\n 0%, 100% {\r\n transform: translate3d(0, 0, 0) rotate(var(--rotate));\r\n }\r\n 50% {\r\n transform: translate3d(0, -18px, 0) rotate(calc(var(--rotate) + 5deg));\r\n }\r\n }\r\n\r\n .pa-services__wrap {\r\n position: relative;\r\n z-index: 1;\r\n width: min(1180px, calc(100% - 40px));\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: minmax(280px, 390px) 1fr;\r\n align-items: start;\r\n gap: 54px;\r\n }\r\n\r\n .pa-services__eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin: 0 0 16px;\r\n padding: 9px 14px;\r\n border: 1px solid rgba(18, 61, 103, 0.12);\r\n border-radius: 999px;\r\n background: rgba(255, 255, 255, 0.72);\r\n color: var(--pa-navy-2);\r\n font-size: 14px;\r\n font-weight: 800;\r\n box-shadow: 0 10px 28px rgba(11, 42, 74, 0.06);\r\n }\r\n\r\n .pa-services__eyebrow::before {\r\n content: \"\";\r\n width: 9px;\r\n height: 9px;\r\n border-radius: 50%;\r\n background: var(--pa-yellow);\r\n box-shadow: 0 0 0 5px rgba(255, 216, 77, 0.25);\r\n }\r\n\r\n .pa-services h2 {\r\n margin: 0;\r\n color: var(--pa-navy);\r\n font-size: clamp(38px, 4.8vw, 60px);\r\n line-height: 1.06;\r\n font-weight: 900;\r\n letter-spacing: 0;\r\n }\r\n\r\n .pa-services__lead {\r\n margin: 20px 0 0;\r\n color: var(--pa-muted);\r\n font-size: 18px;\r\n line-height: 1.68;\r\n font-weight: 600;\r\n }\r\n\r\n .pa-services__note {\r\n display: flex;\r\n gap: 12px;\r\n margin-top: 26px;\r\n padding: 16px;\r\n border: 1px solid rgba(11, 42, 74, 0.1);\r\n border-radius: var(--pa-radius);\r\n background: rgba(255, 255, 255, 0.74);\r\n color: var(--pa-text);\r\n font-size: 15px;\r\n line-height: 1.45;\r\n font-weight: 700;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .pa-services__note span {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 0 0 32px;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n background: var(--pa-yellow);\r\n color: var(--pa-navy);\r\n font-weight: 900;\r\n }\r\n\r\n .pa-services__note p {\r\n margin: 0;\r\n }\r\n\r\n .pa-services__grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 16px;\r\n }\r\n\r\n .pa-service {\r\n min-height: 238px;\r\n padding: 24px;\r\n border: 1px solid var(--pa-line);\r\n border-radius: var(--pa-radius);\r\n background: rgba(255, 255, 255, 0.88);\r\n box-shadow: var(--pa-shadow);\r\n backdrop-filter: blur(12px);\r\n transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;\r\n }\r\n\r\n .pa-service:hover {\r\n transform: translateY(-4px);\r\n background: #ffffff;\r\n box-shadow: 0 26px 64px rgba(11, 42, 74, 0.16);\r\n }\r\n\r\n .pa-service__icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 54px;\r\n height: 54px;\r\n margin-bottom: 22px;\r\n border-radius: 50%;\r\n background: var(--pa-navy);\r\n color: #ffffff;\r\n font-size: 24px;\r\n font-weight: 900;\r\n box-shadow: 0 14px 30px rgba(11, 42, 74, 0.18);\r\n }\r\n\r\n .pa-service:nth-child(2) .pa-service__icon,\r\n .pa-service:nth-child(4) .pa-service__icon {\r\n background: var(--pa-yellow);\r\n color: var(--pa-navy);\r\n }\r\n\r\n .pa-service h3 {\r\n margin: 0;\r\n color: var(--pa-navy);\r\n font-size: 22px;\r\n line-height: 1.2;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-service p {\r\n margin: 11px 0 0;\r\n color: var(--pa-muted);\r\n font-size: 15.5px;\r\n line-height: 1.62;\r\n font-weight: 600;\r\n }\r\n\r\n .pa-service a {\r\n display: inline-flex;\r\n margin-top: 16px;\r\n color: var(--pa-navy);\r\n text-decoration: none;\r\n font-size: 15px;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-service a:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n @media (max-width: 960px) {\r\n .pa-services {\r\n padding: 64px 0;\r\n }\r\n\r\n .pa-services::after {\r\n background:\r\n linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(244, 250, 255, 0.7) 48%, rgba(234, 246, 255, 0.78) 100%);\r\n }\r\n\r\n .pa-float {\r\n opacity: 0.9;\r\n }\r\n\r\n .pa-float:nth-child(1) { --size: 70px; left: -42px; top: 126px; }\r\n .pa-float:nth-child(2) { --size: 62px; left: 66%; top: 70px; }\r\n .pa-float:nth-child(3) { --size: 92px; right: -30px; top: 330px; }\r\n .pa-float:nth-child(4) { --size: 66px; left: 8%; bottom: 28%; }\r\n .pa-float:nth-child(5) { --size: 82px; right: 2%; bottom: 8%; }\r\n .pa-float:nth-child(6) { display: none; }\r\n\r\n .pa-services__wrap {\r\n width: min(100% - 28px, 620px);\r\n display: block;\r\n }\r\n\r\n .pa-services__head {\r\n margin-bottom: 26px;\r\n }\r\n\r\n .pa-services h2 {\r\n font-size: clamp(34px, 9vw, 44px);\r\n }\r\n\r\n .pa-services__lead {\r\n font-size: 16px;\r\n line-height: 1.58;\r\n }\r\n\r\n .pa-services__note {\r\n margin-top: 18px;\r\n }\r\n\r\n .pa-services__grid {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 10px;\r\n }\r\n\r\n .pa-service {\r\n min-height: auto;\r\n padding: 16px;\r\n }\r\n\r\n .pa-service__icon {\r\n width: 42px;\r\n height: 42px;\r\n margin-bottom: 14px;\r\n font-size: 19px;\r\n }\r\n\r\n .pa-service h3 {\r\n font-size: 18px;\r\n }\r\n\r\n .pa-service p {\r\n font-size: 13.5px;\r\n line-height: 1.45;\r\n }\r\n\r\n .pa-service a {\r\n margin-top: 12px;\r\n font-size: 13.5px;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .pa-float {\r\n animation: none;\r\n }\r\n }\r\n\r\n @media (max-width: 420px) {\r\n .pa-services__wrap {\r\n width: min(100% - 24px, 620px);\r\n }\r\n\r\n .pa-services__grid {\r\n gap: 8px;\r\n }\r\n\r\n .pa-service {\r\n padding: 14px;\r\n }\r\n\r\n .pa-service__icon {\r\n width: 38px;\r\n height: 38px;\r\n margin-bottom: 12px;\r\n font-size: 17px;\r\n }\r\n\r\n .pa-service h3 {\r\n font-size: 16px;\r\n }\r\n\r\n .pa-service p {\r\n font-size: 12.5px;\r\n }\r\n\r\n .pa-service a {\r\n font-size: 12.5px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"pa-services\" id=\"services\" aria-label=\"Pet Atlas services\">\r\n <div class=\"pa-services__decor\" aria-hidden=\"true\">\r\n <span class=\"pa-float pa-float--yellow\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9ZM30 25c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm4 0c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm-2 8c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-float pa-float--blue\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M12 28 20 13l9 9h6l9-9 8 15v11c0 11-9 20-20 20S12 50 12 39V28Zm16 10c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm20 0c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm-20 9h8l-4 5-4-5Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-float\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M12 38c0-14 10-25 23-25 12 0 21 9 23 21l3 2-3 2c-1 12-11 21-23 21-13 0-23-9-23-21Zm10-3c-4 0-7 3-7 7v3h14v-3c0-4-3-7-7-7Zm24-9a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM25 50h20c-3-5-6-7-10-7s-7 2-10 7Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-float pa-float--yellow\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9ZM30 25c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm4 0c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm-2 8c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-float pa-float--blue\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M12 28 20 13l9 9h6l9-9 8 15v11c0 11-9 20-20 20S12 50 12 39V28Zm16 10c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm20 0c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm-20 9h8l-4 5-4-5Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-float\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M12 38c0-14 10-25 23-25 12 0 21 9 23 21l3 2-3 2c-1 12-11 21-23 21-13 0-23-9-23-21Zm10-3c-4 0-7 3-7 7v3h14v-3c0-4-3-7-7-7Zm24-9a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM25 50h20c-3-5-6-7-10-7s-7 2-10 7Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"pa-services__wrap\">\r\n <div class=\"pa-services__head\">\r\n <p class=\"pa-services__eyebrow\">Our services<\/p>\r\n <h2>Care options for everyday pet questions<\/h2>\r\n <p class=\"pa-services__lead\">\r\n Choose the support that fits the moment, from quick advice to live consultations and ongoing follow-up.\r\n <\/p>\r\n <div class=\"pa-services__note\">\r\n <span aria-hidden=\"true\">+<\/span>\r\n <p>If symptoms feel urgent or severe, Pet Atlas helps you understand the safest next step quickly.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pa-services__grid\">\r\n <article class=\"pa-service\">\r\n <span class=\"pa-service__icon\" aria-hidden=\"true\">V<\/span>\r\n <h3>Video consultation<\/h3>\r\n <p>Speak face-to-face with a licensed veterinarian and show symptoms clearly in real time.<\/p>\r\n <a href=\"#video-consultation\">Learn more<\/a>\r\n <\/article>\r\n\r\n <article class=\"pa-service\">\r\n <span class=\"pa-service__icon\" aria-hidden=\"true\">C<\/span>\r\n <h3>Chat with a vet<\/h3>\r\n <p>Get quick written guidance when you need advice, reassurance, or help deciding what to do next.<\/p>\r\n <a href=\"#vet-chat\">Learn more<\/a>\r\n <\/article>\r\n\r\n <article class=\"pa-service\">\r\n <span class=\"pa-service__icon\" aria-hidden=\"true\">F<\/span>\r\n <h3>Follow-up care<\/h3>\r\n <p>Keep track of progress after a consultation with clear next steps and practical recommendations.<\/p>\r\n <a href=\"#follow-up\">Learn more<\/a>\r\n <\/article>\r\n\r\n <article class=\"pa-service\">\r\n <span class=\"pa-service__icon\" aria-hidden=\"true\">Rx<\/span>\r\n <h3>Medication guidance<\/h3>\r\n <p>Understand treatment instructions, dosage questions, and safe care routines for your pet.<\/p>\r\n <a href=\"#medication-guidance\">Learn more<\/a>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-217c2c3 e-con-full e-flex e-con e-parent\" data-id=\"217c2c3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6bebb10 elementor-widget elementor-widget-html\" data-id=\"6bebb10\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Pet Atlas Testimonials<\/title>\r\n <style>\r\n :root {\r\n --pa-navy: #0b2a4a;\r\n --pa-navy-2: #123d67;\r\n --pa-blue-soft: #eaf6ff;\r\n --pa-yellow: #ffd84d;\r\n --pa-text: #17324d;\r\n --pa-muted: #587086;\r\n --pa-white: #ffffff;\r\n --pa-line: rgba(11, 42, 74, 0.11);\r\n --pa-shadow: 0 20px 54px rgba(11, 42, 74, 0.12);\r\n --pa-radius: 8px;\r\n --pa-font: \"Tajawal\", \"Cairo\", \"Segoe UI\", Arial, sans-serif;\r\n }\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n background: #ffffff;\r\n color: var(--pa-text);\r\n font-family: var(--pa-font);\r\n }\r\n\r\n .pa-testimonials {\r\n position: relative;\r\n overflow: hidden;\r\n isolation: isolate;\r\n padding: 88px 0;\r\n background:\r\n radial-gradient(circle at 9% 22%, rgba(255, 216, 77, 0.18), transparent 24%),\r\n radial-gradient(circle at 90% 18%, rgba(123, 201, 255, 0.22), transparent 30%),\r\n linear-gradient(180deg, #ffffff 0%, #f4fbff 100%);\r\n }\r\n\r\n .pa-testimonials::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: -2;\r\n background-image:\r\n linear-gradient(rgba(11, 42, 74, 0.035) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(11, 42, 74, 0.035) 1px, transparent 1px);\r\n background-size: 44px 44px;\r\n mask-image: linear-gradient(180deg, transparent, #000 14%, #000 88%, transparent);\r\n }\r\n\r\n .pa-testimonials__decor {\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n pointer-events: none;\r\n }\r\n\r\n .pa-bubble {\r\n position: absolute;\r\n display: grid;\r\n place-items: center;\r\n width: var(--size);\r\n height: var(--size);\r\n border: 2px solid rgba(11, 42, 74, 0.12);\r\n border-radius: 999px;\r\n background: rgba(255, 255, 255, 0.68);\r\n color: rgba(11, 42, 74, 0.28);\r\n box-shadow: 0 18px 48px rgba(11, 42, 74, 0.08);\r\n animation: paBubbleFloat 10s ease-in-out infinite;\r\n animation-delay: var(--delay);\r\n transform: rotate(var(--rotate));\r\n }\r\n\r\n .pa-bubble svg {\r\n width: 56%;\r\n height: 56%;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-bubble--yellow {\r\n background: rgba(255, 216, 77, 0.28);\r\n color: rgba(11, 42, 74, 0.34);\r\n border-color: rgba(255, 216, 77, 0.45);\r\n }\r\n\r\n .pa-bubble--blue {\r\n background: rgba(234, 246, 255, 0.85);\r\n color: rgba(18, 61, 103, 0.32);\r\n border-color: rgba(123, 201, 255, 0.34);\r\n }\r\n\r\n .pa-bubble:nth-child(1) { --size: 92px; --delay: -1s; --rotate: -12deg; left: 5%; top: 18%; }\r\n .pa-bubble:nth-child(2) { --size: 74px; --delay: -4s; --rotate: 8deg; right: 13%; top: 12%; }\r\n .pa-bubble:nth-child(3) { --size: 108px; --delay: -7s; --rotate: 14deg; left: 18%; bottom: 10%; }\r\n .pa-bubble:nth-child(4) { --size: 78px; --delay: -3s; --rotate: -8deg; right: 7%; bottom: 14%; }\r\n\r\n @keyframes paBubbleFloat {\r\n 0%, 100% {\r\n transform: translate3d(0, 0, 0) rotate(var(--rotate));\r\n }\r\n 50% {\r\n transform: translate3d(0, -16px, 0) rotate(calc(var(--rotate) + 5deg));\r\n }\r\n }\r\n\r\n .pa-testimonials__wrap {\r\n position: relative;\r\n z-index: 1;\r\n width: min(1180px, calc(100% - 40px));\r\n margin: 0 auto;\r\n }\r\n\r\n .pa-testimonials__head {\r\n display: grid;\r\n grid-template-columns: minmax(280px, 680px) auto;\r\n align-items: end;\r\n gap: 24px;\r\n margin-bottom: 34px;\r\n }\r\n\r\n .pa-testimonials__eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin: 0 0 16px;\r\n padding: 9px 14px;\r\n border: 1px solid rgba(18, 61, 103, 0.12);\r\n border-radius: 999px;\r\n background: rgba(255, 255, 255, 0.72);\r\n color: var(--pa-navy-2);\r\n font-size: 14px;\r\n font-weight: 800;\r\n box-shadow: 0 10px 28px rgba(11, 42, 74, 0.06);\r\n }\r\n\r\n .pa-testimonials__eyebrow::before {\r\n content: \"\";\r\n width: 9px;\r\n height: 9px;\r\n border-radius: 50%;\r\n background: var(--pa-yellow);\r\n box-shadow: 0 0 0 5px rgba(255, 216, 77, 0.25);\r\n }\r\n\r\n .pa-testimonials h2 {\r\n margin: 0;\r\n max-width: 680px;\r\n color: var(--pa-navy);\r\n font-size: clamp(38px, 4.6vw, 58px);\r\n line-height: 1.06;\r\n font-weight: 900;\r\n letter-spacing: 0;\r\n }\r\n\r\n .pa-testimonials__lead {\r\n margin: 18px 0 0;\r\n max-width: 590px;\r\n color: var(--pa-muted);\r\n font-size: 18px;\r\n line-height: 1.62;\r\n font-weight: 600;\r\n }\r\n\r\n .pa-testimonials__controls {\r\n display: flex;\r\n align-items: center;\r\n justify-content: end;\r\n gap: 10px;\r\n }\r\n\r\n .pa-slider-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 48px;\r\n height: 48px;\r\n border: 1px solid rgba(11, 42, 74, 0.12);\r\n border-radius: 50%;\r\n background: #ffffff;\r\n color: var(--pa-navy);\r\n cursor: pointer;\r\n box-shadow: 0 14px 34px rgba(11, 42, 74, 0.08);\r\n transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;\r\n }\r\n\r\n .pa-slider-btn:hover {\r\n transform: translateY(-2px);\r\n background: var(--pa-yellow);\r\n box-shadow: 0 18px 42px rgba(11, 42, 74, 0.12);\r\n }\r\n\r\n .pa-slider-btn svg {\r\n width: 20px;\r\n height: 20px;\r\n stroke: currentColor;\r\n stroke-width: 2.4;\r\n fill: none;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n .pa-testimonials__viewport {\r\n overflow: hidden;\r\n border-radius: var(--pa-radius);\r\n }\r\n\r\n .pa-testimonials__track {\r\n display: flex;\r\n gap: 16px;\r\n overflow-x: auto;\r\n padding: 4px 4px 24px;\r\n scroll-snap-type: x mandatory;\r\n scroll-behavior: smooth;\r\n scrollbar-width: none;\r\n }\r\n\r\n .pa-testimonials__track::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .pa-review {\r\n flex: 0 0 calc((100% - 32px) \/ 3);\r\n min-height: 316px;\r\n display: flex;\r\n flex-direction: column;\r\n padding: 24px;\r\n border: 1px solid var(--pa-line);\r\n border-radius: var(--pa-radius);\r\n background: rgba(255, 255, 255, 0.9);\r\n box-shadow: var(--pa-shadow);\r\n backdrop-filter: blur(12px);\r\n scroll-snap-align: start;\r\n }\r\n\r\n .pa-review__top {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .pa-review__person {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n min-width: 0;\r\n }\r\n\r\n .pa-review__avatar {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 0 0 54px;\r\n width: 54px;\r\n height: 54px;\r\n border-radius: 50%;\r\n background:\r\n radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.9), transparent 38%),\r\n linear-gradient(135deg, var(--pa-navy), #226191);\r\n color: #ffffff;\r\n font-size: 18px;\r\n font-weight: 900;\r\n box-shadow: 0 14px 30px rgba(11, 42, 74, 0.16);\r\n }\r\n\r\n .pa-review:nth-child(even) .pa-review__avatar {\r\n background:\r\n radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.85), transparent 38%),\r\n linear-gradient(135deg, var(--pa-yellow), #f3b92a);\r\n color: var(--pa-navy);\r\n }\r\n\r\n .pa-review__name {\r\n display: block;\r\n color: var(--pa-navy);\r\n font-size: 17px;\r\n line-height: 1.2;\r\n font-weight: 900;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .pa-review__meta {\r\n display: block;\r\n margin-top: 4px;\r\n color: var(--pa-muted);\r\n font-size: 13px;\r\n font-weight: 700;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .pa-review__country {\r\n flex: 0 0 auto;\r\n padding: 7px 10px;\r\n border-radius: 999px;\r\n background: var(--pa-blue-soft);\r\n color: var(--pa-navy);\r\n font-size: 12px;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-review__stars {\r\n display: flex;\r\n gap: 4px;\r\n margin-bottom: 18px;\r\n color: #f2b819;\r\n }\r\n\r\n .pa-review__stars svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-review__quote {\r\n margin: 0;\r\n color: var(--pa-text);\r\n font-size: 17px;\r\n line-height: 1.6;\r\n font-weight: 700;\r\n }\r\n\r\n .pa-review__pet {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: auto;\r\n padding-top: 22px;\r\n color: var(--pa-muted);\r\n font-size: 14px;\r\n font-weight: 800;\r\n }\r\n\r\n .pa-review__pet-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 34px;\r\n height: 34px;\r\n border-radius: 50%;\r\n background: rgba(255, 216, 77, 0.24);\r\n color: var(--pa-navy);\r\n }\r\n\r\n .pa-review__pet-icon svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-testimonials__dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 8px;\r\n margin-top: 4px;\r\n }\r\n\r\n .pa-dot {\r\n width: 9px;\r\n height: 9px;\r\n border: 0;\r\n border-radius: 999px;\r\n background: rgba(11, 42, 74, 0.18);\r\n cursor: pointer;\r\n transition: width 180ms ease, background 180ms ease;\r\n }\r\n\r\n .pa-dot.is-active {\r\n width: 28px;\r\n background: var(--pa-yellow);\r\n }\r\n\r\n @media (max-width: 980px) {\r\n .pa-testimonials {\r\n padding: 64px 0;\r\n }\r\n\r\n .pa-testimonials__wrap {\r\n width: min(100% - 28px, 680px);\r\n }\r\n\r\n .pa-testimonials__head {\r\n display: block;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .pa-testimonials h2 {\r\n font-size: clamp(34px, 9vw, 44px);\r\n }\r\n\r\n .pa-testimonials__lead {\r\n font-size: 16px;\r\n line-height: 1.56;\r\n }\r\n\r\n .pa-testimonials__controls {\r\n justify-content: start;\r\n margin-top: 18px;\r\n }\r\n\r\n .pa-review {\r\n flex-basis: min(82vw, 380px);\r\n min-height: 328px;\r\n padding: 22px;\r\n }\r\n\r\n .pa-bubble:nth-child(1) { --size: 68px; left: -24px; top: 90px; }\r\n .pa-bubble:nth-child(2) { --size: 62px; right: 12px; top: 52px; }\r\n .pa-bubble:nth-child(3) { --size: 78px; left: 10%; bottom: 8%; }\r\n .pa-bubble:nth-child(4) { --size: 64px; right: -18px; bottom: 24%; }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .pa-testimonials__wrap {\r\n width: min(100% - 22px, 430px);\r\n }\r\n\r\n .pa-testimonials__track {\r\n padding-right: 0;\r\n padding-left: 0;\r\n }\r\n\r\n .pa-review {\r\n flex-basis: 100%;\r\n min-width: 100%;\r\n }\r\n\r\n .pa-slider-btn {\r\n width: 44px;\r\n height: 44px;\r\n }\r\n\r\n .pa-review__top {\r\n align-items: flex-start;\r\n }\r\n\r\n .pa-review__country {\r\n font-size: 11px;\r\n padding: 6px 9px;\r\n }\r\n\r\n .pa-review__quote {\r\n font-size: 16px;\r\n line-height: 1.55;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .pa-bubble {\r\n animation: none;\r\n }\r\n\r\n .pa-testimonials__track {\r\n scroll-behavior: auto;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"pa-testimonials\" aria-label=\"Pet Atlas customer reviews\">\r\n <div class=\"pa-testimonials__decor\" aria-hidden=\"true\">\r\n <span class=\"pa-bubble pa-bubble--yellow\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9ZM30 25c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm4 0c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm-2 8c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-bubble pa-bubble--blue\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M12 28 20 13l9 9h6l9-9 8 15v11c0 11-9 20-20 20S12 50 12 39V28Zm16 10c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm20 0c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm-20 9h8l-4 5-4-5Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-bubble\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M12 38c0-14 10-25 23-25 12 0 21 9 23 21l3 2-3 2c-1 12-11 21-23 21-13 0-23-9-23-21Zm10-3c-4 0-7 3-7 7v3h14v-3c0-4-3-7-7-7Zm24-9a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM25 50h20c-3-5-6-7-10-7s-7 2-10 7Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"pa-bubble pa-bubble--yellow\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\">\r\n <path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9ZM30 25c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm4 0c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm-2 8c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"pa-testimonials__wrap\">\r\n <div class=\"pa-testimonials__head\">\r\n <div>\r\n <p class=\"pa-testimonials__eyebrow\">Customer stories<\/p>\r\n <h2>Pet parents trust Pet Atlas<\/h2>\r\n <p class=\"pa-testimonials__lead\">\r\n Real stories from pet owners across different countries who needed clear, kind veterinary guidance.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"pa-testimonials__controls\" aria-label=\"Slider controls\">\r\n <button class=\"pa-slider-btn\" type=\"button\" data-pa-prev aria-label=\"Previous review\">\r\n <svg viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M15 18 9 12l6-6\"\/><\/svg>\r\n <\/button>\r\n <button class=\"pa-slider-btn\" type=\"button\" data-pa-next aria-label=\"Next review\">\r\n <svg viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"m9 18 6-6-6-6\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pa-testimonials__viewport\">\r\n <div class=\"pa-testimonials__track\" data-pa-track>\r\n <article class=\"pa-review\">\r\n <div class=\"pa-review__top\">\r\n <div class=\"pa-review__person\">\r\n <span class=\"pa-review__avatar\">EP<\/span>\r\n <div>\r\n <strong class=\"pa-review__name\">Emily Parker<\/strong>\r\n <span class=\"pa-review__meta\">with Milo, Golden Retriever<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"pa-review__country\">USA<\/span>\r\n <\/div>\r\n <div class=\"pa-review__stars\" aria-label=\"5 out of 5 rating\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <\/div>\r\n <p class=\"pa-review__quote\">\"The vet explained everything calmly and helped me decide what Milo needed next. It felt personal, not rushed.\"<\/p>\r\n <div class=\"pa-review__pet\">\r\n <span class=\"pa-review__pet-icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\"><path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm-13 5c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/><\/svg>\r\n <\/span>\r\n Video consultation\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-review\">\r\n <div class=\"pa-review__top\">\r\n <div class=\"pa-review__person\">\r\n <span class=\"pa-review__avatar\">AH<\/span>\r\n <div>\r\n <strong class=\"pa-review__name\">Ahmed Hassan<\/strong>\r\n <span class=\"pa-review__meta\">with Biso, Persian Cat<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"pa-review__country\">Egypt<\/span>\r\n <\/div>\r\n <div class=\"pa-review__stars\" aria-label=\"5 out of 5 rating\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <\/div>\r\n <p class=\"pa-review__quote\">\"I got a clear answer at night without leaving home. The follow-up notes made it easy to care for Biso the next day.\"<\/p>\r\n <div class=\"pa-review__pet\">\r\n <span class=\"pa-review__pet-icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\"><path d=\"M12 28 20 13l9 9h6l9-9 8 15v11c0 11-9 20-20 20S12 50 12 39V28Zm16 10c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm20 0c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Z\"\/><\/svg>\r\n <\/span>\r\n Follow-up care\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-review\">\r\n <div class=\"pa-review__top\">\r\n <div class=\"pa-review__person\">\r\n <span class=\"pa-review__avatar\">AA<\/span>\r\n <div>\r\n <strong class=\"pa-review__name\">Alia Al Mansoori<\/strong>\r\n <span class=\"pa-review__meta\">with Luna, British Shorthair<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"pa-review__country\">UAE<\/span>\r\n <\/div>\r\n <div class=\"pa-review__stars\" aria-label=\"5 out of 5 rating\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <\/div>\r\n <p class=\"pa-review__quote\">\"The chat was simple and respectful. I sent photos, got practical guidance, and knew exactly when to visit a clinic.\"<\/p>\r\n <div class=\"pa-review__pet\">\r\n <span class=\"pa-review__pet-icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\"><path d=\"M12 28 20 13l9 9h6l9-9 8 15v11c0 11-9 20-20 20S12 50 12 39V28Zm16 10c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm20 0c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Z\"\/><\/svg>\r\n <\/span>\r\n Chat with a vet\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-review\">\r\n <div class=\"pa-review__top\">\r\n <div class=\"pa-review__person\">\r\n <span class=\"pa-review__avatar\">SM<\/span>\r\n <div>\r\n <strong class=\"pa-review__name\">Sophie Martin<\/strong>\r\n <span class=\"pa-review__meta\">with Oscar, Beagle<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"pa-review__country\">UK<\/span>\r\n <\/div>\r\n <div class=\"pa-review__stars\" aria-label=\"5 out of 5 rating\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <\/div>\r\n <p class=\"pa-review__quote\">\"Oscar had a stomach issue and I was worried. The vet gave me calm, sensible steps and told me what signs to watch.\"<\/p>\r\n <div class=\"pa-review__pet\">\r\n <span class=\"pa-review__pet-icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\"><path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm-13 5c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/><\/svg>\r\n <\/span>\r\n Medication guidance\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-review\">\r\n <div class=\"pa-review__top\">\r\n <div class=\"pa-review__person\">\r\n <span class=\"pa-review__avatar\">MK<\/span>\r\n <div>\r\n <strong class=\"pa-review__name\">Mona Khaled<\/strong>\r\n <span class=\"pa-review__meta\">with Simba, Mixed Cat<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"pa-review__country\">Egypt<\/span>\r\n <\/div>\r\n <div class=\"pa-review__stars\" aria-label=\"5 out of 5 rating\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"m12 2 3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1 3-7Z\"\/><\/svg>\r\n <\/div>\r\n <p class=\"pa-review__quote\">\"I liked that the doctor asked detailed questions before giving advice. It made the whole experience feel safe.\"<\/p>\r\n <div class=\"pa-review__pet\">\r\n <span class=\"pa-review__pet-icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\"><path d=\"M12 28 20 13l9 9h6l9-9 8 15v11c0 11-9 20-20 20S12 50 12 39V28Zm16 10c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm20 0c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Z\"\/><\/svg>\r\n <\/span>\r\n Video consultation\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pa-testimonials__dots\" data-pa-dots aria-label=\"Review pagination\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n (function () {\r\n var root = document.querySelector(\".pa-testimonials\");\r\n if (!root) return;\r\n\r\n var track = root.querySelector(\"[data-pa-track]\");\r\n var cards = Array.prototype.slice.call(root.querySelectorAll(\".pa-review\"));\r\n var prev = root.querySelector(\"[data-pa-prev]\");\r\n var next = root.querySelector(\"[data-pa-next]\");\r\n var dotsWrap = root.querySelector(\"[data-pa-dots]\");\r\n var autoplayId = null;\r\n\r\n function getStep() {\r\n if (!cards.length) return 0;\r\n var card = cards[0];\r\n var styles = window.getComputedStyle(track);\r\n var gap = parseFloat(styles.columnGap || styles.gap || 0);\r\n return card.getBoundingClientRect().width + gap;\r\n }\r\n\r\n function currentIndex() {\r\n var step = getStep();\r\n return step ? Math.round(track.scrollLeft \/ step) : 0;\r\n }\r\n\r\n function goTo(index) {\r\n var max = cards.length - 1;\r\n var nextIndex = Math.max(0, Math.min(index, max));\r\n track.scrollTo({ left: nextIndex * getStep(), behavior: \"smooth\" });\r\n }\r\n\r\n function updateDots() {\r\n var index = currentIndex();\r\n var maxVisibleIndex = Math.max(0, cards.length - Math.round(track.clientWidth \/ getStep()));\r\n var active = Math.min(index, maxVisibleIndex);\r\n Array.prototype.forEach.call(dotsWrap.children, function (dot, i) {\r\n dot.classList.toggle(\"is-active\", i === active);\r\n });\r\n }\r\n\r\n function buildDots() {\r\n dotsWrap.innerHTML = \"\";\r\n var visible = Math.max(1, Math.round(track.clientWidth \/ getStep()));\r\n var count = Math.max(1, cards.length - visible + 1);\r\n for (var i = 0; i < count; i += 1) {\r\n var dot = document.createElement(\"button\");\r\n dot.type = \"button\";\r\n dot.className = \"pa-dot\" + (i === 0 ? \" is-active\" : \"\");\r\n dot.setAttribute(\"aria-label\", \"Go to review \" + (i + 1));\r\n dot.addEventListener(\"click\", goTo.bind(null, i));\r\n dotsWrap.appendChild(dot);\r\n }\r\n }\r\n\r\n function startAutoplay() {\r\n stopAutoplay();\r\n autoplayId = window.setInterval(function () {\r\n var visible = Math.max(1, Math.round(track.clientWidth \/ getStep()));\r\n var lastIndex = Math.max(0, cards.length - visible);\r\n var nextIndex = currentIndex() >= lastIndex ? 0 : currentIndex() + 1;\r\n goTo(nextIndex);\r\n }, 5200);\r\n }\r\n\r\n function stopAutoplay() {\r\n if (autoplayId) {\r\n window.clearInterval(autoplayId);\r\n autoplayId = null;\r\n }\r\n }\r\n\r\n prev.addEventListener(\"click\", function () {\r\n goTo(currentIndex() - 1);\r\n });\r\n\r\n next.addEventListener(\"click\", function () {\r\n var visible = Math.max(1, Math.round(track.clientWidth \/ getStep()));\r\n var lastIndex = Math.max(0, cards.length - visible);\r\n goTo(currentIndex() >= lastIndex ? 0 : currentIndex() + 1);\r\n });\r\n\r\n track.addEventListener(\"scroll\", function () {\r\n window.requestAnimationFrame(updateDots);\r\n });\r\n\r\n root.addEventListener(\"mouseenter\", stopAutoplay);\r\n root.addEventListener(\"mouseleave\", startAutoplay);\r\n root.addEventListener(\"focusin\", stopAutoplay);\r\n root.addEventListener(\"focusout\", startAutoplay);\r\n\r\n window.addEventListener(\"resize\", function () {\r\n buildDots();\r\n updateDots();\r\n });\r\n\r\n buildDots();\r\n updateDots();\r\n\r\n if (!window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\r\n startAutoplay();\r\n }\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e0e9990 e-con-full e-flex e-con e-parent\" data-id=\"e0e9990\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19a824a elementor-widget elementor-widget-html\" data-id=\"19a824a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Pet Atlas Why Choose Us<\/title>\r\n <style>\r\n :root {\r\n --pa-navy: #0b2a4a;\r\n --pa-aqua: #bfeef0;\r\n --pa-aqua-2: #d9fbfb;\r\n --pa-yellow: #ffd84d;\r\n --pa-text: #17324d;\r\n --pa-muted: #587086;\r\n --pa-white: #ffffff;\r\n --pa-shadow: 0 18px 42px rgba(11, 42, 74, 0.16);\r\n --pa-radius: 8px;\r\n --pa-font: \"Tajawal\", \"Cairo\", \"Segoe UI\", Arial, sans-serif;\r\n }\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n background: #ffffff;\r\n color: var(--pa-text);\r\n font-family: var(--pa-font);\r\n }\r\n\r\n .pa-why {\r\n position: relative;\r\n overflow: hidden;\r\n isolation: isolate;\r\n padding: 74px 0 0;\r\n background: var(--pa-aqua);\r\n }\r\n\r\n .pa-why::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: -90px -8% auto;\r\n height: 180px;\r\n z-index: -1;\r\n background: var(--pa-yellow);\r\n border-radius: 0 0 50% 50%;\r\n transform: rotate(-3deg);\r\n }\r\n\r\n .pa-why::after {\r\n content: \"\";\r\n position: absolute;\r\n left: -8%;\r\n right: -8%;\r\n bottom: -46px;\r\n height: 160px;\r\n z-index: 1;\r\n background: var(--pa-navy);\r\n border-radius: 50% 50% 0 0 \/ 48% 48% 0 0;\r\n transform: rotate(2deg);\r\n }\r\n\r\n .pa-why__wrap {\r\n position: relative;\r\n width: min(1120px, calc(100% - 40px));\r\n min-height: 610px;\r\n margin: 0 auto;\r\n z-index: 2;\r\n }\r\n\r\n .pa-why__title {\r\n margin: 0 auto;\r\n text-align: center;\r\n color: var(--pa-navy);\r\n font-size: clamp(24px, 2.8vw, 34px);\r\n line-height: 1.15;\r\n font-weight: 900;\r\n letter-spacing: 0;\r\n }\r\n\r\n .pa-why__stage {\r\n position: relative;\r\n min-height: 520px;\r\n margin-top: 22px;\r\n }\r\n\r\n .pa-why__pets {\r\n position: absolute;\r\n left: 50%;\r\n bottom: 20px;\r\n width: min(620px, 58vw);\r\n transform: translateX(-50%);\r\n z-index: 3;\r\n }\r\n\r\n .pa-why__pets img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n object-fit: contain;\r\n filter: drop-shadow(0 22px 32px rgba(11, 42, 74, 0.14));\r\n }\r\n\r\n .pa-why__path {\r\n position: absolute;\r\n inset: 38px 7% 98px;\r\n z-index: 1;\r\n pointer-events: none;\r\n }\r\n\r\n .pa-why__path path {\r\n fill: none;\r\n stroke: rgba(255, 216, 77, 0.95);\r\n stroke-width: 3;\r\n stroke-linecap: round;\r\n stroke-dasharray: 8 12;\r\n animation: paDash 18s linear infinite;\r\n }\r\n\r\n @keyframes paDash {\r\n to {\r\n stroke-dashoffset: -240;\r\n }\r\n }\r\n\r\n .pa-paw {\r\n position: absolute;\r\n z-index: 0;\r\n width: 132px;\r\n height: 132px;\r\n color: rgba(255, 255, 255, 0.28);\r\n }\r\n\r\n .pa-paw--left {\r\n left: -10px;\r\n top: 170px;\r\n transform: rotate(-18deg);\r\n }\r\n\r\n .pa-paw--right {\r\n right: -8px;\r\n bottom: 190px;\r\n transform: rotate(15deg);\r\n }\r\n\r\n .pa-paw svg {\r\n width: 100%;\r\n height: 100%;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-feature {\r\n position: absolute;\r\n z-index: 4;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n min-width: 218px;\r\n max-width: 260px;\r\n padding: 13px 16px;\r\n border: 1px solid rgba(11, 42, 74, 0.1);\r\n border-radius: var(--pa-radius);\r\n background: rgba(255, 255, 255, 0.94);\r\n box-shadow: var(--pa-shadow);\r\n color: var(--pa-navy);\r\n animation: paFloat 7s ease-in-out infinite;\r\n animation-delay: var(--delay);\r\n }\r\n\r\n .pa-feature--advice { --delay: -1s; left: 13%; top: 92px; }\r\n .pa-feature--support { --delay: -3s; right: 12%; top: 48px; }\r\n .pa-feature--deals { --delay: -5s; right: 8%; top: 238px; }\r\n .pa-feature--community { --delay: -2s; left: 7%; top: 282px; }\r\n .pa-feature--soon { --delay: -4s; left: 39%; bottom: 62px; }\r\n\r\n @keyframes paFloat {\r\n 0%, 100% {\r\n transform: translate3d(0, 0, 0);\r\n }\r\n 50% {\r\n transform: translate3d(0, -10px, 0);\r\n }\r\n }\r\n\r\n .pa-feature__icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 0 0 38px;\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 50%;\r\n background: #fff4bf;\r\n color: var(--pa-navy);\r\n box-shadow: inset 0 0 0 2px rgba(255, 216, 77, 0.55);\r\n }\r\n\r\n .pa-feature__icon svg {\r\n width: 22px;\r\n height: 22px;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-feature strong {\r\n display: block;\r\n min-width: 0;\r\n color: var(--pa-navy);\r\n font-size: 15px;\r\n line-height: 1.12;\r\n font-weight: 900;\r\n white-space: normal;\r\n overflow-wrap: anywhere;\r\n }\r\n\r\n .pa-feature__short {\r\n display: none;\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .pa-why {\r\n padding-top: 56px;\r\n }\r\n\r\n .pa-why::before {\r\n height: 130px;\r\n }\r\n\r\n .pa-why::after {\r\n height: 96px;\r\n bottom: -34px;\r\n }\r\n\r\n .pa-why__wrap {\r\n width: min(100% - 24px, 560px);\r\n min-height: 0;\r\n padding-bottom: 64px;\r\n }\r\n\r\n .pa-why__stage {\r\n display: grid;\r\n gap: 14px;\r\n min-height: 0;\r\n margin-top: 22px;\r\n }\r\n\r\n .pa-why__pets {\r\n position: relative;\r\n left: auto;\r\n bottom: auto;\r\n width: min(100%, 470px);\r\n margin: 0 auto;\r\n transform: none;\r\n order: 1;\r\n }\r\n\r\n .pa-why__path {\r\n display: none;\r\n }\r\n\r\n .pa-feature {\r\n position: relative;\r\n inset: auto;\r\n align-items: center;\r\n gap: 8px;\r\n min-width: 0;\r\n max-width: none;\r\n padding: 11px 12px;\r\n animation: none;\r\n }\r\n\r\n .pa-why__features {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 10px;\r\n order: 2;\r\n }\r\n\r\n .pa-feature--soon {\r\n grid-column: 1 \/ -1;\r\n }\r\n\r\n .pa-feature strong {\r\n font-size: 12.5px;\r\n line-height: 1.12;\r\n }\r\n\r\n .pa-feature__icon {\r\n flex-basis: 32px;\r\n width: 32px;\r\n height: 32px;\r\n }\r\n\r\n .pa-feature__icon svg {\r\n width: 19px;\r\n height: 19px;\r\n }\r\n\r\n .pa-paw {\r\n width: 98px;\r\n height: 98px;\r\n }\r\n\r\n .pa-paw--left {\r\n left: -34px;\r\n top: 124px;\r\n }\r\n\r\n .pa-paw--right {\r\n right: -38px;\r\n bottom: 240px;\r\n }\r\n }\r\n\r\n @media (max-width: 420px) {\r\n .pa-why {\r\n padding-top: 44px;\r\n }\r\n\r\n .pa-why__wrap {\r\n width: min(100% - 10px, 380px);\r\n padding-bottom: 54px;\r\n }\r\n\r\n .pa-why__title {\r\n font-size: 29px;\r\n }\r\n\r\n .pa-why__stage {\r\n gap: 10px;\r\n }\r\n\r\n .pa-why__pets {\r\n width: min(100%, 350px);\r\n }\r\n\r\n .pa-why__features {\r\n gap: 8px;\r\n }\r\n\r\n .pa-feature {\r\n gap: 7px;\r\n min-height: 74px;\r\n padding: 9px 8px;\r\n }\r\n\r\n .pa-feature strong {\r\n font-size: 11.2px;\r\n line-height: 1.08;\r\n }\r\n\r\n .pa-feature__icon {\r\n flex-basis: 29px;\r\n width: 29px;\r\n height: 29px;\r\n }\r\n\r\n .pa-feature__icon svg {\r\n width: 17px;\r\n height: 17px;\r\n }\r\n\r\n .pa-feature--soon {\r\n min-height: 60px;\r\n justify-content: center;\r\n }\r\n\r\n .pa-feature__full {\r\n display: none;\r\n }\r\n\r\n .pa-feature__short {\r\n display: inline;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .pa-feature,\r\n .pa-why__path path {\r\n animation: none;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"pa-why\" aria-label=\"Why choose Pet Atlas\">\r\n <div class=\"pa-why__wrap\">\r\n <h2 class=\"pa-why__title\">Why Choose Us<\/h2>\r\n\r\n <span class=\"pa-paw pa-paw--left\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\"><path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9ZM30 25c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm4 0c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm-2 8c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/><\/svg>\r\n <\/span>\r\n <span class=\"pa-paw pa-paw--right\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\"><path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9ZM30 25c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm4 0c4 0 7-5 7-11s-3-10-7-10-7 4-7 10 3 11 7 11Zm-2 8c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/><\/svg>\r\n <\/span>\r\n\r\n <div class=\"pa-why__stage\">\r\n <svg class=\"pa-why__path\" viewBox=\"0 0 960 390\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n <path d=\"M80 120 C190 20 320 70 420 95 C550 128 655 56 780 80 C910 106 820 220 690 214 C590 210 560 316 450 302 C330 286 330 206 225 224 C112 244 40 210 80 120Z\"\/>\r\n <path d=\"M85 274 C160 322 240 258 292 300 C356 352 430 358 480 300\"\/>\r\n <\/svg>\r\n\r\n <figure class=\"pa-why__pets\">\r\n <picture>\r\n <source srcset=\"https:\/\/pet-atlas.com\/wp-content\/uploads\/2026\/07\/pet-atlas-why-choose-pets-cutout.webp\" type=\"image\/webp\">\r\n <img src=\"https:\/\/pet-atlas.com\/wp-content\/uploads\/2026\/07\/pet-atlas-why-choose-pets-cutout.webp\" alt=\"Cat and dog using a tablet together\" loading=\"lazy\" decoding=\"async\">\r\n <\/picture>\r\n <\/figure>\r\n\r\n <div class=\"pa-why__features\">\r\n <div class=\"pa-feature pa-feature--advice\">\r\n <span class=\"pa-feature__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm-1 14-4-4 1.4-1.4L11 13.2l5.6-5.6L18 9l-7 7Z\"\/><\/svg>\r\n <\/span>\r\n <strong>\r\n <span class=\"pa-feature__full\">Expert Advice and Recommendations<\/span>\r\n <span class=\"pa-feature__short\">Expert Advice<\/span>\r\n <\/strong>\r\n <\/div>\r\n\r\n <div class=\"pa-feature pa-feature--support\">\r\n <span class=\"pa-feature__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 3a8 8 0 0 0-8 8v4a3 3 0 0 0 3 3h2v-7H6a6 6 0 0 1 12 0h-3v7h2.1A5.1 5.1 0 0 1 12 22v-2a3.1 3.1 0 0 0 3.1-2H17a3 3 0 0 0 3-3v-4a8 8 0 0 0-8-8Z\"\/><\/svg>\r\n <\/span>\r\n <strong>\r\n <span class=\"pa-feature__full\">Veterinary Support at Your Fingertips<\/span>\r\n <span class=\"pa-feature__short\">Vet Support<\/span>\r\n <\/strong>\r\n <\/div>\r\n\r\n <div class=\"pa-feature pa-feature--deals\">\r\n <span class=\"pa-feature__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 7h16v2H4V7Zm1 4h14l-1.2 8H6.2L5 11Zm3-7h8l2 3H6l2-3Zm2 10v3h2v-3h-2Zm4 0v3h2v-3h-2Z\"\/><\/svg>\r\n <\/span>\r\n <strong>\r\n <span class=\"pa-feature__full\">Exclusive Pet Deals Delivered to Your Inbox<\/span>\r\n <span class=\"pa-feature__short\">Pet Deals<\/span>\r\n <\/strong>\r\n <\/div>\r\n\r\n <div class=\"pa-feature pa-feature--community\">\r\n <span class=\"pa-feature__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M8 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm8 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8ZM2 21c.5-4.2 3-7 6-7s5.5 2.8 6 7H2Zm8.5 0c.3-2.2 1.3-4.2 2.8-5.4.8-.7 1.8-1.1 2.7-1.1 3 0 5.5 2.6 6 6.5H10.5Z\"\/><\/svg>\r\n <\/span>\r\n <strong>\r\n <span class=\"pa-feature__full\">A Community for Pet Lovers<\/span>\r\n <span class=\"pa-feature__short\">Pet Community<\/span>\r\n <\/strong>\r\n <\/div>\r\n\r\n <div class=\"pa-feature pa-feature--soon\">\r\n <span class=\"pa-feature__icon\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2 3 7v10l9 5 9-5V7l-9-5Zm0 2.3L18 7.7l-6 3.4-6-3.4 6-3.4ZM5 9.4l6 3.4v6.8l-6-3.4V9.4Zm8 10.2v-6.8l6-3.4v6.8l-6 3.4Z\"\/><\/svg>\r\n <\/span>\r\n <strong>\r\n <span class=\"pa-feature__full\">Exciting Features Coming Soon<\/span>\r\n <span class=\"pa-feature__short\">Coming Soon<\/span>\r\n <\/strong>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-10464c0 e-con-full e-flex e-con e-parent\" data-id=\"10464c0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dbd6e09 elementor-widget elementor-widget-html\" data-id=\"dbd6e09\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Pet Atlas FAQ<\/title>\r\n <style>\r\n :root {\r\n --pa-navy: #0b2a4a;\r\n --pa-navy-2: #123d67;\r\n --pa-blue-soft: #eaf6ff;\r\n --pa-yellow: #ffd84d;\r\n --pa-text: #17324d;\r\n --pa-muted: #587086;\r\n --pa-white: #ffffff;\r\n --pa-line: rgba(11, 42, 74, 0.11);\r\n --pa-shadow: 0 20px 54px rgba(11, 42, 74, 0.11);\r\n --pa-radius: 8px;\r\n --pa-font: \"Tajawal\", \"Cairo\", \"Segoe UI\", Arial, sans-serif;\r\n }\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n background: #ffffff;\r\n color: var(--pa-text);\r\n font-family: var(--pa-font);\r\n }\r\n\r\n .pa-faq {\r\n position: relative;\r\n overflow: hidden;\r\n isolation: isolate;\r\n padding: 88px 0;\r\n background:\r\n radial-gradient(circle at 10% 14%, rgba(255, 216, 77, 0.18), transparent 24%),\r\n radial-gradient(circle at 88% 24%, rgba(123, 201, 255, 0.22), transparent 28%),\r\n linear-gradient(180deg, #f8fcff 0%, var(--pa-blue-soft) 100%);\r\n }\r\n\r\n .pa-faq::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: -2;\r\n background-image:\r\n linear-gradient(rgba(11, 42, 74, 0.035) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(11, 42, 74, 0.035) 1px, transparent 1px);\r\n background-size: 44px 44px;\r\n mask-image: linear-gradient(180deg, transparent, #000 16%, #000 88%, transparent);\r\n }\r\n\r\n .pa-faq__decor {\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n pointer-events: none;\r\n }\r\n\r\n .pa-faq__bubble {\r\n position: absolute;\r\n display: grid;\r\n place-items: center;\r\n width: var(--size);\r\n height: var(--size);\r\n border: 2px solid rgba(11, 42, 74, 0.12);\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.62);\r\n color: rgba(11, 42, 74, 0.28);\r\n box-shadow: 0 18px 48px rgba(11, 42, 74, 0.08);\r\n animation: paFaqFloat 9s ease-in-out infinite;\r\n animation-delay: var(--delay);\r\n }\r\n\r\n .pa-faq__bubble svg {\r\n width: 54%;\r\n height: 54%;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-faq__bubble--yellow {\r\n background: rgba(255, 216, 77, 0.26);\r\n border-color: rgba(255, 216, 77, 0.46);\r\n color: rgba(11, 42, 74, 0.34);\r\n }\r\n\r\n .pa-faq__bubble:nth-child(1) { --size: 96px; --delay: -1s; left: 5%; top: 16%; }\r\n .pa-faq__bubble:nth-child(2) { --size: 74px; --delay: -5s; right: 9%; top: 10%; }\r\n .pa-faq__bubble:nth-child(3) { --size: 112px; --delay: -3s; right: 6%; bottom: 12%; }\r\n .pa-faq__bubble:nth-child(4) { --size: 70px; --delay: -7s; left: 14%; bottom: 14%; }\r\n\r\n @keyframes paFaqFloat {\r\n 0%, 100% {\r\n transform: translate3d(0, 0, 0) rotate(-6deg);\r\n }\r\n 50% {\r\n transform: translate3d(0, -14px, 0) rotate(4deg);\r\n }\r\n }\r\n\r\n .pa-faq__wrap {\r\n position: relative;\r\n z-index: 1;\r\n width: min(980px, calc(100% - 40px));\r\n margin: 0 auto;\r\n }\r\n\r\n .pa-faq__head {\r\n max-width: 700px;\r\n margin: 0 auto 34px;\r\n text-align: center;\r\n }\r\n\r\n .pa-faq__eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin: 0 0 16px;\r\n padding: 9px 14px;\r\n border: 1px solid rgba(18, 61, 103, 0.12);\r\n border-radius: 999px;\r\n background: rgba(255, 255, 255, 0.78);\r\n color: var(--pa-navy-2);\r\n font-size: 14px;\r\n font-weight: 800;\r\n box-shadow: 0 10px 28px rgba(11, 42, 74, 0.06);\r\n }\r\n\r\n .pa-faq__eyebrow::before {\r\n content: \"\";\r\n width: 9px;\r\n height: 9px;\r\n border-radius: 50%;\r\n background: var(--pa-yellow);\r\n box-shadow: 0 0 0 5px rgba(255, 216, 77, 0.25);\r\n }\r\n\r\n .pa-faq h2 {\r\n margin: 0;\r\n color: var(--pa-navy);\r\n font-size: clamp(38px, 5vw, 58px);\r\n line-height: 1.06;\r\n font-weight: 900;\r\n letter-spacing: 0;\r\n }\r\n\r\n .pa-faq__lead {\r\n margin: 18px auto 0;\r\n max-width: 620px;\r\n color: var(--pa-muted);\r\n font-size: 18px;\r\n line-height: 1.62;\r\n font-weight: 600;\r\n }\r\n\r\n .pa-faq__list {\r\n display: grid;\r\n gap: 12px;\r\n }\r\n\r\n .pa-faq__item {\r\n border: 1px solid var(--pa-line);\r\n border-radius: var(--pa-radius);\r\n background: rgba(255, 255, 255, 0.9);\r\n box-shadow: 0 14px 36px rgba(11, 42, 74, 0.07);\r\n backdrop-filter: blur(12px);\r\n overflow: hidden;\r\n }\r\n\r\n .pa-faq__button {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 18px;\r\n min-height: 78px;\r\n padding: 22px 24px;\r\n border: 0;\r\n background: transparent;\r\n color: var(--pa-navy);\r\n text-align: left;\r\n cursor: pointer;\r\n font: inherit;\r\n }\r\n\r\n .pa-faq__question {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n min-width: 0;\r\n font-size: 19px;\r\n line-height: 1.28;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-faq__mark {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 0 0 38px;\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 50%;\r\n background: var(--pa-blue-soft);\r\n color: var(--pa-navy);\r\n box-shadow: inset 0 0 0 2px rgba(123, 201, 255, 0.22);\r\n }\r\n\r\n .pa-faq__mark svg {\r\n width: 21px;\r\n height: 21px;\r\n fill: currentColor;\r\n }\r\n\r\n .pa-faq__toggle {\r\n position: relative;\r\n flex: 0 0 36px;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n background: var(--pa-yellow);\r\n box-shadow: 0 12px 24px rgba(255, 216, 77, 0.24);\r\n }\r\n\r\n .pa-faq__toggle::before,\r\n .pa-faq__toggle::after {\r\n content: \"\";\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n width: 15px;\r\n height: 3px;\r\n border-radius: 999px;\r\n background: var(--pa-navy);\r\n transform: translate(-50%, -50%);\r\n transition: transform 180ms ease, opacity 180ms ease;\r\n }\r\n\r\n .pa-faq__toggle::after {\r\n transform: translate(-50%, -50%) rotate(90deg);\r\n }\r\n\r\n .pa-faq__item.is-open .pa-faq__toggle::after {\r\n opacity: 0;\r\n transform: translate(-50%, -50%) rotate(0deg);\r\n }\r\n\r\n .pa-faq__panel {\r\n display: grid;\r\n grid-template-rows: 0fr;\r\n transition: grid-template-rows 220ms ease;\r\n }\r\n\r\n .pa-faq__item.is-open .pa-faq__panel {\r\n grid-template-rows: 1fr;\r\n }\r\n\r\n .pa-faq__answer-wrap {\r\n overflow: hidden;\r\n }\r\n\r\n .pa-faq__answer {\r\n margin: 0;\r\n padding: 0 24px 24px 76px;\r\n color: var(--pa-muted);\r\n font-size: 16.5px;\r\n line-height: 1.68;\r\n font-weight: 600;\r\n }\r\n\r\n .pa-faq__cta {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 18px;\r\n margin-top: 22px;\r\n padding: 20px 22px;\r\n border: 1px solid rgba(11, 42, 74, 0.1);\r\n border-radius: var(--pa-radius);\r\n background: var(--pa-navy);\r\n color: #ffffff;\r\n box-shadow: var(--pa-shadow);\r\n }\r\n\r\n .pa-faq__cta strong {\r\n display: block;\r\n font-size: 18px;\r\n line-height: 1.25;\r\n font-weight: 900;\r\n }\r\n\r\n .pa-faq__cta span {\r\n display: block;\r\n margin-top: 5px;\r\n color: rgba(255, 255, 255, 0.78);\r\n font-size: 14px;\r\n line-height: 1.45;\r\n font-weight: 700;\r\n }\r\n\r\n .pa-faq__cta a {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 48px;\r\n padding: 0 20px;\r\n border-radius: var(--pa-radius);\r\n background: var(--pa-yellow);\r\n color: var(--pa-navy);\r\n text-decoration: none;\r\n font-size: 15px;\r\n font-weight: 900;\r\n white-space: nowrap;\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .pa-faq {\r\n padding: 62px 0;\r\n }\r\n\r\n .pa-faq__wrap {\r\n width: min(100% - 24px, 520px);\r\n }\r\n\r\n .pa-faq__head {\r\n margin-bottom: 26px;\r\n text-align: left;\r\n }\r\n\r\n .pa-faq h2 {\r\n font-size: clamp(32px, 9vw, 40px);\r\n }\r\n\r\n .pa-faq__lead {\r\n font-size: 16px;\r\n line-height: 1.56;\r\n }\r\n\r\n .pa-faq__button {\r\n min-height: 70px;\r\n padding: 18px 16px;\r\n }\r\n\r\n .pa-faq__question {\r\n gap: 11px;\r\n font-size: 16px;\r\n }\r\n\r\n .pa-faq__mark {\r\n flex-basis: 34px;\r\n width: 34px;\r\n height: 34px;\r\n }\r\n\r\n .pa-faq__toggle {\r\n flex-basis: 32px;\r\n width: 32px;\r\n height: 32px;\r\n }\r\n\r\n .pa-faq__answer {\r\n padding: 0 16px 20px 61px;\r\n font-size: 15px;\r\n line-height: 1.58;\r\n }\r\n\r\n .pa-faq__cta {\r\n display: block;\r\n }\r\n\r\n .pa-faq__cta a {\r\n width: 100%;\r\n margin-top: 16px;\r\n }\r\n\r\n .pa-faq__bubble:nth-child(1) { --size: 68px; left: -28px; top: 96px; }\r\n .pa-faq__bubble:nth-child(2) { --size: 60px; right: 14px; top: 42px; }\r\n .pa-faq__bubble:nth-child(3) { --size: 76px; right: -22px; bottom: 16%; }\r\n .pa-faq__bubble:nth-child(4) { display: none; }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .pa-faq__bubble {\r\n animation: none;\r\n }\r\n\r\n .pa-faq__panel,\r\n .pa-faq__toggle::before,\r\n .pa-faq__toggle::after {\r\n transition: none;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"pa-faq\" id=\"faq\" aria-label=\"Frequently asked questions\">\r\n <div class=\"pa-faq__decor\" aria-hidden=\"true\">\r\n <span class=\"pa-faq__bubble pa-faq__bubble--yellow\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\"><path d=\"M19 28c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9Zm26 0c4 0 7-4 7-9s-3-9-7-9-7 4-7 9 3 9 7 9ZM32 33c-9 0-18 8-18 17 0 6 5 10 11 8 4-1 10-1 14 0 6 2 11-2 11-8 0-9-9-17-18-17Z\"\/><\/svg>\r\n <\/span>\r\n <span class=\"pa-faq__bubble\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\"><path d=\"M32 4c-12 0-22 8-22 19 0 7 4 13 10 16l-2 10 11-7h3c12 0 22-8 22-19S44 4 32 4Zm-1 29h4v4h-4v-4Zm1-22c5 0 9 3 9 8 0 6-6 7-6 11h-4c0-6 6-6 6-11 0-2-2-4-5-4s-5 2-5 5h-4c0-5 4-9 9-9Z\"\/><\/svg>\r\n <\/span>\r\n <span class=\"pa-faq__bubble pa-faq__bubble--yellow\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\"><path d=\"M12 28 20 13l9 9h6l9-9 8 15v11c0 11-9 20-20 20S12 50 12 39V28Zm16 10c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Zm20 0c0 2-2 4-4 4s-4-2-4-4 2-4 4-4 4 2 4 4Z\"\/><\/svg>\r\n <\/span>\r\n <span class=\"pa-faq__bubble\">\r\n <svg viewBox=\"0 0 64 64\" focusable=\"false\"><path d=\"M12 38c0-14 10-25 23-25 12 0 21 9 23 21l3 2-3 2c-1 12-11 21-23 21-13 0-23-9-23-21Zm10-3c-4 0-7 3-7 7v3h14v-3c0-4-3-7-7-7Zm24-9a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z\"\/><\/svg>\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"pa-faq__wrap\">\r\n <div class=\"pa-faq__head\">\r\n <p class=\"pa-faq__eyebrow\">FAQ<\/p>\r\n <h2>Frequently asked questions<\/h2>\r\n <p class=\"pa-faq__lead\">\r\n Quick answers about online vet consultations, safety, prescriptions, and follow-up care.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"pa-faq__list\" data-pa-faq>\r\n <article class=\"pa-faq__item is-open\">\r\n <button class=\"pa-faq__button\" type=\"button\" aria-expanded=\"true\">\r\n <span class=\"pa-faq__question\">\r\n <span class=\"pa-faq__mark\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm-1 14-4-4 1.4-1.4L11 13.2l5.6-5.6L18 9l-7 7Z\"\/><\/svg>\r\n <\/span>\r\n Is Pet Atlas a replacement for an emergency clinic?\r\n <\/span>\r\n <span class=\"pa-faq__toggle\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n <div class=\"pa-faq__panel\">\r\n <div class=\"pa-faq__answer-wrap\">\r\n <p class=\"pa-faq__answer\">No. Pet Atlas is great for guidance, triage, and non-emergency questions. If your pet has severe bleeding, breathing trouble, seizures, poisoning, or collapse, go to an emergency clinic immediately.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-faq__item\">\r\n <button class=\"pa-faq__button\" type=\"button\" aria-expanded=\"false\">\r\n <span class=\"pa-faq__question\">\r\n <span class=\"pa-faq__mark\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 5h16v12H7l-3 3V5Zm4 4v2h8V9H8Zm0 4v2h6v-2H8Z\"\/><\/svg>\r\n <\/span>\r\n Can I talk to a vet by chat or video?\r\n <\/span>\r\n <span class=\"pa-faq__toggle\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n <div class=\"pa-faq__panel\">\r\n <div class=\"pa-faq__answer-wrap\">\r\n <p class=\"pa-faq__answer\">Yes. You can choose the format that fits your situation. Chat works well for quick questions and photos, while video helps when the vet needs to see symptoms more clearly.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-faq__item\">\r\n <button class=\"pa-faq__button\" type=\"button\" aria-expanded=\"false\">\r\n <span class=\"pa-faq__question\">\r\n <span class=\"pa-faq__mark\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M7 3h10v2h2v16H5V5h2V3Zm2 4H7v12h10V7h-2v2H9V7Zm1 5h4v2h-4v-2Zm0 4h5v2h-5v-2Z\"\/><\/svg>\r\n <\/span>\r\n Can the vet prescribe medication online?\r\n <\/span>\r\n <span class=\"pa-faq__toggle\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n <div class=\"pa-faq__panel\">\r\n <div class=\"pa-faq__answer-wrap\">\r\n <p class=\"pa-faq__answer\">Medication advice depends on your location, local regulations, and the pet's condition. When a prescription is not possible online, the vet can still explain safe next steps and when to visit a clinic.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-faq__item\">\r\n <button class=\"pa-faq__button\" type=\"button\" aria-expanded=\"false\">\r\n <span class=\"pa-faq__question\">\r\n <span class=\"pa-faq__mark\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z\"\/><\/svg>\r\n <\/span>\r\n What information should I prepare before a consultation?\r\n <\/span>\r\n <span class=\"pa-faq__toggle\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n <div class=\"pa-faq__panel\">\r\n <div class=\"pa-faq__answer-wrap\">\r\n <p class=\"pa-faq__answer\">Prepare your pet's age, breed, weight, symptoms, recent food or medication changes, and clear photos or videos if possible. This helps the veterinarian give faster and more accurate guidance.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"pa-faq__item\">\r\n <button class=\"pa-faq__button\" type=\"button\" aria-expanded=\"false\">\r\n <span class=\"pa-faq__question\">\r\n <span class=\"pa-faq__mark\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 3a9 9 0 1 0 9 9h-2a7 7 0 1 1-2.1-5H14v2h6V3h-2v2.2A9 9 0 0 0 12 3Zm-1 5h2v5l4 2-1 1.7-5-2.7V8Z\"\/><\/svg>\r\n <\/span>\r\n Do you offer follow-up support?\r\n <\/span>\r\n <span class=\"pa-faq__toggle\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n <div class=\"pa-faq__panel\">\r\n <div class=\"pa-faq__answer-wrap\">\r\n <p class=\"pa-faq__answer\">Yes. Follow-up support helps you understand progress, monitor symptoms, and know when your pet needs an in-person visit or a change in care plan.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <div class=\"pa-faq__cta\">\r\n <div>\r\n <strong>Still unsure what your pet needs?<\/strong>\r\n <span>Start with a quick consultation and get clear guidance from a licensed veterinarian.<\/span>\r\n <\/div>\r\n <a href=\"#booking\">Talk to a Vet<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n (function () {\r\n var root = document.querySelector(\"[data-pa-faq]\");\r\n if (!root) return;\r\n\r\n var items = Array.prototype.slice.call(root.querySelectorAll(\".pa-faq__item\"));\r\n\r\n items.forEach(function (item) {\r\n var button = item.querySelector(\".pa-faq__button\");\r\n\r\n button.addEventListener(\"click\", function () {\r\n var isOpen = item.classList.contains(\"is-open\");\r\n\r\n items.forEach(function (other) {\r\n other.classList.remove(\"is-open\");\r\n other.querySelector(\".pa-faq__button\").setAttribute(\"aria-expanded\", \"false\");\r\n });\r\n\r\n if (!isOpen) {\r\n item.classList.add(\"is-open\");\r\n button.setAttribute(\"aria-expanded\", \"true\");\r\n }\r\n });\r\n });\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pet Atlas Hero Online veterinary consultations, anytime A trusted vet when your pet needs one Connect with licensed veterinarians by video or chat and get clear, friendly guidance from the first minute. Talk to a Vet See How It Works +50K Cases supported +200 Veterinarians 4.9\/5 Client rating Pet Atlas Trust Bar Trusted care, built […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-885","page","type-page","status-publish","hentry"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/pages\/885","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/comments?post=885"}],"version-history":[{"count":485,"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/pages\/885\/revisions"}],"predecessor-version":[{"id":2834,"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/pages\/885\/revisions\/2834"}],"wp:attachment":[{"href":"https:\/\/pet-atlas.com\/ar\/wp-json\/wp\/v2\/media?parent=885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}