* {
	margin: 0;
	padding: 0;
}

html,
body {
	height: auto;
	margin: 0;
    overflow-x: hidden;
    
}
body {
	margin: 0;
	padding: 0;   
    overflow-x: hidden;    
   
}

/* whatsapp icon */

.whatsapp{
	width: 60px;
    height: 60px;
    z-index: 1999;
    position: fixed;
    bottom: 20px;
    right: 15px;
    background-color: #ffffff;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    border: 2px solid  #55030e;
    box-shadow: 2px 2px 7px black;
    transition: all 0.4s ease;
    animation-name: example;
    animation-duration: 4s;
}
@keyframes example {
	0%   {right:15px; bottom:20px;}
	25%  {right:15px; bottom:35px;}	
	50%  {right:15px; bottom:20px;}
	75% {right:15px; bottom:37px;}
	100% {right:15px; bottom:20px;}
  }
.whatsapp:hover{
	background-color: #55030e;	
	border: 2px solid #01fca8;	
}
.whatsapp img{	
	max-width: 65%;   
	padding: 10px;
}

/* header section  */

#header {		
    height: auto;
    width: 100%;    
    position: fixed;
    z-index: 101;    
    background: rgb(252, 247, 247);    
}


 
#sub_header{
    width: 94%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin: auto;  
    border-bottom: 2px solid orange;  
}
.logo{
    width: 18%;
    /* background: white; */
}
.logo img{
 max-width: 100%;
}

.navbar {
	background: transparent;
    margin: 0;
	height: auto;
    width: 50%;
    
   
}
#nav{
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 margin: auto;    
}
#nav li {	
    list-style: none;
    display: inline-block;
    margin: 0px 10px;
    
    

}
#nav li a {	
    font-size: 19px;
    font-weight: 600;
    cursor: pointer;
    color: rgb(0, 0, 0);
    text-transform: capitalize;
    text-decoration: none;
    letter-spacing: 1px;
    position: relative;
    font-family: Bahnschrift;
}
#current{
  color: rgb(126, 125, 125) !important;   
}
#nav li a:hover{
    color: rgb(125, 125, 126);
}
.for_dropdown{
    position: relative;
}
.dropdown{
    position: absolute;
    width: 220px;
    top: 22px;
    color: black;
    z-index: 1000;
    padding: 10px;
    background-color: #fff;
    border-left: 1px solid gray;

    display: none;    
    transition: all 0.3s ease ;

}
.for_dropdown:hover .dropdown{
    display: block;
    transition: all 0.3s ease ;
}

.dropdown li {
	width:100% !important;
    font-size: 11px !important;
    padding: 7px !important;
    	
}
.navA:after {    
  content: '';
  position: absolute;  
  width: 100%;
  transform: scaleX(0);
  border-radius: 5px;
  height: 0.05em;
  bottom: -3px;
  left: 0;  
  background: rgba(255, 68, 0, 0.849);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
  }
  a:hover:after { 
    transform: scaleX(1);
    transform-origin: bottom left; 
  }
  .call{
    color: white;
    width: 19%;
  }
  .call_now{
    color: white;
    width: 10%;
    display: none;
    
  }
  .call_now h3{
    border-radius: 15px;
    border: 1px dotted rgba(255, 166, 0, 0.719);
    padding: 10px 8px;
    cursor: pointer;
    text-align: center;
  }
  .call{
    color: rgb(10, 128, 238);
  }
  .call a{
    color: rgb(10, 128, 238);
    list-style: none;
    text-decoration: none;
    font-family: Bahnschrift;
  }


  /* menu togell start  */

.mobile-navbar-btn{
    display: none;
    cursor: pointer;
    background: transparent;
}
.mobile-nav-icon{
    width: 2rem;
    height: 2rem;
    color: orangered;  
    cursor: pointer;
}
.mobile-nav-icon[name="close-outline"]{
    display: none;
}




  
  /* footer  */

  #footer{
    width: 100%;
    height: auto;
    padding: 150px 0px;
    overflow: hidden;
   
    color: white;
     background: url(../img/footer-bg-both-grey.png.webp);
    background-position: center;
    background-size: cover;
    position: relative;
  }
  #footer::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;    
    background-color: rgb(16, 42, 67);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    top: 0;
    left: 0; 
    z-index: -1;
  }
  .footer_overlay img{
    max-width: 100%;
  }
  .sub_footer{
    width: 73%;
    height: auto;
    overflow: hidden;
    margin: auto;

    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0px 40px;  
  }
  
  .detalis{
    width: 35%;
    height: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    text-align: left;
  }
  .footer_p{
    color: #000000;
    padding: 5px 20px;    
   font-style: 18px;
   color:#fff;
   line-height:1.3rem;
   font-family: sans-serif;
  }
.detalis img{
  max-width: 90%;
}
.detalis i{
    color: orangered;
}
.detalis h2{
    padding: 20px 0px 10px 0px;
    font-family: Bahnschrift;
}
.detalis span{
    padding: 7px;
}
.detalis i{
    padding: 0px 10px 0px 10px;
}
.detalis span a{
    color: gray;
    text-decoration: none;  
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer; 
}
.detalis span a:hover{
    color: rgba(255, 68, 0, 0.849);
    transition: 0.5s ease-in-out;
    cursor: pointer;
}
.detalis span:hover i{
    color: gray;
    transition: 0.5s ease-in-out;
}


/* develop footer  */

#develop_footer{
    width: 100%;
    height: auto;
    padding: 20px 0px;
    background-color: #eee;
   
}
.under_footer{
    width: 70%;
    height: auto;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: auto;

}
.design_authorized a{
    color: orangered;
}
.social_icon{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;   
}
.social_icon a{
    width: 30px;
    height: 30px;
    overflow: hidden;
    text-align: center;   
    margin: 0px 5px;
    color: #000000;
    font-size: 20px;
}
.social_icon a:hover i{
    color: orangered;
    transition: all 0.6s ease-in-out;
}

/* Home page start  */



  /* #banner */

  #banner{
    width: 100%;
    height: auto;   
    
  }

  .carousel{
    width: 100%;
    height: 60vh;
    overflow: hidden;
    position: relative;
    
}

.carousel .list .item{
    position: absolute;
    inset: 0 0 0 0;    
}
.carousel .list .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel .list .item .content{
    position: absolute;
    top: 20%;
    width: 1140px;
    max-width: 80%;
    left: 50%;
    transform: translateX(-50%);
    padding-right: 30%;
    box-sizing: border-box;
    color: #fff;
   
}
.carousel .list .item .content .author{
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: capitalize;
    text-shadow: none;
    color: #000000;
}
.carousel .list .item .content .des{
    color: #000000;
    background-color: rgba(245, 245, 245, 0.671);
    padding: 5px 7px;
}
.carousel .list .item .content .title,
.carousel .list .item .content .topic{
    font-weight: bold;
    font-size: 4em;
    list-style: 0.6em;  
    text-transform: uppercase;
    color: #1d04a7;
    text-shadow: 0px 2px 5px rgb(107, 13, 0);
    font-family: Gadugi;
}

.carousel .list .item .content .buttons{
    display: grid;
    grid-template-columns: repeat(2, 130px);
    grid-template-rows: 48px;
    gap: 5px;
    margin-top: 7px;
}
.carousel .list .item .content button{
    border: none;
    color: white;
    background-color: rgb(5, 92, 173);
    letter-spacing: 2px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 500;
    cursor: pointer;
    border-radius: 5px;
}
.carousel .list .item .content button a{
    list-style: none;
    text-decoration: none;
    color: #01fca8;
    font-size: medium;
}
.carousel .list .item .content button:hover a{
    color: white;
    transition: all 0.7s ease-in-out;
}
.carousel .list .item .content button:nth-child(2){
    background-color: transparent;
    color: #eee;
    border: 1px solid #eee;
}

.thumbnail{
    position: absolute;
    bottom: 50px;
    left: 60%;
    width: max-content;
    z-index: 100;
    display: flex;
    gap: 20px;
}
.thumbnail .item{
    width: 150px;
    height: 220px;
    flex-shrink: 0;
    position: relative;   
    box-shadow: 1px 11px 12px black
}
.thumbnail .item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;  
}
.thumbnail .item .content{
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    color: white;
}
.thumbnail .item .content .title{
   font-weight: bold;
}

.arrows{
    position: absolute;
    top:80%;
    right: 63%;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 10px;
    align-items: center;
}
.arrows button{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #eee4;
    border: none;
    color: #fff;
    font-weight: bold;
    font-size: large;
    transition: .5s;
    z-index: 100;
    box-shadow: 1px 0px 12px black;
}
.arrows button:hover{
    background-color: #eee;
    color: #555;
}

.carousel .list .item:nth-child(1){
    z-index: 1;
}
.carousel .list .item:nth-child(1) .author,
.carousel .list .item:nth-child(1) .title,
.carousel .list .item:nth-child(1) .topic,
.carousel .list .item:nth-child(1) .des,
.carousel .list .item:nth-child(1) .buttons{
  transform: translateY(50px);
  filter: blur(20px);
  opacity: 0;
  animation: showContent 0.5s 1s Linear 1 forwards;
}
@keyframes showContent{
    to{
       opacity: 1;
       filter: blur(0);
       transform: translateY(0); 
    }
}
.carousel .list .item:nth-child(1) .title{
    animation-delay: 0.8s;
}
.carousel .list .item:nth-child(1) .topic{
    animation-delay: 1.0s;
}
.carousel .list .item:nth-child(1) .des{
    animation-delay: 1.2s;
}
.carousel .list .item:nth-child(1) .buttons{
    animation-delay: 1.4s; 
}

.carousel.before .list .item:nth-child(1) img{
    width: 150px;
    height: 220px;
    position: absolute;
    left: 60%;
    bottom: 50px;
    border-radius: 20px;
    animation: showImage 0.5s linear 1 forwards;
}
@keyframes showImage{
    to{
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: 0;
    }
}

.carousel.before .thumbnail .item:nth-last-child(1){
    width: 0;
    overflow: hidden;
    animation: showThumbnail .5s linear 1 forwards;    
}
@keyframes showThumbnail{
    to{
        width: 150px;
    }
}
.carousel.before .thumbnail{
    transform: translatex(150px);
    animation: transformThumbnail .3s linear 1 forwards;
}
@keyframes transformThumbnail{
    to{
        transform: translateX(0);
    }
}


.carousel.after .list .item:nth-child(2){
   z-index: 2;  
}
.carousel.after.list .item:nth-child(2) img{
    position: absolute;
    bottom: 0;
    left: 0;
    animation: outImage 0.5s linear 1 forwards;
 }
 @keyframes outImage{
    to{
        width: 150px;
        height: 220px;
        border-radius: 20px;
        left: 60%;
        bottom: 50px;
    }
 }
 .carousel.after .thumbnail .item:nth-child(1){
    width: 0;
    overflow: hidden;
    opacity: 0;
    animation: showThumbnail .5s linear 1 forwards;    
}
.carousel.after .list .item:nth-child(2) .author,
.carousel.after .list .item:nth-child(2) .title,
.carousel.after .list .item:nth-child(2) .topic,
.carousel.after .list .item:nth-child(2) .des,
.carousel.after .list .item:nth-child(2) .buttons{  
  animation: contentOut 1.5s Linear 1 forwards;
}
@keyframes contentOut{
    to{
        transform: translateY(-150px);
        filter: blur(28px);
        opacity: 0;
    }
}
.carousel.before .arrows button,
.carousel.after .arrows button{
   pointer-events: none; 
}
.time{
    width: 0%;
    height: 2px;
    background-color: orange;
    position: absolute;
    z-index: 100;
    bottom: 0;
    left: 0;
}
.carousel.before .time,
.carousel.after .time{
    width: 100%;
    animation: timeRunning 2s linear 1 forwards;
}
@keyframes timeRunning{
    to{
        width: 0;
    }

}
  
/* about */

#about{
    width: 100%;
    height:auto;
    padding: 20px 0px;
    text-align: center; 
    overflow: hidden;  
    position: relative;
    background-color: #ffffff;     
}
#about ::before{
   width: 80px;
   height: 100%;
   position: absolute;
   content: "";
   left: 0;
   top: 0;

   background-image: url(../img/ABOUT_BEFORE.png);
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   background-repeat: repeat-y;
   opacity: 0.10 !important; 
   animation-name: just;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: infinite;   
}
#about ::after{
    width: 80px;
    height: 100%;
    position: absolute;
    content: "";
    right:0;
    top: 0;
 
    background-image: url(../img/ABOUT_BEFORE.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-repeat: repeat-y;
    opacity: 0.10 !important; 
    animation-name: just1;
   animation-duration: 4s;
   animation-delay: 2s;
   animation-iteration-count: infinite;   
 }
@keyframes just {
    0%   { left:0px; top:0px;}
    25%  { left:0px; top:10px;}
    50%  { left:0px; top:0px;}
    75%  {left:0px; top:10px;}
    100% {left:0px; top:0px;}
  }
  @keyframes just1 {
    0%   { right:0px; top:0px;}
    25%  { right:0px; top:10px;}
    50%  { right:0px; top:0px;}
    75%  {right:0px; top:10px;}
    100% {right:0px; top:0px;}
  }

#about_us{
    width: 70%;
    height: auto;
    margin: auto;
    padding: 40px 20px;
      

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;    
}

.video{
    width: 38%;
    height: 400px; 
   background: transparent; 
   border: 5px solid white;  
   transition: transform .2s;
}
.video img{
    max-width: 100%;
    transition: transform .2s;
}
.video:hover img{
    transform: scale(1.1);
}

.about_text{
    width: 58%;  
    background: transparent;
    color: white;
    text-align: left;
    justify-content: center;     
}
.about_btnH{
    padding: 20px 40px;
    background-color: #1968b3;
    border: none;
    border-radius: 0px;
    margin-top: 40px;   
    cursor: pointer;     
}


.about_btnH a{
    color: #fff;
    font-weight: 700;
    font-size: large;
    text-decoration: none;         
}

.about_btnH:hover{
    background-color: orange;
    transition: all 0.7s ease-in;
}



#about h2{
    color:#1968b3;
    text-transform: capitalize;  
    font-size: 40px; 
    font-family: sans-serif; 
}
.about_p{
   font-family: Franklin Gothic Medium;
   font-size: medium;
   color: gray;
   letter-spacing: 1px;

}
.about_text h3{
    color: #1968b3;
    font-family: Lucida Sans Unicode;
}


/* SERVICES  */


 #services{
    width: 100%;
    height: auto;
    padding: 20px 0px;
    background-color:  #102a43;  
 }
 #services h2{     
    letter-spacing: 1px;
    font-size: 40px;
    text-align: center;
    color: #fff;   
    font-family: sans-serif !important; 
}
.services_p{
    color: gray;
    text-align: center;
    font-size: 18px;
    padding: 10px 0px;
    font-family:Lucida Sans Unicode;
}
.service_box{
 width: 85%;
 height: auto;
 overflow: hidden;

 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 margin: auto; 
 gap: 40px;
 padding: 30px 0px;
}

.single-service{
width: 28%;
text-align: center;
height: auto;
overflow: hidden;
padding: 0px 0px 20px 0px;

display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin: auto;
border: 7px solid whitesmoke;
background-color: whitesmoke;
transition: all 0.8s ease-in-out;

}

.single-service img{
    max-width: 100%;       
}
.single-service h3 a{    
    color: black;
    font-weight: 500 !important;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    letter-spacing: 0.8;
    font-size: 25px;
    padding: 5px;   
}
.single-service h3 a:hover{
    color: #ec0505;
}


/* products  */

#products{
    width: 100%;
    height: auto;
    color: rgba(240, 248, 255, 0.548);
    padding: 40px 0px;
    overflow: hidden;
    position: relative;
    }
    .products_img{
      width: 15%;
      margin: auto;
      border-right: 2px solid rgba(255, 68, 0, 0.651);
      border-left: 2px solid rgba(255, 68, 0, 0.651);
      overflow: hidden;
      margin-bottom: 10px;
    }
    .products_img img{
        max-width: 100%;
    }
     
   
    #products::after{
        width: 140px;
        height: 100%;
        position: absolute;
        content: "";
        right:0;
        top: 0;
     
        background-image: url(../img/brand_BEFORE\ copy.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0.50; 
        animation-name: just1;
       animation-duration: 4s;
       animation-delay: 2s;
       animation-iteration-count: infinite;   
    }
    #products::before{
        width: 140px;
        height: 100%;
        position: absolute;
        content: "";
        left: 0;
        top: 0;
     
        background-image: url(../img/brand_BEFORE\ copy.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0.50; 
        animation-name: just;
       animation-duration: 4s;
       animation-delay: 2s;
       animation-iteration-count: infinite;   
     }
#products h1{
    text-align: center;
    font-size: 40px;
    color: #1968b3;
}
#products p{
    text-align: center;
    padding: 10px 450px;
    color: gray;
    font-family:Lucida Sans Unicode;
    
}

.sub_products{
    width: 80%;
    height: 380px;
    position: relative; 
    overflow: hidden; 
    margin: auto;   
  }

/* .sub_products1{
    width: 15%;
    height: 100px;
    position: relative; 
    overflow: hidden; 
    margin: auto;   
  } */
  

.slide{
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    transition: all 0.6s ease;
}

.slide img:not(#active){
    top:0;
    left:-100%;
}

span.next, span.prev{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    color: #ec0505;
    font-weight: bold;
    font-size: 32px;
    transition: 0.6s;
    border-radius: 5px;
    user-select: none;
    cursor: pointer;
    z-index: 1;
}
span.next{
    right: 30px;
}
span.prev{
    left: 30px;
}
span.next:hover, span.prev:hover{
    background-color: azure;
    opacity: 0.8;
    color: black;
}

@keyframes next1{
    from{
        left: 0%;
    }
    to{
        left: -100%;
    }
}
@keyframes next2{
    from{
        left: 100%;
    }
    to{
        left: 0%;
    }
}
 
@keyframes prev1{
    from{
        left: 0%;
    }
    to{
        left: 100%;
    }
}
@keyframes prev2{
    from{
        left: -100%;
    }
    to{
        left: 0%;
    }
}


/* factory  */

#factory{
    width: 70%;
    height: auto; 
    padding: 40px 0px;
    margin: auto;
    
    
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.fact_img{
    width: 40%;
    height: auto; 
}
.fact_img img{
    max-width: 100%;
    transition: transform .2s;
}
.fact_img:hover img{
    transform: scale(1.1);
}
.fact_text{
    width: 45%; 
    height: auto;
    overflow: hidden;        
}
.fact_text h4{
    color: #1968b3;
    font-size: 28px;
    font-family: sans-serif;
    text-transform: uppercase;    
}
.fact_text ul {
    list-style: square;
}
.fact_text ul li{    
    padding-top: 10px;   
    color: gray;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    list-style-position: inside;
}

/* blog */
.blog{
    width: 100%;
    height: auto;
    padding: 50px 0px;
    background-color:  #102a43;
    text-align: center;
}  
.blog h2{
    color: orange;
    padding: 0px 0px 40px 0px;
    font-weight: 700;
    font-size: 40px;
    font-family: sans-serif; 
}
.wrapper {
	max-width: 100%;
	overflow: hidden;
}

.box {
	position: relative;
	width: 75%;
	margin: 0 auto;
}
.slick-prev::before, .slick-next::before{
    color: rgba(255, 55, 0, 0.78);
}
 
.slide-container {
	height: 20vh;
	background-color: transparent;
	text-align: center;
	line-height: 20vh;
	font-size: 40px;
	font-weight: bold;
	border: 0;
	margin-bottom: 20px;
	box-sizing: border-box;
}

.b_slide {
	text-align: center;
	box-sizing: border-box;
	height: 515px;
	background-color: #fff;
	border: 1px solid #000;
	cursor: pointer;
	display: flex !important;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 20px;
	font-size: 30px;	
	transition: 0.5s all;
	transform: scale(0.9);
	opacity: 0;
    padding: 10px;


    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
}
.b_slide_img{
    width: 100%;
    height: auto;
    overflow: hidden;
}
.b_slide_vid{
    width: 100%;
    height: auto;
    overflow: hidden;
}
.b_slide_img img{
    max-width: 80%;
    margin-left: 35px;

}
.b_slide_vid video{
    max-width: 80%;
    margin-left: 35px;

}
.b_slide_text{
    text-align: justify;
    font-size: 25px;
    font-family: Arial;
    font-weight: 600;
    color: black;
    padding: 10px 7px 0px 7px;
    line-height: 30px;
}
.b_slide_p{
    text-align: justify;
    color: gray;
    font-size: 17px;
    line-height: 20px;
}
.b_slide_read{
    padding: 7px 10px;
    background: orange;
    border-radius: 7px;   
    border: none; 
}
.b_slide_read a{
    color: #fff;
    font-weight: 600;
    font-family:  sans-serif;
    text-decoration: none;
    cursor: pointer;
}
.b_slide .b_slide_read:hover{
    box-shadow: 2px 2px 5px gray;
    transition: .3s linear;
}
.slick-active  .b_slide {
		transform: scale(1);
	    opacity: 1;
}


.slick-slider .slick-list {
	overflow: visible;
}

.slick-arrow {
	z-index: 100;
}


 /* clients section  */
#clients{
    width: 100%;
    height: auto;
    padding: 50px 0px;
    background-color: #f7f7f9;
    text-align: center;
}
#clients h2{
    color: #1968b3;
    padding: 0px 0px 40px 0px;
    font-weight: 700;
    font-size: 40px;
    font-family: sans-serif; 
}
.wrapper {
	max-width: 100%;
	overflow: hidden;
    
}

.box_c {
	position: relative;
	max-width: 80%;
	margin: 0 auto;
}

.slide-container {
	height: 20vh;
	background-color: transparent;
	text-align: center;
	line-height: 20vh;
	font-size: 40px;
	font-weight: bold;
	border: 0;
	margin-bottom: 20px;
	box-sizing: border-box;
}

.s_slide {
	text-align: center;
	box-sizing: border-box;
	height: 12vh;
	background-color: transparent;
	border: 1px solid #000;
    color: #000;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;	
	font-size: 20px;	
	transition: 0.5s all;
	transform: scale(0.9);
	opacity: 0;   
    overflow: hidden;  
    padding: 10px;  
}
.s_slide img{
    max-width: 90%;
}

.slick-active  .s_slide {
		transform: scale(1);
	    opacity: 1;
}


.slick-slider .slick-list {
	overflow: visible;  
}

.slick-arrow {
	z-index: 100;
}
/* extra_footers */

.extra_footers {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 70%;
    margin: auto;
    align-items: first baseline;
    }
    .Locate_class {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    
/* Calculation */

#Calculation{
    width: 80%;
    margin: auto;
    height: auto;
    padding: 50px 0px;    
}

#output_sqft{
    width: 70%;
    margin: auto;
    overflow: hidden;
    background: transparent;  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
    border-radius: 20px 20px 0px 0px;
  }
  
  #output_sqft h1{
    padding: 0px;
    color: rgba(240, 248, 255, 0.548);
    text-transform: uppercase;
    font-size: 40px;
  }
  .form-inline{
    width: 80%;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px 0px;
    gap: 30px;
   
  }
  .form-control{
    width: 32%;
    padding: 10px;
    color:rgb(255, 255, 255);
    border: none;
    font-size: 20px;  
    letter-spacing: .13rem;
   border-radius: 10px;
   transition: all .6s ease-in;
   margin-top: 10px;
   background: transparent;
   border-bottom: 1px solid orangered;
  }

  
  #multiply{
    width: 70%;
    padding: 10px;
    color:rgb(255, 255, 255);
    border: none;
    font-size: 20px;  
    letter-spacing: .13rem;
   border-radius: 10px;
   transition: all .6s ease-in;
   margin-top: 10px;
   background: transparent;
   border-bottom: 1px solid orangered;
   transition: all .6s ease-in;
   text-transform: uppercase;
   color: gray;
  }
  #multiply:hover{ 
    color: rgb(0, 183, 255); 
    cursor: pointer; 
  }
  .form-group{
    width: 80%;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .form-controls{
    width: 70%;
    padding: 10px;
    color:rgb(255, 255, 255);
    border: none;
    margin: auto;
    font-size: 20px;  
    letter-spacing: .13rem;
   border-radius: 10px;
   transition: all .6s ease-in;  
   background: transparent;
   border-bottom: 1px solid orangered;
  
  }
  
  
  #sqft{
    width: 70%;
    margin: auto;
    overflow: hidden;
    background: transparent; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    padding: 30px 0px;
    color: rgba(240, 248, 255, 0.548);
    text-transform: uppercase;
    font-size: 30px;    
  }
  
  #sqft p{
    width: 70%;
    margin: auto;
    padding: 10px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
  }
  #num-one{
    width: 32%;
    padding: 10px;
    color:rgb(255, 255, 255);
    border: none;
    margin: auto;
    font-size: 20px;  
    letter-spacing: .13rem;
   border-radius: 10px;
   transition: all .6s ease-in;  
   background: transparent;
   border-bottom: 1px solid orangered;
  }
  .Required{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: auto;
  }
  /* #num-two{} */
  
  #add-sum{
    width: 100% !important;  
    padding: 0px !important;
    color: orangered !important;
    height: 40px;
    
  }


/* home page end  */














/* about page start  */

/* about banner  */

#about_page{
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center; 
    background-color: #00162a;
    padding-bottom: 50px;
    position: relative;
}

#about_page::before{
    width: 140px;
    height: 100%;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
 
    background-image: url(../img/ABOUT_BEFORE.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-repeat: repeat-y !important;
    opacity: 1; 
    animation-name: just;
   animation-duration: 4s;
   animation-delay: 2s;
   animation-iteration-count: infinite;   
 }
 #about_page::after{
     width: 140px;
     height: 100%;
     position: absolute;
     content: "";
     right:0;
     top: 0;   
      
  
     background-image: url(../img/ABOUT_BEFORE.png);
     background-position: center;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: repeat-y !important;
     opacity:1; 
     animation-name: just1;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count: infinite;   
  }
.about_page_img{
    width: 100%;
    height: 600px;
     overflow: hidden;
     margin: auto;
     z-index: 1;

     background: url(../img/aboutpage_img.jpg);
     background-position: bottom !important;
     background-size: cover;
     position: relative; 
     background-attachment: fixed;  
}
.about_page_img::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.349);    
    z-index: 1;
    left: 0;
    top: 0;
}

/* about text  */


.about_page_text{
    width: 80%;
    height: auto;
    padding: 40px 0px;
   

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    margin: auto;
    }
    .res_dev_sec{
        width: 80%;
        height: auto;
        padding: 40px 0px;
       
    
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: auto;        
        }
.about_page_text h1{
    color: rgba(245, 222, 179, 0.685);
    text-align: center;
    text-transform: uppercase;
    font-family: sans-serif;
}
.res_dev_text{
    width: 60%;
    height: auto;
    padding: 40px 0px;
   

    display: flex;
    flex-direction: column;
    justify-content: center;    
}
.res_dev_video{
    width: 30%;
    height: 320px;
    border-radius: 20px;    
    overflow: hidden;
}
.res_dev_img{
    width: 30%;
    height: auto;
    border-radius: 20px;    
    overflow: hidden;
}
.res_dev_img img{
    max-width: 100%;   
}
.res_dev{
font-size: 40px;
color: #fff !important;
font-family: sans-serif;
}
.about_us_p{
    color: rgba(255, 255, 255, 0.685);
    text-align: center;   
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 10px; 
    width: 70%;
    margin: auto;
}
.res_dev_p{
    color: rgba(255, 255, 255, 0.685);
    text-align: center;   
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 10px; 
    width: 70%;
    margin: auto;
}


/* reach sec  */


.reach{
    width: 70%;
    height: auto;
    padding: 0px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    overflow: hidden;

}
.reach_text{
    width: 50%;
    height: auto;
    padding: 0px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    margin: auto;
    overflow: hidden;
}
.reach_h{
font-size: 40px;
color: #fff !important;
font-family: sans-serif;
text-transform: capitalize;
}
.reach_img{
    width: 45%;
    height: auto;
    padding: 0px;
    overflow: hidden;   
}
.reach_img img{
    max-width: 100%;
}

.about_btn{   
    width: 150px;
    outline: none;
    border: none;
    
    padding: 10px;   
    background-color: wheat;
    letter-spacing: 3px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 500;
    border-radius: 5px;
    color: red;
    cursor: pointer;
    bottom: 10px;
    left:49%;   
}
.about_btn a{
    text-decoration: none;
}
.about_btn:hover{
    background-color: rgba(222, 184, 135, 0.644);
    color: #000000;
    transition: all 0.5s ease-in-out;
}
.about_btn:hover a{   
    color: #ffffffee;
    transition: all 0.5s ease-in-out;
}





/* Milestones  */
.Milestones{
    width: 100%;
    height: auto;
    padding: 70px 0px;
    background-image: url(../img/footer-bg-both-grey.png.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;


    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.miles_h{
    text-align: center;
    font-size: 30px;
color: #000000 !important;
font-family: sans-serif;
text-transform: capitalize;
}
.Milestones img{
    max-width: 70%;
    text-align: center;
    padding: 40px 0px;
}


/* Why_Choose  */
.Why_Choose_sec{
    width: 100%;
    height: auto;
    background-color: #00162a;
    padding: 20px 0px;
    position: relative;
}
.Why_Choose_sec::before{
    width: 140px;
    height: 100%;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
 
    background-image: url(../img/ABOUT_BEFORE.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-repeat: repeat-y !important;
    opacity: 1; 
    animation-name: just;
   animation-duration: 4s;
   animation-delay: 2s;
   animation-iteration-count: infinite;   
 }
 .Why_Choose_sec::after{
     width: 140px;
     height: 100%;
     position: absolute;
     content: "";
     right:0;
     top: 0;   
      
  
     background-image: url(../img/ABOUT_BEFORE.png);
     background-position: center;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: repeat-y !important;
     opacity:1; 
     animation-name: just1;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count: infinite;   
  }
.Why_Choose{
    width: 70%;
    height: auto;
    padding: 0px;   

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    overflow: hidden;
}
.Why_Choose_img{
    width: 45%;
    height: auto;
    padding: 0px;
    overflow: hidden;
}
.Why_Choose_img img{
    max-width: 100%;
}
.Why_Choose_text{
    width: 50%;
    height: auto;
    padding: 0px;

    display: flex;
    flex-direction: column;
    justify-content: center;    
    margin: auto;
    overflow: hidden;
    text-align: left;
    
}
.Why_Choose_text h1{
    color: gray;
    font-weight: 600;
    padding: 5px 0px;

}
.Why_Choose_text h4{
    color: orange;
    font-weight: 300;
}
.Choose_us_p{
    color: rgba(255, 255, 255, 0.685);
    text-align: left;   
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 10px;     
    margin: auto;
}


/* services page  */

/* services banner  */

#services_page{
    width: 100%;
    height: auto ;
    margin-top: 50px;
}
.services_banner{
    width: 100%;
    height: 500px;  
    overflow: hidden; 
    position: relative; 
}
.services_banner_overlay{   
    width: 40%;
    height: auto;
    left: 30%;
    top: 30%;
    position: absolute;    
    z-index: 2;
    text-align: center;
    overflow: hidden;
    padding: 40px 0px;
    background-color: #00000091;


}
.services_banner_overlay p{
    color: #eee;
    font-size: 30px;
    letter-spacing: 1px;
    font-family: "Dancing Script", cursive;
    
}
.services_banner_overlay h1{
    color: wheat;
    font-size: 50px;
    letter-spacing: 1px;
    font-family: "Poetsen One", sans-serif;
    font-weight: 600;    
}
.services_banner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* how it work  */
#how_it_work{
    width: 100%;
    height: auto;
    text-align: center;
    background-color: #00162a;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 0px;
}
#how_it_work::before{
    width: 140px;
    height: 100%;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
 
    background-image: url(../img/ABOUT_BEFORE.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-repeat: repeat-y !important;
    opacity: 1; 
    animation-name: just;
   animation-duration: 4s;
   animation-delay: 2s;
   animation-iteration-count: infinite;   
 }
 #how_it_work::after{
     width: 140px;
     height: 100%;
     position: absolute;
     content: "";
     right:0;
     top: 0;   
      
  
     background-image: url(../img/ABOUT_BEFORE.png);
     background-position: center;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: repeat-y !important;
     opacity:1; 
     animation-name: just1;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count: infinite;   
  }

#how_it_work h1{
    color: #fff;
    font-size: 30px;
    font-family: sans-serif;
    text-transform: capitalize;
    }
.how_it_work_p{
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    
}
.ser_p{
    color: black;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    
}
.work_process{
 width: 65%;
 height: auto;
 margin: auto;
 padding: 60px 10px;
 overflow: hidden;


 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
}
.work_process_box{
    width: 330px;
    height: 230px;
    background-color: transparent;
    position: relative; 
    box-shadow: 0px 0px 5px #eee; 
    border-radius: 15px;   
     
}
.work_process_box:hover{
    box-shadow:none;
    transition: 2s ease; 
}

.work_process_icon{
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background-color: transparent;     
    top: 50%;
    left: 50%;     
    transform: translateX(-50%) translateY(-50%);    
    border: 2px solid orangered; 
    z-index: 2; 
    transition: 2s linear;     
}
.work_process_icon i{
    color: #eee; 
    font-size: 40px;  
    padding: 24px;  
}
.work_process_box:hover .work_process_icon{    
    left: 50%;
    top:0%;  
    background-color: orangered;  
    transition: 1s;  
}
.work_process_text{
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0; 
 background-color: #fff;
 display: none; 
 overflow: hidden;
 border-radius: 15px;
}
.work_process_text h3{
 width: 50%;
 overflow: hidden;
 font-size: 30px;
 margin: 25% 0% 0% 25%;
 text-transform: uppercase;  
 font-family: Bahnschrift;
}
.work_process_text_h3{
    font-size: 20px !important;
    margin: 20% 0% 0% 20% !important;
    width: 60% !important;
}
 
.work_process_text_p{    
    color: orangered; 
    padding: 4px 8px; 
    font-weight: 400;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.work_process_box:hover .work_process_text{
    display: block; 
    border: 2px solid orangered;
    transition: 5s ease;     
}

#service_detalis{
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.247);
    text-align: center;
    padding: 30px 0px;
}
#service_detalis h1{
    font-family: sans-serif;
    text-transform: capitalize;
    color: #00162a;   
    font-size: 40px;
    }

.service_detalis_box{
    width: 70%;
    height: auto;
    margin: auto;
    overflow: hidden;
    padding: 30px 0px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
}
.service_single_box{
    width: 28%;
    height: auto;
    overflow: hidden;    
    background-color: rgb(255, 255, 255);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: auto;
    padding: 5px;
        
}
.service_single_box_img{
    width: 100%;
    height: auto;    
}
.service_single_box_img img{
    max-width: 100%;
}
.service_single_box_img a{
    text-decoration: none;
}

.service_single_box_img a h2{
    color: red ;
    text-transform: uppercase;
    font-size: 21px;
    text-align: left;
    padding: 3px 7px;
    text-decoration: none;
}
.service_single_box_img a:hover h2{
    color: rgb(1, 14, 133);
    transition: 1s linear;
}
.provide_service_text{
    text-align: left;
    padding:5px 10px;
    color: #444343;
    font-size: 15px;
}
.service_single_box:hover{
    box-shadow: 2px 2px 14px rgb(5, 0, 0);  
    transition: 1s ease-in-out;  
}


.service_video{
    width: 85%;
    height: 300px;
    position: relative; 
    overflow: hidden; 
    margin: auto; 
    margin-top: 30px;
    margin-bottom: 30px;
  }




/* products page  */

/* products banner section  */

#products_page{
    width: 100%;
    height: auto ;
    margin-top: 50px;
}
.products_banner{
    width: 100%;
    height: 500px;  
    overflow: hidden; 
    position: relative; 
}
.products_banner_overlay{   
    width: 40%;
    height: auto;
    left: 10%;
    top: 30%;
    position: absolute;
    z-index: 2;
    text-align: center;
    overflow: hidden;
    padding: 50px;
    background-color: #0000004f;
    border-radius: 10px;
    box-shadow: 0px 0px 20px #ffffff6b;

}
.products_banner_overlay p{
    color: #eee;
    font-size: 25px;
    letter-spacing: 1px;
    text-align: left;
    font-family: "Dancing Script", cursive;
    
}
.products_banner_overlay h1{
    color: wheat;
    font-size: 70px;
    letter-spacing: 1px;
    font-family: "Poetsen One", sans-serif;
    font-weight: 600; 
    text-align: left;  
}
.products_banner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* product bucket section  */

#products_bucket{
	width: 100%;
    height: auto;
    overflow: auto;
    margin-top: 110px;
    			
}
.products_bucket_in{
    width: 90%;
    height: auto;
    margin: auto;    
    position: relative;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding: 40px 0px;
   
}

/* singal box  */

.products_bucket_in_sec{
 width: 48%;
 height: auto;
 overflow: hidden;


 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center; 
 animation: fadeInBottom 1.5s ease-in-out;
}
@keyframes fadeInBottom {
    from {
      opacity: 0;
      transform: translateY(-300px);
    }
    to {
      opacity: 1;
    }
  }
/* bucket img  */


.products_bucket_in_sec_img{
    width: 44%;
    height: auto;
    overflow: hidden;
}
.products_bucket_in_sec_img img{
    max-width: 100%;
}


/* boucket text section  */


.products_bucket_in_sec_text{
    width: 54%;
    height: auto;
    
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
}
.products_bucket_in_sec_text h2{
    color: #000000;
}
.products_bucket_in_sec_text h5{
    color: #000000;
    font-family: "Dancing Script", cursive;
    font-size: 16px;
}
.products_p{
    color: gray;
    padding: 7px 0px;
}
.botton_box{
    width: 100%;  
    padding: 7px;  
}
.btns{
    padding: 10px 15px;
    border-radius: 2px;
    border: none;
    cursor: pointer;
    background:transparent;
    border: 1px solid rgb(8, 105, 216);  
}
.btns a{
    color: #000000;
    text-decoration: none;
}

.btns:hover{
background-color: rgb(8, 105, 216);
transition: .4s linear;
}
.btns:hover a{
    color: #eee;
    transition: 1s linear;
}

/* products detalis  */

.Features {	
	width: 100%;
    height: auto;
	border: 1px solid rgba(128, 128, 128, 0.267);
	margin-top: 10px;
  }
  
  .Features_box {
	display: block;
	width: 96%;
	height: auto;	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	padding: 10px;
    overflow: hidden;    
    transition: 2s ease-in-out;
  }
  .Features_box #btn_h1{
	font-size: 20px;
    color: rgb(0, 0, 0);
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 1px;
    border: none;
    background-color: transparent;
  }  
  
.Features_overlay{
   width: 100%;
   height: 0%;  
   overflow: hidden;       
   top: 0;
   bottom: 0;
   padding: 10px 0px;
   transition: 2s ease-in-out;
   display: none;
}
.Features_overlay ul{
    list-style: none;
}
.Features_overlay ul, P{
    padding: 7px;
    color: rgb(1, 33, 136);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}




/* free_visite page  */

#free_visit{
    width: 100%;
    height: auto;
    margin-top: 9vh;
    background-image: url(../img/sitevisit-bg.png);
    background-position: center;
    background-size: cover;
    overflow: hidden;
}
.site_visit{
    width: 82%;
    height: 91vh;   

    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: space-between; 
    align-items: flex-start;
      
}
#site_visit_reg{   
    width: 31%;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    gap: 25px 0px;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.87);
    padding: 50px 0px;
    margin-top: 70px;
    
}
#site_visit_reg h1{
    font-family: Gadugi;
}
#site_visit_reg h2{
    color: #ffffff;
    font-size: 23px;
    text-transform: capitalize;
    font-weight: 900; 
    text-shadow: 2px 2px 5px black;  
}
#site_visit_reg em{
    font-size: 16px !important;
    font-weight: 400;   
    text-shadow:none;
}

.name_group{
    width: 90%;
    height: auto;
    margin: auto;
    overflow: hidden;
}
.name_group input{
    width: 92%;
    height: 30px;
    background: transparent;
    border-bottom: 1px solid orangered;
    border-top: none;
    border-left: none;
    border-right: none;
    color: #eee;
    letter-spacing: 1px;    
    font-family: sans-serif;   
    padding: 10px; 
    margin: auto;  
}

.name_group input::placeholder{
    color: #fff;
}
.name_group input:hover::placeholder{
    color: #000000;
    transition: 1.3s linear; 
}

.name_group input:hover{
    background-color: #eee;
    color: rgb(0, 0, 0);    
    font-weight: 500;
    transition: 1.3s linear;   
}
.name_group input:focus {
    outline: none;
}
.name_group select{
    width: 96%;
    margin: auto;
    padding: 10px;
    border: none;
    
}
.name_group select:focus {
    outline: none;
}
.submit{
    width: 96%;
    padding: 10px 0px;
    margin: auto;
    border: none;
    cursor: pointer;
    background-color: #fff;  
    border-radius: 8px;  
}
.submit:hover{
    background-color: orangered;
    transition: 1.3s linear;
    color: white;
}


#men{   
    width: 38%;
    height: 100vh; 
    background: url(../img/man.png) no-repeat;
    background-position: bottom;
    background-size: contain;
    
}
.contact_text{
    width: 20%;
    height: auto;
    padding: 10px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: flex-start;
    margin-top: 90px;
    gap: 5px 0px;

}
.contact_text h2{
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 2px 4px #000000;
    text-align: left;
}
.contact_text h2 i{
    color: orange;
    text-shadow: none;
}

.contact_text h2 a{
    color: orange !important;
    font-size: 28px;
    text-shadow:none;
}

/* dealer page  */

#dealer{
    width: 100%;
    height: auto;
    margin-top: 9vh;
    background-image: url(../img/dealer.jpg);
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.dealer_find{
    width: 62%;
    height: 91vh;   

    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: space-between; 
    align-items: center;

      
}
#dealer_find_reg{   
    width: 38%;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: left;
    gap: 25px 0px;
    border: 1px solid white;
    padding: 50px 0px;
    margin-top: 70px;    
    border-radius: 10px;
    
}
#dealer_find_reg:hover{
    box-shadow: 0px 0px 15px  #06aceec4;
    transition: 1S linear;
}
#dealer_find_reg h1{
    color: #000000;
    font-size: 23px;
    text-transform: capitalize;
    font-weight: 900;  
    padding: 0px 0px 0px 40px;  
}
#dealer_find_reg em{
    font-size: 16px !important;
    font-weight: 400;
}

.d_name_group{
    width: 90%;
    height: auto;
    margin: auto;
    overflow: hidden;


    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.d_name_group input{
    width: 92%;
    height: 30px;
    background: transparent;
    border-bottom: 1px solid orangered;
    border-top: none;
    border-left: none;
    border-right: none;
    color: #000000;
    letter-spacing: 1px;    
    font-family: sans-serif;   
    padding: 10px; 
    margin: auto;  
}


.d_name_group input::placeholder{
    color: orangered;
}
.d_name_group input:hover::placeholder{
    color: #000000;
    transition: 1.3s linear; 
}

.d_name_group input:hover{
    background-color: rgb(236, 236, 236);
    color: rgb(0, 0, 0);    
    font-weight: 500;
    transition: 1.3s linear;   
}
.d_name_group input:focus {
    outline: none;
}
.submit{
    width: 40%;
    padding: 10px 0px;
    margin: auto;
    border: none;
    cursor: pointer;
    background-color: #06acee;  
    border-radius: 8px;  
}
.submit:hover{
    background-color: orangered;
    transition: 1.3s linear;
    color: white;
}
#textarea{
    width: 92%;
    margin: auto;
    height: 70px;
    border: none;
    padding: 10px;
    background-color: rgb(255, 255, 255);
}
#textarea:focus{
    outline: none;
}


.d_contact_text{
    width: 55%;
    height: auto;
    padding: 10px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    margin-top: 90px;
    gap: 5px 0px;
    

}
.d_contact_text img{
    max-width: 100%;
    margin-top: 60px;
}
.d_contact_text h2{
    font-size: 30px;
    font-weight: 700;
    color: orangered;
    text-shadow: 1px 2px 4px #ffffff;
    text-align: left;   

}
.d_contact_text h2 i{
    color: rgb(0, 0, 0);
    text-shadow: none;    
}

.d_contact_text h2 a{
    color: rgb(0, 0, 0) !important;
    font-size: 28px;
    text-shadow:none;
    text-decoration: none;
    font-family: sans-serif;
}


/* contact page  */

#contact_page{
    width: 100%;
    height: auto;
    margin-top: 9vh;
    background-image: url(../img/contact.jpg);
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.contact_sec{
    width: 72%;
    height: 91vh;   

    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: space-between; 
    align-items: center;
      
}
#contact_reg{   
    width: 40%;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: left;
    gap: 25px 0px;
    background-color: rgba(255,255,255,0.06);    
    backdrop-filter: blur(15px);  
    box-shadow: 0px 0px 15px  #ee4806;
    padding: 50px 0px;   
    border: 5px solid  #ee4806;
    border-radius: 10px;
    
}
#contact_reg h1{
    color: #eee;
    font-size: 23px;
    text-transform: capitalize;
    font-weight: 900;  
    padding: 0px 0px 0px 40px;  
}
#contact_reg em{
    font-size: 16px !important;
    font-weight: 400;
}

.c_name_group{
    width: 90%;
    height: auto;
    margin: auto;
    overflow: hidden;


    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.c_name_group input{
    width: 92%;
    height: 30px;
    background: transparent;
    border-bottom: 1px solid orangered;
    border-top: none;
    border-left: none;
    border-right: none;
    color: #000000;
    letter-spacing: 1px;    
    font-family: sans-serif;   
    padding: 10px; 
    margin: auto;  
}


.c_name_group input::placeholder{
    color: orangered;
}
.c_name_group input:hover::placeholder{
    color: #000000;
    transition: 1.3s linear; 
}

.c_name_group input:hover{
    background-color: rgb(236, 236, 236);
    color: rgb(0, 0, 0);    
    font-weight: 500;
    transition: 1.3s linear;   
}
.c_name_group input:focus {
    outline: none;
}
.submit{
    width: 40%;
    padding: 10px 0px;
    margin: auto;
    border: none;
    cursor: pointer;
    background-color: #06acee;  
    border-radius: 8px;  
}
.submit:hover{
    background-color: orangered;
    transition: 1.3s linear;
    color: white;
}
#c_textarea{
    width: 92%;
    margin: auto;
    height: 70px;
    border: none;
    padding: 10px;
    color: #fff;
    background-color: rgba(255,255,255,0.06);    
    backdrop-filter: blur(15px);  
}
#c_textarea::placeholder{
    color: orangered;
}
#c_textarea:focus{
    outline: none;
}


.c_contact_text{
    width: 52%;
    height: auto;
    padding: 10px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: flex-start;
    margin-top: 0px;
    gap: 5px 0px;   
}

#map{
    width: 100%;
    height: auto;
    background-color: rgba(255,255,255,0.06);    
    backdrop-filter: blur(15px);
    padding: 20px;
    overflow: hidden;
}
#map h1{
    color: #eee;
}
#map h4{
    font-size: 16px;
    font-family:'Courier New', Courier, monospace;
    color: #eee;
}

#contact_about{
    width: 100%;
    height: auto;


    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: first baseline;
    gap: 30px;
    padding: 30px 0px;
    background: transparent; 
}
#contact_about_box{
    width: 22%;
    height: auto;     
}
#contact_about_box h2{
    color: orange;
}
.line_brack{
    display: none;
}
.products_p a{
    text-decoration: none;
}



/* career page  */



.career {
    width: 100%;
    height: 355px;
    position: relative;
    margin-top: 44px;
    overflow: hidden;
}

.talecaller_button {
    width: 35%;
    margin-top: 10px !important;
	margin-bottom: 10px !important; 
    padding: 8px 6px;
    border-radius: 9px;
    background-color: #e77723;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border: none;
    letter-spacing: 1px;
    margin: auto;
}
 
.sales_button {
    width: 35%;
    margin-top: 10px !important;
	margin-bottom: 10px !important;
    padding: 8px 6px;
    border-radius: 9px;
    background-color: #e77723;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border: none;
    letter-spacing: 1px;
    margin: auto;
}
.talecaller_button a{
	color: white;
}
.sales_button a{
	color: white;
}




.job{
	width: 90%;
	height: auto;
	margin: auto;
	padding-top: 50px 0px;
	padding-bottom: 50px;		
	display: flex;
    flex-wrap: wrap;
	justify-content: center;
	align-items: first baseline;
    gap: 50px;

    background-color: #eee;
}
.job_telecaller{
	width: 46%;
	height: auto;
	

	background-color: none;
	padding: 50px 0px;
}
.job_telecaller h3 {
    padding: 0px 0px 0px 100px;
	text-transform: uppercase;
}
.job_telecaller h5 i {
    padding: 0px 10px 0px 0px;	
}
.job_telecaller h5 {
    padding: 10px 0px 0px 100px;
	color: #102a43;
	font-weight: 400;
	letter-spacing: 2px;
}
.job_telecaller P {
    padding: 10px 20px 0px 100px;
	color: #102a43;
	font-weight: 400;
	font-size: 17px;
	text-align: justify;	
}
.job_telecaller h4 {
    padding: 10px 0px 0px 100px;
	color: #102a43;
}

.Job_Profile{
   padding: 50px 0px 0px 100px !important;
   color: #224c8c;
   font-weight: 400;   
}
.underline{
	width: 90%;
	margin: auto;
	overflow: hidden;
	padding: 10px 0px !important;
}
.job_telecaller ul{
	padding: 15px 0px;
   
}
.job_telecaller ul li {
    padding: 4px 20px 0px 110px;
	color: #102a43;
	font-weight: 400;
	font-size: 17px;
    display: inline-block;	
}

.apply_from{
    width: 40%;
    height: auto;
    padding: 40px 0px; 
    overflow: hidden;  

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;

}
.apply_from h1{
    padding: 10px;
    text-align: left;
    font-size: 30px;
}
.apply_from p{
    padding: 12px 80px;
}

.from_fullname{
    width: 90%;
    margin: auto;
    padding: 5px 0px;
    


    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0px 38px;
}

.from_fullname #full_names{
    width: 36%;
    background-color: #ffffffc4;
    color: orangered;
    border: none;
    padding: 13px;
    border-radius: 6px; 
    border-bottom: 1px solid orangered;  
}
.from_fullname #full_names:focus{
    outline: none;
}
.from_fullname #e_mail{
    width: 83%;    
    background-color: #ffffffc4;
    color: orangered;
    border: none;
    padding: 13px;
    border-radius: 6px; 
    border-bottom: 1px solid orangered;   
}
.from_fullname #e_mail:focus{
    outline: none;
}
#upload{
    width: auto;
    margin: auto;
    cursor: pointer;
    text-align: center;         
}
.now{
    color: #01fca8;
    animation-name: color;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
@keyframes color {
    0% {color: rgb(76, 0, 255);}
    15%{color: rgb(14, 145, 10);}
    40%{color: rgb(189, 10, 129);}
    60%{color: rgb(204, 4, 4);}
    100% {color: rgb(4, 115, 179);}
  }
.upload_resume{
    width: 78%;
    margin: auto;    
    background-color: white;
    color: #000000;
    border-radius: 8px;
    border-bottom: 1px solid orangered;


    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;     
    
}
.upload_p{
    padding: 5px;    
    color: #000000;    
}
#dob{
    text-transform: uppercase;
    width: 83%;    
    background-color: #ffffffc4;
    color: gray;
    border: none;
    padding: 13px;
    border-radius: 6px; 
    border-bottom: 1px solid orangered;
}
.from_fullname #dob:focus{
    outline: none;
}
.from_submit{
    margin-top: 20px !important;
    width: 90%;
    margin: auto;
    padding: 5px 0px;
    


    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0px 38px;
}


/* document page  */
#document_page{
    width: 100%;
    height: 200px;
    margin-top: 90px;
    position: relative;


    overflow: hidden;
}
#document_page_overlay{
    position: absolute;
    bottom: 70px;
    width: 100%;
    background-color: transparent;
 
}
#document_page_overlay h2{
    color: rgb(0, 0, 0);
    font-size: 50px;
    text-align: center;
    font-weight: 600;   
    text-shadow: 0px 0px 7px white;     
}

#document{
    width: 70%;
    height: auto;
    padding: 50px 30px;  
    margin: auto;
    overflow: auto;
    
}
.document_info{
    width: 100%;
    height: auto;
    margin: auto;
     
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;        
      
}
.document_info .opt_link{
    width: 25%;
    height: auto;
    gap: 10px;
    display: flex; 
    flex-direction: column;   
    justify-content: flex-start; 
    align-items: flex-start;
    overflow: hidden;
    padding: 15px 0px;
    border-left: 2px solid yellow;   
}
.link_opt{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: first baseline;
}

.document_info .opt_link li{
    list-style: none;  
    font-size: 20px; 
    color: #000 ;  
    font-family: math;       
}

.document_info .opt_link li:hover{
 color:black; 
 transition: .6s linear;
}

.tds_name{
    padding: 0px;
    color: black;
}

 .document_detail{
    width: 65%;
    padding: 20px 0px;     
    overflow: hidden;
    
}
.document_detail_one{
    width: 65%;
    padding: 20px 0px; 
    display: none;
    overflow: hidden;
  
       
}
.document_detail_two{
    width: 65%;
    padding: 20px 0px;
    display: none;
    overflow: hidden;
}
.document_detail_three{
    width: 65%;
    padding: 20px 0px;   
    display: none;
    overflow: hidden;
        
}
.one, .two, .three, .four, .five, .six{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: first baseline;
    gap: 20px;
    overflow: hidden;
}
 .detalis_sec{
    width: 12%;
    height: auto;    
    padding: 5px;
    cursor: pointer;   
    animation: fadeInRight 1s ease-in-out;
    overflow: hidden;
    border: 1.2px solid white;
    border-radius: 10px 0px;
    box-shadow: 0px 0px 1px 0px #cbc5c5db;
}
.detalis_sec a img{
    max-width: 100%;
    overflow: hidden;
}

@keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translateX(-100px);
    }
    to {
      opacity: 1;
    }
  }

  .document_detail .detalis_sec:hover{
    border-color: rgb(255, 136, 0) !important;
    transition: 1s linear;
    box-shadow: 2px 1px 3px 1px #a7a5a56c;
}
.document_detail1 .detalis_sec:hover{
    border-color: rgb(255, 136, 0) !important;
    transition: 1s linear;
}
.document_detail2 .detalis_sec:hover{
    border-color: rgb(255, 136, 0) !important;
    transition: 1s linear;
}
.document_detail3 .detalis_sec:hover{
    border-color: rgb(255, 136, 0) !important;
    transition: 1s linear;
}


.OTC{
    margin-top: 100px;
}


/* FAQ page  */

#faq_banner{
    width: 100%;
    height: 250px;
    margin-top: 50px;
    overflow: hidden;
    position: relative;
   
}
#faq_banner img{
    max-width: 100%;
    background-position: bottom;
    background-size: cover;    
}
#faq_banner::after{
    content: "";
    height: 100%;
    width: 100%;
    background-color: #0000009e;
    z-index: 1;
    position: absolute;
    left:0;
    top: 0;
}
#faq_banner_overlay{
    width: 36%;  
    background-color: #22222267;
    color: white;
    overflow: hidden;
    position: absolute;
    z-index: 9;   
    left: 31%;
    top: 120px;
}
.faq{
    text-align: center;
    font-size: 40px;
    padding: 10px;
}
#for_affter{
    width: 100%;
    height: auto;
    position: relative;
}
#faq_sec{
    width: 80%;
    height: auto;
    margin: auto;
    padding: 30px 0px;
    background-color: rgb(255, 255, 255);    
}
#for_affter::before{
    width: 140px;
    height: 100%;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
 
    background-image: url(../img/ABOUT_BEFORE.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-repeat: repeat-y;
    opacity: 0.40; 
    animation-name: just;
   animation-duration: 4s;
   animation-delay: 2s;
   animation-iteration-count: infinite;   
 }
 #for_affter::after{
     width: 140px;
     height: 100%;
     position: absolute;
     content: "";
     right:0;
     top: 0;
  
     background-image: url(../img/ABOUT_BEFORE.png);
     background-position: center;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: repeat-y;
     opacity: 0.40;
     animation-name: just1;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count: infinite;   
  }
.faq_info{
    width: 100%;
    height: auto;
    margin: auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;    
}
.under_line{
    width: 80%;
    margin: auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.548);
}
.faq_info_sec{   
    width: 50%;
    padding: 20px 0px;      
    }
    .faq_guide{
    font-weight: 600;
    font-size: 24px;
    color: black;
    margin-left: 40px;
    }
    .faq_para{
        font-weight: 300;
        font-size: 17px;
        color: black;
        margin-left: 40px;
        font-family: math;
        }

        #Categories_sec{
            width: 80%;
            height: auto;
            margin: auto;            
            background-color: rgb(255, 255, 255);
        }
        .Categories_info{
            width: 100%;
            height: auto;
            margin: auto;
        
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-start    ;
            overflow: hidden;    
        }
        .under_line{
            width: 80%;
            margin: auto;
            border-bottom: 1px solid rgba(0, 0, 0, 0.548);
        }
        
        .Categories_info_sec{   
            width: 30%;
            padding: 20px 0px;   
            
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 5px 0px;
            }
            
            .Categories_guide{
            font-weight: 600;
            font-size: 24px;
            color: black;
            margin-left: 40px;
            text-transform: uppercase;
            }                
            
                .btn_link{
                    color: #0313a7;
                    text-align: left;
                    font-weight: 600;
                    padding: 10px;
                    cursor: pointer;
    
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: flex-start;
                    font-family: sans-serif;
                    letter-spacing: 1.4px;
                }
                
                .active, .btn_link:hover {
                    background-color: yellow;
                    color: black;
                    transition: 1s linear;
                  }

                  

                
                      
                .Categories_info_sec1{   
                    width: 60%;
                    padding: 20px 0px;   
                    
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: first baseline;
                    gap: 10px 0px;                    
                    overflow: hidden;
                    }    
                    #Categories_seciton{
                        width: 60%;
                        padding: 20px 0px;
                        margin: auto;   
                        
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: first baseline;
                        gap: 10px 0px;                    
                        overflow: hidden;
                    }
                    #Categories_seciton .question {
                        font-weight: 300;
                        font-size: 17px;
                        color: black;
                        margin-left: 40px;
                        font-family: math;
                    }
                   .Comprehensive{
                    font-size: 19px;
                    font-weight: 600;
                    cursor: pointer;
                    color: rgb(0, 0, 0);
                    text-transform: capitalize;
                    text-decoration: none;
                    letter-spacing: 1px;
                    position: relative;
                    font-family: Bahnschrift;
                   }
                   .Comprehensive_para{
                    color: rgb(83, 82, 78);  
                    font-family: math;                  
                   }
                    
                    
               
                @keyframes fadeIntop {
                    from {
                      opacity: 0;
                      transform: translateY(-100px);
                    }
                    to {
                      opacity: 1;
                    }
                  }
                  
                    
                          
        .Categories_info_detalis{
            width: 80%;
            margin: auto;
            
           display: flex;
           flex-wrap: wrap;
           justify-content: space-between;
           align-items: first baseline;
           padding: 10px 0px;
           border-bottom: 1px solid gray;
           animation: fadeIntop 1s ease-in-out;
           overflow: hidden;
        }
        .Categories_text{
            width: 90%; 
            font-family: Bahnschrift;          
        } 
        .icon-btn{
            display: block;
            background: transparent;
            cursor: pointer;
            z-index: 99;  
            width: 9%;  
            text-align: center;                        
        }       
        .icon-btn i{            
            color: #000000;           
            font-size: 20px;                     
         }  
                 
        .Categories_text_hide{
            display: none;
            padding: 20px 0px;
            transition: all 0.6s linear;
            line-height: 1.6rem;
            animation: fadeInANI 1s ease-in-out;
           overflow: hidden;
           font-family: math;
            
        }
        @keyframes fadeInANI {
            from {
              opacity: 0;
              transform: translateX(-100px);
            }
            to {
              opacity: 1;
            }
          }
        .Categories_text_hide li{
            padding: 5px 0px;
        }
        .Categories_info_sec2{            
            width: 60%;
            padding: 20px 0px;   
            
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: first baseline;
            gap: 10px 0px;
            display: none;
            
        }
        .Categories_info_sec3{           
            width: 60%;
            padding: 20px 0px;   
            
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: first baseline;
            gap: 10px 0px;
            display: none;
        }
        .Categories_info_sec4{           
            width: 60%;
            padding: 20px 0px;   
            
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: first baseline;
            gap: 10px 0px;
            display: none;
        }
        .Categories_info_sec5{           
            width: 60%;
            padding: 20px 0px;   
            
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: first baseline;
            gap: 10px 0px;
            display: none;
        }
        .Categories_info_sec6{           
            width: 60%;
            padding: 20px 0px;   
            
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: first baseline;
            gap: 10px 0px;
            display: none;
        }


        
/* network page  */

.only_map{
	width: 90%;
	margin: auto;
    padding: 100px 0px;    
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    align-items: center;		
}
.detalis_list{
	width: 40%;
	height: auto;
	padding: 30px 0px;	
}
.detalis_list h3{
    font-family: Bahnschrift; 
}
.detalis_lists{
	width: auto;
	color: white;
	padding: 10px;
	display: none;
	background-color: #021a3e;	
}
.detalis_lists ul li{
	padding: 0px;
	margin: 0px;
    list-style: none;
    font-family: math;
	
}
.detalis_list li:hover a{
	color: white;
}
.detalis_list li a{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: wheat;
    text-decoration: none;
    font-family: sans-serif;
}
.detalis_list li{
	
        background-color: #021a3e;
        padding: 10px 5px;
        margin: 7px 0px;
        font-size: 15px;
        list-style: none;
        width: 80%;
        border-radius: 5px;   
	}
	.detalis_list li samp{
		color: #fff;
	}

#chartdiv {
    width: 100%;
    height: 700px;
	overflow: hidden;
    padding-top: 40px;

}
#chartdiv a{
	position: absolute;
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-family: Verdana;
    font-size: 11px;
    opacity: 0.7;
    display: none !important;
    left: 5px;
    top: 481px;
}
.hero{
    width: 100%;
    height: auto;  
    background-color: rgba(255, 166, 0, 0.74);
 }  
 .water_proof{
    width: 100%;
    height: auto;  
    background-color: rgba(200, 238, 250, 0.74);
 } 


.hero_link{
    width: 100%;
    height: 250px;
    background: url("../img/background.jpeg") no-repeat;
    background-position: center;
    background-size: cover; 
    align-content: center;
    position: relative;
}
.hero_link::before{
  position: absolute;
  content: "";
  background-color: #000000b0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hero_link h3{
    text-align: center;
    color: whitesmoke;  
    z-index: 1;   
    position: absolute;
    left: 40%;
    width: 20%;  
    
}
.hero_link h3 a{
    color: whitesmoke;
    text-decoration: none;
    font-family: sans-serif;
    text-align: center;
    padding: 0px 20px;
    }
    .pro_info{
        width: 70%;
        height: auto; 
        padding: 100px 0px 50px 0px;
        margin: auto;


        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }
    .pro_info h2{
        color: #000000b7;
        text-align: center;
        font-family: Bahnschrift; 
        font-size: 40px;       
    }
    .pro_info p{
        color: #000000b7;
        font-size: 20px;
    }
    .under{
        width: 100%;
        background-color: #000;
        height: 1px;
    }
    .qlw-text{
        padding: 5px 50px;
    }
    .pro_info_img{
        width: 35%;
        height: 440px;
        overflow: hidden;
    }
    .pro_info_img img{
        max-width: 95%;
    }
.table{
    width: 100%;
    padding: 50px 0px;
    
}
.table img{
    height:550px;
    width:350px;
    padding-left:34%;
}
.table h3{
    color:  #000000;
    font-family: Bahnschrift;
    padding: 0px 0px 30px 0px;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
}
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }
      th{
        background-color: #dddddd;
        text-align: center;
      }
      td, th {
        border: 1px solid #dddddd;
        text-align: center;
        padding: 8px;
      }  
      
      #qlw_Features{
        width: 50%;
        margin: auto;
        margin-top: 5px;
      }
      #qlw_Features h5{
        font-family: Bahnschrift;
        font-size: 25px;        
      }
      .qlw_ul p{
        color: #ffffff;
      }
      .qlw_li{
        list-style: none;
        font-family: Bahnschrift;
        color: #000;
        font-weight: 300;
        padding: 2px 0px;
      }
      #qlw_Method{
        width: 50%;
        margin: auto;
       padding: 50px 0px;
      }
      #qlw_Method,  #white_Method  h5{
        font-family: Bahnschrift;
        font-size: 25px;        
      }
      .fa-minus{
        color: whitesmoke;
      }
      .qlw_btn{
        padding: 13px 50px;       
        background-color: orangered; 
        border-radius: 5px;
        border: none;  
        margin-top: 40px;     
      }
      .qlw_btn a{
        list-style: none;
        color: #ffffff;
        cursor: pointer;
        text-decoration: none;
      }
      .qlw_banner{
        width: 100%;
        height: 400px;
        margin-top: 50px;
      }
      .qlw_banner img{
        max-width: 100%;
      }
      .Calculator{
        width: 50%;        
        border-radius: 10px;
        height: auto;
        padding: 40px 0px;
        margin: auto;
        margin-top: 50px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .Calculator h5{
        font-family: Bahnschrift;
        font-size: 25px;          
        padding: 5px 7px; 
        border-radius: 4px;   
      }
      .Calculator input:focus {
           outline: none;
       }
      .Calculator input{
        width: 60%;
        padding: 10px;
        background-color: transparent;
        border: none;
        margin-top: 10px;
        border-bottom: 2px solid white;
        border-radius: 4px;
      }
      .Calculator_qlw{
        padding: 13px 50px;       
        background-color: rgb(26, 145, 243); 
        border-radius: 5px;
        border: none;  
        margin-top: 40px;
        color: white;
        cursor: pointer;
      }
      .white{
        width: 60%;
        margin: auto;
      }
      #white_Method{
        width: 80%;
        margin: auto;
       padding: 50px 0px;
      }
      .fa-circle{
       font-size: 8px;
      }

      .dsd{
        background-color: yellow;
        height:0px;
        /* width:0px; */
      }