:root{
    --main-color: rgba(255, 255, 255, 0.863);
    --secondary-color: #B6AD90;
    --third-color:#333D29;
    --text-color:  rgb(39, 39, 39);
    



}
.separation-ab1{
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("images/sustainability/2.jpg")
}


.separation-ab1{

    display: flex;
    flex-direction: column;
    align-items:center;
    padding-top: 57px;
    gap: 10px;
   width: 100%;
    height: 250px;
}

.separation-ab1 .sepABNaslov{

    color: var(--text-color);
    font-size: 55px;
}

.separation-ab1 p{
    color: rgb(219, 219, 219);
   margin-top: 13px;
   font-size: 20px;
   
}


.contact{
     width: 100%;
    height: 850px;
    margin-top: 5%;
    margin-bottom: 2%;
    
   }


.contact-container{
    width: 80%;
    height: 100%;
    margin:  5% 10%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
    display: grid;
    grid-template-columns: repeat(2,1fr);

}

.tm{
    margin-top: 10%;
    margin-left: 5%;
    width: 50%;
    
}


.contact-container-content .tm .telefon , .mail, .facebook{
    display: flex;
    flex-direction: row;
    align-items: center;       
    gap: 35px;  
    height: 100px;
    padding: 20px 30px;
    box-shadow: 8px 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #f3f3f3;
    border-radius: 10px;
    
}

.contact-container-content .telefon{
 margin-bottom: 30px;
}

.contact-container-content .tm .mail{
    margin-bottom: 30px;
   }
   

.contact-container-content{
    color: var(--text-color);
    
    padding: 10px 40px;
 
} 
.contact-container-content h1{    
    font-size: 45px;
    margin-top: 5%;
    margin-left: 30px;
   
}

.contact-container-content p{
    text-wrap: wrap;
    margin-top: 30px;
    font-size: 20px;
}

.contact-container-content .tm h4{
    font-size: 20px;
    font-weight: 500;
}

.contact-container-content .tm span{
    font-size: 16px;
    color: #979797;


}

.buttons{
    display: grid;
grid-template-columns: repeat(2,1fr);
gap: 10%;
margin-top: 15%;


}
.buttons a{
    display: flex;
    justify-content: center;
}



.main-button,
.main-button2{
    background-color: #BB9457;
    display: inline-block;
    color: var(--text-color);
    border: 2px solid #BB9457;
    padding: 10px 20px;
    border-radius: 7px;
    font-size: 15px;
    transition: transform 0.3s ease;  
  
}

.main-button:hover{

    background-color:#956636;
    color: white;
   transform: translateY(-6px);
}
.main-button2:hover{

    background-color:#956636;
    color: white;
   transform: translateY(-6px);
}
.mapa{
    width: 100%;
    height: 100%;
}
@media screen and (max-width:1440px) {

    
   
   
   
   .tm{
       margin-top: 10%;
       margin-left: 5%;
       width: 80%;
       
   }
   
   .contact-container-content h1{    
       font-size: 45px;
       margin-top: 5%;
       margin-left: 20px;
       text-wrap: nowrap;
      
   }
   
}

@media  screen and (max-width:1024px) {

 

    .separation-ab1 .sepABNaslov{
        color: var(--text-color);
        font-size: 50px;
    }

    .separation-ab1 p{
        color: rgb(219, 219, 219);
       font-size: 14px;  
    }

    .contact{
        width: 100%;
       height: 850px;
       margin-top: 5%;
       margin-bottom: 2%;
       
      }
    
    
    
    .tm{
       margin-top: 10%;
       margin-left: 5%;
       width: 90%;
       
    }
    .contact-container-content{
       color: var(--text-color);
       padding: 10px 40px;
       width: 100%;
    
    } 
    .contact-container-content h1{    
       font-size: 33px;
       margin-top: 5%;
       margin-left: 10px;
      
    }
    
    
    .contact-container-content .tm h4{
       font-size: 18px;
       font-weight: 500;
    }
    
    
    .buttons{
       display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10%;
    margin-top: 15%;
    
    
    }
    .buttons a{
       display: flex;
       justify-content: center;
    }
    
    
}


@media screen and (max-width:768px) {


    
    .separation-ab1 .sepABNaslov{
    
        color: var(--text-color);
        font-size: 50px;
    }
    
    .separation-ab1 p{
        color: rgb(219, 219, 219);
       font-size: 14px;
       
    }
 
    .contact{
        width: 100%;
       height: 170vh;
       margin-top: 5%;
       margin-bottom: 2%;
       
      }
      .contact-container{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 20px;
        
      }
    
    
    
    .tm{
       margin-top: 10%;
       margin-left: 5%;
       width: 90%;
       
    }
    .contact-container-content{
       color: var(--text-color);
       padding: 10px 40px;
       width: 100%;
    
    } 
    .contact-container-content h1{    
       font-size: 33px;
       margin-top: 5%;
       margin-left: 20%;
    }
    
    
   
    .mapa{
        height:550px;
    }
    
    
   
    
}
@media  screen and (max-width:480px) {

    
    
    .separation-ab1 .sepABNaslov{
    
        color: var(--text-color);
        font-size: 50px;
    }
    
    .separation-ab1 p{
        color: rgb(219, 219, 219);
       font-size: 14px;
       
    }
    
    
    
    .contact{
        width: 100%;
       height: 160vh;
       margin-top: 10%;
       margin-bottom: 20%;
       
      }
      .contact-container{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 5%;
        
      }
    
    
    
    .tm{
       margin-top: 10%;
       margin-left: 5%;
       width: 90%;
       
    }
    .contact-container-content{
       color: var(--text-color);
       padding: 10px 20px;
       width: 100%;
    
    } 
    .contact-container-content p{
        font-size: 1rem;
    }
    .contact-container-content h1{    
       font-size: 1.5rem;
       margin-top: 5%;
       margin-left: 5%;
    }
    .contact-container-content .tm span{
        font-size: 0.7rem;
        color: #979797;
    
    
    }
    
    .contact-container-content .tm h4{
        font-size:0.9rem;
        font-weight: 500;
     }
     .main-button,
     .main-button2{
    font-size: 0.7rem; 
        }
    .mapa{
        height:550px;
    }
    .contact-container-content .tm .telefon , .mail, .facebook{
        display: flex;
        flex-direction: row;
        align-items: center;       
        gap: 10%;  
        height: 100px;
        padding: 20px 30px;
        box-shadow: 8px 4px 10px rgba(0, 0, 0, 0.1);
        background-color: #f3f3f3;
        border-radius: 10px;
       
    }


    
}


@media only screen and (min-device-width: 390px) and (max-device-width: 393px) and (orientation: portrait){
    @supports (-webkit-touch-callout: none) {

        .contact{
            width: 100%;
           height: 190svh;
           margin-top: 10%;
           margin-bottom: 10%;
           
          }
          .contact-container{
            display: grid;
            grid-template-columns: repeat(1,1fr);
            gap: 2%;
            
          }
        .tm{
           margin-top: 10%;
           margin-left: 5%;
           width: 90%;
           
        }
        .contact-container-content{
           color: var(--text-color);
           padding: 10px 20px;
           width: 100%;
        
        } 
        .contact-container-content p{
            font-size: 1rem;
        }
        .contact-container-content h1{    
           font-size: 1.5rem;
           margin-top: 5%;
           margin-left: 5%;
        }
        .contact-container-content .tm span{
            font-size: 0.7rem;
            color: #979797;
        
        
        }
        
        .contact-container-content .tm h4{
            font-size:0.9rem;
            font-weight: 500;
         }
         .main-button,
         .main-button2{
        font-size: 0.7rem; 
            }
        .mapa{
            height:550px;
        }
        .contact-container-content .tm .telefon , .mail, .facebook{
            display: flex;
            flex-direction: row;
            align-items: center;       
            gap: 10%;  
            height: 100px;
            padding: 20px 30px;
            box-shadow: 8px 4px 10px rgba(0, 0, 0, 0.1);
            background-color: #f3f3f3;
            border-radius: 10px;
           
        }

}


}