/* =============================
   POSSTEP Main Styles
   Refactor: formatting + safe cleanup only
   ============================= */

:root {
    --green:#00a93a;
    --green2:#78c819;
    --blue:#0055b8;
    --navy:#102a4c;
    --text:#1f2f46;
    --muted:#65758b;
    --line:#e8eef7;
    --bg:#f5f9ff;
    --shadow:0 12px 30px rgba(20,54,93,.08);
    --radius:18px;
}

* {
    box-sizing:border-box
}

html,
body {
    width:100%;
    overflow-x:hidden;
    touch-action:pan-y;
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:Prompt,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:var(--text);
    background:#fff;
    font-size:16px
}

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

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

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

.site-header {
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(12px);
    box-shadow:0 3px 15px rgba(12,42,87,.06)
}

.nav-wrap {
    height:72px;
    display:flex;
    align-items:center;
    gap:26px
}

.brand {
    display:flex;
    align-items:center;
    flex:0 0 auto
}

.brand img {
    width:174px;
    height:auto;
    display:block
}

.brand-mark {
    display:inline-block;
    color:var(--green);
    transform:skew(-18deg);
    font-size:20px
}

.main-nav {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:24px;
    font-size:14px;
    font-weight:600
}

.main-nav a {
    color:#21324a;
    position:relative
}

.main-nav a:hover,
.main-nav .active {
    color:var(--green)
}

.main-nav .active:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-8px;
    height:3px;
    border-radius:9px;
    background:var(--green)
}

.line-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:linear-gradient(135deg,#06c34b,#069f39);
    color:#fff;
    border:0;
    border-radius:9px;
    padding:12px 24px;
    font-weight:500;
    box-shadow:0 8px 18px rgba(0,169,58,.25);
    white-space:nowrap
}

.line-btn:before {
    content:"LINE";
    font-size:11px;
    background:#fff;
    color:var(--green);
    border-radius:999px;
    padding:2px 5px
}

.header-line {
    padding:9px 18px;
    font-size:14px
}

.nav-toggle {
    display:none;
    margin-left:auto;
    border:0;
    background:#f0f6ff;
    border-radius:10px;
    width:42px;
    height:42px;
    font-size:22px
}

.hero {
    position:relative;
    overflow:hidden;
    min-height:500px;
    background:linear-gradient(115deg,#ffffff 0%,#ffffff 43%,#f2f8ff 67%,#dceeff 100%)
}

.hero-bg {
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:radial-gradient(circle at 92% 14%,rgba(255,255,255,.95) 0 2px,transparent 3px) 0 0/14px 14px,linear-gradient(115deg,rgba(255,255,255,0) 0%,rgba(232,244,255,.75) 58%,rgba(210,234,255,.85) 100%)
}

.hero-bg:before {
    content:"";
    position:absolute;
    right:6%;
    top:-35%;
    width:34%;
    height:120%;
    background:linear-gradient(130deg,rgba(255,255,255,.0) 0%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.0) 100%);
    transform:skewX(-20deg)
}

.hero-bg:after {
    content:"";
    position:absolute;
    right:-12%;
    bottom:-30%;
    width:72%;
    height:42%;
    background:linear-gradient(135deg,#61c21c 0%,#009946 34%,#0067cb 35%,#0052af 100%);
    border-radius:65% 0 0 0 / 72% 0 0 0;
    transform:rotate(-7deg);
    box-shadow:-220px 10px 0 -95px rgba(65,190,31,.95)
}

.hero:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 34%,rgba(255,255,255,.25) 58%,rgba(255,255,255,0) 78%);
    z-index:1;
    pointer-events:none
}

.hero-grid {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:43% 57%;
    align-items:center;
    gap:0;
    min-height:500px;
    padding:44px 0 52px
}

.hero h1 {
    font-size:44px;
    line-height:1.2;
    margin:0 0 10px;
    color:#112b53;
    font-weight:800;
    letter-spacing:-.5px
}

.hero-price {
    margin:0 0 22px;
    font-weight:800;
    font-size:27px;
    color:#122b4a
}

.hero-price strong {
    font-size:72px;
    line-height:1;
    color:var(--green);
    letter-spacing:-3px;
    margin:0 8px
}

.check-list,
.spec-list {
    list-style:none;
    margin:0;
    padding:0
}

.check-list li {
    position:relative;
    padding-left:44px;
    margin:14px 0;
    font-weight:700;
    font-size:21px;
    color:#122b4a
}

.check-list li:before,
.spec-list li:before {
    content:"✓";
    position:absolute;
    left:0;
    top:1px;
    display:grid;
    place-items:center;
    background:var(--green);
    color:#fff;
    border-radius:50%;
    width:27px;
    height:27px;
    font-size:15px;
    font-weight:800
}

.hero-cta {
    margin-top:18px;
    font-size:19px;
    padding:16px 42px;
    border-radius:10px
}

.hero-visual {
    position:relative;
    z-index:2;
    align-self:end;
    margin-right:-70px;
    margin-left:-16px;
    margin-bottom:-10px
}

.hero-visual img {
    width:108%;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 22px 30px rgba(16,42,76,.16))
}

.wave {
    display:none
}

.section-pad {
    padding:34px 0
}

.why {
    background:#fff
}

.why h2 {
    text-align:center;
    margin:0 0 28px;
    color:#112b53;
    font-size:31px
}

.why h2 span {
    color:var(--green);
    font-weight:800
}

.why-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}

.why-card {
    position:relative;
    text-align:center;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px 22px;
    box-shadow:var(--shadow);
    min-height:245px
}

.why-card img {
    height:86px;
    margin:8px auto 12px
}

.why-icon {
    position:absolute;
    left:18px;
    top:18px;
    width:30px;
    height:30px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#1675d1;
    color:#fff;
    font-weight:800
}

.why-card h3 {
    margin:8px 0 8px;
    font-size:18px;
    color:#18335b
}

.why-card p {
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.75
}

.catalog {
    background:linear-gradient(180deg,#fff 0,#f7fbff 100%)
}

.section-title {
    margin:0 0 18px;
    font-size:25px
}

.section-title.green {
    color:var(--green)
}

.section-title.blue {
    color:#15365f
}

.product-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px
}

.product-card {
    display:grid;
    grid-template-columns:50% 50%;
    align-items:center;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:20px;
    min-height:340px
}

.product-img {
    display:grid;
    place-items:center;
    min-height:300px
}

.product-img img {
    max-height:300px;
    width:auto;
    margin:auto;
    transition:transform .3s ease;
}


.product-info h3 {
    margin:0 0 8px;
    font-size:22px;
    color:#142f57
}

.spec-list li {
    position:relative;
    padding-left:22px;
    margin:5px 0;
    color:#44546a;
    font-size:14px
}

.spec-list li:before {
    width:14px;
    height:14px;
    font-size:9px;
    background:#25b94f;
    top:3px
}

.product-price {
    margin:8px 0 10px;
    color:#0c9e39;
    font-weight:700
}

.product-price strong {
    font-size:23px
}

.line-btn.small {
    font-size:14px;
    padding:8px 16px;
    border-radius:7px
}

.steps {
    background:#fff
}

.steps-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:var(--shadow);
    padding:28px;
    text-align:center
}

.steps-card h2 {
    margin:0 0 28px;
    color:#112b53
}

.steps-card h2 span {
    color:var(--green)
}

.steps-row {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px
}

.step {
    position:relative;
    flex:1
}

.step b {
    position:absolute;
    left:25%;
    top:-8px;
    width:28px;
    height:28px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#1675d1;
    color:#fff;
    font-size:14px
}

.step span {
    display:grid;
    place-items:center;
    width:74px;
    height:74px;
    border-radius:50%;
    background:#eef7ff;
    margin:0 auto 8px;
    font-size:32px;
    color:var(--green);
    font-weight:800
}

.step p {
    margin:0;
    font-size:14px;
    line-height:1.45;
    color:#263b57;
    font-weight:600
}

.arrow {
    font-size:28px;
    color:#a6b4c6;
    padding-top:28px
}

.condition-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:26px;
    padding:13px 54px;
    background:#0878d5;
    color:#fff;
    border-radius:10px;
    font-weight:700;
    box-shadow:0 8px 20px rgba(8,120,213,.22)
}

.condition-btn:before {
    content:"";
    margin-right:8px
}

.cta-band {
    background:linear-gradient(100deg,#0064bb 0%,#0075d5 60%,#004ea2 100%);
    color:#fff;
    position:relative;
    overflow:hidden
}

.cta-band:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(170deg,transparent 0 60%,var(--green2) 60% 71%,transparent 71%)
}

.cta-grid {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr auto 100px;
    align-items:center;
    gap:28px;
    padding:28px 0
}

.cta-grid h2 {
    margin:0;
    font-size:30px
}

.cta-grid p {
    margin:4px 0 0
}

.cta-grid img {
    background:#fff;
    border-radius:8px;
    padding:6px;
    width:100px
}

.site-footer {
    background:#fff;
    padding:30px 0 18px
}

.footer-grid {
    display:grid;
    grid-template-columns:1.4fr .9fr .9fr .7fr;
    gap:28px;
    border-bottom:1px solid var(--line);
    padding-bottom:20px
}

.site-footer h3 {
    margin:0 0 10px;
    color:#18335b
}

.site-footer a {
    display:block;
    color:#52637b;
    margin:5px 0
}

.site-footer p {
    color:#52637b;
    line-height:1.7
}

.footer-brand {
    font-size:29px
}

.socials {
    color:var(--green)!important;
    width: 70%;
}

.copyright {
    text-align:center;
    margin:14px 0 0;
    color:#8a98aa!important;
    font-size:13px
}

.step-icon{
    width:80px;
    height:80px;
    background:#eef6ff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
}

.step-icon img{
    width:50px;
    height:50px;
    object-fit:contain;
}

/* =============================
   Responsive: Tablet / Small Desktop
   ============================= */

@media (max-width:900px) {

.why-card p {
    font-size:16px;
}

.socials {
    width: 30%;
            justify-content: center;
        display: inline-block;
}

    .step-icon{
        width:68px;
        height:68px;
    }

    .step-icon img{
        width:42px;
        height:42px;
    }

    .nav-toggle {
        display:block
    }

    .site-footer {
        margin-bottom: 30px;
    }

    .main-nav {
        position:absolute;
        top:72px;
        left:20px;
        right:20px;
        display:none;
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        background:#fff;
        border:1px solid var(--line);
        border-radius:16px;
        padding:12px;
        box-shadow:var(--shadow)
    }

    .main-nav.open {
        display:flex
    }

    .main-nav a {
        width:100%;
        padding:12px
    }

    .main-nav .active:after {
        display:none
    }

    .header-line {
        display:none
    }

    .hero {
        min-height:auto
    }

    .hero:after {
        background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 44%,rgba(255,255,255,.25) 72%,rgba(255,255,255,0) 100%)
    }

    .hero-grid {
        grid-template-columns:1fr;
        min-height:auto;
        padding:34px 0 0
    }

    .hero h1 {
        font-size:34px
    }

    .hero-price {
        font-size:21px
    }

    .hero-price strong {
        font-size:54px
    }

    .check-list li {
        font-size:17px
    }

    .hero-visual {
        margin:8px -40px 0 -10px
    }

    .hero-visual img {
        width:112%
    }

    .why-grid,.product-grid,.footer-grid {
        grid-template-columns:1fr
    }

    .product-card {
        grid-template-columns:50% 50%;
        padding:18px;
        min-height:320px
    }

    .product-img {
        min-height:260px
    }

    .product-img img {
        max-height:290px
    }

    .steps-row {
        overflow-x:visible;
        justify-content:flex-start;
        padding-bottom:8px
    }

    .step {
        min-width:130px
    }

    .arrow {
        min-width:20px
    }

    .cta-grid {
        grid-template-columns:1fr;
        text-align:center
    }

    .cta-grid img {
        margin:auto
    }

    .container {
        width:min(100% - 28px,1120px)
    }
}

/* =============================
   Responsive: Mobile
   ============================= */

@media (max-width:560px) {
    body {
        font-size:15px
    }

    .brand img {
        width:142px
    }

    .hero h1 {
        font-size:30px
    }

    .hero-price strong {
        font-size:47px
    }

    .hero-cta {
        width:100%;
        font-size:16px;
        padding-left:14px;
        padding-right:14px
    }

    .hero-visual {
        margin-left:-16px;
        margin-right:-70px
    }

    .hero-visual img {
        width:118%
    }

    .check-list li {
        font-size:16px;
        padding-left:38px
    }

    .check-list li:before {
        width:24px;
        height:24px
    }

    .product-card {
        grid-template-columns:1fr;
        text-align:center;
        padding:24px;
        min-height:auto
    }

    .product-img {
        min-height:240px
    }

    .product-img img {
        max-height:290px;
        width:auto;
        margin:auto;
        min-height:0
    }

    .product-info h3 {
        font-size:32px
    }

    .product-price strong {
        font-size:48px
    }

    .spec-list {
        text-align:left;
        display:inline-block
    }

    .footer-grid {
        text-align:center
    }

    .footer-brand {
        justify-content:center;
        display: flex !important;
    }

    .section-pad {
        padding:26px 0
    }

    .why-card {
        padding:20px 16px
    }

    .condition-btn {
        width:100%;
        padding-left:18px;
        padding-right:18px
    }
}

/* Mobile hero design: poster-style layout matching the provided reference */

.hero-mobile-benefits,
.hero-mobile-note {
    display:none
}

@media (max-width:560px) {

    .spec-list li{
        font-size:18px;
        line-height:1.65;
        margin:8px 0;
        padding-left:32px;
    }

    .spec-list li:before{
        width:22px;
        height:22px;
        font-size:13px;
        top:4px;
    }

  .site-header {
        box-shadow:0 4px 14px rgba(12,42,87,.08)
    }

  .nav-wrap {
        height:72px;
        width:100%;
        padding:0 18px
    }

  .container.nav-wrap {
        width:100%
    }

  .brand img {
        width:165px
    }

  .nav-toggle {
        display:block;
        background:transparent;
        color:var(--green);
        font-size:42px;
        line-height:1;
        width:48px;
        height:48px;
        padding:0;
        font-weight:800
    }

  .main-nav {
        top:72px;
        left:14px;
        right:14px
    }

  .hero {
        min-height:0;
        background:linear-gradient(180deg,#fafdff 0%,#ffffff 42%,#f6fbff 100%);
        overflow:hidden
    }



  .hero-bg:before {
        right:-38%;
        top:5%;
        width:86%;
        height:52%;
        border-radius:50%;
        background:rgba(222,241,255,.8);
        transform:none
    }

  .hero-bg:after {
        right:-43%;
        bottom:-8%;
        width:84%;
        height:28%;
        border-radius:90% 0 0 0 / 100% 0 0 0;
        transform:rotate(-8deg);
        box-shadow:-270px -95px 0 -120px rgba(112,203,49,.55)
    }

  .hero:before {
        content:"";
        position:absolute;
        left:-38%;
        top:34%;
        width:80%;
        height:38%;
        border-radius:50%;
        background:rgba(113,203,49,.26);
        z-index:1;
        pointer-events:none
    }

  .hero:after {
        background:none
    }

  .hero-grid {
        display:flex;
        flex-direction:column;
        position:relative;
        z-index:2;
        padding:42px 0 28px;
        gap:0;
        min-height:0;
        text-align:center
    }

  .hero-copy {
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%
    }

  .hero h1 {
        max-width:330px;
        margin:0 auto 12px;
        color:#0d2d58;
        font-size:48px;
        line-height:1.12;
        font-weight:800;
        letter-spacing:-1px
    }

  .hero h1:after {
        content:"เริ่มต้นเพียง";
        display:block;
        margin:16px auto 4px;
        width:max-content;
        color:#18365c;
        font-size:19px;
        line-height:1;
        font-weight:700;
        letter-spacing:0;
        position:relative
    }

  .hero-price {
        margin:0;
        color:#0d2d58;
        font-size:0;
        line-height:1;
        font-weight:800;
        display:flex;
        flex-direction:column;
        align-items:center
    }

  .hero-price strong {
        display:block;
        margin:0;
        font-size:105px;
        line-height:.92;
        letter-spacing:-4px;
        color:#08af2d;
        text-shadow:0 6px 14px rgba(0,160,49,.12)
    }


  .hero-price strong:after {
        content:"บาท/วัน";
        display:block;
        margin-top:6px;
        color:#0d2d58;
        font-size:35px;
        line-height:1;
        font-weight:800;
        letter-spacing:0
    }

  .hero-list {
        display:none
    }

  .hero-visual {
        order:2;
        width:118%;
        margin:18px -8% -2px;
        align-self:center;
        z-index:3
    }

  .hero-visual img {
        width:98%;
        filter:drop-shadow(0 18px 20px rgba(16,42,76,.18))
    }

  .hero-mobile-benefits {
        order:3;
        display:grid;
        gap:10px;
        width:min(100%,340px);
        margin:12px auto 18px;
        z-index:4
    }

  .mobile-benefit {
        display:grid;
        grid-template-columns:62px 1fr;
        align-items:center;
        min-height:72px;
        background:rgba(255,255,255,.96);
        border:1px solid #e8eef7;
        border-radius:12px;
        box-shadow:0 10px 24px rgba(14,44,86,.10);
        text-align:left;
        overflow:hidden
    }

  .mobile-benefit-icon {
        width:48px;
        height:48px;
        margin-left:14px;
        border-radius:50%;
        background:linear-gradient(135deg,#13c94a,#06a739);
        color:#fff;
        display:grid;
        place-items:center;
        font-size:22px;
        font-weight:800
    }

  .mobile-benefit strong {
        color:#102d55;
        font-size:19px;
        line-height:1.35;
        font-weight:800;
        padding:0 12px;
        border-left:1px dashed #cfd8e5
    }

  .hero-cta {
        order:4;
        width:min(100%,360px);
        margin:0 auto 18px;
        min-height:64px;
        border-radius:12px;
        font-size:24px;
        padding:16px 14px;
        box-shadow:0 16px 25px rgba(0,169,58,.24)
    }

  .hero-cta:before {
        font-size:16px;
        padding:5px 7px;
        margin-right:4px
    }

  .hero-mobile-note {
        order:5;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        margin:0;
        color:#0d2d58;
        font-size:18px;
        font-weight:700
    }

  .hero-mobile-note:before,.hero-mobile-note:after {
        content:"";
        height:1px;
        width:52px;
        background:#cfd8e5
    }

  .hero-mobile-note span {
        display:grid;
        place-items:center;
        width:24px;
        height:24px;
        border-radius:50%;
        background:var(--green);
        color:#fff;
        font-size:14px;
        flex:0 0 auto
    }
}

@media (max-width:390px) {

  .brand img {
        width:150px
    }

  .hero h1 {
        font-size:43px;
        max-width:300px
    }

  .hero-price strong {
        font-size:92px
    }

  .hero-price strong:after {
        font-size:31px
    }

  .hero-visual {
        width:126%;
        margin-left:-13%;
        margin-right:-13%
    }

  .mobile-benefit strong {
        font-size:17px
    }

  .hero-cta {
        font-size:21px
    }

  .product-img {
        min-height:220px
    }

  .product-img img {
        max-height:290px
    }
}

/* =============================
   Mobile portrait typography tuning
   Added safely at the end to override only font sizing/spacing on phones.
   ============================= */
@media (max-width:560px) {
    body {
        font-size:16px;
    }

    .section-title {
        font-size:24px;
        line-height:1.3;
    }

    .product-info h3 {
        font-size:30px;
        line-height:1.2;
        margin-bottom:12px;
    }

    .spec-list li {
        font-size:18px;
        line-height:1.55;
        margin:8px 0;
        padding-left:32px;
    }

    .spec-list li:before {
        width:22px;
        height:22px;
        font-size:13px;
        top:3px;
    }

    .product-price {
        margin:14px 0 16px;
        font-size:20px;
        line-height:1.2;
    }

    .product-price strong {
        font-size:46px;
        line-height:1;
    }

    .line-btn.small {
        font-size:18px;
        padding:13px 24px;
        border-radius:10px;
    }

    .why h2 {
        font-size:28px;
        line-height:1.3;
    }

    .why-card h3 {
        font-size:20px;
        line-height:1.35;
    }

    .why-card p {
        font-size:16px;
        line-height:1.75;
    }

    .steps-card h2 {
        font-size:23px;
        line-height:1.35;
    }

    .step p {
        font-size:14px;
        line-height:1.45;
    }

    .footer-grid p,
    .site-footer a {
        font-size:15px;
        line-height:1.7;
    }
}

@media (max-width:390px) {
    .product-info h3 {
        font-size:28px;
    }

    .spec-list li {
        font-size:17px;
        line-height:1.55;
    }

    .product-price {
        font-size:18px;
    }

    .product-price strong {
        font-size:42px;
    }

    .line-btn.small {
        font-size:16px;
        padding:12px 18px;
    }
}

/* Mobile fix: show all rental steps without clipping */
@media (max-width:560px) {
    .steps-card {
        padding:26px 16px;
        overflow:hidden;
    }

    .steps-card h2 {
        max-width:320px;
        margin-left:auto;
        margin-right:auto;
        font-size:24px;
        line-height:1.35;
    }

    .steps-row {
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:26px 14px;
        overflow:visible;
        justify-content:normal;
        align-items:start;
        padding-bottom:0;
    }

    .step {
        min-width:0;
        width:100%;
    }

    .step:nth-of-type(5) {
        grid-column:1 / -1;
        max-width:180px;
        margin:0 auto;
    }

    .arrow {
        display:none;
    }

    .step b {
        left:50%;
        top:-10px;
        transform:translateX(-54px);
    }

    .step-icon {
        width:84px;
        height:84px;
    }

    .step-icon img {
        width:54px;
        height:54px;
    }

    .step p {
        margin-top:8px;
        font-size:16px;
        line-height:1.4;
        word-break:keep-all;
    }

    .condition-btn {
        width:100%;
        max-width:320px;
        margin-top:28px;
        font-size:18px;
        padding:16px 18px;
    }
}

@media (max-width:390px) {
    .steps-card h2 {
        font-size:22px;
    }

    .steps-row {
        gap:24px 10px;
    }

    .step-icon {
        width:78px;
        height:78px;
    }

    .step-icon img {
        width:50px;
        height:50px;
    }

    .step p {
        font-size:15px;
    }
}