/* *{
  border: 1px solid red;
} */

html,body{
  overflow-x: hidden;
}
section{
  max-width: 1920px;
  margin: auto;
}
a{
  text-decoration: none;
}

:root {
  --orange: #F86604;
  --white: #ffffff;
  --gray-50:#bdbdbd;
  --gray:#9299a1;
  --gray-100:#4a5562;
  --variable-width:100vw;
}



.hero-banner{
  max-height: 598px;
}

.carousel-item div {
  background-position: center center;
  background-size: cover;
}

.carousel-item{
  max-height: 598px;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.hero-banner .carousel-indicators{
position: initial;
margin: 0;
justify-content: flex-start;
}


.hero-banner .title{
  color: var(--white);
  font-family: 'Teko', sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 50px;
}


.hero-banner .hero-container .carousel-indicators div {
  height: 10px!important;
  width: 10px!important;
  border-radius: 50%;
  opacity: none;
  border: 2px var(--white) solid;
  background-color: var(--orange);
}

.hero-text button:hover {
  background-color: #555;
  color: var(--white);
}

.hero-container {
  position: relative;
  text-align: center;
  color: var(--white);
  margin-top: 96px!important;
  }

.hero_banner_section .slick-dots {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  top: 50%;
  left:5rem;
  width: fit-content;
}

.hero-banner .centered {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  text-align: start;
  width: 100vw;
}

.hero-banner .centered div {
  margin-bottom: 25px;
}

.hero-banner .subtitle{
    color: var(--white);
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 17px;
  }
.enquire-btn:hover{
	color: var(--white);
}

.enquire-btn {
  color: var(--white);
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 17px;
  max-width: 205px;
  max-height: 50px;
  padding: 17px 0px;
  background-color: var(--orange);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 15px;
  }


#tabs-nav .active:after {
  content: "";
  height: 2px;
  width: 28%;
  background-color: var(--orange);;
  position: absolute;
  transform: translate(10%, 17px);
  z-index: 0;
}

#tabs-nav li:last-child::after{
  display: none;
}

/* 
@media only screen and (max-width: 1020px) {
  #client-downloads-tab{
    display: none;
  } 
} */



.active a{
  color: var(--orange);
}
.service-tab{
  height: 40px;
  color: var(--gray-100);
  font-family: 'Teko', sans-serif;
  font-size: 28px;
  font-weight: 700;
  text-decoration: none;
}
.service-tab:hover{
  color: var(--orange);
}

.section-title.orange{
  color: var(--orange);
}


.section-text{
  color: var(--white);
}



#myModal .modal-dialog-custom{
  max-width: 75%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
  
#myModal{
      padding-right: 17px;
    height: 100vh;
    overflow: hidden;
    justify-content: center;
}



.about-us .section-text h3{
  color: var(--white);
  font-family: 'Teko', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 50px;
}

.about-us .section-text p{
  color: var(--white);
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 17px;
}
.section-title.white{
  color: var(--white);
}


.section-title{
  
  font-family: 'Teko';
  font-size: 32px;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
  text-transform: uppercase;
  /* margin-bottom: 35px; */
}






.slick-dots li button:before,
.slick-dots li.slick-active button:before{
  background-color: var(--white);
  border-radius: 50%;
  content: "";
  height: 10px;
  width: 10px;
  border: 2px solid var(--white);
}


.slick-dots li.slick-active button:before{
  background-color: var(--orange);
}
.slick-slider{
	margin-bottom:0px;
}


.software img {
  max-height: 50px;
}

#software{
	background-color:#BCBCBD;
}






.custom-container{
  margin: 0px 2rem;
}

/* tabs section */
.tabsection{
  max-width: 1920px;
  display: flex;
  background-color: var(--gray);
}
ul#tabs-nav li {
  list-style: none;
}

nav{
  background-color: #232323!important;
}

nav .nav-link{
  color:var(--white);
  font-weight: 600;
}

.nav-link:focus, .nav-link:hover{
  color: var(--orange);
}

.right-col{
  max-width: 60%;
  width: 100%;
  z-index:5;
}

.right-col{
  background-repeat: no-repeat;
  background-size: cover;
}

.column-container, .left-col{
  max-width: 40%;
  width: 100%;
  z-index:0;
}

.about-us{
  background-color: var(--gray-100);
}


.tabsection .section-title,
.about-us .section-title{
text-align: initial;
}

.column-content{
  width: 50%;
    display: flex;
    flex-direction: column;
    margin-left: 5rem;
}

.column-container{

  overflow: hidden;
}

.column-container div,
.column-container ul {
  margin-left: 21%;
}


.tabs-container{
  display: flex;
}



.tab-content{
  height: 100%;
  background-size: cover;
    background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 1020px) {
  .tab-content{
 height: 50vh; 
}
}




.tab-content-text {
  height: fit-content;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  background: rgba(200,200,200,0.9);
color: var(--orange);
  font-family: 'Lato', sans-serif;
  font-size: 20px;
}


@media only screen and (max-width: 550px) {
.tab-content {
    height: 30vh;
}
.tab-content-text {
    height: fit-content;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: rgba(200,200,200,0.7);
    color: var(--orange);
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}
}

footer, .portfolio .portfolio-container{
  min-height: 225px;
  background-size: cover!important;
  background-blend-mode: overlay;
  background-position: center!important;
}



.portfolio a:hover > .portfolio-container{
  background-blend-mode: revert;
}

.portfolio a:hover > .portfolio-container .column-content-container{
  display: block;
}
.portfolio .column-content-container{
  background: var(--orange);
  color: var(--white);
  height: 78px;
  display: none;
	text-align:center;
}

.portfolio .column-content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
}

.portfolio .show-more.loadmore{
  background: var(--orange);
}



.portfolio .show-more.loadmore div{
  color: var(--white);
  font-family: 'Teko', sans-serif;
  font-weight: 500;
  font-size: 20px;
}

/* =============================== */

.choose-lydor{
  background-color: var(--orange);
}


.choose-lydor  .section-text p{
  color: var(--white);
  font-family: 'Lato', sans-serif;
  font-size: 16px;
}

.choose-lydor  .section-text h4{
  color: var(--white);
  font-family: 'Teko', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 37px;
}

@media only screen and (max-width: 1020px) {
  .left-col{
    max-width: 100%;
    width: 100%
  }

  .right-col{
    max-width: 100%;
    width: 100%;
  }

  .about-us, .tabsection {
    flex-direction: column;
  }

  
  .about-us .column-content{
    width: 100%;
    margin: auto;
  }

  .about-us .section-title, .about-us *{
    text-align: center;
  }

  
  
}


footer{
  overflow: hidden;
	max-width: 1920px;
    margin: auto!important;

}



footer .contact-text{
  color: var(--white);
  font-family: 'Lato', sans-serif;
  font-size: 16px;
}
footer .footer-details-wrapper{
  background: var(--gray-100);
    z-index: 9999999;
    transform: translate(25%, 10%);
}



footer .contact-column {
  max-width: 60%;
  color: var(--white);
  font-family: 'Lato', sans-serif;
  font-size: 16px;



}



footer input, footer button{
  height: 50px;
  background: var(--white);
}

footer textarea::placeholder,
footer input::placeholder{
  color: var(--gray-50);
}



footer textarea,
footer input{
  color: #000000;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  margin-bottom: 10px;
  padding: 17px 20px;

}

#attach_file_btn, footer input[type=submit]{
  text-transform: uppercase;
  color: var(--white);
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  background-color: var(--orange);
  width: 50%;
}

footer input[type=submit]:hover,
footer button#attach_file_btn:hover{
  background: var(--gray-100);
  color: var(--orange);
  outline: 1px solid var(--white);

}


footer form .wpcf7-spinner{
  display: none;
}

footer textarea,
footer input,
footer #attach_file_btn
{
  width: 100%;
  outline: none;
  border: none;
}





footer textarea{
  height: 164px;
  background: var(--white);
}

footer .footer-details-container{
  max-width: 50%;
  
}

footer .footer-details-container a{
  color: var(--white);

}

@media only screen and (max-width: 991px) {
  footer .footer-details-wrapper{
      transform: none;
  }


  footer .contact-column{
    max-width: 100%;  
  }

  footer .footer-details-container{
    max-width: 100%;
  }
}

#file-attachment{
  display: none;
}


#apply_form input[type="file"] {
  display: none;
}

.progress,.progress-bar{
/* height:8px; */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.progress {
padding:2px;
overflow: hidden;
font-size: 5px;
background-color: transparent;
border:solid 1px var(--gray-100);
width:100%;
border-radius: 0;
}

.progress-bar {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
text-align: center;
background-color: var(--orange);
-webkit-transition: width 0.6s ease;
transition: width 0.6s ease;
}



.file_filename {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}



@media (min-width: 1920px){
.hero-banner .centered {
    left: 20%!important;
    width: fit-content!important;
}
}