/* Home Page */

.navbar-nav .nav-item .nav-link {
  color: black;
  font-weight: bold;
  white-space: nowrap;
  padding: 30px 10px;
  border-bottom: 3px solid transparent;

  transition: color 0.3s ease-in-out, border-bottom 0.3s ease-in-out;
}
.product-bg-img {
  background-image: url(img/product-bg.png);
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  position: relative;
}
/* .navbar-nav .nav-item .nav-link.active, */
.navbar-nav .nav-item .nav-link:hover {
  color: rgba(85, 27, 245, 1);
  border-bottom: 3px solid rgba(85, 27, 245, 1);
}
a {
  text-decoration: none;
}
.a {
  text-decoration: none;
}
.cz-fs{
  font-size: 17px;
}
.bg-blue {
  background-color:  rgba(85, 27, 245, 1);
}
.product-readmore-btn {
  margin-top: 20px;
  background-color: rgba(245, 224, 1, 1);
  width: 200px; 
  height: 60px;
  border: none;
  color: rgba(90, 90, 90, 1);
  font-weight: 200px;
  position: relative;
  overflow: hidden;
}
.product-readmore-btn span{
  position: relative;
  color: rgba(90, 90, 90, 1);
  z-index: 2;
  transition: color 0.5s ease-in-out;
}
.product-readmore-btn:hover span{
  color: white;
}
.product-readmore-btn::before{
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(46, 49, 146, 1);
  transition: right 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
.product-readmore-btn:hover::before{
  right: 0;
}
.readmore-btn {
  margin-top: 100px;
  background-color: rgba(245, 224, 1, 1);
  width: 200px; 
  height: 60px;
  border: none;
  color: rgba(90, 90, 90, 1);
  font-weight: 200px;
  position: relative;
  overflow: hidden;
}
.readmore-btn span{
  position: relative;
  color: rgba(90, 90, 90, 1);
  z-index: 2;
  transition: color 0.5s ease-in-out;
}
.readmore-btn:hover span{
  color: white;
}
.readmore-btn::before{
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(46, 49, 146, 1);
  transition: right 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
.readmore-btn:hover::before{
  right: 0;
}

.sendmessage-btn {
  margin-top: 20px;
  background-color: rgba(245, 224, 1, 1);
  width: 200px; 
  height: 60px;
  border: none;
  color: rgba(90, 90, 90, 1);
  font-weight: 200px;
  position: relative;
  overflow: hidden;
}
.sendmessage-btn span{
  position: relative;
  color: rgba(90, 90, 90, 1);
  z-index: 2;
  transition: color 0.5s ease-in-out;
}
.sendmessage-btn:hover span{
  color: white;
}
.sendmessage-btn::before{
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(46, 49, 146, 1);
  transition: right 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
.sendmessage-btn:hover::before{
  right: 0;
}

/* product carousel */

.activity-images .image-box {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(226, 226, 226, 1);
}
.activity-images .image-box img {
  transition: transform 0.3s;
}
.activity-images .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(18, 76, 105, 0.397);
  overflow: hidden;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all .4s ease;
}
.activity-images .image-box:hover .overlay {
  opacity: 1;
}
.activity-images .image-box:hover img {
  transform: scale(1.2);
}
.activity-images .text {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.activity-images .text img {
  width: 28px !important;
}
.cz-prouct-col{
  padding-left: 154px;
}

.cz-input-group {
  border-radius: none !important;
}






/* Service */
.service-bg {
  background-image: url(./img/service-bg.png);
  width: 100%;
  background-position: center;
  background-size: cover;
  position: relative;
  z-index: 1;
  padding: 70px 0;
}
 .bgwhite {
  position: absolute;
  right: 0;
  top: 0;
  width: 810px;
  height: 100%;
  z-index: 2;
  background-color: #fff;
}

.service-txt {
  line-height: 30px;
  display: flex;
  justify-content: flex-start;
  text-justify: auto;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
  width: 50%;
  margin: 112px;
}
.service-card {
  display: flex;
  position: absolute;
  margin-top: 61px;
  left: 500px;
}
.service-card-body{
 border-radius: 10px;
 box-shadow: 20px;
}
.btn-cs-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #2596be;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2C0A02;
  --bs-btn-hover-border-color: #2C0A02;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}
.card-img-overlay {
  background-color: rgba(#000, 0.4);
  margin-top: 76px;
  width: 204px;
  margin-left: 20px;
}
.img-fluid {
  width: 100%;
}
.card-cz{
  box-shadow: 0 0 2px lightcyan;
  border: 1px ;
  height: 390px;
  border-top:5px solid #2596be ;
}
.cz-card {
  border: none !important;
}
.mr-cz {
  /* float: left; */
  margin-left: -41px;
  /* width: 60%; */
}
.activity-images .image-box {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.activity-images .image-box img {
    transition: transform 0.3s;
    height: 200px;
}
.activity-images .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(18, 76, 105, 0.397);
    overflow: hidden;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .4s ease;
}
.activity-images .image-box:hover .overlay {
    opacity: 1;
}
.activity-images .image-box:hover img {
    transform: scale(1.2);
}
.activity-images .text {
    color: white;
    position: absolute;
    font-size: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
/* ` */
/* Start Reason */
.mr-cz {
  /* float:left; */
  margin-left: 50px;
}

.mr-cz h4{
  width: 255px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5em;
    letter-spacing: 1px;
}

.card-pj{
  background-color: white;
  /* width: 100%; */
  border-radius: 10px;
  
}

.card-workers{
  background-color: #2596be;
  color:white;
  border-radius: 10px;

  
}
.title-color{
  color: #2596be;
  text-align: center;
}
.footer-copyright{
  background-color: #2596be;
  margin-top: 8px;
  color: white;
  text-align: center;
}

/* update icon bootstrap and expense datatable */


.service-title {
  margin-top: -280px;
  margin-bottom: 389px;
}

.service-content{
  margin-top: 150px;
}

.service-image{
  padding-left: 0 !important;
}

.service-right{
  padding-right: 0 !important;
}
.card-bd-1 {
  width: 479px;
  margin-left: 79px;
}
.card-bd-2 {
  width: 561px;
  margin-right: 196px;
}

/* About Start */
.about-title {

  margin-bottom: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.about-card{
  margin-left: 90px;
  margin-top: 50px;
}
.ab-card-1 {
  /* margin-bottom: 53px; */
  margin-top: 73px;
  width: 70%;
}
.ab-card-2{
  margin-top: 73px;
  width: 70%;
}
.main-about{
  background-color: #F3F3F3;
  margin-bottom: 30px;
}

/* Code based on this sample http://thecodeplayer.com/walkthrough/css3-family-tree */

/*Now the CSS*/
.tree * {margin: 0; padding: 0;}

.tree ul {
	padding-top: 20px; position: relative;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li {
	float: left; text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 4px solid #BABABA;
	width: 50%;
  height: 61px;
}
.tree li::after{
	right: auto; left: 50%;
	border-left: 5px solid #BABABA;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
	border: 0 none;
}

/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
	border-right: 4px solid #BABABA;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before {
  content: '';
  position: absolute;
  top: -48px;
  left: 50%;
  border-left: 4px solid #BABABA;
  width: 0;
  height: 72px;
}
.tree li .card{
  box-shadow: 20px;
  width: 300px;
	display: inline-block;
	transition: all 0.5s;
  margin-top: 108px;
  height: 200px;
  border: none;
}
.tree li .card img {
  margin-bottom: 23px;
  margin-top: -86px;
}
.tree li .card h5{
  color: #2596be;
  width: 280px;
  margin-top: 4px;
}
.card-text{
  width: 100%;
}

/* Contact Start */
.main-contact{
  margin-top: 20px;
  margin-bottom: 50px;
}
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #D9D9D9;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

input[type=text]:focus {
  border: 3px solid #D9D9D9;
}
.cz-text-area{
  border: 3px solid #D9D9D9;
}
textarea:focus {
  outline: none !important;
  border: 3px solid #D9D9D9;
}

.input-form{
  margin-top: 20px;
  margin-left: 36px;
}
.hr-tag {
  margin-top: 68px;
}


.nav-tabs-btn {
  width: 242px;
}
.tab-content {
  margin-top: 40px;
}

/* Footer img */
.footer-img {
  width: 70% !important;
}

.slide-cz {
  height: 502px !important;
}


/* Responsive Tablet*/
@media only screen and (max-width: 991px) {
  .w-mobile {
    width: 100%;
  }
  .brand-logo {
    width: 42% !important;
}

.cz-prouct-col{
  padding-left: 0px;
}

.readmore-btn {
  margin-top: 1px !important;
}
.footer-img {
  width: 51% !important;
}


}

/* Responsive Phone View */
@media screen and (max-width: 767px) {
  .brand-logo {
    width: 25% !important;
}
.cz-link-title{
  margin-top: 20px !important;
    font-size: 12px;
}
.footer-img {
  width: 51% !important;
}
.cz-footer-center{
  text-align: center;
}
  .w-mobile {
    width: 100%;
  }
  .cz-prouct-col{
    padding-left: 82px;
  }
  .readmore-btn {
    margin-top: 0px !important;
  }
  
  .slide-cz {
    height: 224px !important;
}
.carousel-indicators li {
    width: 11px !important;
    height: 11px !important;
    border: none !important;
    border-radius: 2px !important;
}
.carousel-inner {
  position: relative;
  width: 100% ;
  overflow: hidden;
  height: 651px ;
}
.carousel-item {
  position: relative;
  width: 100%;
  height: 184px ;
  overflow: hidden;
}
.mr-cz {
  margin: 0 12px;
}
.dflex-card-bd-2{
  display: flex!important;
  flex-direction: column !important;
}
.card-bd-2 {
  width: 373px;
  margin-right: -1px;
}
.text-card{
  color: white;
}
.cz-dflex{
  display: flex !important;
  flex-direction: column;
}
.cz-input-search {
  /* width: 13.2em !important; */
  outline: none;
  height: 2.199999em !important;
  border: 1px solid gray;
}
.booking-form {
  margin-top: -202px !important;
  margin-bottom: -108px !important;
  height: 95px;
}
.service-item {
  background: #8ddaed;
  transition: .5s;
  border-radius: 10px;
  height: 250px !important;
  margin-top: -40px !important;
}
.carousel-indicators {
  margin-bottom: 33rem;
}
}

/* Search Bar */

.booking-form {
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* box-shadow: 3px 0 0 4px white; */
  background-color: #ffffffab;
  margin-top: 56px;
  margin-bottom: 45px;
  height: 100px;
}
.form-custimize{
  width: 192px;
  border: 1px solid #dca73a;
  height: 44px;
}
.form-custimize:focus{
  box-shadow: none;
}
.form-custimize:hover{
 border-color: yellowgreen;
}
.carousel-hg img{
height: 800px;
}

.container.booking-position {
  margin-top: -310px;
  position: relative;
  z-index: 10;
}

.booking-form .form-select{
  width: 100px;
  border: 1px solid #dca73a;
}
.booking-form .form-select:focus{
 box-shadow: none;
}
.booking-form .form-select option{
  background-color: white !important;

}
.booking-form .form-select option:hover{
  background-color: #dca73a !important;
}
.select{
  border: none;
  background-color: white;
}
.dropdown-toggle:active{
  pointer-events: none !important;
}
.dropdown:hover .dropdown-menu{
   display: block !important;
}
.dropdown-menu .dropdown-item:hover{
  background-color: #2596be;
}
.brand-logo{
  width: 37%;
}
.nav-link{
  font-size: 17px !important;
}
.title-color{
   color: #2596be;
}

.category-title{
  border-bottom: 5px solid #8ddaed;
  padding-bottom: 5px;
  display: inline-block;
  color: #2596be;
}