/*!
 * Start Bootstrap - Blog Home HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
   
    font-family:  Roboto, sans-serif;
    width: 100%;
    margin: auto;
   
        h1
        {
            font-size: 50px;
            font-weight: 600;
            line-height: 1.1;
            color: #424141;
        }
                 @media screen and (max-width: 600px) {
                h1 {
                        font-size: 35px;
            
                    }
                }
        h2
        {
          
            font-size: 45px;
            font-weight: 400;
             color: #424141;
              line-height: 1.1;
        }
         @media screen and (max-width: 600px) {
                h2 {
                        font-size: 30px;
            
                    }
                }
        h3
        {
          
            font-size: 30px;
            font-weight: 400;
            color: #424141;
              line-height: 1.1;
        }

         @media screen and (max-width: 600px) {
                h3 {
                        font-size: 22px;
            
                    }
                }
        h4
        {
           font-size: 22px;
            font-weight: 200;
             color: #424141;
              line-height: 1.1; 
        }
                @media screen and (max-width: 600px) {
                h4 {
                        font-size: 16px;
            
                    }
                }
        h5
        {         
            font-weight: 400;
            color: #ed6624;
            font-size: 18px;
            line-height: 1.1; 
        }
        @media screen and (max-width: 600px) 
                {
                    h5 {
                        font-size: 15px;
                        line-height: 1.1; 
                        }
                }
        p
        { 
            font-weight: 200;
            line-height: 1.4;
            color: #424141;
            font-size: 14px;
        }
        
        a{
              color: rgb(10, 89, 168);
              font-size: 14px;
              line-height: 1.1; 
              font-weight: 100;

        }
         a:hover {
              color: teal;
            
        }
      
    
}
.bg6
{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e2e2e2+0,dbdbdb+50,d1d1d1+51,fefefe+100;Grey+Gloss+%231 */
background: linear-gradient(135deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.bg7
{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e2e2e2+0,dbdbdb+50,d1d1d1+51,fefefe+100;Grey+Gloss+%231 */
background: linear-gradient(45deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.bg8
{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */
background: linear-gradient(to bottom,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.bg9{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#aebcbf+0,0a0e0a+0,0a0809+54,6e7774+54 */
background: linear-gradient(135deg,  rgba(174,188,191,1) 0%,rgba(10,14,10,1) 0%,rgba(10,8,9,1) 54%,rgba(110,119,116,1) 54%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.bg10{
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e2e2e2+0,d1d1d1+25,dbdbdb+50,fefefe+100 */
background: linear-gradient(to bottom,  rgba(226,226,226,1) 0%,rgba(209,209,209,1) 25%,rgba(219,219,219,1) 50%,rgba(254,254,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  }
.image1div
{
  width:100%;
  position: relative;
  margin: 0 auto; /* Center it */

}
@media screen and (max-width: 600px) {
  .image1div  {
    width:100%;
   
    position: relative;
    margin: 0 auto; /* Center it */
    
  
  }
  }
  .image1div .content {
    position: absolute; /* Position the background text */
    bottom: 0; /* At the bottom. Use top:0 to append it to the top */
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #f1f1f1; /* Grey text */
    width: 100%; /* Full width */
    padding: 20px; /* Some padding */
  }
.image1
{

  min-height:250px;
}
.top
{
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.tglbar
{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7d7e7d+100,0e0e0e+100 */
background: linear-gradient(to bottom,  rgba(125,126,125,1) 100%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.sharebtn
{
  color:#534f4f;
  text-decoration: none;
  font-size: 12px;
}
.down{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7d7e7d+100,0e0e0e+100 */
background: linear-gradient(to bottom,  rgba(125,126,125,1) 100%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.w {
  margin: 0px 0;
  max-width: 85%;

}
@media screen and (max-width: 600px) {
.w  {
  margin: 0px 0;
  min-width: 100%;

}
}
.tglbar
{
  background-color:#182f41;
}
.taba
{
  background-color:#ed6819;
}
.taba:hover{
  background-color:#fea31f;
}
@media screen and (max-width: 600px) {
  .taba  {
     min-height: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
  
  }
}
/*! dropdown menu */
.cont1
{
  max-width:80%;
}
@media screen and (max-width: 600px) {
  .cont1  {
    max-width:100%;
  }
}

.a2
{
  text-decoration:none;
  color: white;
}
.a2:hover
{
  text-decoration:none;
  color: teal;
}
.vission
{
    margin-top: -120px;
}
@media screen and (max-width: 600px) {
  .vission  {
     margin-top: 190px;
  
  }
}
.dv1
{
    min-height: 300px;
}
@media screen and (max-width: 600px) {
  .dv1  {
     min-height: 500px;
  
  }
}
.p11
        { 
            font-weight: 200;
            line-height: 1.4;
            color: white;
            font-size: 14px;
            padding-right: 10px;
        }

@media screen and (max-width: 600px) {
  .p11  {
            font-weight: 200;
            line-height: 1.4;
            color: white;
            font-size: 13px;
  }
}
.p12
        { 
            font-weight: 200;
            line-height: 1.4;
            color: #534f4f;
            font-size: 14px;
            padding-right: 10px;
        }

@media screen and (max-width: 600px) {
  .p12  {
            font-weight: 200;
            line-height: 1.4;
            color: #534f4f;
            font-size: 13px;
  }
}
.p13
        { 
            font-weight: 200;
            line-height: 1.3;
            color: #534f4f;
            font-size: 12px;
            min-height: 60px;
            
        }

@media screen and (max-width: 600px) {
  .p13  {
            font-weight: 100;
            line-height: 1.2;
            color: #534f4f;
            font-size: 11px;
  }
}
.img11
{
min-height:450px; 
margin-bottom:-200px;
margin-top:14px;
}
@media screen and (max-width: 600px) {
  .img11  {
            min-height:380px; 
            margin-bottom:-200px;
           
  }
}
.fttext
{
  font-family:  ABCWalterNeue, sans-serif; 
  line-height: 1.2; font-size: 12px;
  color: white;
  text-decoration: none;

}
.a3
{
  font-family:  ABCWalterNeue, sans-serif; 
  line-height: 1.2; font-size: 12px;
  color: white;
  text-decoration: none;

}
.a3:hover{
  color:teal;
}

.boder{
  border-bottom-style: solid;
  border-color: white;
  border-width: 2px;

}
.m5{
  margin-top:8px;
  text-align: right;
}
@media screen and (max-width: 600px) {
  .m5  {
     margin-top:-5px;
     text-align: left;
  }
}
/*! dropdown menu */
b
{
  position: inherit; /* or absolute */

}

.dropbtn {
 
  color: white;
  padding: 5px;
  font-size: 14px;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  border-color: transparent;
  background-color: transparent;
  min-width: 100px;

  
 
}

.dropdown {
  
  display: inline-block;

  
}
#myNavbar {
  overflow: visible;
  z-index: 10; /* Increase the z-index to ensure it is above other content */
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
  color: white;
}
/* Prevent the w3-card class from interfering */
#myNavbar.w3-card {
  overflow: visible;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #606060;}


/*! dropdown menu */
/*! Banner Outline */

.
/*! Banner Outline */

.tx1
{
   
    font-size: 45px;
    line-height: 1.5;
    font-weight:800; 
   font-family: "Segoe UI", Arial, sans-serif;
   color: white;

}
.tx2
{
   
    font-size: 25px;
    line-height: 1.5;
    font-weight:600; 
   font-family: "Segoe UI", Arial, sans-serif;
   color: white;

}



.txtline
{
  font-family:  ABCWalterNeue, sans-serif; 
  line-height: 12px; font-size: 14px;
  text-decoration: none;
}
.txtline2
{
  font-family:  ABCWalterNeue, sans-serif;
  line-height: 1.2;
  font-size: 12px;
  text-decoration: none;

}
.txtline2:hover
{
  font-family:  ABCWalterNeue, sans-serif;
   line-height: 1.2;
  font-size: 12px;
  text-decoration: none;
  color: gray;
  
}
.certificate
{
    background-color: #293d48;
    padding:10px;
    position: relative;

}
.certificate:hover .overlayc {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.overlayc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f58320;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: .3s ease;
}
.overlaytext {
  color: white;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center
}
.certificateImage
{

    max-height: 160px;
    min-height: 160px;
    width: 60%;
}
.inquery
{
    padding:5px;
    background-color:#f38421;
    color: white;
    font-family:  ABCWalterNeue, sans-serif;
    font-size: 18px;
}
.pnl 
{
    margin-top:20px;
    background-color:#f38421;
}
@media screen and (max-width: 600px) {
  .pnl  {
     margin-top:-20px;
     background-color:#f38421;
  
  }
}
.w3-padding-8
{
    padding-top:8px;
    padding-bottom:8px;
}

/* Banner  */
.imageConainer
{
   margin-top:-10px;

}
@media screen and (max-width: 600px) {
  .imageConainer  {
    margin-top:-6px;
    height: auto;

  
  }
}

.sliderimg
{
  max-height: auto;
}
@media screen and (max-width: 600px) {
  .sliderimg  {
    min-height: 320px;



  }
}
.contain
{
     position: relative;
}

/* Banner  */



.text-block3 {
  position: absolute;
  bottom: 0px;
  right: 20px; 
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  
    background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
}
@media screen and (max-width: 600px) {
  .text-block3  {
  position: absolute;
  bottom: 0px;
  right: 20px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: white;
  padding-left: 20px;
  padding-right: 20px;
 
  }
}
.text-block4 {
  position: absolute;
  bottom: 200px;
  left: 30px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
 
}
@media screen and (max-width: 600px) {
  .text-block4  {
  position: absolute;
  bottom: 5px;
  left: 25px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: white;
  padding-left: 10px;
  padding-right: 10px;
   padding-bottom: 5px;
  
  }
}
.text-block5 {
  position: absolute;
  bottom: 60px;
  left: 50px;
  background-color: #fcb825;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
 
}
@media screen and (max-width: 600px) {
  .text-block5  {
  position: absolute;
  bottom: 5px;
  left: 25px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: white;
  padding-left: 10px;
  padding-right: 10px;
   padding-bottom: 5px;
  
  }
}


.headline4
{
    font-family: Arimo, sans-serif !important;
    font-weight: 800;
     font-size:25px;
}
@media screen and (max-width: 600px) {
  .headline4  {
    margin-top:10px;
     font-weight: 400;
     font-size:14px;

  }
}

.headline5
{
    font-family: Arimo, sans-serif !important;
    font-weight: 800;
     font-size:25px;
}
@media screen and (max-width: 600px) {
  .headline5  {
     font-weight: 400;
     font-size:12px;
  }
}
.headline6
{
   font-size:35px;
   font-weight:100; 
   font-family: "Segoe UI", Arial, sans-serif;
    color: white;
}
@media screen and (max-width: 600px) {
  .headline6  {
     font-weight: 200;
     font-size:15px;
  }
}
.headline7
{
   font-size:20px;
   font-weight:400; 
   font-family: "Segoe UI", Arial, sans-serif;
    color: #fcb825;
}
@media screen and (max-width: 600px) {
  .headline7  {
     font-weight: 400;
     font-size:13px;
      font-family: "Segoe UI", Arial, sans-serif;
    color: #fcb825;
  }
}
.headline7
{
   font-size:20px;
   font-weight:400; 
   font-family: "Segoe UI", Arial, sans-serif;
    color: black;
}
@media screen and (max-width: 600px) {
  .headline7  {
     font-weight: 400;
     font-size:13px;
      font-family: "Segoe UI", Arial, sans-serif;
    color: black;
  }
}
.headline8
{
   font-size:16px;
   font-weight:100; 
   font-family: "Segoe UI", Arial, sans-serif;
     color: black;
}
@media screen and (max-width: 600px) {
  .headline8  {
     font-weight: 100;
     font-size:10px;
     font-family: "Segoe UI", Arial, sans-serif;
    color: black;
  }
}
.headline9
{
   font-size:20px;
   font-weight:400; 
   font-family: "Segoe UI", Arial, sans-serif;
    color: #fcb825;
}
@media screen and (max-width: 600px) {
  .headline9  {
     font-weight: 400;
     font-size:13px;
      font-family: "Segoe UI", Arial, sans-serif;
    color: #fcb825;
  }
}
.headline8
{
   font-size:16px;
   font-weight:100; 
   font-family: "Segoe UI", Arial, sans-serif;
     color: #fcb825;
}
@media screen and (max-width: 600px) {
  .headline8  {
     font-weight: 100;
     font-size:10px;
     font-family: "Segoe UI", Arial, sans-serif;
    color: #fcb825;
  }
}

.pro_caption
{
  
    font-weight:300; 
    font-family: ABCWalterNeue,  sans-serif;
    color: #f84c3e;
    font-size: .8rem;
    min-height: 50px;
    text-decoration: none;
    line-height: 1.3;
  
  
}
@media screen and (max-width: 600px) {
  .pro_caption  {
     font-weight: 400;  
     font-size: .7rem;
      font-family: ABCWalterNeue,  sans-serif;
  }
}
.pro_content
{
    font-size: .2rem;
   font-weight:100; 
    color: black;
    line-height: 1.3;

  
}
@media screen and (max-width: 600px) {
  .pro_content  {
     font-weight: 100;
    font-size: .6rem;
     line-height: 1.3;
  }
}

.menu_item
{
    border-width: 1px;
    border-bottom-style: solid;
    border-color: #8b919c;
    min-width: 220px;

}
/* Login css-----------------------------------------------------------  */
.border
{
    border-style: solid;
    border-width: 1px;
    border-color: #cb6d13;
}

.s3_panel
{

    background-color: #f8f8f6;
   
}
.s3_panel1
{

    
    background-color:#f38421;
   
}
@media screen and (max-width: 600px) {
  .s3_panel1  {
    background-color: #f38421;
  }
}

.text1
{
    
     color: #7d7e82;
     padding-right: 6px;
     font-size: 13px;
}
.s3_textbox1
{
   
font-weight: normal;
    font-family:  ABCWalterNeue, sans-serif;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.3;
    

}
@media screen and (max-width: 600px) {
  .s3_textbox1  {
    font-weight: 300;
    font-size: 1.0rem;
     font-family:  ABCWalterNeue, sans-serif;
      line-height: 1.4
  }
}

.s3_textbox
{
   
   font-family:  ABCWalterNeue, sans-serif;
    font-size: 1.0rem;
    font-weight: 300;
    line-height: 1.3;
    

}
@media screen and (max-width: 600px) {
  .s3_textbox  {
    font-weight: 300;
    font-size: 0.8rem;
     font-family:  ABCWalterNeue, sans-serif;
      line-height: 1.4
  }
}
.s3_textbox2
{
   
   
    color: #7d7e82;
     font-size: 12px;
   

}
.s3_textbox4
{ 
    font-family:  ABCWalterNeue, sans-serif;
    color: black;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1.2;
}
@media screen and (max-width: 600px) {
  .s3_textbox4  {
  font-weight: normal;;
    font-size: 1rem;
     font-family:  ABCWalterNeue, sans-serif;
      line-height: 1.2
  }
}
.s3_textbox3
{
    border-style: solid;
    border-width: 1px;
    border-color:#dfdeda ;
    border-radius: 4px;
    background-color: white;   
    color: #191919;
  

}



.dropdwn{

    background-color: #303338;
}
.nvlink
{
    text-decoration: none;
    color: white;

   

}
.nvlink:hover
{
    border-left-style: solid;
     border-width: 5px;
     border-color: white;
      color: white;
     text-decoration: none;
}
.s3_footer_p
{
    font-size: 13px;
    line-height: 17px;
    font-family: Arimo, sans-serif !important;
    font-weight: 400;
    font-style: normal;
    font-display: fallback;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    color: #8b919c;
    letter-spacing: .1px;
    font-kerning: normal;
    text-align: justify;
    text-justify: inter-word;
    word-spacing: -1px;
    white-space: normal;
    word-break:break-all;
    unicode-bidi: isolate;
    overflow-wrap: break-word;
    hyphens: manual;
    margin: 0 auto;
}
.s3_footer_h4
{
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    margin: 0;
    color: white;
    font-family: Arimo, sans-serif !important;
}
.s3_footer-bg
{
    background-color: #262626;
}
.s3_padding_sm
{
    padding-top:4px;
    padding-bottom: 4px;
}
.s3_btm_border
{
    border-bottom-style: solid;
    border-width: 1px;
    border-color: gray;
}



/* Navigation Css-----------  */
.TopBar
{
   background-color: #262626;

}
@media screen and (max-width: 600px) {
  .TopBar  {
  background-color: #262626;
  border-top-color: rgba(255, 255, 255, 0.2);
  color: #8b919c;
  font-size: 12px;
  }
}
.logobox
{

    float: right;
    margin-left:15%;
    
}
.logobox2
{

    float: left;
    margin-right:15%;
    
}
.nvbar{

   background-color: #303338; 
   

}

/* Navigation Css-----------  */



.s3_top_font
{
    color: #8b919c;
    font-size: 12px;
}
.s3_login_company
{
    font-size: 12px;
    font-family: monospace;
    color:navajowhite;
}

.s3_h1 {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: inherit;
    margin: 0;
    color: #262626;
   font-family: "Segoe UI", Arial, sans-serif;

}
@media screen and (max-width: 600px) {
  .s3_h1  {
    font-weight: 400;
    font-size: 2.0rem;
    color: #262626;
     font-family: "Segoe UI", Arial, sans-serif;
  }
}


.s3_h2 {
    font-size: 1.7rem;
    font-weight: 400;
    line-height: inherit;
    color: #262626;
    font-family: "Segoe UI", Arial, sans-serif;
   
}
@media screen and (max-width: 600px) {
  .s3_h2 {
     font-weight: 300;
     font-size: 1.3rem;
     color: #262626;
     font-family: "Segoe UI", Arial, sans-serif;

  }
}

.s3_h3 {
    font-size: 16px;
    font-weight: 200;
    color: dimgray;
     font-family: "Segoe UI", Arial, sans-serif;
  
}
@media screen and (max-width: 600px) {
  .s3_h3  {
    font-weight: 100;
    font-size:13px;
    color: dimgray;
     font-family: "Segoe UI", Arial, sans-serif;
  }
}


.animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
   
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
   
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}



.mission {
    font-size: 26px;
    font-weight: 800;
    color: white;
     font-family: "Segoe UI", Arial, sans-serif;
     text-shadow: 12px 12px 4px #000000;
  
}
@media screen and (max-width: 600px) {
  .mission  {
    font-weight: 600;
    font-size:16px;
     color: white;
     font-family: "Segoe UI", Arial, sans-serif;
  }
}

.bg-image {
  /* The image used */
 
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/15.jpg");

  /* Full height */
  height: 100%;
 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.circle {
    background-color: forestgreen;
    border-radius: 50%;
    height: 5rem;
    width: 5rem;
}
.circle2 {
    background-color: #ed6624;
    border-radius: 70%;
    height: 3rem;
    width: 3rem;
}
.center {
  display: block;
  padding-left: 10%;
 padding-right: 10%;
 
}


/* Container needed to position the overlay. Adjust the width as needed */
.container_pro {
  position: relative;
 

 
}
/* The footer section */
.footerlogo
{
  padding-left:20px;
}

/* Make the image to responsive */
.image {
  display: block;
  width: 100%;
  height: 30vh;
   
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;

}

.container_pro:hover .middle {
  opacity: 1;
}
/* The overlay effect - lays on top of the container and over the image */
.overlay_pro {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0.5, 0.5); /* Black see-through */
  width: 100%;
  transition: .5s ease;
  opacity:0;
  padding:3px;
  border-style: solid;
  border-width: 6px;
  border-color: white;
  text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.container_pro:hover .overlay_pro {
  opacity: 1;
border-radius: 0px 0px 15px 15px;
}

/* [1] The container */
.img-hover-zoom {
  height: 100%; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
   border-radius: 15px 15px 15px 15px;
   
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
   filter: blur(0);
  transform: scale(1);
   transition: transform 1s, filter 2s ease-in-out;
    border-radius: 15px 15px 15px 15px;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
 

  filter: blur(0px);
  transform: scale(1.2);
   border-radius: 15px 15px 15px 15px;
}

/* The image used */

.container_img {
  position: relative;
   
     border-radius: 10px 10px 10px 10px;
    min-height: 30vh;

   
}
.img {
  position: relative;
  border-radius: 10px 10px 10px 10px;
   min-height: 250px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
background-color: rgb(0 0 0 / .5);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container_img:hover .overlay {
  height: 100%;
border-radius: 10px 10px 10px 10px;
}

.textline {
  color: white;
  position: absolute;
  font-weight:400;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1.1; 
}

.hlink1{
  color: white;
  text-decoration: none;
}
.hlink1{
  color: yellow;
}

/* The image used */
.imgposition
{
  margin-top:160px;
}
@media screen and (max-width: 600px) {
  .imgposition  {
    margin-top:10px;
  }
}

.img_border1
{
    border-style: solid;
    border-width: 5px;
    border-color:white;
    border-radius: 10px;

}
.border2
{
    border-bottom-style: solid;
    border-width: 1px;
    border-color:#dfdeda;

}
.img-border3
{
    border-style: solid;
    border-width: 8px;
    border-color: #5f5f5f;
    border-radius: 5px 5px 60px;
}
.bg1 {
  /* The image used */
 
  background-image:  url("../images/bg5.jpg");

  /* Full height */
  height: 100%;
 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg3 {
  /* The image used */
 
  background-image:  url("../images/footer.jpg");

  /* Full height */
  height: 100%;
 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 600px) {
  .bg3  {
      min-height: 300px;
      background-position: left;
      background-repeat: no-repeat;
      background-size: cover;
  }
}
.bg2 {
  /* The image used */
 
  background-image:  url("../images/15.jpg");

  /* Full height */
  min-height: 300px;
 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 600px) {
  .bg2  {
     min-height: 500px;
  }
}
.cont{

  min-height:300px; 
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffd65e+0,febf04+100;Yellow+3D+%232 */
background: linear-gradient(to right,  rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  margin-top: -50px;
}
@media screen and (max-width: 600px) {
  .cont  {
     min-height:300px; background-color: #182e41; margin-top: -110px;
  }
}
.cont2{

  min-height:150px; 
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffd65e+0,febf04+100;Yellow+3D+%232 */
background: linear-gradient(to right,  rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  margin-top: -50px;
}
@media screen and (max-width: 600px) {
  .cont2  {
     min-height:150px; 
     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffd65e+0,febf04+100;Yellow+3D+%232 */
background: linear-gradient(to right,  rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     margin-top: -10px;
  }
}

.talk{

  font-size:14px;
   font-family:  ABCWalterNeue, sans-serif;
    line-height: 1.2;
     font-weight: 400;
     color: white;
}
@media screen and (max-width: 600px) {
  .talk  {
     font-size:12px;
    font-family:  ABCWalterNeue, sans-serif;
    line-height: 1.2;
     font-weight: 400;
     color: white;
  }
}
.s3_footer_caption {
    font-size: 14px;
    font-weight: 200; 
    text-justify: inter-word;
   
    font-weight: 400;
    display: block;
    color: white;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-family:  ABCWalterNeue, sans-serif;
    line-height: 1.4
   
}
.s3_h4 {
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 400;
    display: block;
    color: white;
    padding:4px;
   font-family: Arimo, sans-serif !important;
    text-transform: uppercase;
}
.s3_why_text {
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 400;
    display: block;
    color: white;
    padding:2px;
   font-family: Arimo, sans-serif !important;
}
.s3_h5 {
    font-size: 10px; 
    display: block;
    color: white;
    padding:2px;
    font-family: Arimo, sans-serif !important;
}
.s3_pp_txt 
{
    
   font-weight: 100;
    font-size:14px;
    color: white;
    font-family:  ABCWalterNeue, sans-serif;
    
}
.s3_p_txt 
{
    
   font-weight: 100;
    font-size:12px;
    color: black;
    font-family:  ABCWalterNeue, sans-serif;
    
}
@media screen and (max-width: 600px) {
  .s3_p_txt   {
    font-weight: 100;
    font-size:10px;
    color: black;
    font-family:  ABCWalterNeue, sans-serif;
  }
}

.bottomsection1
{
    background-color:#262626 ;
    padding-bottom:0px;

}
.bottomsection2
{
    background-color:#d3d3d3 ;
    padding-bottom:0px;

}
.copyrightmark
{
    font-family:  ABCWalterNeue, sans-serif;
    font-weight: 100;
    font-size:10px;
      color: whitesmoke;

}
.s3_productbox_bar 
{
    background-color:#ea2016;

}
.s3_footerfrnt
{
    font-size: 12px;
    color: #7d7e82;
    

}
.s3_footerfrnt_url
{
   font-size: 12px;
   
    color: #7d7e82;
    
}

.w3-topbar {
    border-top: 6px solid white !important;
}

/* banner image slider  */

.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: auto;
}


.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}



/* background Image  */
.bg_img 
{
    background-image: url("image/home/L.jpg");
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 300px;
    margin-bottom: -5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.section_bg
{

    background-color: #333b35;
}
/* Login css-----------------------------------------------------------  */

.login_h1
{
font-size: 45px;
font-weight:800;
font-display:block;
font-family: Verdana, sans-serif !important;
color:#b91c47 ;
}

.login_h4
{
font-size: 16px;
font-weight:500;
font-display:block;
font-family: Verdana, sans-serif !important;
color:#b91c47 ;
}

/* ------------------------------------------------------------  */

/* navbar-----------------------------------------------------------  */

.navbar_bg
{
background-color:#b91c47 ;
}

/* navbar-----------------------------------------------------------  */
.personimg{
  height: 60vh;
}
@media screen and (max-width: 600px) {
  .personimg  {
    height: 50vh;
  }
}
.whatsapp-button{
  position: fixed;
  bottom: 25px;
  right: 55px;
  z-index: 1;
  background-color: #25d366;
  border-radius: 50px;
  color: #ffffff !important;
  text-decoration: none;
  width: 50px;
  height: 50px;
  font-size: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
  -moz-box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
  box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
  animation: effect 5s infinite ease-in;
}
.whatsapp-button:hover {
  background-color: #128C7E;
}

.whatsapp-button i {
  margin-right: 1px;
}