/* =====================================================
   ANTI-FOUC (mobil): meniul NU apare o fracțiune la load
   ===================================================== */

/* implicit: ascuns până când CSS/JS decide altceva */
#menu-content{
  display: none;
}

/* desktop: meniu vizibil */
@media (min-width: 1361px){
  #menu-content{
    display: block;
  }
}

/* mobil: se vede doar când e activ (hamburger deschis) */
@media (max-width: 1360px){
  #menu-content.ptg-active{
    display: block;
  }
}



html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

body{
	font-family: 'Ubuntu', sans-serif;
	font-weight: lighter;
	color: #000;
}
.container-fluid{
    margin:0px;
    padding:0;
}


/* =========================================
   /* =========================================
   PENTAGON – SPACING SYSTEM (FINAL)
   - gap între secțiuni: compact, fără dublare mare
   - excepții: prima secțiune + SEAP
   ========================================= */
:root{
  --ptg-sec-gap: 22px;     /* desktop */
  --ptg-sec-gap-md: 18px;  /* tablet */
  --ptg-sec-gap-sm: 14px;  /* mobil */
}

/* gap între secțiuni: doar BOTTOM */
.ptg-section{
  padding-top: 0;
  padding-bottom: var(--ptg-sec-gap);
}

@media (max-width: 992px){
  .ptg-section{ padding-bottom: var(--ptg-sec-gap-md); }
}

@media (max-width: 768px){
  .ptg-section{ padding-bottom: var(--ptg-sec-gap-sm); }
}

/* Excepții intenționate */
#despre-noi.ptg-section{ padding-top: 20px; }
#seap.ptg-section{ padding-top: 20px; }

.ptg-section:last-of-type{
  padding-bottom: 0;
}

INTERNAL PAGES TEMPLATE (FINAL)
   ========================================= */

.ptg-page{
  padding-top: 10px;
}

.ptg-page-header{
  text-align: center;
  padding: 20px 0 10px;
}

.ptg-page-header h1{
  font-size: 34px;
  color: #0c6296;
  margin: 0 0 8px;
}

.ptg-page-header p{
  max-width: 900px;
  margin: 0 auto;
  opacity: .85;
}

/* =====================================================
   PTG NAV – CLEAN (UN SINGUR ADEVĂR)
   - Desktop: dropdown stabil sub item (fără “ridicare” la hover)
   - Mobil: hamburger + panou sub header, submeniuri doar cu .open (JS)
   - Necesită JS: setHeaderVar() setează --ptg-header-h
===================================================== */



/* Header fix */
.navptg-wrap{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  height: var(--ptg-header-h);
  background-color:#3683C0;
  box-shadow: -3px 0px 4px -2px rgba(0,0,0,.75);
  transition: .2s background-color, .2s color;
}

/* spațiu pentru header (dacă ai deja în altă parte, păstrează o singură regulă!) */
body{ padding-top: var(--ptg-header-h); }

/* zona logo */
.navptg-logo{
  display:inline-block;
  font-size:25px;
  font-weight: normal;
  padding:10px;
}
.navptg-logo a{ color:#fff; text-decoration:none; }
.navptg-logo a:hover{ text-decoration:none; }

/* buton hamburger */
.navptg-button{ float:left; }
.navptg-button span{
  font-size: 30px;
  margin: 15px;
  color:#fff;
  line-height:1;
  display:block;
}
.navptg-button:hover{ cursor:pointer; }
.navptg-button:hover > span{ color:#E84F4F; }

/* meniu principal */
.navptg-nav{ display:inline-block; float:right; }
.navptg, .navptg li{ margin:0; padding:10px 0; }
.navptg li{ list-style:none; float:left; position:relative; }
.navptg a{
  display:block;
  color:#fff;
  font-size:18px;
  font-weight: normal;
  padding: 0 10px;
  text-decoration:none;
  outline:0;
}

/* hover desktop */
.navptg > li:hover{
  background-color: rgba(0,0,0,.25);
}
.navptg > li:hover > a{ color:#fff; }

/* dropdown desktop */
.navptg > li > ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width: 300px;
  margin:0;
  padding:10px 0;
  background:#255a84;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  z-index:10001;
}
.navptg > li:hover > ul{ display:block; }
.navptg > li > ul > li{
  float:none;
  margin:0;
  padding: 0;
}
.navptg > li > ul > li > a{
  font-size:14px;
  padding:8px 14px;
}
.navptg > li > ul > li:hover{ background-color: rgba(0,0,0,.25); }

/* ultimul/penultimul dropdown: ancorat la dreapta */
.navptg > li:nth-last-child(1) > ul,
.navptg > li:nth-last-child(2) > ul{
  left:auto; right:0;
}

/* Scrolled – dacă tu pui clasa .scrolled pe .navptg-wrap (din JS) */
.scrolled{ background-color:#fff; }
.scrolled a{ color:#222; }
.scrolled .navptg-logo a{ color:#3683C0; }
.scrolled .navptg > li:hover{ background-color:#3683C0; }
.scrolled .navptg > li:hover > a{ color:#fff; }
.scrolled .navptg > li > ul{ background:#EEE; }
.scrolled .navptg > li > ul > li:hover{ background:#EEE; }
.scrolled .navptg > li > ul > li:hover > a{ color:#3683C0; }

/* Ancore: să nu intre sub header */
section[id]{ scroll-margin-top: calc(var(--ptg-header-h) + 14px); }

/* Dropdown: rotunjit doar jos, lipit sus de buton */
@media (min-width: 1009px){
  #menu-content li > ul{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
}


/* =====================================================
   MOBIL / TABLET (<=1360) – panou meniu sub header
===================================================== */
@media (max-width: 1360px){
  /* în mod mobil, JS pune .ptg-smallnav pe #menu-content */
  #menu-content.ptg-smallnav{
    position: fixed;
    top: var(--ptg-header-h);
    left: 0; right: 0;
    background:#3683C0;
    z-index: 9999;
    max-height: calc(100vh - var(--ptg-header-h));
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    display:none; /* JS îl arată cu slideToggle */
  }

  #menu-content.ptg-smallnav > ul{ margin:0; padding:0; }
  #menu-content.ptg-smallnav li{
    display:block;
    float:none;
    border-bottom: 1px solid rgba(255,255,255,.25);
  }
  #menu-content.ptg-smallnav a{
    padding:14px 18px;
    font-size:18px;
  }

  /* submeniuri în flux, închise implicit */
  #menu-content.ptg-smallnav li > ul{
    display:none;
    position:static;
    margin:0;
    padding:0;
    width:100%;
    background: rgba(0,0,0,.10);
    border-radius: 0;
    box-shadow:none;
  }
  #menu-content.ptg-smallnav li.open > ul{ display:block; }
  #menu-content.ptg-smallnav li > ul li a{ padding-left:34px; font-size:16px; }
}

/* MOBIL mic (<=900) – doar corecții fine */
@media (max-width: 900px){
  /* dacă vrei: ascunde “®” după PTG (după cum ai decis) */
  .navptg-logo .ptg-reg--ptg{ display:none !important; }
}

.site-footer{    
    clear: both;
    font-size: 20px;
    text-align: center;
}
.ptg-hero{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/hero.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-electrozi{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/electrozi.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-worldwel{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/worldwel.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-kiswel{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/portfolio/Kiswel.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-ductil{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/Saf-Fro.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}

.ptg-pneumatice{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/scule-pneumatice.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-wiha{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/wiha-expo.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-pentagonromania{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/pentagonromania.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;	
}

.ptg-gratare{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/pentagonromania.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;	
}
.ptg-proma{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/proma1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;
}
.ptg-fein{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/fein.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-skil{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/skil.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-makita{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/makita.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-bosch{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/bosch.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-insertii-filet{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/insertii-filet.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-mandrine{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/mandrine.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-dispozitive-ridicare{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/dispozitive_ridicat.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-utilaje{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/utilaje.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}

.ptg-scule-electrice{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/Hikoki.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-karcher{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/karcher.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-ius{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/mob-ius.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-bucovice{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/bucovice.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-burghie-elicoidale{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/burghie-elicoidale.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}

.ptg-zps{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/zps-fn.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-yildiz{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/yildiz.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-pilana{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/pilana.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-nikon{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/telemetre-nikon.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}

.ptg-mobilier{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/dulapuri-industriale.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-loctite{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/loctite.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-amc{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/expo-amc.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-lanterne{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/nextorch.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-richter{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/richter.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-geofennel{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/geo-fennel.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-stabila{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/stabila.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}
.ptg-surub{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/organe-asamblare.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}

.ptg-tyrolit{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/tyrolit.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}

.ptg-lukas{
    display: block;
    position: relative;
    top: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-image: url(../img/lukas.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;

}

.ptg-hero:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-kiswel:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-worldwel:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}

.ptg-pneumatice:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-wiha:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.7;
}


.ptg-pentagonromania:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0;
}

.ptg-gratare:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0;
}
.ptg-proma:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-fein:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-skil:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-makita:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-bosch:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-insertii-filet:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-mandrine:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-dispozitive-ridicare:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-utilaje:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-scule-electrice:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-karcher:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-ius:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-bucovice:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-burghie-elicoidale:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-zps:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-yildiz:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-pilana:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-nikon:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}

.ptg-loctite:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-amc:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-lanterne:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}

.ptg-richter:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-geofennel:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-stabila:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-surub:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptg-lukas:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}

.ptg-tyrolit:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    background-color: #222;
    opacity:0.3;
}
.ptghero-title{
    z-index: 2;
    position: relative;
      padding-top: 0;
  padding-bottom: 0;
    color:white;
	
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}
.ptghero-details{
	z-index: 2;
	top: 39%;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	
	padding: 20px;
	color: white;
	font-size: 16px;
	text-align: center;
}


.ptghero-contact{
    z-index: 2;
    top:39%;
    position: relative;
    margin-right: auto;
    margin-left:auto;
    width:60%;
    padding:20px;
    color:white;
    font-size: 30px;
    text-align: center;
}
.ptghero-buttons{
    z-index:3;
    position: relative;
    top:40%;
    margin-left:auto;
    margin-right:auto;
    width:300px
}
.ptghero-btn{
    cursor:pointer;
    border:none;
    padding:10px;
    font-size: 20px;
    font-weight: lighter;
    border-radius:5px;
    color:white;
    background-color:#3683C0;

    transition: 0.6s all;
}
.ptghero-buttons-left{
    float:left;
}
.ptghero-buttons-right{
    float:right;
}
.ptghero-buttons > a:link{
    color:#fff;
    text-decoration: none;
    outline:none;
    border: 2px solid #3683C0;  
}
.ptghero-buttons > a:hover{
    color: #FFF;
    text-decoration: none;
    outline: medium none;
    background-color: transparent;
    border: 2px solid #fff;  
}
.ptghero-buttons > a:active{
    color:#fff;
    text-decoration: none;
    outline:none;
    border: 2px solid #3683C0;  
}
.ptghero-buttons > a:visited{
    color:#fff;
    text-decoration: none;
    outline:none;
    border: 2px solid #3683C0;  
}

.ptg-evenimente{
        display:block;
    position: relative;
    width:100%;
    min-height: 100%;
    background-color:#fff;
    color:#3683C0;
}

.ptg-evenimente h1{    
    text-align: center;
}
.ptg-evenimente p{
	
    font-size: 19px;
    padding: 10px 10px;
    color: #333;
   
}
.ptg-evenimente hr{
    border-color: #3683C0;
    width: 20%;   
}


.ptg-produse h1{
    text-align: center;
    color: #3683C0;
}
.ptg-produse hr{
    border-color: #3683C0;
    width: 30%;
}
.ptgprod{
    position: relative;
    width: 100%;
}
.ptgprod-title{
    position: relative;
    font-size:20px;
    font-weight: normal;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd
}


.ptgprod-title span{
    cursor:pointer;
    margin-left: 5px;
    font-size:11px;
    color:#222;
}
.ptgprod-title span:hover{
    color:#3683C0;
}
.ptgprod-title span:hover span{
    color:#3683C0;
}
.ptgprod-detalii{
    display: block;
}
.ptgprod-text{   
    padding:10px 20px;
    font-size:19px;
}
.ptgprod-textcontainer{
    display:none;
    border-top: 1px solid rgb(54, 131, 203);
    border-bottom: 1px solid rgb(54, 131, 203);
}
.ptgprod-highlights{
    font-size: 19px;
    position: relative;
    float:right;
}
.ptgprod-highlights a{
    cursor: pointer;
    font-size: 11px;
    color: #fff;
    margin:0 2px;
    background-color: #3683C0;
    border-radius: 5px;
    border: 1px solid #3683CB;
    padding: 5px;
}
.ptgprod-highlights a:hover{
    text-decoration: none;
    background-color: #fff;
    color: #3683C0;    
    transition: 0.5s all;
}


/* SERVICII ===================================================================== */
.ptg-servicii{
  position: relative;
  width: 100%;
  background-color:#3683C0;
  color:#fff;
  overflow:hidden;
}

.ptg-servicii hr{
  border-color:#fff;
  width: 30%;
  margin: 18px auto 35px;
}

/* titlu */
.ptgservicii-ttle{
  text-align:center;
  font-size:36px;
  font-weight:600;
  line-height:1.2;
  margin: 0 0 10px 0;
}

/* grid items */
.ptgservicii-content{
  margin-top: 10px;
}

.ptgservicii-item{
  text-align:center;
  color:#fff;
  margin-bottom: 28px;
}

.ptgservicii-item-icon{
  font-size:56px;
  line-height:1;
  margin-bottom:12px;
}

.ptgservicii-item-title{
  font-size:22px;
  font-weight:600;
  margin-bottom:8px;
}

.ptgservicii-item-text{
  font-size:15px;
  line-height:1.45;
  opacity:.92;
}

/* mobil */
@media (max-width: 767px){
  .ptgservicii-ttle{ font-size:26px; }
  .ptgservicii-item-icon{ font-size:46px; }
  .ptgservicii-item-title{ font-size:18px; }
  .ptgservicii-item-text{ font-size:14px; }
}

/* PORTOFOLIU – badge jos, fara overlay pe toata imaginea */
.portofolio{
  /* padding scos – vine din .ptg-section */
}

.portofolio-box{
  /* NU mai anulam padding-ul de pe col-* (bootstrap) */
}

.portofolio-box > a{
  display:block;
  position:relative;
  overflow:hidden;
}

.portofolio-box img{
  display:block;
  width:100%;
  height:auto;
}

/* banda (badge) */
.portofolio-box .pb-content{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:auto;                 /* IMPORTANT: nu mai e la mijloc */
  display:block;            /* mereu vizibil */
  padding: 10px 14px;
  background: rgba(54,131,192,0.70);  /* albastru semitransparent */
}

/* titlu + text */
.portofolio-box .pb-title{
  margin:0;
  text-align:center;
  color:#fff;
  font-size:18px;
  font-weight:600;
  line-height:1.2;
}


/* hover: doar banda devine mai putin transparenta */
.portofolio-box > a:hover .pb-content{
  background: rgba(54,131,192,0.92);
}

/* optional: micro-efect discret (fara albastru pe poza) */
.portofolio-box > a:hover img{
  transform: scale(1.01);
  transition: transform .25s ease;
}
/* Social icons – Font Awesome */
.ptg-social-icon{
  font-size: 54px;
  line-height: 1;
  margin-bottom: 6px;
  display: block;
  color: #fff;
}

.ptgservicii-social-item a{
  color:#fff;
  text-decoration:none;
  display:inline-block;
}

.ptgservicii-social-item a:hover .ptg-social-icon{
  opacity: .85;
}

.ptgservicii-social-label{
  font-size:14px;
  opacity:.95;
}

/* mobil */
@media (max-width: 767px){
  .ptg-social-icon{
    font-size: 42px;
  }
}
.ptgservicii-social-item a:hover{
  opacity: .9;
}
.ptgservicii-social{
  text-align: center;
}
.ptgservicii-social-item{
  text-align: center;
}
.ptgservicii-social-row{
  justify-content: center;
}

/* CONTACT ===================================================================== */
.contact{
    background-color:#3683CB;
    padding: 80px 0px;
    width:100%;
    min-height:100%;
    font-size:25px;
    color:#fff;
    font-weight: normal;
}
.contact h1{
    text-align:center;
}
.contact input{
    width:100%;
    color: #222;
}
.contact textarea{
    width:100%;
    height:200px;
    color:#000000;
}
.contact .row{
    margin-top:10px;
    padding: 0px 15px;
}
.informatii, .despre-noi, .iso, .foto{
    padding: 10px 0px;
    min-height: 100%;
}
.informatii h1, .despre-noi, .foto  {
    text-align: center;
    margin-bottom:30px;
}
.info-item{
    display:block;
    position: relative;
    margin-bottom:100px;
}
.info-title{
    color: #fff;
    background-color:#3683CB;
    padding-left:15px;
    padding-right:15px;
    font-size:25px;    
}
.info-brands{
    padding:0px 15px;
    font-size:18px;
    color:#3683CB;
}

.info-mail, .info-tel, .info-name{
    font-size: 20px;
}
.info-buttons{
    padding:20px 15px;
    width: 100%;
    color:#3683CB;
}
.info-buttons button{
    padding:10px;
    border:none;
    display: inline-block;
    width:45%;
    border-radius: 5px;
    border: 2px solid rgb(255, 255, 255);
}
.info-buttons button:hover{
    transition:0.6s all;
    color:#fff;
    background-color: #3683CB;
}
.infobtn-trimite{
    float:left;
}
.infobtn-reseteaza{
    float:right;
}
.contact hr, .informatii hr, .centre hr{
    width:40%;
}
.informatii hr{
    border-color:#222;
}
.centre{
    padding: 80px 0px;
    background-color: #3683CB;
    color:#fff;
    text-align: center;
}
.centre-item{
    font-size:18px;
    font-weight: normal;
    margin:15px 0;
}
.centre-title{
    font-weight: bold;
}
.centre-dep{
    padding:0px 15px;
}
#map-canvasGl{
    height:300px;
    width: 100%;
}
#map-canvasOt, #map-canvasCt, #map-canvasTl, #map-canvasBr {
    height: 300px;
    width: 100%;
}

/* Important styles */

#toggle {
    display: block;
    width: 28px;
    height: 30px;
    margin: 30px auto 10px;
}

#toggle span:after,
#toggle span:before {
    content: "";
    position: absolute;
    left: 0;
    top: -9px;
}

#toggle span:after {
    top: 9px;
}

#toggle span {
    position: relative;
    display: block;
}

#toggle span,
#toggle span:after,
#toggle span:before {
    width: 100%;
    height: 5px;
    background-color: #888;
    transition: all 0.3s;
    backface-visibility: hidden;
    border-radius: 2px;
}
/* on activation */

#toggle.on span {
    background-color: transparent;
}

#toggle.on span:before {
    transform: rotate(45deg) translate(5px, 5px);
}

#toggle.on span:after {
    transform: rotate(-45deg) translate(7px, -8px);
}

#toggle.on + #menu {
    opacity: 1;
    visibility: visible;
}

.toggle-nav {
    display:none;
}


#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 999999; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #3683C0; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

body { color: #000; } /* deja ai asta */

.section-dark,
.ptg-hero, .ptg-electrozi, .ptg-worldwel { color: #fff; }

.section-dark p,
.ptg-hero p, .ptg-electrozi p, .ptg-worldwel p { color: #fff; }
/* ===========================
   DESPRE NOI (HOME) – WORK-2
   =========================== */
.ptg-about{
  /* padding scos – vine din .ptg-section */
  background: #fff;
  color: #111;
}

.ptg-about__header{
  text-align: center;
  margin-bottom: 10px;
}

.ptg-about__title{
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  color: #e00000; /* roșu ca înainte, dar controlat din CSS */
}

/* DESPRE NOI – latime mai mare pe desktop */
.ptg-about__content{
  max-width: 1440px;         /* incearca 1200 / 1320 / 1440 dupa gust */
  margin: 0 auto;
  padding: 0 10px;           /* respiratie pe margini */
}


.ptg-about__lead{
  font-size: 18px;
font-weight: 400; 
  line-height: 1.7;
  margin: 0 0 18px 0;
  text-align: justify;
}

.ptg-about__badge{
  text-align: center;
  margin: 18px 0 12px 0;
}

.ptg-about__locations{
  font-size: 16px;
font-weight: 400;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

.ptg-about__locations a{
  color: #3683C0;
  text-decoration: none;
}
.ptg-about__locations a:hover{
  text-decoration: underline;
}

.ptg-about__pnrr{
  margin: 18px 0 0 0;
  text-align: center;
}
.ptg-about__pnrr img{
  max-width: 100%;
  height: auto;
}

/* Mobil */
@media (max-width: 768px){
  .ptg-about{ padding: 14px 0; }
  .ptg-about__title{ font-size: 24px; }
  .ptg-about__lead{ font-size: 16px; }
}

/* ===========================
   ABOUT – ALINIERI CORECTE
   =========================== */

/* containerul general ramane neutru */
.ptg-about__content{
  text-align: left;
}

/* titlul ramane centrat */
.ptg-about__header{
  text-align: center;
}

/* paragraful principal */
.ptg-about__lead{
  text-align: left;
}

/* eticheta / logo – CENTRU */
.ptg-about__badge{
  text-align: center;
  margin: 24px 0;
}

/* blocul cu depozit / puncte / program */
.ptg-about__locations{
  text-align: left;
  margin-top: 16px;
}

/* paragrafele din locations */
.ptg-about__locations p{
  margin-bottom: 12px;
}

/* PNRR ramane centrat */
.ptg-about__pnrr{
  text-align: center;
  margin-top: 28px;
}
/* =====================================================
   OVERRIDE BETON – doar pentru sectiunea #despre-noi
   (batea orice text-align/float vechi)
===================================================== */

#despre-noi .ptg-about__content{
  text-align: left !important;
}

/* titlul ramane centrat */
#despre-noi .ptg-about__header,
#despre-noi .ptg-about__title{
  text-align: center !important;
}

/* paragraf principal + bloc locatii: stanga */
#despre-noi .ptg-about__lead,
#despre-noi .ptg-about__locations,
#despre-noi .ptg-about__locations p{
  text-align: left !important;
}

/* eticheta/logo: centru, fara float */
#despre-noi .ptg-about__badge{
  text-align: center !important;
}

#despre-noi .ptg-about__badge img{
  display: block !important;
  margin: 0 auto !important;
  float: none !important;
}

/* PNRR: centru */
#despre-noi .ptg-about__pnrr{
  text-align: center !important;
}

#despre-noi .ptg-about__pnrr img{
  display: block !important;
  margin: 0 auto !important;
  float: none !important;
}
/* ===========================
   ABOUT – JUSTIFY CONTROLAT
   =========================== */

/* paragraful principal – justificat */
#despre-noi .ptg-about__lead{
  text-align: justify !important;
  text-justify: inter-word;
}

@media (min-width: 992px){
  #despre-noi .ptg-about__lead{
    
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 900px){
  #despre-noi .ptg-about__lead{
    text-align: left !important;
  }
}
@media (max-width: 900px){

  /* blocul info devine un card curat */
  #despre-noi .ptg-about__locations > p:first-child{
    background: #f6f8fb;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 14px 14px;
    margin: 16px 0 14px 0;
  }

  /* etichetele (Depozit/Puncte/Program) mai mici si mai "label" */
  #despre-noi .ptg-about__locations > p:first-child strong{
    display: inline-block;
    font-size: 18px;
    line-height: 1.2;
  }

  /* textul din card */
  #despre-noi .ptg-about__locations > p:first-child{
    font-size: 18px;
    line-height: 1.45;
  }

  /* mail-ul sa nu rupa urat */
  #despre-noi .ptg-about__locations a{
    word-break: break-word;
  }
}
@media (max-width: 900px){
  #despre-noi .ptg-about__badge img{
    max-width: 92%;
    height: auto;
  }
}
@media (max-width: 900px){
  .ptg-hide-mobile{
    display: none;
  }
}
@media (max-width: 900px){

  /* containerul info (in loc de paragraful lung) */
  #despre-noi .ptg-info{
    background: #f6f8fb;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 14px;
    margin: 16px 0 14px 0;
  }

  #despre-noi .ptg-info .ptg-row{
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  #despre-noi .ptg-info .ptg-row:last-child{
    border-bottom: 0;
  }

  /* “titlu” */
  #despre-noi .ptg-info .ptg-k{
    font-weight: 700;
    font-size: 16px;
    color: #0c6296;
    margin-bottom: 6px;
  }

  /* “valoare” */
  #despre-noi .ptg-info .ptg-v{
    font-size: 17px;
    line-height: 1.45;
    color: #222;
  }

  /* email-uri lungi: rupere frumoasa fara sa strice layout-ul */
  #despre-noi .ptg-info a{
    overflow-wrap: anywhere;
    word-break: break-word;
    text-decoration: none;
  }
}
@media (max-width: 900px){
  #despre-noi .ptg-info .ptg-v{ font-size: 16px; }
}
@media (max-width: 900px){

  /* etichete tel/fax + email mai discrete */
  #despre-noi .ptg-info .ptg-v span,
  #despre-noi .ptg-info .ptg-v .ptg-label{
    color: #666;
    font-size: 14px;
  }

  /* valorile (telefon / email) mai vizibile */
  #despre-noi .ptg-info .ptg-v a{
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
  }

  /* rupere eleganta pentru email lung */
  #despre-noi .ptg-info .ptg-v a[href^="mailto"]{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
/* ===========================
   CARD INFO – DESKTOP
   =========================== */
@media (min-width: 901px){

  #despre-noi .ptg-info{
    max-width: 720px;
    background: #f8fafc;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 24px auto 18px auto;
  }

  #despre-noi .ptg-info .ptg-row{
    display: flex;
    gap: 24px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  #despre-noi .ptg-info .ptg-row:last-child{
    border-bottom: 0;
  }

  /* titlurile (Depozit / Puncte / Program) */
  #despre-noi .ptg-info .ptg-k{
    flex: 0 0 160px;
    font-weight: 700;
    color: #0c6296;
    text-align: right;
  }

  /* valorile */
  #despre-noi .ptg-info .ptg-v{
    flex: 1;
    color: #222;
    line-height: 1.5;
  }
}
@media (min-width: 901px){
  #despre-noi .ptg-info .ptg-k{
    text-align: left !important;
  }
}
@media (min-width: 901px){

  /* cardul per total */
  #despre-noi .ptg-info{
    padding: 16px 20px;
    margin: 18px auto 14px auto;
  }

  /* randurile din card */
  #despre-noi .ptg-info .ptg-row{
    padding: 10px 0;          /* era mai mare */
  }

  /* titlurile (Depozit / Magazine / Program) */
  #despre-noi .ptg-info .ptg-k{
    font-size: 15px;
  }

  /* valorile */
  #despre-noi .ptg-info .ptg-v{
    line-height: 1.4;
  }
}
@media (max-width: 900px){

  /* cardul */
  #despre-noi .ptg-info{
    padding: 12px 12px;
    margin: 14px 0 12px 0;
  }

  /* randuri */
  #despre-noi .ptg-info .ptg-row{
    padding: 8px 0;
  }

  /* titluri */
  #despre-noi .ptg-info .ptg-k{
    font-size: 15px;
    margin-bottom: 4px;
  }

  /* text */
  #despre-noi .ptg-info .ptg-v{
    line-height: 1.4;
    font-size: 16px;
  }
}
/* ===========================
   DESCRIERE – JUSTIFY CORECT PE TOATE
   =========================== */

/* general – ramane justify */
#despre-noi .ptg-about__lead{
  text-align: justify;
  text-justify: inter-word;
}

/* mobil – ajustari tipografice ca sa NU se strice */
@media (max-width: 900px){
  #despre-noi .ptg-about__lead{
    font-size: 16px;          /* nu mai mic */
    line-height: 1.55;        /* cheie pentru justify */
    hyphens: auto;            /* FOARTE IMPORTANT */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-break: normal;       /* NU break-all */
    overflow-wrap: normal;
  }
}
 /* =====================================================
   JUSTIFY – FORȚAT pe mobil, DOAR pentru descriere (#despre-noi)
   ===================================================== */
@media (max-width: 900px){
  #despre-noi p.ptg-about__lead{
    text-align: justify !important;
    text-justify: inter-word !important;

    /* ajută justify pe ecrane înguste */
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;

    line-height: 1.55 !important;
  }
}
#despre-noi .ptg-about__note{
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.45;
  color: #444;
}
/* Justify DOAR al doilea paragraf (nota cu mărci / info mică) */
#despre-noi .ptg-about__locations p:nth-of-type(2){
  text-align: justify !important;
  text-justify: inter-word !important;

  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
}

/* Justify DOAR paragraful cu “mărci înregistrate” */
#despre-noi .ptg-about__locations p:last-of-type{
  text-align: justify !important;
  text-justify: inter-word !important;

  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
}
/* =========================
   DESPRE-NOI – latime ca Portofoliu (Bootstrap 3 fix)
   ========================= */
@media (min-width: 1200px){
  #despre-noi{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}
/* =========================
   PRODUSE – stare "deschis"
   ========================= */

.ptgprod.is-open .ptgprod-title{
  border-bottom-color: #3683C0;
}

.ptgprod.is-open .ptgprod-title span[id]{
  color:#3683C0;
  font-weight:700;
}
.ptgprod-title span[id]{
  user-select:none;
}
.ptgprod-title span[id] em{
  font-style: normal;
}

/* ===== FIX MOBIL: titlu + "detalii" + marci (fara haos) ===== */
@media (max-width: 900px){

  /* container titlu */
  .ptgprod-title{
    position: relative;
    padding-right: 80px; /* spatiu rezervat pt "detalii" */
  }

  /* butonul "detalii" (span cu id) scos din flow, pus la dreapta sus */
  .ptgprod-title span[id]{
    position: absolute;
    right: 0;
    top: 0.2em;
    white-space: nowrap;
  }

  /* marcile: mereu sub titlu, pe randuri, fara rupere aiurea */
  .ptgprod-title .ptgprod-highlights{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  /* fiecare "chip" sa nu se rupa */
  .ptgprod-title .ptgprod-highlights a{
    white-space: nowrap;
  }
}
/* ===== /FIX MOBIL ===== */
  .ptgprod-title strong{ display:inline; }

/* ===== FIX MOBIL: titlu + detalii + marci (aliniere consistenta) ===== */
@media (max-width: 900px){

  /* titlul (randul principal) */
  .ptgprod-title{
    position: relative;
    padding-right: 80px;            /* spatiu pt "detalii" in dreapta */
  }

  /* "detalii" mereu sus-dreapta, fara sa afecteze restul */
  .ptgprod-title span[id]{
    position: absolute;
    right: 0;
    top: 0.25em;
    white-space: nowrap;
  }

  /* IMPORTANT: marcile (chips) — reset total ca sa nu mai fie aruncate la dreapta/centru */
  .ptgprod-title .ptgprod-highlights{
    float: none !important;
    clear: both !important;
    width: 100% !important;

    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;

    text-align: left !important;
    margin: 10px 0 0 0 !important;
    gap: 8px !important;
  }

  /* fiecare chip: fara auto-centrare/dreapta din stiluri vechi */
  .ptgprod-title .ptgprod-highlights a{
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: nowrap !important;
  }

  /* litera mare (strong) sa nu sara aiurea */
  .ptgprod-title strong{ display:inline !important; }
}
/* ===== /FIX MOBIL ===== */
/* ===== MOBIL: "detalii" sub titlu (NU in dreapta) ===== */
@media (max-width: 900px){

  /* anuleaza varianta cu position:absolute din fixul anterior */
  .ptgprod-title{
    padding-right: 0 !important;
  }

  .ptgprod-title span[id]{
    position: static !important;
    display: inline-block !important;
    margin: 6px 0 0 0 !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    opacity: .75 !important;
  }

  /* ca sa fie clar ca rand separat: */
  .ptgprod-title span[id] em{
    display: inline-block !important;
  }

  /* chip-urile raman sub titlu, frumos */
  .ptgprod-title .ptgprod-highlights{
    margin-top: 10px !important;
  }
}
@media (max-width: 900px){

  .ptgprod-title span[id]{
    margin-left: 0.6em !important; /* ~2–3 caractere */
  }

}
@media (max-width: 900px){

  .ptgprod-highlights a{
    padding: 3px 4px !important;   /* era probabil 8–12px */
    line-height: 1.2 !important;
    font-size: 12.5px !important;
  }

}
.ptgprod-highlights a{
  border-radius: 6px; /* dacă acum e mai mare */
}

/* =========================
   SERVICII – compact desktop + 2 coloane pe mobil
   + social 3 pe rand pe mobil
   ========================= */

/* desktop: mai compact (strange distanta intre cele 4 coloane vizual) */
.ptg-servicii .container{
  max-width: 1180px; /* incearca 1100–1240 dupa gust */
}

/* reduce spatierea verticala intre randuri */
.ptgservicii-item{
  margin-bottom: 18px;
}
.ptgservicii-item-icon{
  font-size: 46px;      /* iconuri mai mici */
  margin-bottom: 10px;
}
.ptgservicii-item-title{
  font-size: 20px;
  margin-bottom: 6px;
}
.ptgservicii-item-text{
  font-size: 14.5px;
  line-height: 1.4;
}

/* SOCIAL – container */
.ptgservicii-social{
  margin-top: 10px;
}
.ptgservicii-social-row{
  display: flex;
  justify-content: center;
  gap: 48px;             /* desktop: spatiu intre iconuri */
  flex-wrap: wrap;
}
.ptgservicii-social-item{
  text-align: center;
}

/* icon social */
.ptg-social-icon{
  font-size: 48px;
  margin-bottom: 6px;
}

/* MOBIL: 2 coloane pentru servicii + social pe un singur rand (3 iconuri) */
@media (max-width: 767px){

  /* servicii: 2 coloane */
  .ptgservicii-content{
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
  }
  .ptgservicii-content .ptgservicii-item{
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 16px;
  }

  /* mai compact */
  .ptgservicii-item-icon{ font-size: 40px; }
  .ptgservicii-item-title{ font-size: 17px; }
  .ptgservicii-item-text{ font-size: 13.5px; }

  /* social: 3 pe rand */
  .ptgservicii-social-row{
    gap: 0;
    justify-content: space-around;
  }
  .ptgservicii-social-item{
    width: 33.333%;
  }
  .ptg-social-icon{ font-size: 40px; }
}
/* =========================
   SEAP
   ========================= */

.ptg-evenimente{
    background: #fff;
}

.ptg-seap-title{
  text-align: center;
  font-size: 28px;
  margin-bottom: 10px;
}

.ptg-seap-hr{
  width: 120px;
  margin: 12px auto 30px;
}

.ptg-seap-lead{
  text-align: left;
font-weight: 400;
  max-width: 900px;
  margin: 0 auto 30px;
  font-size: 16px;
}

/* mobil – justificat arată mai bine */
@media (max-width: 768px){
  .ptg-seap-lead{
    text-align: justify;
  }
}
Rezultat

.ptg-seap-image{
  text-align: center;
  margin-bottom: 35px;
}

.ptg-seap-image img{
  max-width: 100%;
  height: auto;
}

.ptg-seap-text{
font-weight: 400;
  max-width: 980px;
  margin: 0 auto;
}

.ptg-seap-text p{
  text-align: justify;
  margin-bottom: 16px;
}

.ptg-seap-note{
  margin-top: 20px;
}

.ptg-seap-sign{
  margin-top: 25px;
  font-weight: 600;
}

/* Mobil */
@media (max-width: 768px){
  .ptg-seap-title{
    font-size: 24px;
  }

  .ptg-seap-lead,
  .ptg-seap-text{
    padding: 0 10px;
  }
}
/* SEAP: imagine responsivă + centrată corect */
#seap img.img-thumbnail{
  display: block;
  max-width: 980px;   /* păstrează dimensiunea “normală” pe desktop */
  width: 100%;        /* dar permite micșorare pe ecrane mai înguste */
  height: auto;       /* ignoră height="400" */
  margin: 18px auto;  /* centrează */
}
@media (min-width: 1400px){
  #seap img.img-thumbnail{
    max-width: 880px;   /* puțin mai mică, arată mai elegant */
  }
}
#portofoliu .ptg-sec-title{
  text-align: center;
  color: #3683C0;
}
/* ====== OFFSET ANCORE (sa nu intre sub meniu) ====== */
section[id]{
  scroll-margin-top: calc(var(--ptg-header-h, 70px) + 14px);
}

.ptg-sec-title, 
.ptgservicii-ttle,
.ptg-evenimente h2,
.portofolio h3{
  margin-top: 0;
  margin-bottom: 18px;
}
section hr{
  margin: 14px auto 22px;
}

/* =====================================================
   MENIU FINAL – CLEAN (desktop + mobil)
   Breakpoint: 1360px (ca in JS)
   Submeniu deschis: .open (ca in JS)
   ===================================================== */

:root{
  --ptg-header-h: 60px; /* fallback; JS o suprascrie */
}

/* Desktop (>=1361): dropdown normal */
@media (min-width: 1361px){
}

/* Mobil (<=1360): panou fix sub header, submeniuri in flux */
@media (max-width: 1360px){

  /* panou meniu (doar cand e deschis) */

  /* liste fara layout de desktop */

  /* item */

  /* link */

  /* submeniu: inchis implicit */

  /* submeniu: deschis doar cu .open */

  /* subitems */

  /* NU mai impinge submeniul la dreapta */

  /* opreste hover hacks vechi */
}
/* =========================
   DESKTOP dropdown – aspect curat + stabil
   ========================= */
@media (min-width: 1361px){

  /* asigură-te că dropdown-ul apare peste conținut */

  /* dropdown-ul */

  /* arată dropdown doar la hover */

  /* sub-itemuri */


  /* hover sub-item */

  /* IMPORTANT: dezactivează “salturile” vechi de hover (dacă există) */
}
/* =========================
   DESKTOP – dropdown final (override peste vechi)
   ========================= */
@media (min-width: 1361px){

  /* nu mai “urca”/impinge meniul la hover */

  /* parintele sa NU mai arate ca un tab separat */

  /* dropdown: pozitionare + aspect */


  /* arata dropdown doar la hover */

  /* linkuri din dropdown */

  /* hover pe sub-item */
}
@media (min-width: 1361px){
}
/* =====================================================
   DESKTOP NAV – dropdown final (override peste vechi)
@media (min-width: 1361px){
  /* fara “tab” pe parinte */

  /* optional: un underline discret in loc de tab */
}
/* =====================================================
   DESKTOP DROPDOWN – FIX FINAL (fara "tab" pe parinte + fara gap)
===================================================== */
@media (min-width: 1361px){

  /* 1) Omoara "tab-ul" (background-ul) de pe LI si de pe A */


  /* daca tab-ul e desenat din pseudo-element (uneori e :before/:after) */

  /* 2) Scoate orice "hack" de hover care muta LI-ul (gen margin-top:-11px) */

  /* 3) Dropdown lipit: fara margin/padding sus + top 100% */

}
/* =====================================================
   PRODUSE (MOBIL) – marci/chips: mereu sub titlu, fara haos
   ===================================================== */
@media (max-width: 900px){

  /* containerul de marci – pune aici toate variantele de clase pe care le-ai folosit */
  .ptgprod .ptgprod-marci,
  .ptgprod .ptgprod-brands,
  .ptgprod .ptgprod-tags,
  .ptgprod .ptgprod-labels{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;

    float: none !important;
    position: static !important;
    text-align: left !important;

    width: 100% !important;
    margin: 8px 0 0 0 !important;   /* sub titlu */
    padding: 0 !important;
    clear: both !important;
  }

  /* chip-ul in sine (link) */
  .ptgprod .ptgprod-marci a,
  .ptgprod .ptgprod-brands a,
  .ptgprod .ptgprod-tags a,
  .ptgprod .ptgprod-labels a{
    display: inline-block !important;
    padding: 3px 8px !important;      /* cum ai zis ca e ok */
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 900px){

  /* titlu + detalii */
  .ptgprod .ptgprod-title{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:baseline !important;
  }

  .ptgprod .ptgprod-title > span[id]{
    margin-left: 10px !important;
    float: none !important;
    white-space: nowrap !important;
  }

  /* BRANDS: mereu sub titlu, stil nou */
  .ptgprod .ptgprod-title .ptgprod-highlights{
    flex: 0 0 100% !important;
    width: 100% !important;

    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;

    margin:8px 0 0 0 !important;
    padding:0 !important;

    float:none !important;
    position:static !important;
    text-align:left !important;
    justify-content:flex-start !important;
    clear:both !important;
  }

  .ptgprod .ptgprod-title .ptgprod-highlights a{
    display:inline-block !important;
    padding:3px 8px !important;
    font-size:12.5px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
}
@media (max-width: 900px){

  /* culoare + greutate pentru zona Produse */
  .ptg-produse,
  .ptg-produse .ptgprod,
  .ptg-produse .ptgprod-title,
  .ptg-produse .ptgprod-text,
  .ptg-produse .ptgprod-textcontainer{
    color: #111 !important;
    font-weight: 400 !important;   /* nu “lighter” */
  }

  /* linkuri (brand chips) */
  .ptg-produse .ptgprod-highlights a{
    color: #fff !important;        /* dacă chips-urile sunt pe albastru */
    font-weight: 500 !important;
  }

  /* dacă ai linkuri în detalii */
  .ptg-produse .ptgprod-text a{
    color: #0c6296 !important;
    font-weight: 500 !important;
  }
}
#myBtn{
  display:block !important;
  position:fixed !important;
  right:20px !important;
  bottom:20px !important;
  z-index:999999 !important;
}
/* =========================================
   Scroll-to-top FINAL FIX
   ========================================= */
#myBtn{
  display: none;              /* controlat de JS */
  position: fixed;
  right: 20px;
  bottom: 20px;

  width: 46px;
  height: 46px;
  padding: 0;

  border: none;
  border-radius: 999px;

  background: #0c6296;
  color: #fff;
  font-size: 20px;
  line-height: 46px;
  text-align: center;

  cursor: pointer;
  z-index: 999999;
}

#myBtn:hover{
  opacity: .85;
}
/* FIX: nu mai îngroșa textul în ptg-evenimente (SEAP/SICAP) */
.ptg-evenimente p{ font-weight: 400; }

/* =========================================
   FOOTER – BRAND BLUE (PENTAGON)
   ========================================= */

.site-footer{
  background: #0c6296;   /* albastru Pentagon */
  color: #ffffff;
  padding: 18px 0;
  font-size: 14px;
}

.site-footer a{
  color: #ffffff;
  text-decoration: none;
  opacity: .9;
}

.site-footer a:hover{
  opacity: 1;
  text-decoration: underline;
}
@media (max-width: 768px){
  .site-footer{
    text-align: center;
  }
}
.site-footer{
  border-top: 1px solid rgba(255,255,255,0.15);
}
.site-footer{
  letter-spacing: 0.2px;
}
/* FOOTER – elimină orice background intern vechi */
.site-footer,
.site-footer *{
  background: transparent !important;
}

/* și apoi aplică doar footer-ul albastru */
.site-footer{
  background: #0c6296 !important;
  color: #fff;
}

.site-footer{
  background:#0c6296 !important;
  color:#fff;
}

/* FIX: oprește scroll-ul orizontal accidental */
html, body{
  overflow-x: visible;
}
/* FIX overflow orizontal cauzat de pb-text */
.pb-text{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pb-text img,
.pb-text iframe,
.pb-text table{
  max-width: 100%;
  height: auto;
}
.pb-text{
  width: 100%;
}

/* TEST: fără ellipsis, textul se rupe pe rânduri (fără overflow X) */
/* ca să fim siguri că și părinții nu depășesc */
.portofolio-box .pb,
.portofolio-box .pb a,
.portofolio-box .pb-content{
  display: block;
  max-width: 100% !important;
}


/* Meniu: fără overflow orizontal (el produce artefacte vizuale) */
#menu-content{
  overflow-x: hidden !important;
  overflow-y: visible;
}
.site-footer{
  background:#0c6296;
  color:#fff;
  padding: 14px 0;
  margin: 0;
}

@media (max-width: 768px){
  .site-footer{ text-align:center; }
}.site-footer{
  background:#0c6296;
  color:#fff;
  /* padding: 14px 0; */
  margin: 0;

}

/* FOOTER – RESET (nu mai taie textul) */
.site-footer{
  background: #0c6296 !important;
  color: #fff !important;

  position: relative !important;
  bottom: auto !important;
  left: auto !important;

  height: auto !important;
  min-height: 48px !important;
  padding: 14px 0 !important;

  overflow: visible !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Asigură layout Bootstrap corect înăuntru */
.site-footer .container,
.site-footer .row{
  width: 100%;
}

.site-footer .row{
  align-items: center;
}

/* =========================================
   PORTOFOLIU – FINAL (card + badge fix 2 rânduri, responsive)
   ========================================= */

/* oprește orice overlay vechi care mai desenează încă un badge */
.portofolio-box a::before,
.portofolio-box a::after,
.portofolio-box .pb-content::before,
.portofolio-box .pb-content::after{
  content: none !important;
  display: none !important;
}

/* card */
.portofolio-box{
  margin-bottom: 18px;
}

.portofolio-box > a{
  position: relative;
  display: block;
  overflow: hidden;      /* ca badge-ul/zoom-ul să nu iasă în afară */
  border-radius: 14px;   /* rotunjire doar pe card (nu pe badge) */
}

/* imagine */
.portofolio-box img.img-responsive{
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform .25s ease;
}

/* badge (overlay jos) – înălțime FIXĂ */
.portofolio-box .pb-content{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* dacă vrei “să plutească” puțin: pune 10px */
  padding: 10px 12px;
  background: rgba(12, 98, 150, .82);
  border-radius: 0;
  transition: background .2s ease;

  min-height: 80px;              /* ✅ desktop */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* titlu */
.portofolio-box .pb-title{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  text-align: center;

  /* opțional: 1 rând cu ... */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* text – max 2 rânduri, uniform */
/* hover: zoom imagine + badge devine mai opac */
.portofolio-box > a:hover img.img-responsive{
  transform: scale(1.03);
}
.portofolio-box > a:hover .pb-content{
  background: rgba(12, 98, 150, .95);
}

/* Tablet */
@media (max-width: 992px){
  .portofolio-box .pb-content{ min-height: 74px; padding: 9px 12px; }
  }

/* Mobil */
@media (max-width: 576px){
  .portofolio-box .pb-content{ min-height: 66px; padding: 8px 12px; }
  .portofolio-box .pb-title{ font-size: 15px; }
  }
.portofolio-box .pb-content{
  background: linear-gradient(
    to top,
    rgba(12,98,150,.92),
    rgba(12,98,150,.65)
  );
}
.portofolio-box > a:hover{
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
@media (min-width: 1009px){

  /* important: dropdown-ul să nu fie tăiat */
  #menu, 
  #menu-content,
  #menu-content > ul{
    overflow: visible !important;
  }

  /* li-ul părinte trebuie să fie referință pentru dropdown */
  #menu-content li{
    position: relative;
  }

  /* dropdown-ul: ascuns implicit pe desktop */
  #menu-content li > ul{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;

    z-index: 9999;           /* să fie peste tot */
    min-width: 240px;
  }

  /* hover: arată dropdown-ul */
  #menu-content li:hover > ul{
    display: block;
  }
}
/* =====================================================
   DESKTOP DROPDOWN FIX – Submeniuri la hover (FINAL)
   Problema: pe desktop nu mai apar dropdown-urile
   Cauză: overflow / display / z-index
   ===================================================== */

@media (min-width: 1009px){

  /* 1) Dropdown-ul NU trebuie tăiat de container */
  #menu,
  #menu-content,
  #menu-content > ul{
    overflow: visible !important;
  }

  /* 2) Elementul părinte devine referință pentru submeniu */
  #menu-content li{
    position: relative;
  }

  /* 3) Submeniul – ascuns implicit */
  #menu-content li > ul{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;

    min-width: 240px;
    z-index: 9999; /* să fie peste tot */
  }

  /* 4) Hover pe desktop – afișează dropdown */
  #menu-content li:hover > ul{
    display: block;
  }

  /* 5) Extra safety – meniul peste restul paginii */
  #menu{
    position: relative;
    z-index: 9998;
  }
}
/* =====================================================
   DESKTOP DROPDOWN FIX v2 – vizibil + nu iese din ecran
   Simptom: pe desktop nu se vede dropdown, dar apare scroll
   Cauză: dropdown offscreen / opacity/visibility / z-index
   ===================================================== */

@media (min-width: 1009px){

  /* 0) Meniul nu trebuie să taie dropdown-ul */
  #menu, #menu-content, #menu-content > ul{
    overflow: visible !important;
  }

  /* 1) Părintele e referință */
  #menu-content li{ position: relative; }

  /* 2) Dropdown – ascuns implicit (dar “curat”) */
  #menu-content li > ul{
    display: none;
    position: absolute;
    top: calc(100% - 1px);
    left: 0;

    z-index: 9999;
    min-width: 260px;

    /* forțăm să fie vizibil când e afișat */
    visibility: visible !important;
    opacity: 1 !important;

    /* ca să-l vezi sigur */
    background: #245a82;
    border-radius: 0 0 12px 12px;
  }

  /* 3) Hover – afișează dropdown */
  #menu-content li:hover > ul{
    display: block !important;
  }

  /* 4) IMPORTANT: pentru item-urile din dreapta, aliniază dropdown-ul la dreapta
        (altfel poate “fugi” în afara ecranului și nu îl vezi) */
  #menu-content > ul > li:nth-last-child(-n+3) > ul{
    left: auto !important;
    right: 0 !important;
  }

  /* 5) Safety: bara de meniu peste pagină */
  #menu{ position: relative; z-index: 9998; }
}
/* =====================================================
   DESKTOP DROPDOWN FIX v3 – dropdown "cade" sub bară
   Simptom: submeniul apare DAR în interiorul barei (scroll)
   Cauză: meniu/header are height fix + overflow (taie/captivează)
   ===================================================== */

@media (min-width: 1009px){

  /* 1) NU lăsa bara să “prindă” dropdown-ul */
  #menu,
  #menu-content{
    overflow: visible !important;
    height: auto !important;     /* foarte important dacă există height fix */
  }

  /* dacă ai un wrapper al header-ului, de obicei ăsta taie */
  header,
  .navbar,
  .navptg-nav{
    overflow: visible !important;
  }

  /* 2) părintele devine referință */
  #menu-content > ul > li{
    position: relative;
  }

  /* 3) dropdown-ul: poziționat absolut sub buton, NU în bară */
  #menu-content > ul > li > ul{
    display: none;
    position: absolute;
    top: 100%;           /* fix sub item */
    left: 0;

    z-index: 99999;
    min-width: 260px;

    /* aspect */
    background: #245a82;
    border-radius: 0 0 12px 12px;
    padding: 8px 0;
    margin: 0;

    /* crucial: să nu intre în calculele barei */
    float: none !important;
  }

  /* 4) hover */
  #menu-content > ul > li:hover > ul{
    display: block !important;
  }

  /* 5) pentru item-urile din dreapta: aliniază dropdown la dreapta */
  #menu-content > ul > li:nth-last-child(-n+3) > ul{
    left: auto !important;
    right: 0 !important;
  }
}
@media (min-width: 1009px){
  #menu{ position: relative !important; }
  #menu-content{ position: relative !important; }
}
/* =====================================================
   FIX: Dropdown-ul NU trebuie tăiat de header-ul de 60px
   header#menu are height fix → submeniul intră în scroll
   ===================================================== */

@media (min-width: 1009px){

  /* 1) Header-ul trebuie să permită overflow */
  header#menu{
    overflow: visible !important;
  }

  /* 2) Meniul interior la fel */
  #menu-content{
    overflow: visible !important;
  }

  /* 3) Dropdown-ul cade sub bară */
  #menu-content > ul > li{
    position: relative;
  }

  #menu-content > ul > li > ul{
    position: absolute;
    top: 100%;
    left: 0;

    display: none;
    z-index: 99999;

    background: #245a82;
    min-width: 260px;
    padding: 8px 0;
    border-radius: 0 0 12px 12px;
  }

  #menu-content > ul > li:hover > ul{
    display: block;
  }
}
/* =====================================================
   NAVPTG – DROPDOWN DESKTOP (HOVER) – FINAL
   HTML: <li class="has-sublist"><a>..</a><ul>..</ul></li>
   Scop: submeniul să cadă sub bară, NU în interior cu scroll
   ===================================================== */

@media (min-width: 1009px){

  /* 1) Pe desktop, meniul NU trebuie să fie "scroll container" */
  header#menu.navptg-wrap,
  #menu-content.navptg-nav{
    overflow: visible !important;
    height: auto !important;
  }

  /* păstrează doar blocarea pe X (dacă vrei), dar vertical trebuie vizibil */
  #menu-content.navptg-nav{
    overflow-x: visible !important;  /* temporar, pentru dropdown */
    overflow-y: visible !important;
  }

  /* 2) Item-ul părinte devine ancoră pentru dropdown */
  #menu-content.navptg-nav ul.navptg > li.has-sublist{
    position: relative;
  }

  /* 3) Submeniul – dropdown adevărat */
  #menu-content.navptg-nav ul.navptg > li.has-sublist > ul{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;

    min-width: 280px;
    z-index: 99999;

    margin: 0;
    padding: 10px 0;
    list-style: none;

    background: #245a82;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 26px rgba(0,0,0,.18);
  }

  /* 4) Hover – afișează dropdown */
  #menu-content.navptg-nav ul.navptg > li.has-sublist:hover > ul{
    display: block;
  }

  /* 5) Fix pentru item-uri spre dreapta (dropdown aliniat la dreapta) */
  #menu-content.navptg-nav ul.navptg > li.has-sublist > ul{
    right: auto;
  }
  #menu-content.navptg-nav ul.navptg > li.has-sublist:last-of-type > ul{
    left: auto;
    right: 0;
  }
  /* (în cazul tău, "Cataloage..." e aproape de dreapta; dacă mai ai 2-3 după el,
     putem schimba selectorul pe nth-last-child) */

  /* 6) Linkuri în dropdown */
  #menu-content.navptg-nav ul.navptg > li.has-sublist > ul > li > a{
    display: block;
    padding: 9px 14px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
  }

  #menu-content.navptg-nav ul.navptg > li.has-sublist > ul > li > a:hover{
    background: rgba(255,255,255,.10);
  }
}

/* =====================================================
   NAVPTG – STOP SCROLL INTERN PE DESKTOP
   În DevTools: #menu-content avea overflow-y:auto + height ~55px
   ===================================================== */

@media (min-width: 1009px){
  #menu-content.navptg-nav{
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
  }
}
/* =====================================================
   FIX: Spațiu alb deasupra meniului (top gap)
   Cauze tipice: body margin, padding-top global, first-section margin
   ===================================================== */

/* 1) default browser margin */
html, body{
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) header lipit sus (dacă e fixed/absolute, evită offset-uri) */
header#menu.navptg-wrap{
  top: 0;
  margin-top: 0 !important;
}

/* 3) primul element după meniu să nu împingă în jos */
header#menu.navptg-wrap + section,
header#menu.navptg-wrap + .ptg-section{
  margin-top: 0 !important;
}
/* =====================================================
   MOBILE HEADER FIX – logo + hamburger pe același rând
   + conținutul să nu intre sub meniu
   ===================================================== */

@media (max-width: 1008px){

  /* 1) Header ca bară flex: logo stânga, burger dreapta */
  header#menu.navptg-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 60px;           /* păstrează aceeași înălțime */
    padding: 0 14px;
  }

  /* 2) Logo – nu se mai întinde aiurea */
  header#menu .navptg-logo{
    display: block;
    max-width: calc(100% - 60px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  header#menu .navptg-logo a{
    display: block;
    color: #fff;
    font-size: 22px;        /* ajustează dacă vrei */
    line-height: 1;
  }

  /* 3) Buton hamburger – vizibil, pe aceeași linie */
  #menu-button.navptg-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    color: #fff;            /* să nu fie alb pe alb */
  }

  #menu-button.navptg-button .fa{
    color: inherit;
    font-size: 26px;
  }

  /* 4) Conținutul paginii: împins sub bară (ca să nu fie acoperit) */
  body{
    padding-top: 60px;
  }
}
/* =====================================================
   EXTRA-SMALL PHONES – logo încape + burger rămâne sus
   (pentru ecrane înguste gen ZTE Blade)
   ===================================================== */

@media (max-width: 360px){
  header#menu .navptg-logo a{
    font-size: 18px;
  }
  header#menu .navptg-logo{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 52px);
    display: block;
  }
}
/* =====================================================
   HEADER OFFSET SYSTEM – dinamic (fără “tăiere” pe tablet)
   Problema: header își schimbă înălțimea pe 769–1008px (wrap),
   dar body are padding-top fix → conținutul intră sub header.
   ===================================================== */

/* header fix sus (dacă deja e fixed, nu strică) */
header#menu.navptg-wrap{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;

  height: auto !important;   /* IMPORTANT: nu mai forțăm 60px */
}

/* body împins exact cât e header-ul (setat din JS) */
:root{ --ptg-header-h: 60px; }  /* fallback */
body{
  padding-top: var(--ptg-header-h);
}

/* când dai click pe ancore (#despre-noi etc) să nu se ducă sub meniu */
.ptg-section{
  scroll-margin-top: calc(var(--ptg-header-h) + 10px);
}
/* =====================================================
   HEADER OFFSET – STABIL (cu fallback)
   ===================================================== */

:root{ --ptg-header-h: 60px; }  /* NU îl scoate */

body{
  /* fallback dublu: dacă var lipsește → 60px */
  padding-top: var(--ptg-header-h, 60px);
}

/* dacă header-ul e fixed/sticky și acoperă ancorele */
.ptg-section{
  scroll-margin-top: calc(var(--ptg-header-h, 60px) + 10px);
}
/* =====================================================
   MOBILE/TABLET HEADER – hamburger ÎN STÂNGA (ca desktop)
   + layout stabil pe ecrane înguste
   ===================================================== */

@media (max-width: 1008px){

  /* bară header */
  header#menu.navptg-wrap{
    display: flex;
    align-items: center;
    justify-content: flex-start; /* <- nu space-between */
    gap: 12px;

    height: 60px;
    padding: 0 12px;
  }

  /* hamburger în stânga */
  #menu-button.navptg-button{
    order: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    color: #fff;
    flex: 0 0 auto;
  }
  #menu-button.navptg-button .fa{
    color: inherit;
    font-size: 26px;
  }

  /* logo după hamburger, pe aceeași linie */
  header#menu .navptg-logo{
    order: 1;
    display: block;

    max-width: calc(100% - 60px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  header#menu .navptg-logo a{
    color: #fff;
    font-size: 22px;
    line-height: 1;
    display: block;
  }
}

/* =====================================================
   EXTRA SMALL (ZTE etc) – logo mai mic, ca să nu cadă burgerul jos
   ===================================================== */
@media (max-width: 360px){
  header#menu .navptg-logo a{ font-size: 18px; }
}
/* =====================================================
   OFFSET sub header (dacă header-ul stă peste conținut)
   ===================================================== */
body{ padding-top: 60px; }

/* =====================================================
   NAVPTG – MOBILE/TABLET HEADER STABIL (<=1008px)
   Fix: între 769–1008px logo se rupe / dispare (clipping în 60px)
   Soluție: header flex + logo 1 rând cu ellipsis + burger stânga
   ===================================================== */

@media (max-width: 1008px){

  /* Header bar: un singur rând, aliniere corectă */
  header#menu.navptg-wrap{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;

    height: 60px;          /* menține bara “de brand” */
    padding: 0 12px;
  }

  /* Hamburger în stânga (ca desktop) */
  #menu-button.navptg-button{
    float: none !important;
    order: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    margin: 0;
  }

  /* Icon burger: mereu vizibil pe fond albastru */
  #menu-button.navptg-button span,
  #menu-button.navptg-button .fa{
    margin: 0 !important;
    color: #fff !important;
    font-size: 26px;
    line-height: 1;
  }

  /* Logo după hamburger – NU are voie să coboare pe rând 2 */
  .navptg-logo{
    order: 1;
    padding: 0 !important;
    margin: 0 !important;

    max-width: calc(100% - 60px); /* lasă loc pentru burger */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    line-height: 1;
  }

  .navptg-logo a{
    display: block;
    line-height: 1;
    color: #fff;
    text-decoration: none;
  }

  /* Superscript ® să nu “umfle” înălțimea rândului */
  .ptg-reg{
    font-size: 55%;
    line-height: 0;
    vertical-align: super;
  }
}

/* =====================================================
   TABLET (<=768px) – logo puțin mai mic
   ===================================================== */
@media (max-width: 768px){
  .navptg-logo{ font-size: 21px; }
}

/* =====================================================
   SMALL PHONES (<=420px) – logo mai mic, burger rămâne sus
   ===================================================== */
@media (max-width: 420px){
  .navptg-logo{ font-size: 19px; }
}

/* =====================================================
   EXTRA SMALL (<=360px) – pentru ZTE Blade și similare
   ===================================================== */
@media (max-width: 360px){
  .navptg-logo{ font-size: 17px; }
}
/* =====================================================
   MOBILE OFFSET – mic plus ca să nu atingă header-ul
   (unele telefoane “mănâncă” 2–10px din conținut)
   ===================================================== */

@media (max-width: 1008px){
  body{
    padding-top: 68px;   /* era 60px; 68px e safe pentru ZTE/Huawei */
  }
}
/* =====================================================
   DOAR PRIMA SECȚIUNE – dacă nu vrei să mărești tot body
   ===================================================== */

@media (max-width: 1008px){
  #despre-noi{
    padding-top: 8px;
  }
}





/* =====================================================
   PTG OVERRIDES – CLEAN FINAL (2026-02-05)
   - corectează: header height/clipping, dropdown desktop, footer brand, badge text
   ===================================================== */

/* Header fix: fără tăiere la 769–1008px */
header#menu.navptg-wrap{
  height: auto !important;
  overflow: visible !important;
}
body{
  padding-top: var(--ptg-header-h);
}
section[id], .ptg-section{
  scroll-margin-top: calc(var(--ptg-header-h) + 10px);
}

/* Hamburger în stânga + logo pe un rând (ellipsis) */
header#menu.navptg-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding: 0 12px;
}
#menu-button.navptg-button{
  float:none !important;
  order:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin:0;
}
.navptg-logo{
  order:1;
  padding:0 !important;
  margin:0 !important;
  max-width: calc(100% - 60px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 360px){
  .navptg-logo{ font-size: 20px; }
}

/* Dropdown desktop: rotunjit doar jos (fără “gaură” în colț) */
@media (min-width: 1361px){
  .navptg > li > ul{
    border-radius: 0 0 12px 12px;
  }
}

/* Footer – brand albastru uniform */
.site-footer{
  background:#3683C0;
  color:#fff;
  padding: 14px 0;
  font-size: 16px;
  text-align: center;
}
.site-footer a{ color:#fff; }
.site-footer .row{
  margin-left:0;
  margin-right:0;
}
.site-footer [class*="col-"]{
  background: transparent !important;
  color:#fff !important;
  padding-top: 4px;
  padding-bottom: 4px;
}
@media (min-width: 768px){
  .site-footer{ text-align:left; }
  .site-footer .text-md-end{ text-align:right; }
}

/* PORTOFOLIU – Badge text (Option A): 3 rânduri, înălțime fixă (desktop+mobil) */
.portofolio-box .pb-content{
  min-height: 80px;
}
.portofolio-box .pb-title{
  margin: 0;
}
.portofolio-box .pb-text{
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.2;
  text-align: center;
  color: rgba(255,255,255,.95);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 3 rânduri */
}
@media (max-width: 768px){
  .portofolio-box .pb-content{ min-height: 76px; }
  .portofolio-box .pb-text{
    font-size: 12px;
    -webkit-line-clamp: 3;
  }
}