body{
	
    color: #404040;
    
    --bk-color:#f4f4f4;
    --my-color: #3E79B4;
    --my-color-light: #6a90b5;
    --sec-color:#eaeaea;

            
    background-color: var(--bk-color);
    background-position-y:80px; 
    background-repeat: no-repeat;
    font-size: 18px;

    font-family: "Roboto Condensed", sans-serif ;
       
    font-weight: 300;    
        
}

nav {
    overflow-x: hidden;
}


#freepik{
    position:absolute;
    right:0px;
    top:250px;
    font-size: 10px;      
}



.btn{
    border-radius: 0px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}

.screen{
    width:300px;
    
}

.fs-7 { font-size: 0.875rem !important; }  /* np. 14px */
.fs-8 { font-size: 0.75rem !important; }   /* np. 12px */

.my-btn {
    border: none;
    background-color:var(--my-color);
    color:white;
}
.my-btn:hover {
    background-color:var(--my-color);
    color:white;
}

.my-menu-btn {
    border: none;    
    color:var(--my-color);
}
.my-menu-btn:hover {    
    background-color:var(--my-color);
    color:white;
}


.my-lng-btn {
    border: none;    
    color:var(--my-color);
}

.lng-active{   
    background-color:var(--my-color);
    color:white;
}

.lng-active:hover {
   background-color:var(--my-color);
    color:white;  
}


.my-color{
    color: var(--my-color);
}
.my-bg-color{
    background-color: var(--my-color);
}

.sec-color{
    background-color: var(--sec-color);
}


a{color:inherit}

.link{
    text-decoration: underline !important;
}

input{ border-radius: 0px !important; }

.btn-demo{   
   text-transform: uppercase;
}

.btn-konfig{   
   text-transform: uppercase;
}

.btn-kup{       
  text-transform: uppercase;
}


.btn.rounded-pill {
  _transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn.rounded-pill:hover {
    
  transform: scale(1.02); /* powiększa się o 5% */
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}


.topbar{
    text-transform: none;
}


.navbar{    
    text-transform: uppercase;
    background-color:var(--bk-color);
           
}


.navbar-nav .nav-link {
    position: relative;
    color: inherit;
    transition: color 0.3s ease;
}


a{

    text-decoration: none;
}


.ul-lista li{
    list-style-type: none;
    padding-bottom:10px;
    
}

.ul-program li{
    list-style-type: disc;
    padding-bottom:5px;
    
}

#title{	
	color:white;
    filter: drop-shadow(0px 0px 5px #00274f);
   
    _font-weight: 700;
   
    font-family: "Audiowide", sans-serif;
}


#title_okna2000{
	margin:0;
	padding:0px;	
	_font-weight:600;
	
	letter-spacing:2px;
    font-size:45px;
   
    _font-size: clamp(20px, 4vw, 50px);
       
}

#title_program
{	
	padding:0px;
	_font-weight:700; 	
	margin:0px;	
	text-transform: uppercase;
	_letter-spacing:0px;
   
}


.shadowed {
  filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));
  border-radius: 10px; 
}


#title_kontakt{
	
	padding-top:15px;
	font-size: 16px;
	font-weight:400; 	
}


#carousel1 .carousel-caption{
    background-color: var(--bk-color);
    padding:10px;
    border-radius: 5px;
    opacity: 0.9;

}

#carousel1 .carousel-control-prev-icon, .carousel-control-next-icon {    
    background-image:none !important;
    
}
#carousel1 .carousel-control-prev .bi,
.carousel-control-next .bi {
    color: var(--my-color);
    font-size: 3rem; 
}

#carousel1 .carousel-item {
    height: 500px; 
}

#carousel1 .carousel-item img {
    max-height: 100%;
    object-fit: contain;
}

#banner{
    height:250px;
    _background-image: url('img/baner2.png');
    _background-repeat: no-repeat;
    _background-size: cover;
    _background-size: auto;
    background-color: var(--my-color);

}

.cart-header{
   background-color: var(--my-color-light);
   color:white;
   
   _border: 1px solid var(--my-color);
   _color:var(--my-color); 
}

.cart-item{
 _border: 1px solid var(--my-color);    
 background-color: var(--sec-color);
}


.plan-card{
    border-radius: 0px;
     transition: transform 0.5s ease;
}

.plan-card:hover{
    transform: scale(1.05); 
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}


#buy-info{
    position: sticky;
    top: 100px; 
    align-self: flex-start;
  
}



.navbar .navbar-collapse.show li{
    
    padding-bottom: 3px;      
    
}