/* ------------------------------------------------------------------------------
  Template Name: Madhes.Design
  Description: Madhes.Design
  Author: Madheswaran R
  Author URI: https://www/madheswaran.webflow.io
  Version: 1.0
  */
  :root{
    /* --primary-color:#07125e; */
    --primary-color:#EE0000;
    --bg-light-color:#ffefef;
	--bg-color:#01070F;
   
    --white-color:#ffffff;
    --white2:#eeeff4;
    --black-color:#161513;
    --grey-color:#828699;
    --border-color:#D7D7D7; 
	  /* --primary-font:'Readex Pro', sans-serif;
    --montserrat-font:"Montserrat", sans-serif; */
  }
  .manrope {
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
  }
  /*General CSS*/
  a {
    text-decoration: none;
    color: #000;}

li {list-style: none;}
.nav-item .nav-link {
  color: #000;
}


/*Common Comp*/
.lightbg{background-color: var(--bg-light-color);}
.m80{margin: 80px auto;}
.t2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
}

.primary_btn {
  background-color: var(--bg-color);
  padding: 12px 20px;
  color: var(--white-color)!important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  border-radius: 6px;width: fit-content;
}
.primary_btn:hover{background-color: var(--bg-color);color: #fff;}
.shape-top-left {
  background-image: url('../images/corner-shape.svg');
  background-size: 200px;
  background-position: 0px -60px;
  background-repeat: no-repeat;
}
/*img{ transition: .5s all;}
img:hover {
  transform: scale(1.05);
  transition: .5s all;
}*/
.accordion-item {
  border: none;
  margin: 20px 0;
}
.accordion-button {
  background-color: #FFF;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
  background-color: #FFF;
  border: none;
}
.accordion-button:focus{box-shadow: none;}
  /*HEADER CSS*/
  header {
     
    background-color: #fff;
    box-shadow: 1px 1px 1px 0px var(--bg-light-color);
}
.navbar-brand img {
    height: 72px;
}
.nav-item a {
  margin: auto 12px;
}

.nav-item.dropdown:hover >.dropdown-menu{
  display: block;
}
#header .nav-link.active {
    color: var(--primary-color) !important;
    font-weight: 500;
}
.dropdown-menu {
  display: none;
  border-radius: 0;
 
}
.menu_list ul {
  padding: 0;
  margin: 0;
}
.menu_list ul li a {
  padding: 8px 16px;
  margin: 8px auto;
  font-size: 15px;;
}

.hovershape {position: relative;}
.shape {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 0;
    transition: .5s all;}

.hovershape:hover >.shape {
    visibility: visible;
    width: 100px;
    right: 12px;
    bottom: 0px;}

/*Banner*/
.banner-content {
  padding: 40px 0 0 0;
}
.banner {
  background-color: var(--bg-light-color);
  background-image: url(../images/banner-text-bg.svg);
  /*background-size: contain;*/
  background-repeat: no-repeat;
  background-position: center left;
}
.home_banner_img {
    width: 740px;
}
.banner-content h2 {
  font-size: 44px;
  margin: 20px auto;
}
.highlight {
  font-weight: 800;
  color: var(--primary-color);
}
.banner_cta {
  margin-top: 48px;
}
.content {
  padding-top: 80px;
  padding-bottom: 80px;
  
}
.mobile-nav {
    display: contents;
}
/*why*/
.why-mei {
  margin: 120px auto;
}
.hex_bg {
  width: 32px;
  background-image: url('../images/hexagon.svg');
  background-repeat: no-repeat;
  color: #fff;
  display: flex;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 32px;
  background-size: 32px 32px;
  margin: 0px 8px 0px 0px;
}

/*Service*/

.our-services {
  background-color: var(--bg-light-color);
  padding: 80px 0;
}
.circle-icon {
  width: 64px;
  height: 64px;
  background-color:var(--bg-light-color);
  border-radius: 50px;
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.service_box {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #FFF1F1;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: 500px 600px;
  min-height: 380px;
}
.service_box:hover {
  background-color: var(--bg-light-color);
  background-image: url(../images/Subtract.svg);
  background-repeat: no-repeat;
  background-position: bottom right;
  transition: .5s all;
  border: 1px solid #FFF1F1;
}
.service_box:hover .circle-icon {
  background-color: #ffd4d4;
}
.service_box.active{
  background-color: var(--bg-light-color);
  background-image: url(../images/Subtract.svg);
  background-repeat: no-repeat;
  background-position: bottom right;
  transition: .5s all;
  border: 1px solid #FFF1F1;
}
.service_box.active .circle-icon {
  background-color: #ffffff;
}
.service_box:hover {
  background-color: #fff;
  transform: scale(1.1);
  transition: .5s all;
}

.text-link svg {
  display: none;
  transition: .5s all;
}

.service_box:hover svg, .blog:hover svg {
  display: block;
  margin-right: 8px;
}

.text-link a {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center; 
}
.product-tab {
  background-color: #F2F2F2;
  padding: 16px;
}

.product-tab .nav-link.active {
  background-color: #000 !important;;
  padding: 12px 20px;
  border-radius: 50px;
}

.product-tab .nav-link {
  padding: 12px 20px;
  border-radius: 50px;
  margin: 8px 0;
  text-align: left;
  color: #000;
}

/*Client*/
.client-logos img {
  width: 180px;
}
.client-logos ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

/*Testimonial*/
.testimonial{
  padding: 80px 0;
  background-color: var(--bg-light-color);
}
.paly {
  margin: -56px 0px 0px 16px;
}
.paly p a {
  color: #fff;
}
.blog:hover {
  transition: .5s all;
  transform: scale(1.05);
}
.blog img {border-radius: 12px;}

.blog{transition: .5s all;}


/*Getintouch*/

.getintouch {
  position: relative;
  padding: 80px 0;
  background-color: var(--bg-light-color);
}

.touch_content {
  padding-top: 100px;
  color: #000;
}
.enquiry_form {
  padding: 40px;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 12px;
}
/*Other pages*/
.product_support ul {
  padding: 0;
  margin: 0;
}
.product_support ul li {
  padding: 12px 0px;
}
.pic img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
}
.we-help {
  position: relative;
  padding: 120px 0;
  background-color: #000;
  color: #fff;
  background-image: url(../images/footer-hexa.svg);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 180px;
}
section.we-help::before {
  position: absolute;
  content: '';
  background-image: url(../images/footer-hexa.svg);
  background-repeat: no-repeat;
   background-position: top left;
  background-size: 130px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/*Contact*/
section.contact-link {
    background-color:var(--bg-light-color);
  /*background-image: linear-gradient(var(--bg-light-color) 20%, #ffffff 10%);*/
  padding: 80px 0;
}

.contact-box {
  background-color: #fff;
  height: 280px;
  padding: 32px;
  border: 1px solid var(--bg-light-color);
}

.contact-box a {
  color: var(--primary-color);
}


/*Enquiry Form*/
#enquiry_form {
  padding: 24px;
  width: 720px;
}

.Enquiry_form input.form-control, .Enquiry_form  select.form-select, .Enquiry_form  textarea.form-control{
    border-radius: 4px;
    padding: 8px;
}
.Enquiry_form label.form-check-label {
  font-size: 14px;
}
.Enquiry_form label.form-label {
    font-size: 14px;
    /* text-transform: uppercase; */
    font-weight: 500;
}
/* .Enquiry_form .btn-primary, .contact_form .btn-primary{background-color: var(--primary-color);border-color: var(--primary-color);} */
.contact_form input.form-control, .contact_form  select.form-select, .contact_form  textarea.form-control{
  border-radius: 4px;
  padding: 8px;
}
.contact_form label.form-check-label {
font-size: 14px;
}
.contact_form label.form-label {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 500;
}

.custom_tab .nav-pills .nav-link {
  padding: 25px 0;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  background-color: #fff;
  text-align: left;
  color: var(--primary-color);
  font-size: 18px;
}
.custom_tab .nav-pills .nav-link.active, .custom_tab .nav-pills .show> .custom_tab .nav-link {
  color: var(--primary-color);
  font-weight: 500;
  font-size: 18px;
}
/*Services List*/
ul#pills-tab {
  border: 1px solid #F2F2F2;
  width: fit-content;
  padding: 4px;
  border-radius: 48px;
  background-color: #F2F2F2;
}

.services-list .nav-link.active {
  background-color: #000;
  border-radius: 50px;
  padding: 12px 24px;
}
.services-list .nav-link {
  border-radius: 50px;
  padding: 12px 24px;
}
.feature_list p {
  margin: 20px 0;
}

.feature_list {
  margin: 20px 0;
  padding: 24px;
  background-color: #fff;
  transition: .5s all;
  border: 1px solid #fff;
  min-height: 220px;
}

.feature_list:hover {
  background-color: var(--bg-light-color);
  border: 1px solid var(--bg-light-color);
}
.service_tab ul {
  width: fit-content;
  margin: 0 auto;
  padding: 8px;
  background-color: #ffffff;
  border-radius: 50px;
border: 1px solid #f2f2f2;
}

.service_tab ul li {
  padding: 12px 20px;
}

.service_tab {
  margin: 80px 0;
}

.service_tab ul li.active {
  background-color: #ffefef;
  border-radius: 50px;
  color: #fff;
}
.service_tab ul li.active a {
  color:var(--primary-color);
}
.lightbg .feature_list {
  background-color: transparent;
  border-color: transparent;
}

.lightbg .feature_list:hover {
  background-color: #fff;
}

.solution_list p {
  margin: 20px 0;
}

.solution_list {
  margin: 20px 0;
  padding: 24px;
  background-color: #fff;
  transition: .5s all;
  border: 1px solid #fff;
  min-height: 380px;
  border-radius: 8px;
  transition: .5s all;
}
.solution_list:hover {
  background-color: #ffffff;
  transform: scale(1.05);
}


/*Footer*/
.footer {
  padding: 60px 0 20px 0;
  border-top: 1px solid #E7E7E8;
  background-image: url(../images/footer-hexa.svg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 220px;
}
.copright {
  font-size: 14px;
}
.footer a:hover {
  color: #000;
  text-decoration: underline;
}
.footer ul {
    padding: 0;
    margin: 0;
}

.footer ul li {
    padding: 8px 0;
}
.language {
  border-top: 1px solid #E7E7E8;
  border-bottom: 1px solid #E7E7E8;
  padding: 8px;
}

/*PRICING*/


.price-card-thumb h3 {
    font-size: 24px;
    font-weight: 600;
}

.price {
    font-size: 48px;
    font-weight: 700;
    margin: 0;
}
.price span {
    font-size: 16px;
    font-weight: 500;
}
.price-card.card ul li {
  margin: 16px 0;
}

.popular-tag p {
  background-color: var(--primary-color);
  text-align: right;
  width: fit-content;
  margin: 0px 0px 0px auto;
  padding: 4px 12px;
  border-radius: 0px 0px 0px 16px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
}

.pricing ul#pills-tab {
  background-color: #fff;
  border: 1px solid #000;
  width: fit-content;
  margin: 0 auto;
  padding: 4px 6px;
  border-radius: 50px;
}
.pricing .nav-pills .nav-link {
  color: #000;
  border-radius: 50px;
  margin: 2px auto;
}

.pricing .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #ffffff;
  background-color: #000;
  border-radius: 50px;
  margin: 2px auto;
}
.btn-white {
  background-color: #fff;
  padding: 10px 20px;
  color: #000;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  border-radius: 6px;
}
section.pricing {
  background-image: linear-gradient(var(--bg-light-color) 30%,#ffffff 20%);
}
.save p {
  margin: 0 0px 0px 8px;
}

.save {
  margin: -10px 0 0px auto;
    width: 45%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.fade-in {
  -webkit-animation: fade-in 2s linear infinite;
  animation: fade-in 2s linear infinite;
}
@keyframes fade-in{
  0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
.pulse {
  -webkit-animation: pulse 1s infinite ease-in-out alternate;
  animation: pulse 1s infinite ease-in-out alternate;
}
@keyframes pulse{
  0% {
    transform: scale(0.9);
}
100% {
    transform: scale(1.1);
}
}


/* Chatbox Whatsapp */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
:root {
  --warna-background: #00a884; 
  --warna-bg-chat: #f0f5fb;
  --warna-icon: #fff; 
  --warna-text: #505050;
  --warna-text-alt: #333f64;
  --lebar-chatbox: 300px;
}
h1 {font-family: "Poppins", sans-serif;font-weight:500;}
.hidden { visibility: hidden; }
.sticky-button{position:fixed;background-color:var(--warna-background);bottom:20px;right:80px;width:55px;height:55px;border-radius:50px;z-index:20;overflow:hidden;}
.sticky-button a, .sticky-button label{display:flex;align-items:center;width:55px;height:55px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}
.sticky-button a svg, .sticky-button label svg{margin:auto;fill:var(--warna-icon)}
.sticky-button label {cursor: pointer;}
.sticky-button label svg.svg-2{display:none}
.sticky-chat{position:fixed;bottom:70px;right:80px; width: 100%;max-width:var(--lebar-chatbox);-webkit-transition:all .3s ease-out;transition:all .3s ease-out;
z-index:21;opacity:0;visibility:hidden;line-height:normal;border-radius:10px;}
.sticky-chat .chat-content{border-top-left-radius:10px; border-top-right-radius:10px;background-color:#fff;overflow:hidden}
.sticky-chat .chat-header{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:var(--warna-background);overflow:hidden}
.sticky-chat .chat-header:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,0,.040);border-radius:70px 0 5px 0;}
.sticky-chat .chat-header svg{width:35px;height:35px;flex:0 0 auto;fill:var(--warna-icon)}
.sticky-chat .chat-header .title{padding-left:15px;font-size:14px;font-weight:600;font-family:'Roboto', sans-serif;color:var(--warna-icon)}
.sticky-chat .chat-header .title span{font-size:11px;font-weight:400;display:block;line-height:1.58em;margin:0;}
.sticky-chat .chat-button{display:flex;align-items:center;padding:12px 15px;border-bottom-left-radius:10px; border-bottom-right-radius:10px; background-color:#f0f2f5;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden;font-size:12px;color:var(--warna-text)}
.sticky-chat .chat-button svg{width:24px;height:24px;fill:var(--warna-text-alt);margin-left:auto;transform:rotate(40deg);-webkit-transform:rotate(40deg)}
.chat-menu:checked + .sticky-button label{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
.chat-menu:checked + .sticky-button label svg.svg-1{display:none;}
.chat-menu:checked + .sticky-button label svg.svg-2{display:table-cell}
.chat-menu:checked + .sticky-button + .sticky-chat{bottom:90px;opacity:1;visibility:visible}
.chatShadow { -webkit-box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.2); box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.2); }

.content-whatsapp.-bottom { display: flex; flex-direction: row; }
input.whats-input[type=text] { width: 250px; height: 40px; border: 0px solid #e3e3e3; border-radius: 10px; font-size: 1.2em; background-color: #fff; padding: 0px 0px 0px 10px; -webkit-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out; outline: none; transition: 0.3s; }
@media (max-width: 420px) {
  input.whats-input[type=text] { width: 225px; }
}
input.whats-input::placeholder { color: rgba(68, 68, 68, 0.705); opacity: 1; }
input.whats-input[type=text]:focus { background-color: #f8f8f8; -webkit-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out; transition: 0.3s; }
.send-msPopup { display: flex; justify-content: center; align-items: center; width: 45px; height: 40px; background-color: transparent; margin: 0px 0px 0px 5px; border: none; outline: none; cursor: pointer; }
.send-msPopup:hover { background-color: transparent; transition: 0.3s; }
.send-msPopup svg{margin-left:0!important;}
.send-msPopup[disabled] svg{fill:#aeaeae!important;}






/*Media Query*/
@media screen and (max-width: 768px) and (min-width: 325px) {
.banner{background-image: none;}
.banner-content h2 {font-size: 28px;}
.t2 {font-size: 26px;}
.why-mei {margin: 40px auto;}
.our-services {  padding: 1px 0;}
.service_box{margin:16px;}
.touch_content {padding-top: 0px;}
.getintouch {padding: 40px 0;}
.content {padding-top: 40px;padding-bottom: 40px;}
.service_tab {margin: 40px 0;}
.service_tab ul{    border-radius: 4px;}
.hex_bg {width: 32px;}
.feature_list{padding:16px;}
.feature_list h5 {font-size: 20px;width: fit-content;}
.contact-link{    padding: 20px 0;}
}

@media screen and (max-width: 1080px) and (min-width: 769px) {
.nav-item a {
    margin: auto 4px;
}
.content {
    padding-top: 40px;
    padding-bottom: 40px;
}
.touch_content { padding-top: 40px;}
}

