/* card */

.card {
  min-height: 100%;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #444;
  position: relative;
  top: 0;
  transition: all .1s ease-in;
}

.card:hover {
  top: -2px;
  box-shadow: 0 4px 5px rgba(0,0,0,0.2);
}
.viewpage img.img-responsive{
    width:300px;
}
.card article {
  padding: 20px;
  display: flex;
  
  flex: 1;
  justify-content: space-between;
  flex-direction: column;
  
}

.card .thumb {
  padding-bottom: 60%;
  background-size: cover;
  background-position: center center;
}

.card p { 
  flex: 1; /* make p grow to fill available space*/
  line-height: 1.4;
}

#services .card {
    width: 100%;
}
.card span {
  font-size: 12px;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 2em 0 0 0;
}
.headingnew h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

.headingnew h1 span {
  display: block;
  font-size: 0.5em;
  line-height: 1.3;
}
.headingnew h1 em {
  font-style: normal;
  font-weight: 600;
}
.two h1 {
    text-transform: uppercase;
    color: #2276be;
    font-weight: 600;
}

.xbox {
    width: 100%;
    height: 350px;
    background: url(../images/services/contact-us.png) no-repeat center center/cover;
    margin-bottom: 20px;
}
.xbox .content {
    width: 40%;
    padding: 50px 0 0 30px;
}
.xbox p, .carbon p {
    margin: 10px 0 20px;
}
span.readmorex {
display: inline-block;
    color: #0067b8;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0px;
    float: right !important;
    font-size: 18px;
    text-align: right;
}
.xbox .btn {
    cursor: pointer;
    display: inline-block;
    border: 0;
    font-weight: bold;
    padding: 10px 20px;
    background: #262626;
    color: #fff;
    font-size: 15px;
}
.two h1:before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 2px;
  content: "";
  background-color: #c50000;
}
p.button {
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    width: max-content;
    padding: 5px 10px;
    color: white;
    border-radius: 5px;
}
.two h1 span {
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 2px;
    line-height: 1.5em;
    padding-left: 0.25em;
    color: rgba(0, 0, 0, 0.4);
    padding-bottom: 10px;
}
.headingnew.two {
    margin: 30px 0px;
}
.contact3 {
  font-family: "Montserrat", sans-serif;
  color: #8d97ad;
  font-weight: 300;
}

.contact3 h1,
.contact3 h2,
.contact3 h3,
.contact3 h4,
.contact3 h5,
.contact3 h6 {
  color: #3e4555;
}

.contact3 .font-weight-medium {
  font-weight: 500;
}

.contact3 .card-shadow {
  -webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
  box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}

.contact3 .btn-danger-gradiant {
  background: #ff4d7e;
  background: -webkit-linear-gradient(legacy-direction(to right), #ff4d7e 0%, #ff6a5b 100%);
  background: -webkit-gradient(linear, left top, right top, from(#ff4d7e), to(#ff6a5b));
  background: -webkit-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
  background: -o-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
  background: linear-gradient(to right, #2276be 0%, #001cba 100%);
}
.ml10 {
    margin-left: 20px;
}
.contact3 .btn-danger-gradiant:hover {
  background: #ff6a5b;
  background: -webkit-linear-gradient(legacy-direction(to right), #ff6a5b 0%, #ff4d7e 100%);
  background: -webkit-gradient(linear, left top, right top, from(#ff6a5b), to(#ff4d7e));
  background: -webkit-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
  background: -o-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
  background: linear-gradient(to right, #ff6a5b 0%, #ff4d7e 100%);
}
.m30{
    margin-top:30px;
}
.division_1:before, .division_1:after {
   display:none;
}
a.btn.btn_1.animated {
    color: black !important;
}
.megamenu {
    top: 80%;
}
.white{
    color:white;
}
a.contact-info {
    display: block;
    background: none;
    text-align: left;
    padding: 0;
    margin: 0;
    border: none;
    width: 100%;
}

a.contact-info:hover {
    background: none;
}

    .details-snippet1 {
        color: #585656;
    }

    /* Main text uses this styling and color */
    .details-snippet1 .theme-text {
        color: #2276be;
        font-weight: bold;
    }

    .details-snippet1 .mini-preview img {
        border: 1px solid #585656;
        border: 1px solid #2276be;
        margin-bottom: 8px;
    }

    .details-snippet1 .title {
        color: #464343;
        font-weight: bold;
        font-size: 2rem;
    }

    .details-snippet1 .price {
        font-weight: bold;
        font-size: 1.8rem;
    }

    .details-snippet1 .original-price {
        font-weight: normal;
        font-size: 20px;
    }

    .brief-description {
        /* color: #585656; */
        color: #464343;
    }


    .select-colors .color {
        display: inline-block;
        border: 1px solid grey;
        height: 35px;
        width: 35px;
        border-radius: 50%;
        margin-right: 5px;
        background-color: black;
    }

    .select-colors .color.red {
        background-color: red;
    }

    .select-colors .color.silver {
        background-color: silver;
    }

    .select-colors .color.black {
        background-color: black;
    }



    .addBtn {
        background-color: #2276be;
        color: white;
        text-transform: uppercase;
    }

    .addBtn:hover {
        background-color: #000;
        color: white;
    }


    .related-heading {
        text-align: center;
        font-size: 1.5rem;
        font-weight: bold;
        /* color: #464343; */
    }

    .details-snippet1 .related-title {
        color: #464343;
        font-weight: bold;
    }

    .details-snippet1 .related-price {
        color: #464343;
        font-weight: bold;
    }



    .additional-details .nav-link {
        border: none;
        color: #464343;
    }

    .additional-details .nav-link.active {
        background-color: white;
        color: #464343;
        border: none;
        border-bottom: 4px solid #2276be;
    }
    button.btn.addBtn.btn-block {
    margin: 10px;
    padding: 5px 10px;
    }
    a.btn.addBtn.btn-block {
    margin: 10px;
    padding: 5px 10px;
    }
    .callnow{
        background:#f81f01;
    }
    
.popup-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(2, 2, 2, 0.685);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  padding: 10px 20px;
  transition: opacity 0.3s ease-in-out;
}

.popup-wrapper.active {
  opacity: 1;
  pointer-events: all;
}

.popup {
  padding: 22px 25px;
  max-width: 380px;
  width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #12192c;
  border-radius: 15px;
}

.popup-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.close-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  padding: 0;
  border: 0;
  width: 30px;
  height: 55px;
  outline: none;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transition: transform 0.3s, opacity 0.3s;
  -moz-transition: transform 0.3s, opacity 0.3s;
  -ms-transition: transform 0.3s, opacity 0.3s;
  -o-transition: transform 0.3s, opacity 0.3s;
}

.close-btn:before,
.close-btn:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 30px;
  background-color: #fff;
  border-radius: 1.5px;
  transform: translateY(-50%);
}

.close-btn:before {
  transform: translateY(-50%) rotate(45deg);
}

.close-btn:after {
  transform: translateY(-50%) rotate(-45deg);
}

.close-btn:hover {
  transform: scale(1.1);
}
.introx {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
}
h2.popup-form__title {
    color: white;
    margin: 20px 0px;
}
button.btnsend {
    background: red;
    border-radius: 5px;
    color: white;
    padding: 5px 20px;
    text-transform: uppercase;
}
.close-btn:active {
  opacity: 0.8;
  transform: scale(0.9);
}

.popup-form__input {
  margin-bottom: 20px;
  padding: 12px 20px;
  width: 80%;
}
div#pills-hydraulic img {
    object-fit: contain !important;
    width: 100%;
    height: 150px !important;
}
.myclass .big {
    font-size: 2.5em;
}