body,html{height: 100%;}



.hide-for-desktop{display: none;}

.hide-for-mobile{display: block;}



.section-gap-50{margin-top: 50px;}

.section-gap{margin-top: 70px;}

.section-gap-120{margin-top: 120px;}

.section-gap-150{margin-top: 150px;}



.navbar {transition: top 0.5s; background: url(../images/navbar-bg.png) no-repeat right 100% #fff; background-size: 78% 100%;}

.navbar .navbar-brand{display: inline-block; padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-left: 6rem;}

.navbar .navbar-brand img{width: 100%;}

.navbar .navbar-nav .nav-item .nav-link{color: #fff; font-weight: 600; font-size: 16px; margin-right: 30px; padding: 6px 25px;}

.navbar .navbar-nav .active>.nav-link{color: #000; background-color: #F2AA29; padding: 6px 25px; font-weight: 600; font-size: 16px;}

.navbar .navbar-nav .nav-item .nav-link:hover{color: #000; background-color: #F2AA29; padding: 6px 25px; font-weight: 600; font-size: 16px; transition: color .3s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out;}



.banner-custom-col1{max-width: 23.5%; flex: 0 0 23.5%; position: relative; width: 100%;}

.banner-custom-col2{max-width: 76.5%; flex: 0 0 76.5%; position: relative; width: 100%;}



#home-banner{margin-top: 4rem; height: max-content; padding-top: 130px; padding-bottom: 130px; background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 75%), url('https://triconinfra.in/images/TriconInfra/Home%20pg/home-banner-1.webp'); background-size: 100% 100%;}

.banner-head{font-weight: 700; font-size: 44px; line-height: 55px; letter-spacing: 0.01em; color: #FFFFFF;}

.banner-head-yellow{font-weight: 600; font-size: 44px; line-height: 52px; letter-spacing: 0.01em; color: #F2AA29;}

.banner-subhead{font-weight: 400; font-size: 16px; line-height: 22px; letter-spacing: 0.01em; color: #FFFFFF;}



.btn-custom{background-color: #F2AA29; color: #000; font-weight: 600; font-size: 16px; text-align: center; padding: 10px 20px; border-radius: 0;}

.btn-custom:hover{text-decoration: none; background-color: #fff; color: #000; font-weight: 600; font-size: 16px; text-align: center; border: 1px solid #F2AA29; transition: color .15s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out;}

.btn-black{background-color: #000; color: #fff; font-weight: 600; font-size: 16px; text-align: center; padding: 10px 20px; border-radius: 0;}

.btn-black:hover{text-decoration: none; background-color: #fff; color: #000; font-weight: 600; font-size: 16px; text-align: center; border: 1px solid #000; transition: color .15s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out;}



.section-head{font-weight: 700; font-size: 30px; line-height: 41px; text-align: center; letter-spacing: 0.01em; color: #000000;}

.section-text{font-weight: 400; font-size: 16px; line-height: 26px; color: #000; text-align: center; letter-spacing: 0.01em;}



.custom-col-5{-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; padding-left: 10px; padding-right: 10px;}



.custom-card{background: #FFFFFF; box-shadow: 0px 4px 35px 18px rgba(198, 198, 198, 0.22); border-radius: 5px; min-height: 375px; height: 100%; z-index: 1;}

.custom-card2{background: #FFFFFF; box-shadow: 0px 4px 35px 18px rgba(198, 198, 198, 0.22); border-radius: 5px; min-height: 430px;}

.custom-card3{background: #F4F4F4;box-shadow: 0px 4px 6px rgba(113, 113, 113, 0.2); border-radius: 5px; min-height: 375px;}

.custom-card-body{padding: 30px 30px;}

.card-yellow{background: #F2AA29; border-radius: 5px 5px 0px 0px; height: 25px; width: 100%; transition: 0.15s ease-out;}

.card-head{font-weight: 600; font-size: 20px; line-height: 26px;  letter-spacing: 0.01em;  color: #000000;}

.card-text{font-weight: 400; font-size: 14px; line-height: 22px;  letter-spacing: 0.01em;    color: #000000;}



.custom-card-icon{width: 25%;}



/* .custom-card:after {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top center; background: #F2AA29; z-index: -1; transition: transform 0.3s;} */

.custom-card:hover{transform-origin: top center; background: #F2AA29; z-index: -1; transition: background-color .3s ease-in-out;}

.custom-card2:hover{transform-origin: top center; background: #F2AA29; z-index: -1; transition: background-color .3s ease-in-out;}

.custom-card3:hover{transform-origin: top center; background: #F2AA29; z-index: -1; transition: background-color .3s ease-in-out;}

/* .custom-card:hover{background: #F2AA29; z-index: -1; transition: color .15s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out;} */



#video1{padding: 8%; padding-top: 12%; background-color: #F2AA29; z-index: -999;}

.glance-sec{background-color: #fff; padding: 25px 50px 25px 100px; position: relative; right: 3%;}

.glance-sec-img{position: absolute; left: 3%; top: -475px; width: 105%;}

.video-head{font-weight: 700; font-size: 28px; line-height: 42px; letter-spacing: 0.01em;   color: #000000;}

.video-text{font-weight: 400; font-size: 14px; line-height: 24px; color: #000000;}

.video-yellow-head{font-weight: 700; font-size: 24px; line-height: 39px;  letter-spacing: 0.01em;  color: #F2AA29;}



#safty .col-md-7{padding-left: 0px; padding-right: 0px; padding-top: 0px;}

.safty-bg{background: linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0.2) 0%), url('../images/TriconInfra/Home%20pg/safty-bg.webp') no-repeat; background-size: 100% 100%; padding: 155px 70px;}

.safty-card{background: rgba(255, 255, 255, 0.85); padding: 70px 15px 60px 70px;}

.safty-head{font-weight: 600; font-size: 18px; line-height: 26px; color: #000000;}

.safty-text{font-weight: 400; font-size: 15px; line-height: 26px; color: #000000;}



#project-slider{background: url('../images/home/project-slider-bg.png') no-repeat center center; background-size: cover; padding: 2%;}

.slider-head{font-weight: 700; font-size: 30px; line-height: 50px;  letter-spacing: 0.01em;  color: #000000;}



.owl-theme .owl-dots .owl-dot span{display: none;}



/* project slider css */

.slider-yellow-card{background: #F2AA29; box-shadow: 0px 4px 75px 18px rgba(198, 198, 198, 0.22); padding: 40px 30px 40px 60px; position: relative; left: 15%; top: 11%; min-height: 320px;}

.slider-yellow-card-head{font-weight: 700; font-size: 22px; line-height: 26px; color: #000000;}

.slider-yellow-card-text{font-weight: 400; font-size: 16px; line-height: 26px; color: #000000;}

.slider-blackbox{background-color: #000; padding: 10px; text-align: center;}

.slider-blackbox-text{font-weight: 600; font-size: 14px; line-height: 19px; color: #FFFFFF;}



.owl-theme .owl-controls .owl-buttons .owl-prev {margin-left: -6%;}

.owl-theme .owl-controls .owl-buttons .owl-next {margin-right: -5%;}

.main-carousel .slider-img {width: 100%; position: relative; z-index: -1;}

.main-carousel .slider-img img {margin: auto 0;}

.carousel-wrap {margin: 90px auto; padding: 0 5%; width: 80%; position: relative;}

.carousel-control {background: none !important;}

.arrow-left {

  position: absolute;

  top: 50%;

  left: -25px;

  transform: translateY(-50%);

  cursor: pointer;

  z-index: 999;

}

.arrow-right {

  position: absolute;

  top: 50%;

  right: -25px;

  transform: translateY(-50%);

  cursor: pointer;

  z-index: 999;

}

.arrow-left img, .arrow-right img{background: #F2AA29; border-radius: 50%; padding: 10px 13px;}

.arrow-left:hover,

.arrow-right:hover{opacity: 1;}





.arrow-left-2 {

  position: absolute;

  bottom: 23%;

  right: 10%;

  transform: translateY(-50%);

  cursor: pointer;

  z-index: 999;

}

.arrow-right-2 {

  position: absolute;

  bottom: 22.9%;

  right: 6%;

  transform: translateY(-50%);

  cursor: pointer;

  z-index: 999;

}

.arrow-left-2 img, .arrow-right-2 img{background: #F2AA29; border-radius: 0; padding: 12px 15px;}

.arrow-left-2:hover,

.arrow-right-2:hover{opacity: 1;}



/* fix blank or flashing items on carousel */

.owl-carousel .item {position: relative; z-index: 100;}

.owl-carousel.main-carousel .owl-dots {text-align: center; padding-top: 10px;}



/*-----slider-------*/

.owl-carousel.main-carousel .owl-dots .owl-dot {border-radius: 50%; width: 12px; height: 12px; margin-left: 4px; margin-right: 4px; background: #414141; border: none;}

.owl-carousel.main-carousel .owl-dots .owl-dot.active, .owl-carousel.main-carousel .owl-dots .owl-dot:hover {background: #F2AA29;}

div.owl-buttons {display: table; height: 15vh;}

.owl-buttons { display: block; }

.owl-carousel:hover .owl-buttons { display: block; }

.carousel-inner { overflow: visible; }

.owl-item { text-align: center; }

.owl-theme .owl-controls .owl-buttons div { background: transparent; color: #869791; font-size: 40px; line-height: 300px; margin: 0; position: absolute; top: 0; }

.owl-theme .owl-controls .owl-buttons .owl-prev { left: 0; margin-left: 2%; }

.owl-theme .owl-controls .owl-buttons .owl-next { right: 0; margin-right: 2%; }

/* end */



.client-logo{height: 125px;}



#testimonials{background-color: #0C0C0C;}

.testi-head{font-weight: 700; font-size: 20px; line-height: 27px; color: #F2AA29;}

.testi-name{font-weight: 600; font-size: 20px; line-height: 26px; letter-spacing: 0.01em; color: #FFFFFF;}

.testi-text{font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0.01em; color: #FFFFFF;}

.testi-text-pos{padding: 2% 15%;}

.testi-slider .slide1 .testi-img{width: 13%; height: 125px; display: initial;}

.owl-carousel.testi-slider .owl-dots {text-align: center; padding-top: 10px;}

.owl-carousel.testi-slider .owl-dots .owl-dot {border-radius: 50%; width: 12px; height: 12px; margin-left: 4px; margin-right: 4px; background: #000; border: 1px solid #fff;}

.owl-carousel.testi-slider .owl-dots .owl-dot.active, .owl-carousel.testi-slider .owl-dots .owl-dot:hover {background: #F2AA29;}


/**/
.team-slider-bg{ background: url('../images/core-team-bg.png') no-repeat; background-size: 100% 100%; background-position: bottom; padding: 2%; border-bottom:2px solid gray; }

.owl-carousel.team-slider .owl-dots {text-align: center; padding-top: 10px;}

.owl-carousel.team-slider .owl-dots .owl-dot {border-radius: 50%; width: 12px; height: 12px; margin-left: 4px; margin-right: 4px; background: #fff; border: none;}

.owl-carousel.team-slider .owl-dots .owl-dot.active, .owl-carousel.team-slider .owl-dots .owl-dot:hover {background: #1A1A1A;}



.owl-carousel.proj-carousel .owl-dots {text-align: center; padding-top: 10px;}

.owl-carousel.proj-carousel .owl-dots .owl-dot {border-radius: 50%; width: 12px; height: 12px; margin-left: 4px; margin-right: 4px; background: #414141; border: none;}

.owl-carousel.proj-carousel .owl-dots .owl-dot.active, .owl-carousel.proj-carousel .owl-dots .owl-dot:hover {background: #F2AA29;}



#footer{padding-top: 1rem;}

.footer-logo{width: 60%;}

.footer-head{font-weight: 600; font-size: 16px; line-height: 19px; color: #000000;}

.footer-text{font-weight: 400; font-size: 14px; line-height: 25px; color: #000000;}

.footer-link{font-weight: 400; font-size: 16px; line-height: 19px; color: #000000;}

.footer-link:hover{font-weight: 400; font-size: 18px; line-height: 19px; color: #000000; transition: .5s;}



#footer .form-control{background: #FFFFFF; border: 0.7px solid #000000; border-radius: 0;}



.bottom-footer{width: 100%; background-color: #0C0C0C; padding: 22px 0;}

.bottom-footer-text{font-weight: 400; font-size: 16px; color: #FFFFFF;}



/* footer social icons */



.social-icon i{color: #000; font-size: 20px;}

.social-network a.social-icon:hover {background-color: #fff; border: 1px solid #F2AA29;}

.social-network{margin-left: -20%;}

.social-network a.social-icon:hover i{color: #000;}

.social-circle li{list-style: none; display: inline;}

.social-circle li a {display: inline-block; position: relative; margin: 0 auto 0 auto; text-align: center; width: 30px; height: 30px; font-size: 15px; background-color: #F2AA29; color: #000;}



.social-circle li i {margin: 0; line-height: 30px; text-align: center; color: #000;}



.social-circle li a:hover i,

.triggeredHover {-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -ms--transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s;}

.social-circle i {color: #595959; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; -ms-transition: all 0.8s; transition: all 0.8s;}



/* .social-network a {

  background-color: #000;

} */





/* About Us */

.about-banner-bg{background: url('../images/aboutus/about-banner.png'); background-size: 100% 100%;}

/* .about-banner-img{width: 75%; position: absolute; top: 0%; right: -0%; z-index: -111;} */

.about-banner-img{width: 130%; position: absolute; top: 0%; left: -30%; z-index: -111;}

.banner-blackbox-img{position: absolute; bottom: 130px; width: 95%;}

.banner-blackbox{background: #0C0C0C; backdrop-filter: blur(16px); padding: 50px 50px 50px 100px; position: absolute; top: 35%; left: 0%; z-index: 111;}

.comapny-card{background: #FFFFFF; box-shadow: 2px 2px 32px 1px rgba(163, 163, 163, 0.22); border-radius: 15px; text-align: center; padding: 45px; margin-top: -25%;}

.foreword-img{width: 50%;}

.yellow-line{width: 55px; height: 2px; background-color: #F2AA29;}

.team-card{box-shadow: 0px 4px 60px 8px rgba(120, 120, 120, 0.22); border-radius: 6px;}

.team-card-body{background-color: #F2AA29; padding: 15px 20px; border-radius: 0px 0px 3px 3px;}

.team-bg{background-image: url('../images/team/team-bg.png'); min-height: 435px;}

.team-head{font-weight: 600; font-size: 20px; text-align: center; letter-spacing: 0.01em; color: #000;}

.team-subhead{font-weight: 400; font-size: 17px; text-align: center; letter-spacing: 0.01em; color: #000000;}

.team-card-body a{font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: 0.01em; text-decoration-line: underline; color: #000000;}

.managing-team-card-img{border-radius: 6px;}

.team-name{width: 80%; margin-top: -10%;}

.service-bg{background: url('../images/services/service-bg.png'), #F2AA29 50%; padding: 60px;}

.owl-dots{ display:none; }



.contact-card{background-color: #fff; padding: 40px; min-height: 275px;}



/* Projects page */

.project-blackbox{background-color: #0C0C0C; padding: 40px 50px 60px 75px; position: absolute; bottom: 200px;}

.project-blackbox-head{font-weight: 700; font-size: 30px; line-height: 52px; letter-spacing: 0.01em; color: #F2AA29;}

.project-blackbox-text{font-weight: 400; font-size: 16px; line-height: 24px; color: #FFFFFF;}



.project-card{padding: 0%; border-radius: 8px 8px 0px 0px; margin-bottom: 20px;}

.project-card img {
    border-radius: 8px 8px 0px 0px; height: 200px;
}
.project-card-body{background-color: #0C0C0C; box-shadow: 0px 4px 35px 18px rgba(128, 128, 128, 0.22); padding: 25px 10px 25px 15px; border-radius: 0px 0px 8px 8px;}

.project-head{font-weight: 600; font-size: 20px; line-height: 27px; letter-spacing: 0.01em; color: #FFFFFF;}

.project-text{font-weight: 400; font-size: 16px; line-height: 18px; letter-spacing: 0.01em; color: #FFFFFF;}



.project-card img{opacity: 1; display: block; transition: .5s ease; backface-visibility: hidden;}

.middle {transition: .5s ease; opacity: 0; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center;}

.project-card:hover img {

  /* opacity: 0.3; */

  filter: brightness(50%);

}

.project-card:hover .middle {opacity: 1;}

.btn-project{background-color: transparent; color: #fff; font-weight: 600; font-size: 16px; text-align: center; padding: 10px 14px; border-radius: 0; border: 2px solid #fff}

.btn-project:hover{text-decoration: none; background-color: #fff; color: #000; font-weight: 600; font-size: 16px; text-align: center; border: 2px solid #fff; transition: color .15s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out;}



.single-project-img{width: 120%;}

.single-project-blackbox{background-color: #0C0C0C; box-shadow: 0px 4px 35px 12px rgba(46, 46, 46, 0.25); padding: 40px; position: absolute; right: 0; top: 15%;}

.single-project-blackbox-head{font-weight: 700; font-size: 34px; line-height: 44px; letter-spacing: 0.01em; color: #F2AA29;}

.project-address{font-weight: 400; font-size: 18px; line-height: 25px; letter-spacing: 0.01em; color: #FFFFFF;}

.project-whitebox{background-color: #FFFFFF; border-radius: 1.5px; padding: 6px 15px;}

.project-whitebox-text{font-weight: 400; font-size: 16px; line-height: 16px; color: #000000;}



.single-project-col1{max-width: 65%; flex: 0 0 65%; position: relative; width: 100%;}

.single-project-col2{max-width: 35%; flex: 0 0 35%; position: relative; width: 100%;}



#single-project-banner{margin-top: 4rem;}



/* tabs */

/* .nav-pill-main-div {

  position: relative;

  border-radius: 20px;

  box-shadow: inset -1px -7px 28px 3px rgba(1, 1, 1, 0.11);

  height: 100%;

} */

ul.tabs{

  margin: 0px;

  padding: 0px;

  list-style: none;

}

 ul.tabs li{

  background: none;

  color: #222;

  display: inline-block;

  padding: 10px 15px;

  cursor: pointer;

  transition: 0.3s ease all;

  width: 25%;

}

ul.tabs li.current{

  color: #222;

  transition: 0.3s ease all;

}

ul.tabs li.current span{

  background-color: #F2AA29;

  font-weight: 600;

  font-size: 16px;

  line-height: 22px;

  color: #000;

  transition: 0.3s ease all;

}

.tab-content{

  display: none;

  /* padding: 15px; */

  transition: 0.3s ease all;

}

.tab-content.current{

  display: block;

  transition: 0.3s ease all;

}





/*------ease effect------*/

.nav-justified > li { 

  float: none; 

}

.nav-justified > li span { 

  width: 100%; 

}

.customize_solution .nav-justified > li {

    float: none;

}

.customize_solution span.ease-effect { 

  text-decoration: none; 

  -webkit-transition: 0.3s all ease; 

  transition: 0.3s ease all; 

}

.customize_solution span.ease-effect:hover, .customize_solution span.ease-effect:focus,.customize_solution ul.tabs li.current span:hover,.customize_solution ul.tabs li.current span:focus { 

  color: #000; 

  transition: 0.3s ease all; 

}

.customize_solution span.ease-effect { 

  font-weight: 600;

  font-size: 16px;

  line-height: 22px;

  color: #7D7D7D;

  display: inline-block; 

  text-align: center; 

  padding: 30px 0px;

  position: relative; 

  box-shadow: 0px 4px 35px 18px rgba(198, 198, 198, 0.22);

}

.customize_solution .ease-effect:before { 

  -webkit-transition: 0.5s all ease; 

  transition: 0.5s all ease; 

  position: absolute; 

  top: 0; left: 50%; 

  right: 50%; 

  bottom: 0; 

  opacity: 0; 

  content: ''; 

  background-color: #F2AA29; 

  z-index: -2; 

}

.customize_solution .ease-effect:hover:before, .customize_solution .ease-effect:focus:before { 

  -webkit-transition: 0.5s all ease; 

  transition: 0.5s all ease; 

  left: 0; 

  right: 0; 

  opacity: 1; 

}



.finbyz-icon {

  height: 100px;

  width: 100px;

}



/* play btn */

#video_container button{background-color: transparent; border: none; position: absolute; top: 40%; left: 45%;}



/* Mobile navbar */

.sidenav {

  height: 100%;

  width: 0;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color: #111;

  overflow-x: hidden;

  transition: 0.5s;

  padding-top: 60px;

}



.sidenav a {

  padding: 8px 8px 8px 32px;

  text-decoration: none;

  font-size: 25px;

  color: #818181;

  display: block;

  transition: 0.3s;

}



.sidenav a:hover {

  color: #f1f1f1;

}



.sidenav .closebtn {

  position: absolute;

  top: 0;

  right: 25px;

  font-size: 36px;

  margin-left: 50px;

}



@media screen and (max-height: 450px) {

  .sidenav {padding-top: 15px;}

  .sidenav a {font-size: 18px;}

}