*{
    margin: 0;
    padding: 0;
    font-family: 'Roboto';
    opacity: 1;
  transition: opacity 0.5s ease-in-out;
  color: #fff;
}
html{
    overflow-x: hidden;
    overflow-y: auto;
    
}
html,body{
    height: 100%;
}
h1, h2, p{
    margin: 0;
    padding: 0;
}

header{
    
    width: 100%;
    height: 100%;
    background-color: #111;
    display: flex;
    flex-direction: row;
   
}
aside {
    
    height: 100%;
    width: 100px; 
    background-color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #fcfcfc;
    /* padding-bottom: 20px; */
    
}

/* Button */



.burger-btn {
  margin-top: 15px;
    background-color: #000000;
    width: 40px;
    height: 40px;
    margin-bottom: 25px;
   
    cursor: pointer;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
 
  .burger-line {
    width: 90%;
    height: 4px;
    background-color: #ffffff;
  
    margin: 4px 0;
    border-radius: 4px;
  }
  
  /* Stiluri pentru meniu */
  .menu {
    display: none;
    position: absolute;
    top: 60px; 
    right: 0; 
    background-color: #000000;
    min-width: 160px;

    z-index: 999;
  }
  
  .menu a {
    padding: 12px 16px;
    margin-bottom: 10px;
    display: block;
    color: #000000;
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    color: white;
  }
  
  /* end mobile burger */




.language {
    margin-bottom: 10px;
    
}
.language button{
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background-color: #111;
}

.language button a{
    text-decoration: none;
    font-size: 20px;
    font-weight: 300;
}

.pages{
    margin-top: 250px;
}
.pages ul {
  
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 10px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
    transform: rotate(-90deg);

}

.pages li {
  width: 100px;
  line-height: 80px;
 
 
}

.pages li a {
    display: block;
    padding: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 16px; 
    border-left: 3px solid transparent;
    
}

.pages li a:hover,
.pages li a.active {
    background-color: #333;
    border-bottom: 7px solid #ff6600; 
    line-height: 80px;
}

.social-links {
   margin-top: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  
}

.social-links a {
    margin: 5px 0;
    color: #fff;
    font-size: 20px;
}


.container{
 border: 1px solid black;
 width: 100%;
 height: 100%;
background-image: url(../img/new\ bg.png);
background-position: contain;
background-repeat: no-repeat;
background-size: 100% 85%;
display: flex;
flex-direction: row;
position: relative;


   
}
hr{
    border: none;
    width: 100%;
    height: 8px;
    background-color: #eb6021;
    position: absolute;
    right: 0;
    bottom: 123px;

}


.container .left-side{
width: 79%;
border-right: 1px solid #fcfcfc;
height: 100%;
padding: 50px 0 0 70px;
box-sizing: border-box; 
}
.left-side img{
    width: 200px;
    height: 50px;
}
.left-side h1{
    margin-top: 40px;
    font-weight: 300;
    letter-spacing: 3px;
    
}
.left-side h1 span{
    font-weight: 400;
}

.left-side h3{
    margin-top: 100px;
    font-size: 30px;
    
    
}
.left-side ul{
    margin-top: 20px;
    list-style-type: none;
    list-style-position: inside;
    font-size: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
   
}
.call-btn{
    display: none;
    box-sizing: border-box;
    height: 40px;
    width: 40px;
    position: absolute;
    right: 8px;
   bottom: 100px;
     background-color:black;
    border-radius: 15px;
    border: none;
    position: fixed;
}
.call-btn a{
    font-size: 30px;
}
.call-btn a i{
   color: #eb6021;
}





.left-side ul li {
    position: relative;
    color: #eb6021;
    padding-left: 30px;
    display: flex;
justify-content: left;
    align-items: center;
    text-align: center;
    
}
.left-side ul li::before {
    content: '■'; /* Schimbă acest simbol pentru bullet-ul dorit */
    position: absolute;
    left: 0;
    font-size: 0.6em; /* Ajustează dimensiunea bullet-ului */
    top: 50%;
    transform: translateY(-65%); /* Centrează vertical bullet-ul */
    color: #eb6021; /* Schimbă culoarea bullet-ului dacă e necesar */
}


.parallelogram{
    margin-top: 40px;
    width: 300px;
	transform: skew(-20deg);
	background: #555;
    text-align: center;
    align-items: center;
padding: 10px 0;
    background-color: #eb6021;
}
.parallelogram a{

    display: inline-block;
    transform: skew(20deg);
    text-decoration: none;
    font-size: 25px;
    letter-spacing: 2px;
    font-weight: bold;
   
}


.right-side{
    width: 100%;
    height: 100%;
display: flex;
flex-direction: row;
}

.center{
    width: 40%;
    height: 100%;
    border-right:1px solid #fcfcfc ;
}
.center div{
    float: right;
    width: 7px;
    height: 115px;
    background-color: #eb6021;
    margin-top: 125px;
}

.end{
    
    width: 40%;
    height: 100%;
    border-right:1px solid #fcfcfc ;
    background-color: rgba(15, 14, 14, 0.5); ;
    padding-top: 120px;
    box-sizing: border-box; 
    position: relative;
    
}
.end div{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 20px;
}
.end div p {
font-size: 22px;
text-align: center;

}
.end div a{
    text-decoration: none;
    font-size: 30px;
    font-weight: bold;
}

.end .infos{
    position: absolute;
    bottom: 5px;
    height: 100px;
    width: 100%;
    /* margin-top: 531px; */
    background-color: rgba(15, 14, 14, 0.5); ;
}
.end .infos p{
    font-size: 14px;
    text-align: left;
    margin-left: 40%;
}
.end .infos p span{
    font-size: 10px;
    margin-right: 20px;
  color: #555;
align-items: right;
    margin-top: 5px;
}


/* Media cereri */
@media only screen and (max-height:900px){
    html{
        height: 900px;
    }
}
@media only screen and ( max-width:1370px){
    .left-side ul span{
        font-size: 20px
    }

}

@media only screen and (max-width:1146px){
    .left-side ul span{
        font-size: 17px;
    }

    .hr{
        width: 50%;
    }
}
@media only screen and (max-width:1011px){
    .left-side h1{
        font-size: 28px;
    }
    .left-side h3 {
        font-size: 25px;
    }
    .left-side ul span{
        font-size: 15px;
    }
    .parallelogram{
        width: 250px;
    }
    .parallelogram a{
        font-size: 20px;
    }
    .hr{
        width: 100%;
    }
}
@media only screen and (max-width:931px){

    .end div p{
        font-size: 18px;
    }
    .end .infos p {
        font-size: 12px;
        text-align: justify;
    }
    .container .left-side{
        padding-left: 20px;
    }
   .right-side .center{
    display: none;
    border: none;
    }

    .container .end{
        width: 80%;
    }
    .end .infos p {
        font-size: 15px;
    }
    .container .left-side{
        width: 100%;
    }
    left-side ul span{
        font-size: 18px;
    }
}
@media only screen and (max-width:784px){
    .container .left-side{
        padding: 0 0 0 15px;
    
        width: 100%;
    }


}

@media only screen and (max-width:685px){
    .container{
        background-size: 100% 100% ;
    }

    .container .end{
        width: 60%;
    }
    .right-side{
        display: none;
    }

    .container .left-side{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 40px;
      
    }
    .left-side h1{
        font-size: 35px;
        font-weight: 700;
    }
    .left-side h3{
        font-size: 30px;
        margin: 0;
        
    }
    .left-side ul{
        text-align: left;
       
    }
    .left-side ul span{
        font-size: 20px;
        margin: 0;
    }
    .left-side ul li{
        margin: 0;
    }

    hr{display: none;
    }
   
    
}
@media only screen and (max-width:547px){
    .left-side h1{
        font-size: 28px;

    }
    .left-side ul span{
        font-size: 15px;
    }
    .left-side h3{
        font-size: 20px;
        
    }
    aside{
        width: 60px;
    }
}

@media only screen and (max-width:430px){
	  .call-btn{
        display: block;
    }
    .container .left-side{
        border-right: none;
    }
    header{
        position: relative;
		overflow-x: hidden;
        display: flex;
        flex-direction: column;
        border: none;
      
      }
      aside{
       border: none;
		  z-index:99999;
        width: 100%;
        height: 80px;
        border-bottom: 4px solid #ff6600;
      }
      .buttonburg{
        position: absolute;
        right: 15px;
        top: 5px;
      }
      .language{
        position: absolute;
        left: 10px;
        top: 20px;
        /* display: none; */
      }
      .pages{
        display: none;
      }
      .social-links{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 20px;
        position: absolute;
        bottom: 80px;
        z-index: 999999999;
        margin-top: 0;
      
      }
      .container{
        background-image: url(../img/mob\ bg.png);
        }
        .left-side img{
            height: 40px;
            width: 180px;
           position: absolute;
           top: -60px;
           left: 110px;
        }
        .left-side h1 {
            position: absolute;
        top: 80px;
        font-size: 35px;
        }
        .container .left-side{
            gap: 20px;
        }
        .left-side ul{
            margin-top: -47px;
            font-size: 36px;
            padding-left: 0;

        
        
        }
    
        

}

@media only screen and (max-width:324px){
    .left-side img{
       width: 160px;
       height: 40px;
       left: 78px;
    }
    .left-side h1{
        font-size: 30px;

    }
    .left-side ul span {
        font-size: 12px;
    }
    .social-links{
        margin-top: 0px;
        bottom: 100px;
    }
}
   .container-seo{
	   width: 100%;
    z-index: 99999999;
    background-color: #111;
    border-top: 1px solid white;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
   }
.seo-info{
    width: 600px;
    text-align: center;
    box-sizing: border-box;
    padding: 0 15px;
}
.seo-info h2{
    color: #ff6600;
}
.seo-info p{
    margin-top: 25px;
    line-height: 28px;
}

@media only screen and (max-width:685px){
.seo-info{
    width: 480px;
}
.seo-info h2{
    font-size: 20px;
}
}

@media only screen and (max-width:547px){
    .seo-info{
        width: 380px;
    }
}
@media only screen and (max-width:430px){
    .container-seo{
		z-index:999999999;
        border: none;
		overflow-x: hidden;
    }
    .seo-info{
        width: 350px;
    }
    .seo-info h2{
        font-size: 21px;
    }
    .seo-info p {
        font-size: 16px;
        line-height: 18px;
    }
}