body{
    margin: 0%;
}
.allsearchinput{
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  position: absolute;
  top: 20%;
}
@media(max-width: 1150px){
  .allsearchinput{
    display: inline;
    
  }
}
.navoption{
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-family:monospace;
    text-decoration: none;
    padding: 5px 45px 5px 45px;
    border-bottom: none;    
    transition: 0.5s;
    border: none;
    

}
.navoption:hover{
  color: rgb(0, 171, 128);
  border-bottom: rgb(0, 171, 128) 3px solid;
    
}
.navbarlasta{
  color: rgb(81, 78, 78);
  font-size: 17px;
  font-family:monospace;
  text-decoration: none;
  padding-left: 5px;
}
h2{
    padding-top: 5px;
    font-family: monospace;
}
#navoptionto{
  display: none;
}
.clogo{
    width: 80px;
    height: auto;
}
.navunder{
   
  backdrop-filter: blur(10px);  
  /* box-shadow: 0 4px 8px 0 rgba(207, 205, 205, 0.2), 0 6px 20px 0 rgba(125, 123, 123, 0.19); */
    height: 85px;
    position: fixed;
    z-index: 16;
    display: flex;
    width: 100%;
    
    justify-content: center;
    /* justify-content: center; */
    
}

.sticky{
  background-color: whitesmoke;
  transition: 0.3s;
}

.navbartop{
    padding-top: 27px;
    
    
}
 
/* padding-left: 30px; */
.companylogo{
    padding-right: 150px;
}
.navbarlast{
    padding-top: 27px;
    padding-left: 200px;
}
.navoptionstwo{
    
    font-size: 17px;
    font-family:monospace;
    text-decoration: none;
    padding-left: 100px;
}
.dropbtn {
    /* background-color: #3498DB; */
    /* color: white; */
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: none;
    /* background-color: #00bba5; */
    border: #009d8b 3px solid;
  }

.menuiconbutton{
            display: none ;
         
         }

@media(max-width: 1300px){
    .navoption{
       
        font-size: 17px;
        
        
        padding-left: 50px; 
    }
    .navbarlast{
    
        padding-left: 100px;
    }
    .companylogo{
        padding-right: 130px;
        padding-left: 10px;
    }   }

    @media(max-width: 1270px){
      .navbarlast{
        padding-left: 0px;
      }
    }

 @media(max-width: 1070px){
    .navoption{
  
   font-size: 16px;
    
   padding-left: 30px;
                    
                
}
.navbarlast{
    
    padding-left: 0px;
}             
            
}
.stickytext{
  color: #000000;
}
#navbarlastato{
  color: white;
  background-color: rgb(3, 146, 153);
  padding: 10px;
  border-radius: 4px;
  border: #009d8b 1px solid;
  transition: 0.3s;
}
#navbarlastato:hover{
  background-color:transparent;
  border: #009d8b 1px solid;
  color: #009d8b;
   
}
@media(max-width: 1000px){
  .companylogo{
    padding-right: 10px;
  }
}
@media(max-width: 850px){
    .companylogo{
        padding-right: 10px;
        
    }       
    .navoption{
      padding-left: 0px;
    }    
}

 @media(max-width: 800px){
  #navoptionto{
    display: block;
  }
  #navbarlastato{
    display: none;
  }
    .menuiconbutton{
        display: block ;
        width: 20px;
        height: auto;
     
     }

    .navbartop {
        display: none;
        position: absolute;
        /* top: 80px; */
        text-align: center;
        padding-bottom: 20px;
        background-color: #ffffff;
        min-width: 100%;
        min-height: auto;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
      }
      
      .navbartop a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }
      .dropbtn {
        display: block;
        border-radius: 10px;
        position: absolute;
        overflow: auto;
        right: 10px;
        z-index: 1;
        margin: 20px;
      }
      .navunder{
       
        justify-content: normal;
      }

    } 
      /* .dropdown a:hover {background-color: rgb(0, 0, 0);} */
.show {display: block;}
.sliderimage{
    
  position: relative;
  
}
.nextLink{
    color: white;
    outline: none;
    text-decoration: none;
    font-size: 20px;
    font-family: monospace;
    font-weight: bold;
    position: absolute;
    top: 50%;
    margin: 10px;
   
   
}

.active {
    background-color: #717171;
}
.fade {
    height:700px; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    animation-name: fade;
    animation-duration: 0.5s;
  }
  
  @keyframes fade {
    from {opacity: .95} 
    to {opacity: 1}
  }
.img1 { background-image: url("/static/image/Blog_2020-rail-2.jpg");
  transition: 0.3s;
  
  
  
  
  }
.img2 { background-image: url("/static/image/main_2.jpg");
  transition: 0.3s;

  
  
   }
.img3 { background-image: url("/static/image/000.jpg");
  transition: 0.3s;

  
  
  }

.companyname{
    
    letter-spacing: 15px;
    color: rgb(255, 255, 255);
    font-family: monospace;
    font-size: 70px;
    /* opacity: 0.8; */
    /* position: absolute;
    top: 20%;
    left: auto;
    right: auto; */

}
.companytitle{
    letter-spacing: 5px;
    color: #ffffff;
    font-family: monospace;
    font-size: 20px;
    /* position: absolute;
    top: 50%;
    left: 0%; */
}
  
.searchaddress{
    /* display: flex; */
    background-color:white;
    max-width: 100%;
    max-height: 200px;
    padding: 20px;
    margin: 20px;

    justify-content: center;
   
    /* bottom: 0px; */
    border-radius: 5px;
    /* position: absolute; */
    /* bottom: 35%; */
    /* right: 0px; */
    border: solid 1px rgb(197, 197, 197);
  }

  @media(max-width: 1150px){
   .searchaddress{
    width: 10 0%;
    margin-left:20% ;
    margin-right: 20%;
   }
  }




.searchunder{
    display: flex;
   padding: 20px;
   /* background-color: #e9e9e9; */
   /* border-radius: 5px; */
   justify-content: center;
   padding-bottom:30px ;
   padding-left: 50px;
   padding-right: 50px;
   /* box-shadow: 10px 10px 5px rgb(219, 219, 219); */
    
}
select.homeaddress{
padding: 15px;
font-family:monospace;
font-size: 18px;
}
.homeaddress{
    outline: none;
    width:300px ;
    height: 50px;
    border-style: none;
    background-color: whitesmoke;
    /* border-bottom: rgb(3, 146, 153) 2px solid; */
    /* border-radius:5px 0px 0px 5px; */
}
h4.searchadressh4{
    margin: 0%;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    font-size: 40px;
    color: #000000;
    font-family:monospace;
    justify-content: center;
    letter-spacing: 2px;
    padding-bottom: 5px;
    /* border-bottom: solid 4px rgb(3, 146, 153); */
    text-align: center;
    font-weight: 500;
}

#homeaddresssubmit{ 
    font-family:monospace ;
    color:white;
    height: 100%;
    min-width: auto;
    background-color: rgb(3, 146, 153);
    border: rgb(3, 146, 153) 2px solid;

    
    border-radius:5px;
    transition: 0.3s;
}
#homeaddresssubmit:hover{
    background-color: #ffffff;
    color: rgb(3, 146, 153);
    border: rgb(3, 146, 153) 2px solid;
}
.searchunder#searchundermiddle{
    
    border-radius: 0px; 
    border-left: solid 1px rgb(130, 130, 130);
     border-right: solid 1px rgb(137, 137, 137); 
}

@media(max-width: 1050px){
    .searchunder{
        padding: 20px;
        /* background-color: rgb(240, 240, 240);z` */
        border-radius: 5px;
        padding-bottom:30px ;
        padding-left: 30px;
        padding-right: 30px;
         
     }
}
@media(max-width: 950px){
    .companyname{
    
       
        font-size: 40px;
        
    
    }
   
   
    .homeaddress{
        outline: none;
        min-width:200px ;
        height: 40px;
        border-style: none;
        border-radius: 10px;
    }
    
}
@media(max-width: 750px){
   
    /* .searchunder{  } */
     .searchaddress{
        
       
        margin: 20px;
        text-align: center;
       
    }
    .searchunder#searchundermiddle{
        border-radius: 0px; 
        border: none;
        border-top: solid 1px rgb(130, 130, 130);
        border-bottom: solid 1px rgb(137, 137, 137); 
    }
    .homeaddress{
        outline: none;
        min-width:200px ;
        height: 40px;
        border-style: none;
        border-radius: 10px;
    }
    
}


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

@media(max-width: 1450px){
  .searchaddress{
   
    bottom: 0px;
   
  }
  
  }
  @media(max-width: 500px){
    .searchaddress{
      
     /* padding-bottom: 10px; */
      padding: 5px;
      margin: 10px;
      height: 150px;
     
     
    }
    select.homeaddress{
      padding: 0px;
      padding-left: 10px;
    }
    .searchunder{
     
     padding: 10px;
     
     padding-bottom:20px ;
     padding-left: 20px;
     padding-right: 20px;
    
  }
    }



/* ------  */





.firsthead{
    text-align: center;
}
h1.firstheadh1 {
    font-family:monospace ;
    font-size: 50px;
    letter-spacing: 5px; 
    color: #717171;
    /* border-bottom: solid 2px rgb(172, 171, 171); */

}


/* ---------- default box ------- */

.defaultcard{
    display: flex;
}

@media(max-width: 820px){
    .defaultcard{
        display: block;
    }
}
.container {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 70px;
    position: relative;
}

.intro {
    position: relative;
    min-height: 300px;
    height: 100%;
    width: 100%;
    
    background-size: 100%;
    overflow: hidden;
    transition: all .72s ease-in-out;
}
.intro.card1{
    background: transparent url("/static/image/images (1).jpg") top center no-repeat;
    position: relative;
    min-height: 300px;
    height: 100%;
    width: 100%;
    
    background-size: 100%;
    overflow: hidden;
    transition: all .72s ease-in-out;

}
.intro.card2{
  background: transparent url("/static/image/images (2).jpg") top center no-repeat;
  position: relative;
  min-height: 300px;
  height: 100%;
  width: 100%;
  
  background-size: 100%;
  overflow: hidden;
  transition: all .72s ease-in-out;

}
    


.intro:after {
    content: '';
    display: block;
    position: absolute;
    /* width: 100%; */
    height: 500px;
    right: -100%;
    left: 0;
    transform: skew(100deg);
    background: #fff;
    bottom: -70%;
    box-shadow: inset 1px 0px 5px 0px rgba(204, 204, 204, 0.72);
}

.container:after {
    content: '';
    max-width: 300px;
    width: 100%;
    margin: 0% auto 0;
    position: absolute;
    left: 0;
    bottom: 0;
    top:0;
    right: 0;
    box-shadow: 0px 5px 5px 0px rgba(204, 204, 204, 0.72);
    z-index: -1;
    transition: all .52s ease-in-out;
}

.meta {
    max-width: 300px;
    width: 100%;
    margin: 0% auto 0;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    padding-top: 110px;
    overflow: hidden;
    
    transition: all .52s ease-in-out;
}

.meta__inner {
    padding: .25rem 1rem;
    line-height: 1.5rem;
    position: relative;  
    background: #fff;
    z-index: 15;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
}
  
.meta:after {
    content: '';
    display: block;
    position: absolute;
    left:0;
    right: 0;
    top: 80px;
    max-width: 300px;
    height: 300px;
    background: #fff;
    border: 1px solid #ccc;
    transform: rotate(90deg) skew(10deg);
    z-index: 4;
}

h3.defaultcardh3 {
    position: relative;
    font-family: monospace;
    font-weight: 300;
    border-left: 4px solid #009d8b;
    padding-left: .72rem;  
}

p.defaultcard {
    font-family: monospace;
    font-size: .85rem;
    font-weight: inherit;
    color: #3b3b3b;
    text-align: justify;
}

p.defaultcard {
    color: #9a9a9a;
    /* text-decoration: none; */
    opacity: .72;
    
    transition: all .27s ease-in-out;
}

p.defaultcard:hover {
    opacity: 1;
    /* text-decoration: underline; */
}
.container:hover .meta{
    transform: translateY(5px);
}

.container:hover .intro {
    transform: translateY(-5px);
}

.container:hover:after {
    transform: translateY(5px);
}
/* --------- end default box -------- */

/* ---------- slider 25 years --------  */
@-webkit-keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-250px * 7));
    }
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-250px * 7));
    }
  }
  .slidayeard {
    background: white;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    /* width: 960px; */
  }
  .slidayeard::before, .slidayeard::after {
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2;
  }
  .slidayeard::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
  }
  .slidayeard::before {
    left: 0;
    top: 0;
  }
  .slidayeard .slida-track {
    -webkit-animation: scroll 40s linear infinite;
            animation: scroll 40s linear infinite;
    display: flex;
    width: calc(250px * 14);
  }
  .slidayeard .slideunderyears {
    height: 100px;
    width: 250px;
  }
  /* --------- end slider 25 years -------  */
  /* ------- footer --------- */
  .footer{
    background-color: #016064;
    color: rgb(200, 200, 200);
    
  }
  .footerdiv{
    /* margin: 20px; */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
 .footercontainer{
    display: flex;
    justify-content: center;
 }
 .footerhead{
    width: 100%;
    padding: 50px;
 }
 .footerulli{
    display: flex   ;
 }
 .footerli{
    list-style-type: none;
    margin-bottom: 20px;
 }
 ul.footerul{
    padding: 40px;
    padding-top: 20px;
    padding-left: 0px;
 }
 a.footera{
    
    color: rgb(228, 228, 228);
    text-decoration: none;
    font-family: monospace;
    font-size: 15px;
    opacity: 0.9;
    transition: 0.5s;
 }
 a.footera:hover{
  /* font-size: 17px; */
  /* padding-left: 1px; */
  border-bottom: #009d8b 1px solid;
 }
 p{
    font-size: 14px;
    font-weight: 10;
    font-family:monospace ;
 }
 .footerhead h2{
    position: relative;
 }
 .footerhead h2::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -15px;
    height: 2px;
    width: 50px;
    background: #ffffff;
 }
 hr{
    border: 0.1px groove rgb(165, 165, 165);
 }
 .unsto{
    display: flex;
 }
 .endcopyright{
    background-color: #014747;
    padding: 5px;
    text-align: center;
 }
 @media(max-width: 1180px){
    .footerdiv{
        
        max-width: 1000px;
        
      }
 }
 @media(max-width: 1000px){
    .afterfooter{ 
        display: block;
      }

      .footerdiv{
       
        max-width: 800px;
        
      }
     
     .footerhead{
       
        padding: 20px;
     
        width: 50%;}
     .footerli{
      
        margin-bottom: 20px;
     }
     ul.footerul{
        padding: 40px;
        padding-top: 20px;
        padding-left: 0px;
     }
     select.homeaddress{
      padding: 10px;
     }
 }
 @media(max-width: 650px){
  .homeaddress{
    width: 100%;  
    padding: 10px;
   }
 }


 @media(max-width: 521px){
    .footerhead{
       
        padding: 20px;
     
        width: 80%;}
        .unsto{
            display: block;
         }
         .footercontainer{
            display: block;
           
         }
         h1.firstheadh1{
            font-size: 30px;
         }
         .homeaddress{
          width: 100%;  
          padding: 10px;
         }
 }
 @media(max-width: 300px){
  .searchunder{
    padding-left: 10px;
  }
   .searchaddress{
    width: 90%;
   }
 }
 /* ------ endfooter ------  */
 /* ------- slider news -------  */
 .card {
    width: 300px;
    min-width: 300px;
    height:auto;
    background:#fff;
    border-radius:30px;
    position:relative;
    z-index:10;
    margin:25px;
    min-height:356px;
    cursor:pointer;
    transition: all .25s ease;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0, .08);
  }
  
  .card:hover {
    transform:translate(0, -10px);
    box-shadow: 0px 17px 35px 0px rgba(0,0,0,.07);
  }
  
  .card h4 {
    position:absolute;
    left: 0;
    top: 0;
    padding: 15px;
  }
  
  .card i {
    position:absolute;
    right: 0;
    top: 0;
    padding: 15px;
    font-size:1.4rem;
    line-height:3.2rem;
  }
  
  .card .cird-text {
    padding: 20px;
  }
  
  p {
    font-size: .8rem;
    opacity: .6;
    margin-top: 10px;
  }
  
  .card .cerd-img {
    /* transform: translate(90px,-10px); */
    margin: 0 30px;
    display:flex;
    align-items: center;
    justify-content:center;
    transition: all .35s ease-out;
  }
  
  .card img {
    height:180px;
  }
  
  .card img.blur {
    position:absulute;
    filter:blur(15px);
    z-index:-1;
    opacity:.40;
    transform: translate(-160px,30px);
    transition: all .35s ease-out;
  }
  
  .card:hover .cerd-img {
    transform:translate(-10px,-10px);
  }
  
  .card:hover .cerd-img img.blur {
    transform:translate(-100px,35px) scale(.85);
    opacity:.25;
    filter:blur(20px);
  }
  
  .cerd-content {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    overflow:auto;
    padding-top: 100px;
    padding-left:60px;
    padding-right: 50px;
    scroll-behavior:smooth;
  }
  
  .cerd-content::-webkit-scrollbar {
     height:0px;
  }
  
  .cerd-content:after {
    content:'';
    display:block;
    min-width:20px;
    height:100px;
    position:relative;
  }
  
  .btnprenex{
    min-width:60px;
    margin:auto 30px;
    height:60px;
    border-radius:20px;
    background:#fff;
    border:0px;
    outline:none;
    cursor:pointer;
    z-index:9;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,.08);
    transition: all .25s ease;
  }
  
  .btnprenex:hover{
    box-shadow: 0px 17px 35px 0px rgba(0,0,0,.07);
  }
  
  
  
  .slidernews {
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgb(242,243,248);
    width:100%;
    height:90vh;
    overflow:hidden;
  }
  
  @media(max-width: 750px){
    .slidernews {
    display: block ; }
    .btnprenex{
      display: none;
    }
  
  }
  
  
  /* ---------- end slider news -------- */
/* --------- achivements -------- */
.mainachivement{
    background-color:rgb(134 188 191);
    /* background: url(https://img.freepik.com/free-photo/old-black-background-grunge-texture-dark-wallpaper-blackboard-chalkboard-room-wall_1258-28312.jpg); */
    width: 100%;
    height: auto;
}
.achivements{
    justify-content: center;
    display: flex;
}
.achivefirst{
    display: flex;
}
 h3.achivh3{
    color:rgb(255, 255, 255) ;
    font-family: monospace;
    font-size: 30px;
 }
 p.achivep{
    color: rgb(255, 255, 255);
    font-family: monospace;
    opacity: 1;
    font-size: 20px;
 }
 .achivetext{
    margin: 10px;
    padding: 10px;
    border-radius: 100px;
    width: 200px;
    background-color: #016064;
    text-align: center;
    transition: 0.6s;
 }
 .achivetext:hover{
       padding-left: 20px;
       padding-right: 20px;
 }
 h1.achivh1{
    color: rgb(255, 255, 255);
    font-size: 50px;
    text-align: center;
    font-family: monospace;
}
.mainachivement h1{
    position: relative;

}
 .mainachivement h1::before{
    content: "";
    position: absolute;
    right: auto;
    left: auto;
    bottom: -15px;
    height: 5px;
    width: 100px;
    background: rgb(0, 171, 160);
    
 }
 @media(max-width: 1200px){
    
    .achivefirst{
        display: block;
    }
    .achivetext{
        padding: 10px;
     }
     
 }
 @media(max-width: 800px){  
    h1.achivh1{   
        font-size: 30px;
        padding: 20px;
        margin: 20px;
     }
     h3.achivh3{
       
        font-size: 20px;
     }
     p.achivep{
        
        font-size: 10px;
     }
     
 }
 @media(max-width: 600px){  
  .achivetext{
    width: 100px;
 }
}
/* ------ end achivements ------- */
/* ------ dropdown ------  */
.profile_button {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.profile_button:hover, .profile_button:focus {
  background-color: #2980B9;
}

.dropdown_profile {
  position: relative;
  display: inline-block;
}

.profile_contect {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.profile_contect a {
  font-family: monospace;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

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

.appear {display: block;}

/* -------- ------- --------  */
.menu_option_data {
  width: 15px;
  height: 2px;
  background-color: black;
  margin: 6px 0;
}
.feedback_button{
  text-decoration:none;
  color: white;
  padding: 10px;
  background-color:rgb(3, 146, 153);
  border-radius: 5px;
  font-family: monospace;
  font-size: 20px;
}
/* ------- ddd --------  */
.dropdown_profile {
  display: inline-block;
  position: relative;
}

.button_profile{
  border:none;
  border-radius:5px;
  padding-top: 10px;
  /* padding:15px 30px; */
  font-size:18px;
  cursor:pointer;
  background-color: transparent;
}

/* .button_profile:hover{
  background-color:#ddd;
} */

.dropdown-options_profile {
  display: none;
  position: absolute;
  overflow: auto;
  background-color:#fff;
  border-radius:5px;
  /* box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4); */
}

.dropdown_profile:hover .dropdown-options_profile {
  display: block;
}

.dropdown-options_profile a {
  font-family: monospace;
  width: 115px;
  display: block;
  background-color: whitesmoke;
  color: #000000;
  padding: 5px;
  text-decoration: none;
  padding:10px;
}

.dropdown-options_profile a:hover {
  color: #0a0a23;
  background-color: #ddd;
  border-radius:5px;
}