*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
}


@font-face {
    src: url("../fonts/NotoSans-Medium.ttf");
    font-family: "NotoSans-Bold";
  }

  @font-face {
    src: url("../fonts/NotoSans-Light.ttf");
    font-family: "NotoSans-Medium";
  }

  h1,h2,h3,h4,h5,h6{
      font-family: NotoSans-Bold;
  }
p{
    font-family: NotoSans-Medium;
    /* font-weight: 700; */
}
  header{
    position: fixed;
    top: 0; left: 0;right: 0;
    background-color: white;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    padding: 0px 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    list-style: none;
    line-height: none!important;
}
a{
    margin-bottom: 0;
    text-decoration: none;
    line-height: none!important;
}
header .logo{
    /* font-weight: bolder; */
    /* font-size: 25px; */
    color: #333;
}

header a img{
    max-width: 50%;
}

header .navbar ul{
list-style: none;

}

header .navbar ul li{
    position: relative;
    float: left;
}
header .navbar ul li a{
font-size: 20px;
padding: 20px;
color: #333;
display: block;
text-transform: uppercase;
}
header .navbar ul li a:hover{
    background: rgb(0,55,119);
    background: linear-gradient(90deg, rgba(0,55,119,1) 0%, rgba(16,152,193,1) 71%);
color: white;
}
header .navbar ul li ul{
position: absolute;
left: 0;
width: 250px;
background: #fff;
display: none;
}
header .navbar ul li ul li{
    width: 100%;
    border-top: 1px solid rgba (0,0,0,0.1);
}
header .navbar ul li ul li ul{
    left: 200px;
    top: 0;

}
header .navbar ul li:focus-within>ul,
header .navbar ul li:hover>ul{
    display: initial;
}

#menu-bar{
    display: none;
}
header label{
    font-size: 20px;
    color: #333;
    cursor: pointer;
    display: none;

}

/* hero section */
.mainhero{
    height: 80vh;
    background:linear-gradient(rgba(0, 55, 119, 0.7), rgba(16, 152, 193, 0.7)), url(../images/hero.jpg) repeat fixed 100%;
    background-size: cover;
}
.aboutmainhero{
    height: 80vh;
    background:linear-gradient(rgba(0, 55, 119, 0.7), rgba(16, 152, 193, 0.7)), url(../images/heroabt.jpg) repeat fixed 100%;
    background-size: cover;
}
.productmainhero{
    height: 80vh;
    background:linear-gradient(rgba(0, 55, 119, 0.7), rgba(16, 152, 193, 0.7)), url(../images/heroproduct.jpg) repeat fixed 100%;
    background-size: cover;
}
.contactmainhero{
    height: 80vh;
    background:linear-gradient(rgba(0, 55, 119, 0.7), rgba(16, 152, 193, 0.7)), url(../images/herocontact.jpg) repeat fixed 100%;
    background-size: cover;
}

#typed{
    color: white;
    line-height: 100vh;
    font-size: 3em;
    padding: 4px;
    text-transform: uppercase;
    background: rgb(0,55,119);
    background: linear-gradient(90deg, rgba(0,55,119,1) 0%, rgba(16,152,193,1) 71%);
    -webkit-box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
    box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
}
#typed::after{
    content: "|";
    color: rgb(255, 201, 23);
    display: inline;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation:  blink 0.7s infinite;
    animation:  blink 0.7s infinite;
}
@keyframes blink{
    0%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}

/* hero section */



/* intro section */
.intro{
    background-color: #f4f4f4;
    height: auto;
    padding: 55px 75px;
}
.introcard{
    padding: 16px 18px;
}
.headiintrocard{
position: relative;
padding-left: 15px;
border-left: 5px solid rgb(255, 201, 23);
}
/* .headiintrocard h2{
    font-size: 25px;
} */

.headiimga img{
    max-width: 100%;
}
.headiimga{
    padding-right: 15px;
border-right: 5px solid rgb(255, 201, 23);
}


.headiimg img{
    max-width: 100%;
}
.headiimg{
    padding-left: 15px;
border-left: 5px solid rgb(255, 201, 23);
}





.headiintrocard::before{
/* position: absolute; */
content: "";
/* margin-right: 90px;
width: 10px;
height: 60px; 
background-color: brown;*/
/* border: 15px solid red; */
}

/* intro section */

/* speciality section */
.speciality{
    height: 80vh!important;
    overflow-y: hidden;
    position: relative;
  
}
.speciality video {
  width: 100%;
  height: auto;
opacity: 0.4;

  }
  .ourspeciality{
      position: absolute;
      top: 20px;
      left: 50px;
  }

  .btnspecial{
      /* background-color: rgb(255, 201, 23); */
      background: rgb(0,55,119);
background: linear-gradient(90deg, rgba(0,55,119,1) 0%, rgba(16,152,193,1) 71%);

      color: white;
      padding: 10px 30px;
      border-radius: 25px;
      margin: 10px 0px;
  }

  .btnspecial:hover{
    background: rgb(0,71,154);
    background: linear-gradient(90deg, rgba(0,71,154,1) 0%, rgba(2,101,131,1) 71%);
    color: rgb(255, 201, 23);
  }

.clieport{
    padding: 75px 65px;
    background-color: #f1f1f1;
    height: auto;
    display: flex;
    justify-content: center;
}
.cliimg img{
    max-width: 80%;
}
.clieport h4{
    color: rgb(255, 201, 23);
    text-align: center;
    margin-bottom: 20px;
}


/* speciality section */


 
/* gallery section started */
.gallery{
    background-color:  #f1f1f1;
    padding: 55px 40px;
}
.gallhead{
    /* display: flex;
    justify-content: center;
    align-items: center; */
    text-align: center;
    margin-bottom: 70px;
}
.probtns{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}


.mintbtnblk{
    /* display: flex;
    justify-items: center;
    align-items: center; */
    /* background-color: #333; */

    display: flex;
    justify-content: center;
    align-items: center;
}
.mintbtnblk a{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 15px 20px;
    width:45%;
    height: 100%;
    background: rgb(0,55,119);
    background: linear-gradient(90deg, rgba(0,55,119,1) 0%, rgba(16,152,193,1) 71%);
    color: white;
}
.mintbtnblk a:hover{
    background: rgb(0,71,154);
background: linear-gradient(90deg, rgba(0,71,154,1) 0%, rgba(2,101,131,1) 71%);
}


/* gallery section ended */

/* footer section */

footer{
    background-color: #2e3033;
    color: #eee;
    height: auto;
    padding: 45px 25px;
    display: flex;
    justify-content: center;
}
.footerone,.footertwo,.footerthree{

}
.footertwo{
    border-left: 2px solid #3e3f42;
    border-right: 2px solid #3e3f42;
}
.footerthree ul{
    list-style: none;
    padding: 15px 0px 0px 8px;
    
}
.footerthree ul li a{
    color: white;
    /* font-weight: 500; */
    text-transform: uppercase;
}

.credit{
    height: auto;
    background-color: #242629;
    padding: 25px 50px;
    color: #f4f4f4;
    border-top: 2px solid #3e3f42;
}
.credit a{
    text-decoration: none;
    font-weight: 500;
    color: white;
}
.credit ul{
list-style: none;
display: flex;
flex-direction: row;
}
.socialico{
    display: flex;
    justify-content: center;
    text-align: center;
}
.credit ul li{
    padding: 0px 5px;
    background-color: #333;
}
.credit ul li a{
    /* padding: 5px; */
    width: 15px 15px;
    height: 5px;
    
    margin-bottom: 0px;
}
/* footer section */

/* aboutus started */
.abtintro{
    background-color: #f4f4f4;
    height: auto;
    padding: 55px 75px;
}
.abtintrocircl{
    display: flex;
    justify-content: center;
}
.circle-slider{
    padding: 0;
    position: relative;
    background-image: url(../images/hero.jpg);
    width: 505px; 
    height: 505px;
    background: rgb(0,55,119);
    background: linear-gradient(90deg, rgba(0,55,119,1) 0%, rgba(16,152,193,1) 71%);
    margin-top: -120px;
    
    border-radius: 50%;
    /* background: #fff; */
    -webkit-box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
    box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
    border: 8px solid #fff;
    background-size: cover;
    /* will-change: height, width; */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}
.circle-one{
    padding: 0;
    position: absolute;
    background-image: url(../images/abtmain.jpg);
    /* background-color: rgb(223, 39, 39); */
    width: 505px; 
    height: 505px;

    /* margin-top: -120px; */
    
    border-radius: 50%;
    /* background: #fff; */
    -webkit-box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
    box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
    border: 8px solid #fff;
    background-size: cover;
    /* will-change: height, width; */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}
.circle-two {
    bottom: 3%;
    height: 30%;
    position: absolute;
    background-image: url(../images/abt1.jpg);
    right: 3%;
    width: 30%;
    border-radius: 50%;

    -webkit-box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
    box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
    border: 8px solid #fff;
    background-size: cover;
    /* will-change: height, width; */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}
.circle-three{
height: 25%;
position: absolute;
background-image: url(../images/abt3.jpg);
border-radius: 50%;
right: 4.2%;
top: 4.2%;
width: 25%;

-webkit-box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
border: 8px solid #fff;
background-size: cover;
/* will-change: height, width; */
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
.circle-four{
    bottom: 20%;
    height: 20%;
    left: -5%;
    position: absolute;
    background-image: url(../images/abt2.jpg);
    background-position: 0%;
    background-color: #61570d;
    border-radius: 50%;
    width: 20%;

    -webkit-box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
    box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
    border: 8px solid #fff;
    background-size: cover;
    /* will-change: height, width; */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

.vimi{
    width: 100%;
    height: auto;
    background-color: #f1eeee;
    padding: 65px 65px;
    display: flex;
    justify-content: center;
    border-top: 2px solid #e7e7e7;
    border-bottom: 2px solid #e7e7e7;
}
.vision,.mission{
    background-color: white;
    padding: 20px 35px;
    text-align: center;
    box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
    
}
.vision{
    background-color: rgb(251, 251, 251);
}
.vision h4,.mission h4{
    color: #61570d;
    position: relative;
    margin: 4px 5px;
}

.vision h4::before,.mission h4::before{
    content:" ";
    display: block;
    height: 2px;
    width: 27%;
    position: absolute;
    top: 50%;
    left: 20px;
    background: rgb(0,55,119);
    background: linear-gradient(90deg, rgba(0,55,119,1) 0%, rgba(16,152,193,1) 71%);
}
.vision h4::after,.mission h4::after{
    content:" ";
    display: block;
    height: 2px;
    width: 27%;
    position: absolute;
    top: 50%;
    right: 20px;
    background: rgb(0,55,119);
    background: linear-gradient(90deg, rgba(0,55,119,1) 0%, rgba(16,152,193,1) 71%);
}

.clinum{
    padding: 75px 65px;
    background: linear-gradient(rgba(244, 244, 244, 0.8), rgba( 244, 244, 244, 0.8)),url(../images/clientbg.jpg) repeat fixed 100% ;
  background-repeat: no-repeat;
  background-size: cover;
    background-color: #f4f4f4;
    height: auto;
}
.clicard{
    text-align: center;
}
.clicard h2{
margin-bottom: 0px;
font-size: 70px;
position: relative;
color: gray;
}
.clicard h2::after{
    content:" ";
    display: block;
    height: 2px;
    width: 25%;
    position: absolute;
    top: 95%;
    left: 37.5%;
    text-align: center;
    background: rgb(0,55,119);
    background: linear-gradient(90deg, rgba(0,55,119,1) 0%, rgba(16,152,193,1) 71%);
}
/* aboutus ended */

/* contact started */
.contact{
    height: auto;
    padding: 30px 60px;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
}
.conthead{
    font-family: NotoSans-Bold;
    font-size: 20px;
}
.maincont{
    display: flex;
    justify-content: center;
}
.intouch,.contaus{
    background-color: white;
    padding: 50px;
    margin: 10px;
    -webkit-box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
    box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
}
.contact ion-icon{
color: rgb(255, 175, 28);
font-size: 20px;
}
.contlist p span{
margin-top: -140px;
}
.otpnumber h2{
    padding: 15px 25px;
    color: rgb(255, 255, 255);
    background: rgb(0,55,119);
    background: linear-gradient(90deg, rgba(0,55,119,1) 0%, rgba(16,152,193,1) 71%);
}
.contlist ion-icon{
    color: rgb(255, 255, 255);
font-size: 20px;
padding: 5px;
background: rgb(0,55,119);
background: linear-gradient(90deg, rgba(0,55,119,1) 0%, rgba(16,152,193,1) 71%);
}
.mainheadcont{
    position: relative;
}
.mainheadcont::before
{
    content:" ";
    display: block;
    height: 1px;
    width: 58%;
    position: absolute;
    top: 50%;
    right: 0;
    text-align: center;
    background: rgb(0,55,119);
    background: linear-gradient(90deg, rgba(0,55,119,1) 0%, rgba(16,152,193,1) 71%);
}
.intouch h6{
    color: #2e3033;
}

.contgmap
{
    height: auto;
    padding: 30px 60px;
    background-color: #f7f7f7;
}
.maingmap{
    background-color: white;
    padding: 50px;
    margin: 10px;
    -webkit-box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
    box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
}

.units{
    padding: 45px 95px;
    background-color: #f7f7f7;
    height: auto;
    /* display: flex;
    justify-content: center; */
}
.unitblock{
    background-color: white;
    padding: 50px;
    margin: 10px;
    -webkit-box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
    box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
}
.unitblock h4{
    text-align: center;
    color: rgb(255, 201, 23);
}
.unithead{
margin-top: 20px;
padding-left: 10px;
border-left: 3px solid rgb(255, 201, 23);
}
.unitblock ul{
margin-top: 15px;
}
.unitblock ul li{
    list-style: none;
}
.unithead h3{
    margin-bottom: 0;
}
.txtlistcont{
    margin-top: 5px;
}


/* contact ended */

@media(max-width:991px)
{
    header{
        padding: 20px;
    }
    header label{
        display: initial;
    }
    header .navbar{
        position: absolute;
        top:100%;left: 0%;right: 0%;
        background: #fff;
        border-top: 1px solid rgba(0,0,0,0.1);
        display: none;
    }
    header .navbar ul li{
        width: 100%;
    }
    header .navbar ul li ul{
    position: relative;
    width: 100%;

    }
    header .navbar ul li ul li{
        background: #eee;

    }
    header .navbar ul li ul li ul{
        width:100%;
        left: 0;

    }
    #menu-bar:checked~.navbar{
         display: initial;
    }
    .speciality{
        height: auto;
    }

    #typed{
        color: white;
        position: absolute;
        top: 50vh;
        /* margin-top: 50vh; */
        line-height: 4vh;
        font-size: 2em;
        padding: 4px;
        text-transform: uppercase;
        background: rgb(0,55,119);
        background: linear-gradient(90deg, rgba(0,55,119,1) 0%, rgba(16,152,193,1) 71%);
        -webkit-box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
        box-shadow: 2px 2px 0 rgb(0 0 0 / 5%);
    }
    .units{
        padding: 10px;
    }
    .unitblock{
        padding: 5px;
    }
    .circle-slider{
        padding: 0;
        position: relative;
    
        width: 205px!important; 
        height: 205px!important;
       margin-top: 0;
     
        
    }
    .circle-one{
        padding: 0;
        position: absolute;
        border: 4px solid #fff;
          width: 205px; 
        height: 205px;
        margin-top: 0;
    }
    .circle-two {
        bottom: 3%;
        height: 30%;
        width: 30%;
        position: absolute;
        border: 4px solid #fff;
    }
    .circle-three{
    height: 25%;
    width: 25%;
    position: absolute;
    border-radius: 50%;
    right: 4.2%;
    top: 4.2%;
    border: 4px solid #fff;
    }
    .circle-four{
        bottom: 20%;
        height: 20%;
       width: 20%;
        left: -5%;
        position: absolute;
        border-radius: 50%;
        border: 4px solid #fff;
    }
    .maingmap{
        margin: 5px;
        padding: 20px;
    }
    .mainheadcont::before
{
    content:" ";
    display: block;
    height: 1px;
    width: 32%;
    position: absolute;
    top: 50%;
    right: 0;
    text-align: center;
    background: rgb(0,55,119);
    background: linear-gradient(90deg, rgba(0,55,119,1) 0%, rgba(16,152,193,1) 71%);
}
.vision h4::before,.mission h4::before{
    content:" ";
    display: block;
    height: 2px;
    width: 17%;
    position: absolute;
    top: 50%;
    left: 10px;
    background: rgb(0,55,119);
    background: linear-gradient(90deg, rgba(0,55,119,1) 0%, rgba(16,152,193,1) 71%);
}
.vision h4::after,.mission h4::after{
    content:" ";
    display: block;
    height: 2px;
    width: 17%;
    position: absolute;
    top: 50%;
    right: 10px;
    background: rgb(0,55,119);
    background: linear-gradient(90deg, rgba(0,55,119,1) 0%, rgba(16,152,193,1) 71%);
}
.cliimg{
    display: flex;
    justify-content: center;
}
.cliimg img{
   padding-top: 20px;
}

.mainhero{
    height: 100vh;
    background:linear-gradient(rgba(0, 55, 119, 0.7), rgba(16, 152, 193, 0.7)), url(../images/herosmall/hero.jpg) repeat fixed 100%;
    background-size: cover;
}
.aboutmainhero{
    height: 100vh;
    background:linear-gradient(rgba(0, 55, 119, 0.7), rgba(16, 152, 193, 0.7)), url(../images/herosmall/heroabt.jpg) repeat fixed 100%;
    background-size: cover;
}
.productmainhero{
    height: 100vh;
    background:linear-gradient(rgba(0, 55, 119, 0.7), rgba(16, 152, 193, 0.7)), url(../images/herosmall/heroproduct.jpg) repeat fixed 100%;
    background-size: cover;
}
.contactmainhero{
    height: 100vh;
    background:linear-gradient(rgba(0, 55, 119, 0.7), rgba(16, 152, 193, 0.7)), url(../images/herosmall/herocontact.jpg) repeat fixed 100%;
    background-size: cover;
}
.intro {
    padding: 55px 20px;
}
.abtintro {
    padding: 55px 20px;
}
.contact{
    padding: 20px 20px;
}
.contgmap{
    padding: 20px 20px;
}
.speciality{
    height: auto!important;
    overflow-y: hidden;
    position: relative;
  
}
.speciality video {
  width: 100%;
  height: auto!important;
opacity: 0.4;

  }
  header a img {
    max-width: 50%;
    float: right;
}
.headiintrocard h2{
    font-size: 7px;
}
.btnsmall{
    visibility: hidden;
}
}