body{
	font-family: "Inter", sans-serif;
    font-weight: 100;
   
}
h1, h2, h3, h4, h5, h6 {
  
font-family: -apple-system, BlinkMacSystemFont, 
             "Segoe UI", Roboto, "Helvetica Neue",
              Arial, "Noto Sans", sans-serif, 
              "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 500;
font-style: normal;
color: darkcyan;
    font-size: 30px;

}
.item {
    position: relative;
    top: 0px;
}
.nav-item a{
       font-size: 15px;
      color: rgb(250, 248, 248);
      
   }
.nav-item a:hover{
    color: white;
}

.head{
	color:rgb(6, 7, 7);
	font-weight:400;
    font-size: 12px;
    padding: 5px;
}

 
.follow {
    color: #121212;
    font-size: 42px;
    position: relative;
    right: 20px;
    bottom: 17px;
  }
  .con{
    margin: 5px;
    position: relative;
    left: 100px;
}
.us{
    color: white;
    font-size: 14px;
    margin-inline: 5px;
    position: absolute;
    z-index: 999;
    top: 20px;
    left: 360px;
}
.us i{
    margin-inline: 5px;
}

.color{
    background-color: black;
   height: 28px;
}
  
   
.icon{
    float: right;
    position: relative;
    top: 5px;
   
}
.get a{
    text-decoration: none;
    color: white;
    background-color: #6bbe4c;
    padding: 10px 18px;
    border-radius: 5px;
    position: relative;
    top: 8px;
    
    margin: 5px;
} 

.get a:hover{
   background-color: darkcyan;
   color: white;
}

.line {
	position:relative;
	left: 200px;
    bottom: 50px;
}
.line1 {
    position:relative;
    right: 200px;
    
}
.about p{
    color: gray;
    font-size: 16px;
}
.exp{
  background-color:darkcyan;
  padding: 20px 50px;
  border-radius: 20px;
}
.exp h1{
    color: white;
    font-size: 30px;
    font-weight: 600;
}
.exp span{
    color: white;
    font-size: 20px;
}
.vision {
   color: gray;
    font-size: 16px;
}
.overview p{
  background-color: lightgreen ;
  color: darkcyan;
  width: 100px;
  border-radius: 15px;
  padding:5px ;
   }

.overview span{
    color: #6bbe4c;
}

.view p{
    color: gray;
    font-size: 16px;
}

.tablink {
  background-color: darkcyan; /* Default background color */
    color: white; /* Text color */
    height: 50px; /* Button height */
    width: 257px; /* Button width */
    border: none; /* Remove default border */
    border-top-left-radius: 20px; /* Rounded top-left corner */
    border-top-right-radius: 20px; /* Rounded top-right corner */
    border-bottom: 4px solid #6bbe4c; /* Green bottom border */
    cursor: pointer; /* Pointer cursor for interactivity */
    font-size: 16px; /* Improve readability */
    transition: background-color 0.3s, transform 0.2s; 

}
.tablink:hover{
     background-color: #5a9e8d; /* Slightly lighter color on hover */
    transform: translateY(-4px); /* Subtle lift effect */
}

.make{
    background-color: white;
    width: 100%;
    border-radius: 10px;
    box-shadow: 1px 1px 10px grey;
}
.make:hover{
    background-color:rgb(72, 42, 208);;
    cursor: pointer; 
}
 
.make p:hover{
    color: white;
}
 
.make p{
  font-size: 14px;
  color: gray;
  padding: 10px;
}
.make a{
    text-decoration:none;
    color: gray;
}
.view{
   position: relative;
      z-index: 4; 
      bottom:40px;  

}
.plus{
    background-color: lightgreen;
    border-radius: 20%;
     width:80px;
     height:80px;
     animation: rotation 6s infinite linear;
     position: relative;
      z-index: 2;
      top: 30px;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.why i{
    font-size: 20px;
  background-color: rgb(72, 42, 208);;
  padding: 7px;
  width: 35px;
  border-radius: 50%;
  position: relative;
  top: 10px;
}
.why h2{
    font-size: 25px;
    font-weight: 600;

}
.why p{
    font-size: 16px;
    color: grey;
}
.image img{
    border-radius: 20px;
}

.back{
    background-color: darkcyan;
    width:70%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
 
.business {
    background-color: darkcyan; /* Default background color */
    color: white; /* Text color */
    height: 50px; /* Button height */
    width: 257px; /* Button width */
    border: none; /* Remove default border */
    border-top-left-radius: 20px; /* Rounded top-left corner */
    border-top-right-radius: 20px; /* Rounded top-right corner */
    border-bottom: 4px solid #6bbe4c; /* Green bottom border */
    cursor: pointer; /* Pointer cursor for interactivity */
    font-size: 16px; /* Improve readability */
    transition: background-color 0.3s, transform 0.2s; /* Smooth transitions for hover and click effects */
}

.business:hover {
    background-color: #5a9e8d; /* Slightly lighter color on hover */
    transform: translateY(-4px); /* Subtle lift effect */
}

.business:active {
    transform: translateY(0); /* Reset lift on click */
    background-color: #4a8d7c; /* Darker color on active click */
}

.business.active {
    background-color: #6bbe4c; /* Highlighted color for active button */
    color: black;  
}

.retails h3{
    color: darkcyan;
    font-size: 23px;
}
.retails p{
    color: gray;
    font-size: 16px;
     }
.retails li {
     color: grey;
     line-height: 30px;
} 
 

.counter-container {
  font-size: 25px; 
  font-weight: 600;

}

.counter-container span{
    font-size: 16px;
    font-weight: 600;

}
.checked {
  color: orange;
}
.circle{
    border-radius: 50%;
}
.text{
    background-color: white;
    box-shadow: 1px 1px 5px grey;
    height: 250px;
    border-radius: 10px;
}
.enquire{
    height: auto;
    width: 100%;
    background-color: lightgreen;
    border-radius: 10px;
    box-shadow: 2px 2px 10px lightcoral;
    padding: 15px;
    line-height: 40px;
}
.follow_us span{
   color: gray;
}
.follow_us i{
  border: 2px solid grey;
  padding: 3px;
  border-radius: 10px;

}
.follow_us i:hover{
  background-color:#6bbe4c;
  padding: 3px;
  border-radius: 10px;

}

.link li{
    list-style: none;
    line-height: 30px;
}
.link a{
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    color: gray;

}
.link a:hover{
    color:#6bbe4c ;
    position: relative;
    left: 10px;
    font-size: 17px;
    transition: 2s;
}
.link h5{
    font-size: 25px;
    font-weight: 500;
    color: darkcyan;
}

.logo{
    color: gray;
    font-size: 16px;
     
}
.address h5{
    color: darkcyan;
    font-size: 25px;
}
.address {
    color: gray;
    
}

.dhan{
    position: relative;
    left: 100px;
    bottom: 24px;
}
.email{
    position: relative;
    
    bottom: 14px;
}
.copy{
    position: relative;
    top: 7px;
    font-size: small;
}
 

@media all and (min-width: 992px) {
    .navbar .dropdown-menu-end{ 
        left:auto; 

}

.navbar .nav-item .dropdown-menu{ 
     display:block; 
     opacity: 0;  
     visibility: hidden; 
     transition:.5s; 
     margin-top: 0;
     line-height: 30px;

    }


.navbar .dropdown-menu.fade-up a{ 
    transform-origin: 0% 0%;   
    font-size: 12px;
    font-weight: 550; 
    font-family: "Inter", sans-serif;
      color: black;
    background: 
    linear-gradient(90deg,lightgreen 50%,white 0) 
    var(--_p,100%)/200% no-repeat;
     -webkit-background-clip: background;
          background-clip: background;
    transition: .5s; 

}
.navbar .dropdown-menu.fade-up a:hover{ 
  --_p: 0%;
  border-radius: 3px;
  color: darkcyan;
}

.navbar .dropdown-menu.fade-up{
     top:200%;  
    }

.navbar .nav-item:hover .dropdown-menu{
     transition: .4s; 
     opacity:9; 
     visibility:visible; 
     font-weight: 400; 
     top:100%;
    padding:0px;
    width: 280px; 
    
    }
}


@media all and (max-width:992px) {
    .banner h1{
       padding: 20px;
       font-size: 25px;
    }
    .banner p{
        font-size: 14px;
    }
    .banner strong{
        position: relative;
        top: 10px;
    }
    .why h2{
        font-size: 20px;
    }
    .why p{
        font-size: 14px;
    }
    .business span{
        font-size: 14px;
        padding: 5px;
        line-height: 30px;
    }
    .text{
    background-color: white;
    box-shadow: 1px 1px 5px grey;
    height: 290px;
    border-radius: 10px;
}

    .business{
        width: 100%;
        height: 50px;
        margin: 5px;
    }
    .tablink{
         width: 100%;
        height: 50px;
        margin: 5px;
    }
    .make{
        height: 200px;
    }
    .dhan{
        position: relative;
        left: 100px;
        bottom: 24px;
    }
    .us{
        color: white;
        font-size: 13px;
        margin-inline: 5px;
        position: absolute;
        z-index: 999;
        top: 20px;
        left: 150px;
    }
    .con{
        font-size: 14px;
        position: relative;
        left: 20px;
    }
    .make p{
        font-size: 14px;
        color: gray;
        padding: 10px;
        position: relative;
        bottom: 8px;
      }
}