/*
Theme Name: Ashiz Agriculture Solutions
Theme URI: https://ashiz.lovable.app
Author: Ashiz Agriculture Solutions
Author URI: https://ashiz.lovable.app
Description: A modern, responsive 6-page agribusiness theme for Ashiz Agriculture Solutions. Includes Home, About, Services, Products (with Request Quote modal), Gallery (filterable with lightbox), and Contact pages. Deep forest green + warm amber design system, Montserrat/Inter typography.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ashiz
Tags: agriculture, business, one-page, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root{
  --primary:#1f4a2b;               /* Deep Forest Green */
  --primary-glow:#2f7a44;
  --primary-foreground:#f7f5ee;
  --accent:#d99a2b;                /* Warm Amber/Gold */
  --accent-foreground:#3a2a08;
  --background:#f7f5ee;            /* Off-white */
  --foreground:#232a25;            /* Charcoal */
  --muted:#eeeadb;
  --muted-foreground:#5b6660;
  --card:#ffffff;
  --border:#e2ddca;
  --secondary:#efe9d4;
  --secondary-foreground:#2a3d2f;
  --shadow-card:0 6px 24px -8px rgba(31,74,43,.15);
  --shadow-elegant:0 20px 50px -20px rgba(31,74,43,.35);
  --gradient-hero:linear-gradient(135deg, rgba(20,45,25,.85), rgba(15,32,20,.7));
  --radius:14px;
  --radius-sm:8px;
  --radius-lg:20px;
  /* Typography — Inter body + Montserrat display, bundled locally
     under /assets/fonts/ and registered via ashiz-fonts (see functions.php).
     System stack is retained as a fallback so the layout never breaks even
     if the woff2 files are blocked on a restricted host. */
  --font-display:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--accent)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);letter-spacing:-.02em;color:var(--primary);margin:0 0 .5em;font-weight:800;line-height:1.15}
p{margin:0 0 1em}
button{font-family:inherit;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   Layout helpers
   ============================================================ */
.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.entry-content{max-width:820px;margin:0 auto;color:var(--foreground)}
.entry-content h2{font-size:1.8rem;margin-top:1.5rem}
.entry-content h3{font-size:1.35rem;margin-top:1.25rem}
.entry-content ul,.entry-content ol{padding-left:1.25rem;margin:0 0 1em}
.entry-content a{color:var(--primary);text-decoration:underline}
@media(min-width:640px){.container{padding:0 1.5rem}}
@media(min-width:1024px){.container{padding:0 2rem}}
.section{padding:5rem 0}
@media(min-width:640px){.section{padding:6rem 0}}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);margin:0}
.section h2{font-size:clamp(1.75rem,3.5vw,2.4rem);margin-top:.5rem}
.section-lead{max-width:640px;color:var(--muted-foreground);margin-top:1rem}
.grid{display:grid;gap:1.5rem}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1024px){.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1.25rem;border-radius:10px;font-weight:600;font-size:.95rem;border:1px solid transparent;transition:all .2s ease;text-decoration:none;cursor:pointer;line-height:1.2}
.btn-lg{padding:.85rem 1.6rem;font-size:1rem}
.btn-primary{background:var(--primary);color:var(--primary-foreground)}
.btn-primary:hover{background:var(--primary-glow);color:var(--primary-foreground)}
.btn-accent{background:var(--accent);color:var(--accent-foreground)}
.btn-accent:hover{background:#c58921;color:var(--accent-foreground)}
.btn-outline{background:transparent;border-color:var(--border);color:var(--foreground)}
.btn-outline:hover{background:var(--secondary);color:var(--primary)}
.btn-outline-inverse{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(6px)}
.btn-outline-inverse:hover{background:rgba(255,255,255,.2);color:#fff}

/* ============================================================
   Header / Navbar
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,245,238,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(226,221,202,.6)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4rem}
.brand{display:flex;align-items:center;gap:.5rem;min-width:0}
.brand img{height:2.5rem;width:auto}
@media(min-width:640px){.brand img{height:2.75rem}}
.nav-links{display:none;gap:.25rem}
@media(min-width:1024px){.nav-links{display:flex;align-items:center}}
.nav-links a{padding:.5rem .85rem;border-radius:8px;font-size:.9rem;font-weight:500;color:rgba(35,42,37,.85)}
.nav-links a:hover,.nav-links a.current{background:var(--secondary);color:var(--primary)}
.nav-cta{display:none}
@media(min-width:1024px){.nav-cta{display:inline-flex}}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;background:transparent;color:var(--primary);border-radius:8px}
@media(min-width:1024px){.nav-toggle{display:none}}
.nav-toggle svg{width:1.5rem;height:1.5rem}
.mobile-menu{display:none;border-top:1px solid var(--border);background:var(--background)}
.mobile-menu.open{display:block}
.mobile-menu nav{display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.25rem}
.mobile-menu a{padding:.6rem .85rem;border-radius:8px;font-weight:500;color:rgba(35,42,37,.85)}
.mobile-menu a:hover,.mobile-menu a.current{background:var(--secondary);color:var(--primary)}
.mobile-menu .btn{margin-top:.5rem}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:88vh;display:flex;align-items:center;color:#fff}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;background:var(--gradient-hero);z-index:-1}
.hero-inner{padding:6rem 0;max-width:900px}
.hero .chip{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border:1px solid rgba(217,154,43,.4);background:rgba(255,255,255,.1);border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);backdrop-filter:blur(6px)}
.hero h1{color:#fff;font-size:clamp(2.25rem,6vw,4.5rem);line-height:1.05;margin:1.5rem 0 0;max-width:800px;font-weight:900}
.hero h1 .highlight{color:var(--accent)}
.hero p{margin-top:1.5rem;font-size:1.05rem;max-width:560px;color:rgba(255,255,255,.85)}
.hero-cta{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.75rem}

/* Page hero (sub-pages) */
.page-hero{position:relative;overflow:hidden;background:var(--primary);color:#fff;padding:5rem 0}
.page-hero::before{content:"";position:absolute;inset:0;opacity:.2;background:radial-gradient(circle at 20% 20%, var(--accent), transparent 50%),radial-gradient(circle at 80% 70%, var(--primary-glow), transparent 50%)}
.page-hero .container{position:relative}
.page-hero .eyebrow{color:var(--accent)}
.page-hero h1{color:#fff;font-size:clamp(2rem,5vw,3.5rem);margin-top:.75rem}
.page-hero p{margin-top:1rem;max-width:640px;color:rgba(255,255,255,.85);font-size:1.05rem}

/* ============================================================
   Cards / features
   ============================================================ */
.feature-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-card);transition:transform .25s ease, box-shadow .25s ease;display:flex;flex-direction:column;height:100%}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-elegant)}
.icon-badge{display:grid;place-items:center;width:3rem;height:3rem;border-radius:12px;background:var(--primary);color:var(--primary-foreground);transition:background .2s ease}
.icon-badge.accent{background:var(--accent);color:var(--accent-foreground)}
.feature-card:hover .icon-badge{background:var(--accent);color:var(--accent-foreground)}
.feature-card h3{font-size:1.15rem;margin-top:1.25rem}
.feature-card p{color:var(--muted-foreground);font-size:.92rem;margin-top:.5rem;flex:1}
.feature-link{display:inline-flex;align-items:center;gap:.3rem;font-weight:600;font-size:.9rem;color:var(--primary);margin-top:1rem}
.feature-link:hover{color:var(--accent)}

/* Intro / two-col */
.two-col{display:grid;gap:3rem;align-items:center}
@media(min-width:768px){.two-col{grid-template-columns:1fr 1fr}}
.two-col img{border-radius:var(--radius-lg);box-shadow:var(--shadow-elegant);object-fit:cover}
.floating-badge{display:inline-block;background:var(--accent);color:var(--accent-foreground);padding:1.25rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-elegant);margin-top:-2rem;margin-left:-.5rem;position:relative;z-index:2}
.floating-badge .num{font-family:var(--font-display);font-size:1.8rem;font-weight:900;line-height:1}
.floating-badge .lbl{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-top:.25rem;display:block}

/* Stats */
.stats-band{background:var(--primary);color:#fff;padding:5rem 0;position:relative;overflow:hidden}
.stats-band::before{content:"";position:absolute;inset:0;opacity:.3;background:radial-gradient(circle at 30% 30%, var(--accent), transparent 50%)}
.stats-grid{position:relative;display:grid;gap:2.5rem;grid-template-columns:repeat(4,1fr)}
@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center}
.stat-value{font-family:var(--font-display);font-size:clamp(2.25rem,5vw,3rem);font-weight:900;color:var(--accent);line-height:1}
.stat-label{margin-top:.5rem;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.8)}

/* Gallery preview / gallery grid */
.gallery-preview{display:grid;gap:1.25rem;grid-template-columns:repeat(3,1fr)}
@media(max-width:768px){.gallery-preview{grid-template-columns:1fr}}
.gallery-preview .item{position:relative;overflow:hidden;border-radius:var(--radius-lg);aspect-ratio:4/5}
.gallery-preview .item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery-preview .item:hover img{transform:scale(1.05)}
.gallery-preview .item .caption{position:absolute;inset:auto 0 0 0;padding:1.25rem;background:linear-gradient(to top, rgba(0,0,0,.8), transparent);color:#fff;font-weight:700;font-family:var(--font-display)}

/* Testimonials */
.section-alt{background:rgba(239,233,212,.55)}
.testimonial{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-card)}
.testimonial .quote-icon{width:1.75rem;height:1.75rem;color:var(--accent)}
.testimonial blockquote{margin:.75rem 0;font-size:.95rem;line-height:1.6;color:var(--foreground)}
.testimonial .stars{color:var(--accent);letter-spacing:.15em;margin-top:.75rem}
.testimonial .who{margin-top:.75rem;font-size:.9rem}
.testimonial .who .name{font-weight:700;color:var(--primary)}
.testimonial .who .role{color:var(--muted-foreground)}

/* Filters (products, gallery) */
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.filter-btn{padding:.55rem 1.1rem;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--foreground);font-weight:600;font-size:.9rem;transition:all .2s ease}
.filter-btn:hover{border-color:var(--primary)}
.filter-btn.active{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}

/* Products */
.product-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.product-grid{grid-template-columns:1fr}}
.product-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column;transition:transform .25s ease, box-shadow .25s ease}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-elegant)}
.product-thumb{aspect-ratio:1/1;display:grid;place-items:center;background:linear-gradient(135deg, var(--secondary), rgba(239,233,212,.4));color:rgba(31,74,43,.7);font-size:4rem}
.product-body{padding:1.25rem;display:flex;flex-direction:column;flex:1}
.product-cat{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.product-name{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--primary);margin:.25rem 0 .35rem}
.product-spec{color:var(--muted-foreground);font-size:.88rem;flex:1;margin:0}
.product-body .btn{margin-top:1rem;width:100%}

/* Gallery (masonry) */
.masonry{column-count:3;column-gap:1.25rem}
@media(max-width:900px){.masonry{column-count:2}}
@media(max-width:520px){.masonry{column-count:1}}
.masonry .g-item{margin:0 0 1.25rem;break-inside:avoid;border-radius:var(--radius-lg);overflow:hidden;background:var(--card);box-shadow:var(--shadow-card);cursor:pointer;border:none;padding:0;width:100%;text-align:left;display:block}
.masonry .g-item img{width:100%;height:auto;transition:transform .5s ease}
.masonry .g-item:hover img{transform:scale(1.05)}
.masonry .g-item .cap{padding:1rem}
.masonry .g-item .cap .tag{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.masonry .g-item .cap .txt{margin-top:.25rem;color:var(--primary);font-weight:500;font-size:.9rem}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:100;display:none;align-items:center;justify-content:center;padding:1rem}
.lightbox.open{display:flex}
.lightbox .close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;border:none;display:grid;place-items:center}
.lightbox .close:hover{background:rgba(255,255,255,.2)}
.lightbox figure{max-width:1000px;max-height:90vh;margin:0}
.lightbox img{max-height:80vh;width:100%;object-fit:contain;border-radius:12px}
.lightbox figcaption{margin-top:1rem;text-align:center;color:rgba(255,255,255,.8);font-size:.9rem}

/* Contact */
.contact-grid{display:grid;gap:2.5rem}
@media(min-width:1024px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-card{display:flex;gap:1rem;padding:1.25rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);margin-bottom:1rem}
.contact-card .icon-badge{flex-shrink:0}
.contact-card h3{font-size:1rem;margin:0}
.contact-card p{margin:.25rem 0 0;color:var(--muted-foreground);font-size:.9rem;white-space:pre-line}
.map-embed{overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-card);margin-top:1rem}
.map-embed iframe{width:100%;height:320px;border:0;display:block}
.form-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-elegant)}
.form-row{display:grid;gap:1rem}
@media(min-width:640px){.form-row.two{grid-template-columns:1fr 1fr}}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-group label{font-size:.85rem;font-weight:600;color:var(--foreground)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:.65rem .85rem;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:.95rem;background:#fff;color:var(--foreground);transition:border .15s ease, box-shadow .15s ease}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,74,43,.15)}
.form-group input[readonly]{background:var(--muted)}
.form-message{margin-top:1rem;padding:1rem;border-radius:10px;font-size:.9rem;display:none}
.form-message.success{display:block;background:rgba(31,74,43,.08);color:var(--primary);border:1px solid rgba(31,74,43,.2)}
.form-message.error{display:block;background:rgba(200,50,50,.08);color:#b1382c;border:1px solid rgba(200,50,50,.2)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:110;display:none;align-items:center;justify-content:center;padding:1rem}
.modal.open{display:flex}
.modal-panel{background:var(--card);width:100%;max-width:520px;border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-elegant);max-height:90vh;overflow:auto}
.modal-panel h2{font-family:var(--font-display);font-size:1.4rem;color:var(--primary);margin:0}
.modal-panel .lead{color:var(--muted-foreground);font-size:.9rem;margin:.5rem 0 1.25rem}

/* About: values / leaders */
.value-card{background:var(--card);border-radius:var(--radius-lg);padding:1.5rem;text-align:center;box-shadow:var(--shadow-card)}
.value-card .icon-badge{margin:0 auto;width:3.25rem;height:3.25rem}
.value-card h3{font-size:1.05rem;margin-top:1rem}
.value-card p{color:var(--muted-foreground);font-size:.88rem;margin-top:.4rem}
.leader-card{background:var(--card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.leader-photo{aspect-ratio:4/5;background:linear-gradient(135deg, var(--primary), var(--primary-glow));display:grid;place-items:center;color:rgba(255,255,255,.3);font-family:var(--font-display);font-size:3rem;font-weight:900}
.leader-body{padding:1.25rem}
.leader-body h3{font-size:1.05rem}
.leader-body .role{color:var(--accent);font-weight:600;font-size:.88rem;margin-top:.15rem}
.leader-body p{color:var(--muted-foreground);font-size:.88rem;margin-top:.5rem}

.why-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1.25rem}
.why-list li{display:flex;gap:1rem;padding:1.25rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.why-list li h3{font-size:1rem;margin:0}
.why-list li p{color:var(--muted-foreground);font-size:.88rem;margin:.25rem 0 0}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{margin-top:6rem;background:var(--primary);color:var(--primary-foreground)}
.footer-grid{display:grid;gap:2.5rem;padding:3.5rem 0}
@media(min-width:768px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.footer-grid{grid-template-columns:repeat(4,1fr)}}
.footer-brand-wrap{display:inline-flex;background:#fff;padding:.75rem;border-radius:12px}
.footer-brand-wrap img{height:3rem;width:auto}
.footer p.small{margin-top:1rem;font-size:.88rem;color:rgba(247,245,238,.8);line-height:1.6}
.footer-social{margin-top:1.25rem;display:flex;gap:.6rem}
.footer-social a{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:background .2s ease}
.footer-social a:hover{background:var(--accent);color:var(--accent-foreground)}
.footer h4{font-family:var(--font-display);font-size:.8rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin:0}
.footer ul{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.footer ul a,.footer ul li{color:rgba(247,245,238,.8);font-size:.9rem}
.footer ul a:hover{color:var(--accent)}
.footer-contact li{display:flex;gap:.5rem;align-items:flex-start}
.footer-contact svg{color:var(--accent);flex-shrink:0;margin-top:.15rem;width:1rem;height:1rem}
.newsletter{margin-top:1.25rem;display:flex;gap:.5rem}
.newsletter input{flex:1;padding:.55rem .75rem;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;font-family:inherit;font-size:.9rem}
.newsletter input::placeholder{color:rgba(247,245,238,.5)}
.newsletter input:focus{outline:none;border-color:var(--accent)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);text-align:center;padding:1.25rem;font-size:.78rem;color:rgba(247,245,238,.7)}

/* Toast */
.toast-region{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{background:var(--card);color:var(--foreground);border:1px solid var(--border);padding:.85rem 1.25rem;border-radius:10px;box-shadow:var(--shadow-elegant);font-size:.9rem;pointer-events:auto;animation:toast-in .25s ease}
.toast.success{border-left:4px solid var(--primary)}
.toast.error{border-left:4px solid #b1382c;color:#b1382c}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* Utility */
.text-center{text-align:center}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.flex-between{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:flex-end}
.hide-md{display:none}
@media(min-width:768px){.hide-md{display:inline-block}}