/* the three card text */
#Three-Boxes-Contner{
  margin-top: 1em;
}

/* #Three-Boxes-Contner .column-titles, #Three-Boxes-Contner .column-subtitle {
  margin-left: 40px;
} */

/* three cards css */


.content {
  max-width: 1024px;
  width: 100%;
  padding: 0 4%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .content {
    flex-direction: column;
  }
}
#Three-Boxes {
  width: 100%;
  max-width: 300px;
  min-width: 200px;
  height: 300px;
  background-color: #292929;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24);
  border: 2px solid rgba(7, 7, 7, 0.12);
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s ease;
}

.icon {
  margin: 0 auto;
  width: 100%;
  height: 80px;
  max-width: 80px;
  background: linear-gradient(90deg, #ffae57 0%, #F89024 40%, rgba(0, 0, 0, 0.28) 60%);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: all 0.8s ease;
  background-position: 0px;
  background-size: 200px;
}

.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-48 {
  font-size: 48px;
}

#Three-Boxes .title {
  width: 100%;
  margin: 0;
  text-align: center;
  margin-top: 30px;
  color: white;
  letter-spacing: 4px;
  font-size: 20px;
  font-family: helvetica;
  text-transform: uppercase;
}

#Three-Boxes .text {
  width: 80%;
  margin: 0 auto;
  font-size: 15px;
  text-align: center;
  margin-top: 20px;
  color: #F89024;
  font-weight: 200;
  letter-spacing: 2px;
  opacity: 1;
  max-height: 0;
  transition: all 0.3s ease;
}

#Three-Boxes:hover {
  height: 300px;
}

#Three-Boxes:hover .info {
  height: 90%;
}

#Three-Boxes:hover .text {
  transition: all 0.3s ease;
  opacity: 1;
  max-height: 40px;
}

#Three-Boxes:hover .icon {
  background-position: -120px;
  transition: all 0.3s ease;
}

#Three-Boxes:hover .icon i {
  background: linear-gradient(90deg, #ffae57, #F89024);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 1;
  transition: all 0.3s ease;
}

/* 6 cards starts */
.serviceBox{
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    padding-top: 20px;
}

.serviceBox .service-icon{
    color: #fff;
    background: #fff;
    font-size: 45px;
    line-height: 100px;
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
    border-radius: 50%;
    box-shadow: 5px 0 5px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.serviceBox .service-icon:before,
.serviceBox .service-icon:after{
    content: "";
    background: linear-gradient(to right, #F09119 50%, transparent 50%);
    border-radius: 50%;
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: -1;
    transition: all ease 0.8s;
}
.serviceBox:hover .service-icon:before, .serviceBox:hover .service-icon:after {
    transform: rotateZ(180deg);
}
.serviceBox:hover .service-icon {
    box-shadow: -5px 1px 5px rgba(0, 0, 0, 0.2);
}

.serviceBox .service-icon:after{
    background: #F09119;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.3);
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}
.serviceBox {
    border: 1px solid #e5e4e4;
    /*padding: 0px;*/
    border-radius: 30px;
    background: #f9f9f9;
    position: relative;
    z-index: 1;
}


.serviceBox .btitle{
    color: #F1921A;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.serviceBox .description{
    color: #777;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin: 0;
}

.serviceBox.red .service-icon:before{ background: linear-gradient(to right, #E34A3A 50%, transparent 50%); }
.serviceBox.red .service-icon:after{ background: #E34A3A; }
.serviceBox.red .btitle{ color: #E34A3A; }

.serviceBox.blue .service-icon:before{ background: linear-gradient(to right, #009CB5 50%, transparent 50%); }
.serviceBox.blue .service-icon:after{ background: #009CB5; }
.serviceBox.blue .btitle{ color: #009CB5; }

.serviceBox.green .service-icon:before{ background: linear-gradient(to right, #A1C52D 50%, transparent 50%); }
.serviceBox.green .service-icon:after{ background: #A1C52D; }
.serviceBox.green .btitle{ color: #A1C52D; }

@media only screen and (max-width:990px){
    .serviceBox{ margin: 0 0 30px; }
}
/* 6 cards end */

/*navbar*/


/*navbar*/



.banner-btitle {
    color: #fff;
    text-transform: uppercase;
    font-size: 40px;
    font-weight: 900;
}

@media (max-width: 767px) {
    .banner-btitle {
        font-size: 48px;
    }
}

@media (max-width: 575px) {
    .banner-btitle {
        font-size: 32px;
    }
}
.my-title{
    text-transform: uppercase;
    margin-top: 10px;

}

hr {
    width: 0%;
    min-width: 20%;
    max-width: 100%;
    margin: 0 auto;
    border: none;
    border-bottom: 2px solid #F1B600;
    position: relative;
    transition: box-shadow 200ms ease-in-out;
    box-shadow: 0px 0px 0px 0px #000;
}

hr.activated {
    box-shadow: 0px 4px 0px 0px #666;
}
.ts-team-wrapper .team-img-wrapper img{
    height: 300px;
    width: 150px;
}
.active{
    color: #F1B600;
}
.project-info li p {
    margin-bottom: 10px;
    display: inline;
}
/* PANEL in load calculator */
.panel {
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 0;
    border: 0;
    margin-bottom: 24px;
}


.panel-info.panel-colorful {

    border-color: #4ebcda;
    background: linear-gradient(to bottom, #a86008, #ffba56) !important;
    color: #fff;

}

.panel-body {
    padding: 25px 20px;
}

.panel hr {
    border-color: rgba(0, 0, 0, 0.1);
}

.mar-btm {
    margin-bottom: 15px;
}

h2,
.h2 {
    font-size: 28px;
}

.small,
small {
    font-size: 85%;
}

.text-sm {
    font-size: .9em;
}

.text-thin {
    font-weight: 300;
}

.text-semibold {
    font-weight: 600;
}
/*project start*/
/*.body1 {*/
/*    font-size: 100%;*/
/*    font-family: "Roboto", sans-serif;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    background-color: #88bdbc;*/
/*    background: radial-gradient(ellipse at center, #c0f0f0, #369593);*/
/*}*/

.container .main_header {
    padding-top: 10%;
}
.container .main_header__title {
    position: relative;
    height: 50px;
    vertical-align: baseline;
    color: #369593;
    text-transform: uppercase;
    font-size: 1.5em;
    margin-left: 1%;
}
.container .container__title {
    position: relative;
    height: 30px;
    vertical-align: baseline;
    font-size: 0.9em;
    font-weight: 400;
    color: #f6f6f6;
    text-transform: uppercase;
    border-bottom: 1px solid #f9f9f9;
}
.container .box:hover, .container .add_box:hover {
    box-shadow: 15px 15px 13px rgba(85, 85, 85, 0.3);
    transition: 0.4s;
    transform: translate(-1%, -1%);

}
.container .box, .container .add_box {
    position: relative;
    height: 250px;
    box-shadow: 3px 3px 10px rgba(85, 85, 85, 0.5);
    border-radius: 8px;
    margin-bottom: 7%;
    transition: 1s;
}
.container .box a:hover .box__title, .container .add_box a:hover .box__title {
    height: 35%;
    transition: 1s;
}
.container .box a:hover .box__title p, .container .add_box a:hover .box__title p {
    opacity: 1;
}
.container .box img, .container .add_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.container .box .box__title, .container .add_box .box__title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25%;
    background-color: #f6f6f6;
    border-radius: 0 0 8px 8px;
    vertical-align: middle;
    transition: 0.5s;
    transition-timing-function: ease-out;
}
.container .box .box__title p, .container .add_box .box__title p {
    opacity: 0;
    text-align: center;
    color: black;
    font-size: 0.8em;
    margin: 0;
    transition-delay: 0.2s;
    transition: 0.2s;
    transition-timing-function: ease-out;
}
.container .box .box__title h6, .container .add_box .box__title h6 {
    text-align: center;
    color: black;
    text-transform: uppercase;
    margin: 7% 0 0 0;
    font-size: 0.9em;
}
.container .add_box {
    background-color: #f9f9f9;
}
.container .add_box a {
    position: absolute;
    width: 100%;
    height: 100%;
}
.container .add_box svg {
    display: block;
    margin: auto;
    margin-top: 23.5%;
    transition: 0.3s;
    transition-timing-function: ease-out;
}
.container .add_box .add_box__title {
    position: absolute;
    width: 100%;
    text-align: center;
    color: black;
    top: 60%;
}
.container .add_box .add_box__title h6 {
    text-transform: uppercase;
}
.container .add_box a:hover svg {
    margin-top: 21.5%;
}
/*project end*/


/*social media icon*/

/*.whats-float {*/
/*    position: fixed;*/
/*    transform:translate(108px,0px);*/
/*    top:25%;*/
/*    right:0;*/
/*    width:140px;*/
/*    overflow: hidden;*/
/*    background-color: #25d366;*/
/*    color: #FFF;*/
/*    border-radius: 10px 0 0 10px;*/
/*    z-index: 10;*/
/*    transition: all 0.5s ease-in-out;*/
/*    vertical-align: middle*/
/*}*/
/*.whats-float a span {*/
/*    color: white;*/
/*    font-size: 15px;*/
/*    padding-top: 8px;*/
/*    padding-bottom: 8px;*/
/*    position: absolute;*/
/*    line-height: 16px;*/
/*    font-weight: bolder;*/
/*}*/

/*.whats-float i {*/
/*    font-size: 30px;*/
/*    color: white;*/
/*    line-height: 30px;*/
/*    padding: 5px;*/
/*    transform:rotate(0deg);*/
/*    transition: all 0.5s ease-in-out;*/
/*    text-align:center;*/

/*}*/

/*.whats-float:hover {*/
/*    color: #FFFFFF;*/
/*    transform:translate(0px,0px);*/
/*}*/

/*.whats-float:hover i  {*/
/*    transform:rotate(360deg);*/
/*}*/
/*social media icon*/

.whatsapp-button{
    position: fixed;
    bottom: 15px;
    left: 15px;
    z-index: 99;
    background-color: #25d366;
    border-radius: 50px;
    color: #ffffff;
    text-decoration: none;
    width: 50px;
    height: 50px;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
    box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
    animation: effect 5s infinite ease-in;
}

@keyframes effect {
    20%, 100% {
        width: 50px;
        height: 50px;
        font-size: 30px;
    }
    0%, 10%{
        width: 55px;
        height: 55px;
        font-size: 35px;
    }
    5%{
        width: 50px;
        height: 50px;
        font-size: 30px;
    }
}