/*
Theme Name: Msdesign Child
Theme URI: http://underscores.me/
Author: mrsmartweb
Author URI: http://mrsmartweb.com
Description: Msdesign Child Theme
Template: msdesign
Version: 1.0.0
Text Domain: msdesignchild
*/ 

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --blue: #0737c8;
    --blue-dark: #092667;
    --red: #ef2d36;
    --ink: #0c2457;
    --muted: #5e6d8b;
    --white: #fff;
    --shadow: 0 20px 60px rgba(8, 38, 103, 0.12);
    --radius: 22px;
	--blue-soft: #eef4ff;
    --line: #dce5f5;
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:Manrope,Arial,sans-serif;
    color:var(--ink);
    background:#fff;
    line-height:1.6
}

a {
    text-decoration:none;
    color:inherit
}

img {
    max-width:100%;
    display:block
}

button,input,select,textarea {
    font:inherit
}

.container {
    width:min(1180px,calc(100% - 40px));
    margin:auto
}

.narrow {
    max-width:820px
}

.site-header {
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid var(--line)
}

.nav-wrap {
    min-height:82px;
    display:flex;
    align-items:center;
    gap:28px
}

.brand img {
    width:190px
}

.main-nav {
    display:flex;
    gap:24px;
    margin-left:auto
}

.main-nav a {
    font-weight:700;
    font-size:14px
}

.main-nav a:hover {
    color:var(--blue)
}

.nav-actions {
    display:flex;
    gap:10px
}

.menu-toggle {
    display:none;
    background:none;
    border:0
}

.menu-toggle span {
    display:block;
    width:26px;
    height:2px;
    background:var(--ink);
    margin:5px
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:12px 18px;
    border-radius:9px;
    border:2px solid transparent;
    font-weight:800;
    cursor:pointer;
    transition:.2s
}

.btn:hover {
    transform:translateY(-2px)
}

.btn-primary {
    background:var(--blue);
    color:white
}

.btn-outline {
    border-color:var(--blue);
    color:var(--blue);
    background:white
}

.btn-call {
    background:var(--red);
    color:#fff
}

.btn-light {
    background:#fff;
    color:var(--blue)
}

.btn-lg {
    padding:15px 21px
}

.flat-icon {
    width:28px;
    height:28px;
    display:inline-grid;
    place-items:center;
    flex:0 0 auto
}

.flat-icon svg {
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}

.hero {
    background:linear-gradient(130deg,#f6f9ff,#e8f0ff)
}

.hero-grid {
    min-height:650px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:50px
}

.hero-copy h1 {
    font-size:clamp(46px,6vw,76px);
    line-height:1.02;
    margin:12px 0 22px;
    letter-spacing:-3px
}

.hero-copy h1 span {
    color:var(--blue)
}

.hero-copy>p {
    font-size:19px;
    color:#5e6d86;
    max-width:620px
}

.eyebrow {
    text-transform:uppercase;
    letter-spacing:1.8px;
    font-size:12px;
    font-weight:900;
    color:var(--red)
}

.eyebrow.light {
    color:#cfe0ff
}

.hero-actions,.page-hero-actions,.inline-actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:28px
}

.hero-note {
    margin-top:28px;
    display:flex;
    gap:14px;
    align-items:center
}

.hero-note .flat-icon {
    color:var(--blue);
    width:36px;
    height:36px
}

.hero-note strong,.hero-note small {
    display:block
}

.hero-note small {
    color:#6a7890
}

.hero-visual {
    height:520px;
    position:relative
}

.hero-photo {
    height:100%;
    border-radius:28px;
    background:linear-gradient(150deg,rgba(10,71,213,.08),rgba(236,47,59,.08)),url('/wp-content/uploads/2026/10/pharmacygo-hero.jpg') center/cover;
    box-shadow:0 24px 65px rgba(13,51,120,.18)
}

.floating-card {
    position:absolute;
    left:-28px;
    bottom:35px;
    background:#fff;
    border-radius:18px;
    padding:20px;
    width:250px;
    box-shadow:0 18px 45px rgba(14,42,93,.18)
}

.floating-card strong,.floating-card span,.floating-card a {
    display:block
}

.floating-card span {
    font-size:13px;
    color:#68758a
}

.floating-card a {
    color:var(--blue);
    font-weight:800;
    margin-top:8px
}

.benefit-strip {
    padding:26px 0 8px;
    border-bottom:1px solid #e6ebf4
}

.benefit-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr)
}

.benefit-grid article {
    text-align:center;
    padding:16px;
    border-right:1px solid #e6ebf4
}

.benefit-grid article:last-child {
    border:0
}

.benefit-grid .flat-icon {
    color:var(--blue);
    width:38px;
    height:38px
}

.benefit-grid h3 {
    margin:10px 0 3px;
    font-size:16px
}

.benefit-grid p,.fine-print {
    margin:0;
    color:#69768c;
    font-size:13px
}

.fine-print {
    text-align:right;
    padding-top:8px;
	max-width:1200px;
	margin:0 auto;
	text-align:center;
	width:100%;
}

.section {
    padding:86px 0
}

.section.compact {
    padding:60px 0 10px;
}

.section.alt {
    background:#f7f9fd
}

.section-heading {
    margin-bottom:38px
}

.section-heading.centered {
    text-align:center;
    max-width:720px;
    margin:0 auto 40px
}

.section-heading h2,.hours-card h2,.split-content h2,.split-grid h2 {
    font-size:clamp(32px,4vw,48px);
    line-height:1.15;
    margin:8px 0 14px
}

.section-heading p,.split-content p {
    color:#66748b
}

.card-grid {
    display:grid;
    gap:22px
}

.card-grid.three {
    grid-template-columns:repeat(3,1fr)
}

.info-card {
    padding:28px;
    border:1px solid #e4eaf3;
    border-radius:18px;
    background:#fff;
    transition:.25s
}

.info-card:hover {
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(12,45,105,.1)
}

.info-card .flat-icon {
    width:48px;
    height:48px;
    color:var(--blue);
    background:var(--blue-soft);
    padding:10px;
    border-radius:14px;
}

.info-card h3 {
    margin:16px 0 8px;
}

.info-card p {
    color:#68758a
}

.info-card span:last-child {
    color:var(--blue);
    font-weight:800;
}
.info-card a span  {
    color:var(--blue);
    font-weight:800;
}
.info-card a:hover span  {
    color:var(--red);
    font-weight:800;
}

.hours-card {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:45px;
    align-items:center;
    padding:42px;
    border-radius:22px;
    background:#f2f6ff;
    border:1px solid #dfe8fa;
}

.hours-list {
    background:#fff;
    border-radius:16px;
    padding:8px 24px
}

.hours-list div {
    display:flex;
    justify-content:space-between;
    padding:15px 0;
    border-bottom:1px solid #e8edf5
}

.hours-list div:last-child {
    border:0
}

.hours-list span {
    color:#68758a
}

.split-section {
    background:var(--blue-dark);
    color:#fff;
    padding:80px 0
}

.split-grid {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:60px;
    align-items:center
}

.split-grid p {
    color:#d9e4ff
}

.feature-list {
    display:grid;
    gap:14px
}

.feature-list>div {
    display:flex;
    align-items:center;
    gap:14px;
    background:rgba(255,255,255,.1);
    padding:17px;
    border-radius:12px
}

.newsletter {
    padding:34px 0
}

.newsletter-wrap {
    background:var(--blue);
    color:#fff;
    border-radius:18px;
    padding:26px 30px;
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:center
}

.newsletter-wrap>div {
    display:flex;
    gap:15px;
    align-items:center
}

.newsletter h3,.newsletter p {
    margin:0
}

.newsletter form {
    display:flex;
    gap:8px;
    min-width:42%
}

.newsletter input {
    width:100%;
    border:0;
    border-radius:9px;
    padding:13px
}

.page-hero {
    padding:100px 0;
    background:linear-gradient(130deg,#f4f8ff,#eaf1ff);
    text-align:center
}

.page-hero .container {
    max-width:850px
}

.page-hero h1 {
    font-size:clamp(44px,6vw,68px);
    line-height:1.05;
    margin:12px 0 18px
}

.page-hero p {
    color:#63718a;
    font-size:18px
}

.page-hero-actions {
    justify-content:center
}

.split-content {
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:55px;
    align-items:center
}

.stat-card {
    padding:30px;
    background:#f3f7ff;
    border-radius:20px
}

.stat-card div {
    padding:16px;
    border-bottom:1px solid #dce6f8
}

.stat-card div:last-child {
    border:0
}

.stat-card strong,.stat-card span {
    display:block
}

.stat-card strong {
    font-size:22px;
    color:var(--blue)
}

.check-list {
    list-style:none;
    padding:0;
    margin:25px 0
}

.check-list li {
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin:12px 0
}

.check-list .flat-icon {
    color:var(--blue)
}

.visual-panel {
    min-height:340px;
    background:linear-gradient(145deg,var(--blue-dark),#0a55dd);
    border-radius:24px;
    color:#fff;
    display:grid;
    place-items:center;
    align-content:center;
    text-align:center;
    padding:30px
}

.visual-panel .flat-icon {
    width:85px;
    height:85px;
    margin-bottom:20px
}

.visual-panel strong {
    font-size:30px
}

.visual-panel span {
    color:#dce7ff
}

.form-card {
    border:1px solid #dde5f1;
    border-radius:20px;
    padding:30px;
    box-shadow:0 15px 40px rgba(11,45,102,.08)
}

.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}

.form-card label {
    display:grid;
    gap:7px;
    font-weight:700;
    margin-bottom:18px
}

.form-card input,.form-card select,.form-card textarea {
    width:100%;
    padding:12px;
    border:1px solid #cad5e5;
    border-radius:9px;
    background:#fff
}

.check-row {
    grid-template-columns:auto 1fr!important;
    align-items:start
}

.check-row input {
    width:auto
}

.faq-list details {
    border:1px solid #dfe6f1;
    border-radius:13px;
    margin:12px 0;
    padding:18px 20px
}

.faq-list summary {
    font-weight:800;
    cursor:pointer
}

.faq-list p {
    color:#68758a
}

.contact-grid {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:35px
}

.inner-form .section {
    padding:0
}

.contact-card {
    background:#f3f7ff;
    border-radius:20px;
    padding:30px
}

.contact-card>div {
    display:flex;
    gap:15px;
    margin:22px 0
}

.contact-card .flat-icon {
    color:var(--blue)
}
.contact-card span br  {
	display:block !important;
}
.contact-card strong,.contact-card span {
    display:block;
}

.contact-card a {
    color:var(--blue)
}

.site-footer {
    background:#f8faff;
    padding:60px 0 24px;
    margin-top:30px
}

.footer-grid {
    display:grid;
    grid-template-columns:1.3fr repeat(4,1fr);
    gap:30px
}

.footer-brand img {
    width:180px
}

.footer-brand p,.footer-grid p {
    color:#68758a;
    font-size:14px
}

.footer-grid h4 {
    margin-top:0
}

.footer-grid a {
    display:block;
    color:#627088;
    margin:8px 0;
    font-size:14px
}

.footer-call {
    font-weight:900;
    color:var(--blue)!important;
    font-size:18px!important
}

.footer-bottom {
    display:flex;
    justify-content:space-between;
    border-top:1px solid #dfe6f0;
    margin-top:35px;
    padding-top:20px;
    color:#718099;
    font-size:13px
}

.floating-call {
    position:fixed;
    right:20px;
    bottom:22px;
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--red);
    color:#fff;
    display:grid;
    place-items:center;
    z-index:90;
    box-shadow:0 12px 30px rgba(236,47,59,.35)
}

.back-top {
    position:fixed;
    right:22px;
    bottom:88px;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:var(--ink);
    color:#fff;
    opacity:0;
    pointer-events:none;
    transition:.2s
}

.back-top.show {
    opacity:1;
    pointer-events:auto
}

.toast {
    position:fixed;
    left:50%;
    bottom:25px;
    transform:translate(-50%,20px);
    background:var(--ink);
    color:#fff;
    padding:12px 18px;
    border-radius:9px;
    opacity:0;
    pointer-events:none;
    transition:.2s;
    z-index:200
}

.toast.show {
    opacity:1;
    transform:translate(-50%,0)
}

@media(max-width:980px) {
    .menu-toggle {
        display:block;
        margin-left:auto
    }
    .main-nav {
        display:none;
        position:absolute;
        top:82px;
        left:0;
        right:0;
        background:#fff;
        padding:22px 30px;
        flex-direction:column;
        border-bottom:1px solid var(--line)
    }
    .main-nav.open {
        display:flex
    }
    .nav-actions .btn-outline {
        display:none
    }
    .hero-grid,.split-content,.contact-grid {
        grid-template-columns:1fr
    }
    .hero-copy {
        padding-top:60px
    }
    .hero-visual {
        height:430px;
        margin-bottom:50px
    }
    .benefit-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .card-grid.three {
        grid-template-columns:repeat(2,1fr)
    }
    .hours-card,.split-grid {
        grid-template-columns:1fr
    }
    .footer-grid {
        grid-template-columns:repeat(3,1fr)
    }
    .footer-brand {
        grid-column:1/-1
    }
}

@media(max-width:650px) {
    .container {
        width:min(100% - 24px,1180px)
    }
    .nav-wrap {
        min-height:72px
    }
    .brand img {
        width:160px
    }
    .main-nav {
        top:72px
    }
    .nav-actions .btn-primary {
        display:none
    }
    .hero-grid {
        min-height:auto
    }
    .hero-copy h1 {
        letter-spacing:-2px
    }
    .hero-actions .btn {
        width:100%
    }
    .hero-visual {
        height:320px
    }
    .floating-card {
        left:10px;
        bottom:12px
    }
    .benefit-grid,.card-grid.three,.form-grid {
        grid-template-columns:1fr
    }
    .benefit-grid article {
        border-right:0;
        border-bottom:1px solid #e6ebf4
    }
    .hours-card {
        padding:25px
    }
    .hours-list div {
        flex-direction:column;
        gap:2px
    }
    .newsletter-wrap,.newsletter form {
        flex-direction:column;
        align-items:stretch
    }
    .newsletter form {
        width:100%
    }
    .footer-grid {
        grid-template-columns:1fr 1fr
    }
    .footer-brand {
        grid-column:1/-1
    }
    .footer-bottom {
        flex-direction:column;
        gap:8px
    }
    .page-hero {
        padding:72px 0
    }
    .section {
        padding:62px 0
    }
    .fine-print {
        text-align:left
    }
}

/* Theme refinements */
.btn-primary:hover {
    background: var(--blue-dark);
}

.btn-outline:hover {
    background: var(--blue-soft);
}

.btn-call:hover,
.floating-call:hover {
    filter: brightness(0.95);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(7, 55, 200, 0.12);
}

.site-footer a:hover,
.main-nav a:hover {
    color: var(--red);
}