@import url('https://fonts.googleapis.com/css2?family=Forum&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Grotesk:wght@300..700&display=swap');



/*Animations*/
.fadeinleft {
    opacity:0;
    transform: translateX(200px);
    transition: all 1.3s ease-out;
}

.fadeinright{
    opacity: 0;
    transform: translateX(-200px);
    transition: all 0.8s ease-out;
}

.fadeindown{
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1.2s ease-out;
}

.fade-in{
    opacity:0;
    transition: all 1.3s ease-in;
}

.active-left,.active,.active-right,.active-down{
    opacity:1;
    transform: translateX(0);
    transform: translateY(0);
}



.fadein{
opacity: 0;
}   
html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

/* End Animations*/
h1,h2,h3,h4,h5,h6{
    font-family: 'Poppins';
}

.navbar{
    background-color: white!important;
    box-shadow: none!important;
}

.navbar li{
    margin: 0em 0.4em;
}

.navbar li a{
    font-family: 'Poppins';
}

.navbar li a.active{
    border-bottom: 2px solid #408fda;
}

.carousel-caption{
    
    bottom: 30%;
}

.carousel-1{

    background: url('../img/optic-fibres.webp')rgba(0, 0, 0, 0.5);
    height: 75vh;
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
    background-repeat: no-repeat;
}


.carousel-2{

    background: url('../img/network-pro.webp')rgba(0, 0, 0, 0.5);
    height: 75vh;
    background-position: bottom;
    background-size: cover;
    background-blend-mode: multiply;
    background-repeat: no-repeat;
}


.contact-btn{
    background-color: #408fda;
    color: white;
    border-radius: 0px;font-family: 'Poppins';
    padding: 1em 3em;
}

.service1-carousel1{
    background: url('../img/oto.jpg')rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 50vh;
    width: 100%;
}

.service1-carousel2{
    background: url('../img/bep.jpg')rgba(0, 0, 0, 0.1);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 50vh;
}

.service2-carousel1{
    background: url('../img/commscope-fist-gco2-bd16-nn-opticka-spojka-16-port-bez-kazety-a-tesneni-i6178_orig.jpg')rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 50vh;
    width: 100%;
}

.service2-carousel2{
    background: url('../img/r_orig.jpg')rgba(0, 0, 0, 0.1);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 50vh;
}

.about-row{
    background: rgb(28,66,101);
    background: linear-gradient(90deg, rgba(28,66,101,1) 0%, rgba(79,143,167,1) 100%);
    color: white;padding: 3em 2em;
    border-radius: 20px 0px 20px 0px ;
}

.btn-1{
    background-color: white;
    border-radius: 0px;

    border: 1px solid white;
}

.btn-1:hover{
    border: 1px solid white;
}

.btn-2{
    border: 1px solid white;
    color: white;
    border-radius: 0px;
}
.btn-2:hover{
    background-color: white;
    
    color: rgb(43, 43, 43);
    border: 1px solid white;
}
.service-box{
    border: 1px solid rgb(207, 207, 207);
    padding: 0px;
    transition-duration: 0.4s;
}

.service-box:hover{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    transition-duration: 0.4s;
}

.service-desc{
    padding: 1em;
}

#banner{
    background: url('../img/blue-optic-fiber-with-ethernet-cable-scaled.webp')rgba(0, 0, 0, 0.6);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 60vh;
    margin: 6em 0em;
    display: flex;
    align-items: center;

    
}


.btn{
    font-family: 'Poppins';
}

.fact{
    background-color: #408fda;
    padding: 1em;
}


#leistung-head{
    background-color: #408fda;
    height: 20vh;
    background-position: 0% 70%;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;


}

#team-head{
    background-color: #408fda;
    height: 20vh;
    background-position: 0% 70%;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;


}

body {
    Background-image: url(https://cdnb.artstation.com/p/assets/images/images/003/704/285/large/dusica-neskovic-muzejdanfinal.jpg?1476637309);
}

h1, h2, h3, h4, h5, h6 {
}
section {
  padding: 60px 0;
}
a, a:hover, a:focus, a:active {
  text-decoration: none;
  outline: none;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-heading h2 {
display: block;
font-weight: 700;
margin-bottom: 10px;
text-transform: uppercase;
}

.site-heading h2 span {
color: #00b6f1;
}

.site-heading h4 {
display: inline-block;
padding-bottom: 20px;
position: relative;
text-transform: capitalize;
z-index: 1;
}

.site-heading h4::before {
background: #00b6f1 none repeat scroll 0 0;
bottom: 0;
content: "";
height: 2px;
left: 50%;
margin-left: -25px;
position: absolute;
width: 50px;
}

.site-heading h2 span {
color: #00b6f1;
}

.site-heading {
margin-bottom: 60px;
overflow: hidden;
margin-top: -5px;
}

.team-area .single-item {
margin-bottom: 30px;
}

.team-area .item .thumb {
position: relative;
overflow: hidden;
z-index: 1;
}

.team-area .item .thumb::after {
background: #232323 none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
width: 100%;
}

.team-area .team-items .item:hover .thumb::after {
opacity: 0.7;
}

.team-area .item .thumb .overlay {
top: -100%;
left: 0;
padding: 20px;
position: absolute;
text-align: center;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
width: 100%;
z-index: 1;
}

.team-area .item:hover .thumb .overlay {
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
}

.team-area .item .thumb .overlay p {
color: #ffffff;
}

.team-area .item .thumb .overlay h4 {
color: #ffffff;
display: inline-block;
position: relative;
text-transform: uppercase;
}

.team-area .item .thumb img {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}

.team-area .item:hover .thumb img {
opacity: .6;
}

.team-area .item .thumb .social li {
display: inline-block;
}

.team-area .item .thumb .social li a {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #ffffff;
display: inline-block;
height: 40px;
line-height: 40px;
margin: 0 2px;
text-align: center;
width: 40px;
}

.team-area .info {
background: #ffffff none repeat scroll 0 0;
-moz-box-shadow: 0 0 10px #cccccc;
-webkit-box-shadow: 0 0 10px #cccccc;
-o-box-shadow: 0 0 10px #cccccc;
box-shadow: 0 0 10px #cccccc;
padding: 40px 20px 20px;
position: relative;
text-align: center;
z-index: 9;
}

.team-area .info .message {
height: 50px;
line-height: 40px;
margin-left: -25px;
margin-top: -25px;
position: absolute;
text-align: center;
top: 0;
width: 50px;
}

.team-area .info .message a {
background: #fff none repeat scroll 0 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: 0 0 10px #cccccc;
-webkit-box-shadow: 0 0 10px #cccccc;
-o-box-shadow: 0 0 10px #cccccc;
box-shadow: 0 0 10px #cccccc;
box-sizing: border-box;
color: #00b6f1;
display: inline-block;
font-size: 20px;
height: 50px;
line-height: 50px;
width: 50px;
}

.team-area .info .message a i {
font-weight: 500;
}

.team-area .info h4 {
font-weight: 600;
margin-bottom: 5px;
text-transform: capitalize;
}

.team-area .info span {
color: #00b6f1;
font-family: "Poppins",sans-serif;
font-weight: 600;
text-transform: uppercase;
}

.team-area .social li.twitter a {
background-color: #00b6f1;
}

.team-area .social li.pinterest a {
background-color: #00b6f1;
}

.team-area .social li.facebook a {
background-color: #3b5998;
}

.team-area .social li.google-plus a {
background-color: #00b6f1;
}

.team-area .social li.vimeo a {
background-color: #1ab7ea;
}

.team-area .social li.instagram a {
background-color: #00b6f1;
}


@media only screen and (max-width: 900px) {
    .no-br {
     display: none;
    }
    .carousel-caption{
        bottom: 15%;
    }
    .title-text{
        font-size: 35px!important;
    }
    .img-move{
        margin:1em 0em!important;
        width: 100%!important;
    }
    .service-box{
        margin: 1em 0.4em;
    }
    #banner{
        height: auto;
        padding: 2em 0.4em;
    }
  }