/* ===================  — Home Page modern styling =================== */
/* Variables */


:root{
  --bg1:#0b1220;
  --bg2:#0e1630;
  --surface:#0f172a;
  --surface-2:#111827;
  --muted:#fff;
  --text:#e5e7eb;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);
  --accent:#22d3ee;
  --accent-2:#60a5fa;
  --good:#34d399;
  --warning:#f59e0b;
  --brand1:#ff7a18;
  --brand2:#ff3d61;
}

/* Global */
.home, .page-template-front-page{ background: radial-gradient(1200px 800px at 10% -20%, #0e213f 5%, transparent 60%), linear-gradient(180deg,var(--bg2),var(--bg1)); color:var(--text); }
.container{ max-width:1120px; margin:0 auto; padding:0 20px; }
.section{ padding:52px 0; }
.title{ font-weight:800; line-height:1.05; letter-spacing:.2px; }
.subtitle{ color:var(--muted); line-height:1.6; }
.center{ text-align:center; }
.muted{ color:var(--muted); }
.mini{ font-size:12px; }
.btn{ display:inline-grid; place-items:center; padding:12px 18px; border-radius:14px; font-weight:800; text-decoration:none; border:1px solid var(--border); color:#0b1220; background:#f8fafc; }
.btn:hover{ filter:saturate(1.05); transform:translateY(-1px); }
.btn:active{ transform:none; }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn-grad{ color:#0b1220; border-color:transparent; background:linear-gradient(90deg,var(--brand1),var(--brand2)); }
.btn.full{ display:block; width:100%; }
.badge{ display:inline-block; padding:8px 14px; border-radius:999px; background:#0c223e; color:#c7e4ff; border:1px solid rgba(255,255,255,.1); font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
a{ color:inherit; }

/* =================== Hero =================== */
.hero{ padding:56px 0 24px; }
.hero-wrap{ display:grid; gap:18px; }
.hero-title{ font-size: clamp(32px, 3.6vw + 8px, 56px); }
.hero-title .accent{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* =================== Tiles =================== */
.hero-tiles{  display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(min-width:900px){ .hero-tiles{ grid-template-columns:repeat(2,1fr);} }

.hero-tile{
  margin-top: 20px;
  --c1:#64748b; --c2:#334155;
  position:relative; isolation:isolate;
  display:flex; align-items:center; gap:12px;
  padding:50px 40px; min-height:74px;
  color:#eef2ff; text-decoration:none; font-weight:800;
  border-radius:16px; border:1px solid var(--border);
  background-image: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03)), linear-gradient(120deg,var(--c1),var(--c2));
  background-clip: padding-box, border-box; background-origin: border-box;
  box-shadow: 0 8px 20px rgba(2,6,23,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hero-tile::after{ content:""; position:absolute; inset:-30% -10% auto -10%; height:120%; border-radius:50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.356), transparent 70%);
  transform: translateX(-8%); transition: transform .4s ease, opacity .25s ease; opacity:.55; z-index:0;
}
.hero-tile:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(2,6,23,.5); border-color:var(--border-strong); }
.hero-tile:hover::after{ transform:translateX(6%); opacity:.8; }
.tile-icon{ width:64px; height:64px; display:grid; place-items:center; border-radius:12px; background:rgba(15,23,42,.35); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.tile-icon img{ width:50px; height:50px; object-fit:contain; }
.tile-emoji{ font-size:20px; }
.tile-label{ position:relative; z-index:1; font-size:24px; letter-spacing:.2px; }

.hero-tile--lego   { --c1:#ff7a18; --c2:#ff3d61; }
.hero-tile--arduino{ --c1:#6a73ff; --c2:#3aa0ff; }
.hero-tile--wedo   { --c1:#22d3ee; --c2:#34d399; }
.hero-tile--iot    { --c1:#a78bfa; --c2:#8b5cf6; }

/* =================== Sections =================== */
.section-title{ font-size:clamp(20px,1.4vw + 10px,28px); font-weight:800; margin-bottom:18px; }

.info-grid{ display:grid; gap:14px; grid-template-columns:repeat(4,1fr); }
@media(max-width:980px){ .info-grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .info-grid{ grid-template-columns:1fr;} }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 6px 18px rgba(2,6,23,.25);
}
.card .card-title{ font-weight:800; margin:0 0 8px; }
.card ul{ margin:0; padding-left:18px; color:var(--muted); }
.card .chip{ display:inline-block; padding:6px 8px; border-radius:999px; border:1px solid var(--border); color:#cbd5e1; margin-right:6px; margin-top:8px; font-size:12px; }

/* Reviews */
.reviews-grid{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
@media(max-width:980px){ .reviews-grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .reviews-grid{ grid-template-columns:1fr;} }
.quote{ background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:16px; padding:14px 16px; color:var(--muted); }
.quote .author{ display:flex; gap:8px; align-items:center; margin-top:10px; color:#cbd5e1; font-weight:700; }

/* Gallery */
.gallery-grid{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
@media(max-width:980px){ .gallery-grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .gallery-grid{ grid-template-columns:1fr;} }
.gallery-card{ border:1px solid var(--border); border-radius:16px; background: #0b1220; height:150px; display:grid; place-items:center; color:#94a3b8; }
.gallery-card img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* CTA ribbon */
.cta-ribbon{ margin:40px 0 0; padding:28px 20px; border-radius:20px;
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center;
  border:1px solid rgba(255,255,255,.1); box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.cta-ribbon .cta-title{ font-weight:900; color:#0b1220; font-size:clamp(18px,1.1vw + 10px,22px); }
.cta-ribbon .btn{ background:#0b1220; color:#fff; border-color:rgba(255,255,255,.15); }
.cta-ribbon .btn:hover{ filter:none; transform:translateY(-1px); }

/* Footer fine print */
.footer-muted{ color:#94a3b8; font-size:12px; text-align:center; padding:20px 0; border-top:1px solid var(--border); margin-top:24px; }

/* Accessibility */
.hero-tile:focus-visible, .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.75), 0 0 0 6px rgba(56,189,248,.5); }
@media (prefers-reduced-motion:reduce){
  .hero-tile, .hero-tile::after, .btn{ transition:none !important; }
}



/* =========== Tracks (напрямки) =========== */
.tracks-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(4,1fr);
}
@media(max-width:980px){ .tracks-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .tracks-grid{ grid-template-columns:1fr; } }

.track-card{
  position:relative; border-radius:18px;
  padding:16px 16px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  box-shadow:0 8px 22px rgba(2,6,23,.32);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.track-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(2,6,23,.5);
  border-color:var(--border-strong);
}

.track-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.track-ring{
  width:44px;height:44px;
  display:grid;place-items:center; flex:0 0 auto;
  background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent 65%),
              conic-gradient(from 200deg,var(--tc1),var(--tc2));
  
}
.track-ring img{ width:26px; height:26px; object-fit:contain; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.track-title{ margin:0; font-weight:800; }

.track-list{ margin:0; padding-left:18px; color:var(--muted); }
.track-list li{ margin:4px 0; }

/* індивідуальні градієнти кільця */
.track--lego    { --tc1:#ff7a18; --tc2:#ff3d61; }
.track--arduino { --tc1:#6a73ff; --tc2:#3aa0ff; }
.track--wedo    { --tc1:#22d3ee; --tc2:#34d399; }
.track--iot     { --tc1:#a78bfa; --tc2:#8b5cf6; }

/* =========== Benefits (переваги) =========== */
.benefits-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(4,1fr);
}
@media(max-width:980px){ .benefits-grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .benefits-grid{ grid-template-columns:1fr;} }

.benefit-card{
  position:relative; border-radius:18px; padding:18px;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    linear-gradient(120deg,var(--bc1),var(--bc2));
  background-origin:border-box; background-clip:padding-box, border-box;
  border:1px solid transparent;
  box-shadow:0 8px 24px rgba(2,6,23,.35);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.benefit-card:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(2,6,23,.5); filter:saturate(1.05); }

.benefit-icon{
  width:58px;height:58px;border-radius:14px;
  display:grid;place-items:center;margin-bottom:10px;
  background: rgba(15,23,42,.35);
  border:1px solid rgba(255,255,255,.16);

}
.benefit-icon img{ width:38px;height:38px; object-fit:contain; }

.benefit-title{ margin:0; font-weight:800; }
.benefit-text{ margin:6px 0 8px; color:var(--muted); }

.benefit-list{ margin:0; padding:0; list-style:none; }
.benefit-list li{
  position:relative; padding-left:20px; color:#cbd5e1; margin:6px 0;
}
.benefit-list li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, #fff0 60%),
              linear-gradient(120deg,#34d399,#22d3ee);
  box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}

/* колірні теми для карток */
.benefit--platform { --bc1:#04151f; --bc2:#041a2e; }
.benefit--mentors  { --bc1:#050729; --bc2:#05182b; }
.benefit--projects { --bc1:#06251a; --bc2:#05282e; }
.benefit--cert     { --bc1:#201603; --bc2:#1b0303; }

/* ===== Header (desktop + mobile) ===== */
:root{ --header-h:64px; }

.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(11,18,32,.75);
  backdrop-filter: blur(8px) saturate(120%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-row{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand img{ height:34px; width:auto; display:block; }

.primary-nav{ display:flex; align-items:center; gap:18px; }
.primary-nav .menu{ list-style:none; display:flex; gap:16px; margin:0; padding:0; }
.primary-nav .menu a{
  color:#e5e7eb; text-decoration:none; font-weight:700; padding:8px 10px;
  border-radius:10px; transition:background .15s ease, color .15s ease;
}
.primary-nav .menu a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-cta{ padding:10px 14px; border-radius:12px; font-weight:800; }

/* Burger */
.nav-toggle{
  display:none; position:relative; width:42px; height:42px; border:1px solid rgba(255,255,255,.12);
  border-radius:12px; background:rgba(255,255,255,.04); color:#fff;
}
.nav-toggle span{
  position:absolute; left:10px; right:10px; height:2px; background:#fff; border-radius:2px;
  transform-origin: center; transition: transform .18s ease, opacity .18s ease, top .18s ease;
}
.nav-toggle span:nth-child(1){ top:12px; }
.nav-toggle span:nth-child(2){ top:20px; }
.nav-toggle span:nth-child(3){ top:28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top:20px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* ===== Mobile layout ===== */
@media (max-width: 900px){
  .nav-toggle{ display:block; }
  .primary-nav{
    position:fixed; left:0; right:0; top:var(--header-h);
    background: rgba(11,18,32,.98);
    border-bottom:1px solid rgba(255,255,255,.08);
    transform: translateY(-10px);
    opacity:0; pointer-events:none;
    transition: transform .2s ease, opacity .2s ease;
    display:block;
  }
  .primary-nav .menu{ display:block; padding:10px 12px; }
  .primary-nav .menu li{ margin:4px 0; }
  .primary-nav .menu a{ display:block; padding:12px; border-radius:12px; }
  .primary-nav .nav-cta{ display:block; margin:8px 12px 14px; text-align:center; }

  /* відкритий стан */
  .nav-open .primary-nav{
    transform:none; opacity:1; pointer-events:auto;
  }
  /* сторінку трохи блокуємо від прокрутки */
  .nav-open body{ overflow:hidden; }
}

/* Підменю (акордеон на мобільному) */
.primary-nav .menu .sub-menu{ display:none; padding-left:12px; margin-top:6px; }
.primary-nav .menu .menu-item-has-children > .sub-toggle{
  display:none; margin-left:8px; background:transparent; border:0; color:#cbd5e1; cursor:pointer;
}
@media (max-width:900px){
  .primary-nav .menu .menu-item-has-children{ position:relative; }
  .primary-nav .menu .menu-item-has-children > .sub-toggle{ display:inline-flex; }
  .primary-nav .menu .menu-item-has-children.open > .sub-menu{ display:block; }
}

/* iOS safe area */
@supports(padding: max(0px)){
  .site-header{ padding-top: env(safe-area-inset-top); }
}

/* Бренд у хедері */
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:#ffffff;
}
.brand img{ width:36px; height:36px; object-fit:contain; display:block; }
.brand-text{
  font-weight:800; letter-spacing:.2px;
  font-size:18px; line-height:1;
  white-space:nowrap;
}

/* При бажанні — сховати назву на дуже вузьких екранах */
@media (max-width:420px){
  .brand-text{ display:none; }
}

/* Візуально прихований текст для скрінрідерів */
.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}



/* ===== Reviews (Відгуки) ===== */
.reviews .section-title{ margin-bottom:18px; }


@media (max-width:680px){
  /* Горизонтальна карусель без JS */
  .reviews-track{
    display:grid; grid-auto-flow:column; grid-auto-columns:85%;
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    gap:14px; padding-bottom:6px;
  }
  .reviews-track > .review-card{ scroll-snap-align:start; }
  /* приховати смугу прокрутки, але залишити доступною */
  .reviews-track::-webkit-scrollbar{ height:8px; }
  .reviews-track::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:999px; }
  .reviews-track{ scrollbar-color: rgba(255,255,255,.12) transparent; scrollbar-width: thin; }
}

.review-card{
  position:relative; border-radius:18px; padding:16px 16px 18px; margin-bottom: 5px ;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    linear-gradient(120deg,#12164e,#3a4147);
  background-clip:padding-box, border-box; background-origin:border-box;
  border:1px solid transparent;
  box-shadow:0 10px 28px rgba(2,6,23,.35);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  min-height:160px;
}
.review-card::before{
  content:"“"; position:absolute; right:14px; top:-6px; font-size:64px; line-height:1;
  color:rgba(255,255,255,.12); font-weight:900; pointer-events:none;
}
.review-card:hover{ transform:translateY(-2px); filter:saturate(1.04); box-shadow:0 18px 40px rgba(2,6,23,.5); }

.review-top{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.review-avatar{
  width:48px; height:48px; border-radius:50%; object-fit:cover; display:block;
  border:1px solid rgba(255,255,255,.14); background:#0b1220;
}
.review-initials{
  display:grid; place-items:center; font-weight:900; color:#0b1220;
  background:linear-gradient(120deg,#22d3ee,#34d399);
}
.review-meta{ min-width:0; }
.review-name{ font-weight:800; }
.review-role{ color:#9aa4b2; font-size:13px; margin-top:2px; }

.review-stars{ display:flex; gap:2px; margin-top:6px; }
.star{ width:16px; height:16px; fill:rgba(255,255,255,.22); }
.star--on{ fill:#fbbf24; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2)); }

.review-text{ color:#cbd5e1; margin:10px 0 0; line-height:1.55; }



/* ===== Gallery ===== */
.gallery-controls{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.g-filter{
  padding:8px 12px; border-radius:999px; border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:#e5e7eb; font-weight:800; cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.g-filter:hover{ transform:translateY(-1px); border-color:var(--border-strong); }
.g-filter.is-active{ background:linear-gradient(90deg,#22d3ee,#34d399); color:#0b1220; border-color:transparent; }

.gallery-grid{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .gallery-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .gallery-grid{ grid-template-columns:1fr;} }

.g-item{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  box-shadow:0 8px 22px rgba(2,6,23,.32);
}
.g-item img{ width:100%; height:100%; aspect-ratio: 16/10; object-fit:cover; display:block; }
.g-link::before{
  content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 80% 0%, rgba(255,255,255,.25), transparent 60%);
  opacity:.0; transition:opacity .2s ease;
}
.g-cap{
  position:absolute; left:10px; right:10px; bottom:10px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border-radius:12px;
  background: rgba(11,18,32,.6); backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.14); color:#e5e7eb; font-weight:800;
  transform: translateY(8px); opacity:0; transition:.2s ease;
}
.g-cap-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.g-cap-tag{ font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.g-item:hover .g-cap{ transform:none; opacity:1; }
.g-item:hover .g-link::before{ opacity:.8; }

/* Lightbox */
.g-lightbox[hidden]{ display:none; }
.g-lightbox{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  background:rgba(3,6,18,.85); backdrop-filter: blur(6px);
}
.g-full{ max-width:min(92vw,1200px); max-height:78vh; border-radius:14px; border:1px solid rgba(255,255,255,.18); box-shadow:0 20px 60px rgba(0,0,0,.6); }
.g-lb-cap{ color:#e5e7eb; margin-top:10px; text-align:center; font-weight:700; }

.g-close, .g-prev, .g-next{
  position:absolute; top:18px; width:42px; height:42px; display:grid; place-items:center;
  border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08); color:#fff; font-size:22px; cursor:pointer;
}
.g-close{ right:18px; }
.g-prev { left:18px; top:50%; transform:translateY(-50%); font-size:28px; }
.g-next { right:18px; top:50%; transform:translateY(-50%); font-size:28px; }

/* Горизонтальний свайп/навігація: приховуємо текст при дуже малих висотах */
@media (max-height:520px){ .g-lb-cap{ display:none; } }




/* === Promo-look для .track-card без зміни HTML ===================== */
/* === GRID для карток напрямків === */
.tracks .tracks-grid{
  display:grid;
  gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
}

/* === КАРТКА: темна, з м’яким бордером === */
.tracks .track-card{
  position:relative;
  border-radius:20px;
  background:rgba(255,255,255,.03);

  padding:28px;
  color:#e9efff;
  overflow:visible;              /* дозволяємо фото виступати за межі */
}

/* заголовок і список */
.tracks .track-title{
  font-size:clamp(20px,2.2vw,28px);
  font-weight:900;
  margin:0 0 12px;
  color:#fff;
}
.tracks .track-list{ margin:0; padding-left:1.2em; color:#cbd5e1; }
.tracks .track-list li{ margin:.42em 0; }
.tracks .track-list li::marker{ color:#22d3ee; }

/* === ФОТО: правий верхній кут, поверх картки (ПК) === */
.tracks .track-ring{
  position:absolute;
  top:-16px;                   /* трохи виступає назовні */
  right:-16px;
  left:auto;
  width:180px;                 /* базовий розмір на десктопі */
  height:180px;
  overflow:hidden;
  z-index:3;
  pointer-events:none;         /* щоб не перекривав кліки по картці */
}
.tracks .track-ring img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}

/* трошки більші фото на дуже широких екранах */
@media (min-width:1280px){
  .tracks .track-ring{ width:190px; height:170px; }
}

/* === МОБІЛЬНИЙ: фото під текстом, на всю ширину === */
@media (max-width:768px){
  .tracks .track-card{ padding:22px; }
  .tracks .track-ring{
    position:top;
    width:35%;
    height:auto;
    margin-top:14px;
    box-shadow:none;
    pointer-events:auto;
  }
  .tracks .track-ring img{
    width:100%; height:auto; object-fit:cover;
  }
}
.track-ring{
  display:inline-flex; align-items:center; justify-content:center;
  width:50px; height:50px;
  background:none; margin-right:-15px;
 
}