.col-sm-12 {
/*                 margin:0;
border: 1px solid blue;
 position: relative;
 right: 0px !important;*/
/*
margin-left: -16px;
margin-top: -4px;
margin-bottom: -6px;  */

margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;

}
/**/
  .panel-layout {
margin-top: -16px;
                 background:transparent;
}


/* navbar */
.navigation{
position:fixed;
top:0;left:0;right:0;
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 22px;
z-index:50;
background:transparent; /* prozora spochatku */
transition:background-color .28s ease, box-shadow .28s ease, color .28s ease, padding .28s ease;
color:#fff!important; /* colir elementiv (logo i punkty menu) */
}

/*   .menu-item-home {color:#000!important;    }        */

.menu{display:flex;gap:20px;align-items:center}
.menu a{color:inherit;text-decoration:none;font-size:15px;padding:6px 8px;transition:color .2s ease, transform .15s}
.menu a:hover{transform:translateY(-2px)}


/* stan pislya scrolu - стан після скролу - будуть застосовані коли ми дамо клас .scrolled до html */
html.scrolled .navigation{
background-color:#fff; /* stala bila */
color:#111!important; /* elementy chorni */

box-shadow:0 6px 18px rgba(16,24,40,0.08);
padding:12px 22px;
}

 @media (max-width:720px){
      .menu{display:none;
  visibility: hidden;
      display: none;}
    }