@import url(../css/footer.css);

:root {
    --primary-font1:'Cairo', sans-serif;
    --primary-color1: #292929;
    --primary-color2: #000000;
    --primary-color3: #0077B5;
    --primary-color4: #FFDD00;
	  --primary-color5: #003055;
    --font12:12px;
    --font13:13px;
    --font15:15px;
    --font16:16px;
    --font18:18px;
    --font20:20px;
    --font21:21px;
    --font22:22px;
    --font24:24px;
    --font26:26px;
    --font28:28px;
    --font30:30px;
    --font36:36px;
    --font38:38px;
    --font40:40px;
    --font42:42px;
    --font45:45px;
    --font48:48px;
}



/* heading */
.heading-black{color: #000; font-weight: 700;}


html {
  scroll-behavior: smooth;
}
body[data-aos-duration='225'] [data-aos],
[data-aos][data-aos][data-aos-duration='225']{
  transition-duration: 225ms;
}
body{padding:0px;margin:0px;font-family:var(--primary-font1);font-size:var(--font13);color: var(--primary-color1);background:#F8F8F8;line-height: 21px;}
ul{padding:0px; list-style: none;}
.title_head{font-size:var(--font18);}
blockquote{font-size:var(--font30);color:var(--primary-color2); line-height: 36px;  }
.streched_link{display: inline-block;text-indent:-99999px;position: absolute;left:0;right:0;top:0;bottom:0;z-index: 99;}
figure{margin:0px;}
figure img{width:100%;}
a.navbar-brand{color:#fff;padding: 0;}
a.navbar-brand:focus, a.navbar-brand:hover{color:#fff;}
a.navbar-brand svg {fill: currentColor;transition: .2s ease;}
header.inner-header a.navbar-brand {
  color: #0077B5;
}
a{text-decoration:none; transition: .2s ease;}
a.view_more {
  color: var(--primary-color4)
}
a.view_more:hover{color:var(--primary-color3);}
a.view_more:hover svg path{
  stroke: #fff;
}

a.view_more svg {
  fill: currentColor;
}
.font13{font-size: var(--font13);}
.font16{font-size: var(--font16);}
.font15{font-size: var(--font15);}
.font18{font-size: var(--font18);}
.font21{font-size: var(--font21);}
.font24{font-size: var(--font24);}
.font30{font-size: var(--font30);}
.font48{font-size: var(--font48);}

.anachor-tag {
    position: relative;
    top: -100px;
    height: 0;
    width: 1px;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@media (max-width: 991px) {
  .tab-content>.tab-pane {
    display: block;
    opacity: 1;
  }
}


@media (min-width: 992px){
.navbar-expand-lg {padding: 16px 0;transition: .2s ease;}
}

@media (max-width:990px) {
a.navbar-brand svg {fill: currentColor; width: 70px;}
a.navbar-brand{margin:auto;color:#004770;padding: 0;}

}

@media (max-width:600px) {
  a.navbar-brand svg{width: 40px;height: auto;}
  header.sticky a.navbar-brand svg{width: 55px !important; display: block !important;padding: 5px 0px;height: auto;}
}


.mobile-text{font-style: normal;}

a.navbar-brand:hover {
  color: #fff;
}



.anachor-tag {
  position: relative;
  top: -100px;
  height: 0;
  width: 1px;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: -webkit-transform .9s ease-in-out;
  transition: transform .9s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.owl-dots button.owl-dot span {width: 8px;height: 8px;background: #00000029;display: inline-block;border-radius: 50%;}
.owl-dots button.owl-dot {margin: 0 3px;}
.owl-dots button.owl-dot.active span {background: #FFFFFF 0% 0% no-repeat padding-box;box-shadow: 0px 3px 6px #00000029;border: 1px solid #FFB300;}

/* common - revel animation */
.image, .image2, .image3, .image5{
  opacity: 0;
}
.image4::before{scale: 0 1;}
.reveal-image,
.reveal-image:after {position: absolute;animation-delay: 0s;animation-iteration-count: 1;animation-duration: 1600ms;animation-fill-mode: both;animation-timing-function: ease-in-out;}
.reveal-image2,
.reveal-image2:after {position: absolute;animation-delay: .1s;animation-iteration-count: 1;animation-duration: 1800ms;animation-fill-mode: both;animation-timing-function: ease-in-out;}
.reveal-image {opacity: 1;position: relative;animation-name: reveal-image;}
.reveal-image2 {opacity: 1;position: relative;animation-name: reveal-image2;}
.reveal-image3 {opacity: 1;position: relative;animation-name: fadeInline1;animation-delay: .1s;animation-iteration-count: 1;animation-duration: 1800ms;animation-fill-mode: both;animation-timing-function: ease-in-out; transform-origin: top;}
.reveal-image4::before{scale: 0 1; position: relative;animation-name: fadeInline2;animation-delay: .2s;animation-iteration-count: 1;animation-duration: 2200ms;animation-fill-mode: both;animation-timing-function: ease-in-out; transform-origin: left;}

.reveal-image5 {opacity: 1;position: relative;animation-name: reveal-image5;}
/* .reveal-image3 {opacity: 1;position: relative;animation-name: fadeInline1;animation-delay: .1s;animation-iteration-count: 1;animation-duration: 1800ms;animation-fill-mode: both;animation-timing-function: ease-in-out; transform-origin: top;} */

@keyframes reveal-image {
  from { clip-path: inset(0 100% 0 0);}
  to { clip-path: inset(0 0 0 0);}
}

@keyframes reveal-image2 {
  from {
    clip-path: inset(100% 0% 0% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes reveal-image5 {
  from {
    clip-path: inset(0 0% 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes fadeInLeft{
  from {opacity: 0; margin-left:-25%;}
  to{opacity: 1;margin-left:0%;}
}

@keyframes fadeInRight{
  from {opacity:0;
      margin-left: 30%;
  }
  to {opacity: 1;
      margin-left: 0%;
  }
}

@keyframes fadeInline1 {
  0% {opacity: 0; scale: 1 0}
  100% {opacity: 1;scale: 1 1;}
}
@keyframes fadeInline2 {
  0% {opacity: 0; scale: 0 1}
  100% {opacity: 1;scale: 1 1;}
}




















/****************************************************************************** new p age ***********************************************************/
 
.highly{margin-top: 25px;}
.testimonials-slider .item .video iframe{width: 100%;height:200px;}
.h_text{background: #fff;    text-align: center;height: 396px;
    border: 2px solid #817b7b;
    padding: 20px;}
.h_text h4{font-weight: 700;font-size: 32px;}
.h_text img{width: 140px;}
.h_text p{font-size: 18px;line-height: 30px;}
.know-more{background: #edf2f6;padding: 50px 0px;}
.know-more .head h2{    color: #000;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 0px;
    text-align: center;}
.know-more .buttons{    display: flex
;}
.know-more .buttons a:hover{background: #ffdd00eb;}
.know-more .buttons a{width: 25%;
    display: block;color: #000;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid #8b8686;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    margin: 5px;
    display: flex
;
    justify-content: space-between;}
.know-more .buttons a i{transform: rotate(-30deg);}

.innovate{margin-bottom: 60px;}
.innovate .head{text-align: center;margin-bottom: 40px;}
.innovate h1{font-size: 42px;font-weight: bold;color: #0077B5;margin-bottom: 15px;text-transform: uppercase;}
.innovate p{font-size: 18px;padding: 0px 100px;line-height: 1.5;}

.m_tech_pharma{border-radius: 10px; background-image: url(https://www.mectech.co.in/public/upload/bannerimage/20240207114658.jpg);background-size: cover;background-position: center;background-repeat: no-repeat;background-blend-mode: color;background-color: #000000b8;}
.m_tech_pharma .row{align-items: center;}
.m_tech_pharma .row .text{padding: 175px 100px;}
.m_tech_pharma .row .text h3{line-height: 30px; margin-bottom: 0px;text-align: center; font-size: 24px;color: #fff;font-weight: 500;}
.m_tech_pharma .row .text p{color: #fff;padding: 0px 0px;font-weight: 600;}

.life{padding: 50px 0px;}
.life .head h2{    font-size: 42px;
    font-weight: bold;
    color: #000;
    margin-bottom: 25px;
    text-transform: uppercase;}
.life .text{padding: 30px;
    gap: 38px;
    border-radius: 8px;
    border: 2px solid #edf2f6;
    margin: unset;
    justify-content: start;
    max-width: 100%;
    width: 100%;
    overflow: hidden;}
.life .text:hover .circle{background: #fff;}
.life .text .circle{     width: 80px;
    height: 80px;
    background: #ffdd00eb;
    border-radius: 50%;
    display: inline-flex
;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;}
.life .text .circle i{    color: #000000;
    font-size: 28px;}
.life .text h3{      margin-bottom: 20px;  font-size: 42px;
    font-weight: 700;}
.life .text p{    font-size: 18px;
    margin-bottom: 0;}
.life .text:hover{background: #ffdd00eb;color: #000000;}

.learning{padding-bottom: 50px;}
.learning .head h5{color: #0094d6;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: .16px;
    margin-bottom: 15px;
    text-transform: uppercase;}
.learning .head h1{color: #000;
    font-size: 55px;
    font-style: normal;
    font-weight: 700;
    /* line-height: normal; */
    letter-spacing: .5px;
    margin-bottom: 30px;}
.learning .text p{font-size: 20px;
    line-height: 30px;}
.learning .col-text{    border-radius: 8px;
    background: #edf2f6;
    padding: 50px 30px 30px;
    flex-basis: 100%;}
.learning .col-text h3{    color: #081997;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: .3px;
    margin-bottom: 20px;}
.learning .col-text p{    color: #545454;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: .16px;
    margin-bottom: 0;}
.hr-policies{padding: 50px 0px;}
.hr-policies .video video{width: 100%;}
.hr-policies .text h5{    color: #0094d6;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: .16px;
    margin-bottom: 15px;
    text-transform: uppercase;}
.hr-policies .text h2{    color: #000;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    /* line-height: normal; */
    letter-spacing: .5px;
    margin-bottom: 15px;}
.hr-policies .row{align-items: center;}
.hr-policies .text p{    font-size: 18px;
    line-height: 30px;}

.values{background: #edf2f6;padding: 50px 0px;margin-bottom: 50px;}
.values .head{}
.values .head h2{    color: #000;
    font-size: 55px;
    font-style: normal;
    font-weight: 700;
    /* line-height: normal; */
    letter-spacing: .5px;
    margin-bottom: 30px;}
.values .vission-mission{margin-top: 30px;}
.values .vission-mission h5{    color: #0094d6;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: .16px;
    margin-bottom: 15px;
    text-transform: uppercase;}
.values .vission-mission p{    font-size: 22px;
    line-height: 30px;
    font-weight: bold;}

.vm-slider{}
.vm-slider .item .text{    padding: 30px;
    gap: 38px;
    border-radius: 8px;
    margin: unset;background: #fff;
    justify-content: start;
    max-width: 100%;
    width: 100%;
    overflow: hidden;}
.vm-slider .item .text .circle{width: 80px;
    height: 80px;
    background: #ffdd00eb;
    border-radius: 50%;
    display: inline-flex
;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;}
.vm-slider .item .text .circle i{    color: #000000;
    font-size: 28px;}
.vm-slider .item .text h3{    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 600;}
.vm-slider .item .text p{    font-size: 18px;
    margin-bottom: 0;line-height: 30px;}

.vm-slider .owl-dots{text-align: center;margin-top: 20px;}
.vm-slider .owl-dots button span{width: 12px;height: 12px;}
.vm-slider .owl-dots button.active span{background: #FFB300 0% 0% no-repeat padding-box;border: 1px solid #FFB300;}


.highly .head h2{    color: #000;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    /* line-height: normal; */
    letter-spacing: .5px;
    margin-bottom: 10px;}
.highly .head p{font-size: 18px;line-height: 30px;}
.highly-slider .item{background: #edf2f6;padding: 20px;}
.highly-slider .item img{width: 140px;}
.highly-slider .item h4{font-size: 26px;font-weight: 600;margin: 20px 0px;}
.highly-slider .item p{font-size: 16px;line-height: 30px;}

.highly-slider .owl-dots{text-align: center;margin-top: 20px;}
.highly-slider .owl-dots button span{width: 12px;height: 12px;}
.highly-slider .owl-dots button.active span{    background: #FFB300 0% 0% no-repeat padding-box;border: 1px solid #FFB300;}
.hr-policies .video iframe{width: 100%;height: 305PX;}
iframe{border-radius: 10px;}
.testimonials{padding: 75px 0px;}
.testimonials .head h5{    color: #0094d6;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: .16px;
    margin-bottom: 15px;
    text-transform: uppercase;}
.testimonials .row{align-items: center;}
.testimonials .head h2{    color: #000;
    font-size: 55px;
    font-style: normal;
    font-weight: 700;
    /* line-height: normal; */
    letter-spacing: .5px;
    margin-bottom: 10px;}
.testimonials .head p{font-size: 18px;
    line-height: 30px;}
.testimonials .testimonials-slider .item .project-block .youtube-icon img{    width: 55px;margin: 0 auto;}
.testimonials .testimonials-slider .item .project-block .teste-name{background: #ffdd00eb;padding: 10px;}
.testimonials .testimonials-slider .item .project-block .teste-name h4{font-size: 22px;
    font-weight: 700;}
.testimonials .testimonials-slider .item .project-block .teste-name p{    margin: 0;
    font-size: 16px;
    font-weight: 500;}
.testimonials .testimonials-slider .owl-dots{text-align: center;margin-top: 20px;}
.testimonials .testimonials-slider .owl-dots button span{width: 12px;height: 12px;}
.testimonials .testimonials-slider .owl-dots button.active span{    background: #FFB300 0% 0% no-repeat padding-box;border: 1px solid #FFB300;}

.snapshots{    padding-bottom: 50px;}
.snapshots .head h2{    color: #000;
    font-size: 55px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 30px;
    text-align: center;}
.snapshots .snapshots-slider .item{position: relative;}
.snapshots .snapshots-slider .item .img{overflow: hidden;position: relative;}
.snapshots .snapshots-slider .item .img img{    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    width: 100%;
    height: auto;
    -webkit-filter: saturate(0.6) brightness(1.2);
    filter: saturate(0.6) brightness(1.2);}
.snapshots .snapshots-slider .item:hover .img img{    -webkit-transform: scale(1.1) rotate(0deg);
    transform: scale(1.1) rotate(0deg);
    -webkit-filter: saturate(1.4) brightness(1.2);
    filter: saturate(1.4) brightness(1.2);}
.snapshots .snapshots-slider .item .heading h4{    margin: 0;
    position: absolute;
    bottom: 0;
    padding: 12px;
    font-size: 26px;
    font-weight: 700;
    color: #fff;}


.snapshots .snapshots-slider .owl-dots{text-align: center;margin-top: 20px;}
.snapshots .snapshots-slider .owl-dots button span{width: 12px;height: 12px;}
.snapshots .snapshots-slider .owl-dots button.active span{background: #FFB300 0% 0% no-repeat padding-box;border: 1px solid #FFB300;}



@media (max-width: 1200px) {
  .m_tech_pharma .row .text h3{font-size: 18px;}
  .hr-policies .text h2{font-size: 28px;}
  .hr-policies .video iframe {height: 250PX;}
  .highly .head h2{font-size: 32px;}
  .h_text h4{font-size: 24px;}
  .testimonials .head h2{font-size: 32px;}
  .testimonials-slider .item .video iframe{height: 170px;}
  .know-more .head h2{font-size: 22px;}
  .navbar-nav a{font-size: 9px;letter-spacing: 2px;}
}
@media (max-width: 912px) {
  .h_text{height: 480px;}
  .m_tech_pharma .row .text {padding: 90px 40px;}
}
@media (min-width: 541px) {
  .show-on-mobile{display: none;}
}
@media (max-width: 540px) {
    .innovate-pic2 figure img{height: auto !important;}
  .highly{margin-top: 50px;}
  .hr-policies {padding: 0px 0px;}
  .innovate .head{margin-bottom: 20px;}
  .hide-on-mobile{display: none;}
  .m_tech_pharma .row .text {padding: 50px 15px;}
  .innovate h1 {font-size: 26px;}
  .m_tech_pharma .row .text h3 {font-size: 16px;line-height: 25px;}
  .hr-policies .video iframe {height: 290px;}
  .hr-policies .text{padding-left: 0px;margin-top: 20px;text-align: center;}
  .h_text{height: auto;margin-top: 20px;}
  .testimonials .head h2{text-align: center;font-size: 26px;}
  .testimonials-slider .item .video iframe {height: 285px;}
  .know-more .head h2{font-size: 16px;}
  
  .highly .head h2{font-size: 26px;text-align: center;}
  .h_text h4{font-size: 22px;}
  .hr-policies .text h2{font-size: 22px;}
  .h_text img {width: 100px;margin-bottom: 10px;}
  .hr-policies .text p {font-size: 16px;line-height: 25px;}
  .highly .head p {font-size: 16px;line-height: 25px;text-align: center;}
  .h_text p {font-size: 16px;line-height: 25px;}
}