/*Default styles*/
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

h1{
  font-family: 'BankGothic LT BT';
    text-transform: uppercase;
    font-weight: 700;
}

h2{
  font-family: 'BankGothic LT BT';
}

body{
    overflow-x: hidden;
    font-family: 'BankGothic LT BT';
    background-color: #fff;
   
}
.btn{
   transition:  all 300ms ease-in-out;
   font-weight: 500 !important;
   text-transform: uppercase;
}
.btn:hover{
    background-color: #ededed !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}


.nav .navbar-nav{
  display: flex;
  justify-content: center;

}

.navbar-inverse .navbar-nav>li>a, .menu>li>a, .submenu>li>a{
  /* background: -webkit-linear-gradient(#ff1010, #ffad06);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  
  
    display: block;
    width: 200px;
    background-color: black;
    color: white;
    padding: 10px 0px;
    font-size: 1.2rem;
    text-decoration: none;
    text-align: center;
  
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .navbar-inverse .navbar-nav>li>a, .menu>li>a, .submenu>li>a{
    width: 170px !important;
  }
  .submenu{
    transform: translateX(170px) translateY(-38px) !important;
  }
}

@media only screen and (max-width: 767px){
  
  
  .submenu{
    transform: translateX(200px) translateY(-84px) !important;
  }
}

@media only screen 
and (min-width: 768px) 
and (max-width: 991px) {

  
  .navbar-inverse .navbar-nav>li>a, .menu>li>a, .submenu>li>a{
    width: 135px !important;
    
  }
  .submenu{
    transform: translateX(135px) translateY(-38px) !important;
  }
}

@media only screen and (min-width: 1200px){
  .navbar-inverse .navbar-nav>li>a, .menu>li>a, .submenu>li>a{
    width: 200px !important;
  }
  .submenu{
    transform: translateX(200px) translateY(-38px) !important;
  }
}


.navbar-inverse .navbar-nav>li>a:hover,.menu>li>a:hover,.submenu>li>a:hover{
  /* background:  linear-gradient(185deg, red, blue);  */
  background-color: skyblue;
}

.menu{
  list-style-type: none;
  display: none;
}

.navbar-nav li:nth-child(2):hover .menu{
  display: block;
  max-height: 280px;
    overflow-y: hidden;
}

.submenu{
  list-style-type: none;
  transform: translateX(200px) translateY(-38px);
  position: absolute;
  display: none;
}

.menu li:nth-child(1):hover .submenu{
  display: block;
}

.menu li:nth-child(2):hover .submenu{
  display: block;
}

.menu li:nth-child(3):hover .submenu{
  display: block;
}

.menu li:nth-child(4):hover .submenu{
  display: block;
}

/* .menu li a{
  background-color: black;   
    padding: 6px 2px ;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
    line-height: 33px;
    
    
} */


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


/* Navbar Style*/
/* .navbar li a:hover{
    border-bottom: solid 3px #fff;;
   
} */




.navbar a{
  font-family: BankGothic MD BT;
  font-weight: 600;
}

.navbar-inverse{
    /* background-color: darkblue; */
    background: url(../images/watermark8.jpg);
    max-height: 20.5% !important;
   
}


.navbar .NABLlablink:hover{ 
  
  text-decoration: underline !important;
}
/*Header Style-----*/
.header{
    /* border: 50px solid white; */
    background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),
     url(../images/RC_Snapshot.png);    
    width: 100%;
            height: 100%;         
            background-size: 100%;
            background-repeat: no-repeat;
            background-size: cover;
            margin-left: auto;
            margin-right: auto;

}

.header .video-container {
    height: 100%;
    width: auto;
    position: relative;
   
}

.header .video-container video {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    z-index: 0;
  }

  .header .video-container .row{
    display: flex;
    height: 50%;
    align-items: center;
    left:3%;
    top: 30%;
  }

  .header .video-container .col{
flex-basis: 50%;
  }

  .header .video-container .col h1{
    background: -webkit-linear-gradient(#ff1010, #ffad06);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: underline;
    font-size: 45px;
  }

  .header .video-container .col h2{
    text-align: center;
    color: cornsilk;
    font-weight: 500;
  }

  .header .video-container .col button{
    margin-top: 15px;
    border-radius: 20px;
  }

  .header .video-container .col  button:hover{
    color: darkblue;
    background-color: #fff;
    font-weight: bold;
  }

 
  @media (max-width: 660px){
    .header .video-container .row{
      flex-direction: column;
          top: 17%;
          left: 7%;
          width: 94% !important;
          border: none !important;
      }

      .header .video-container .row h1{
        font-size: 28px !important;
      }

      .header .video-container .row h2{
        font-size: 26px !important;
      }

      .header .video-container .row .card{
        width:100px;
        height:100px;
        }

        .header .video-container .row h1,h2{
          margin-top: 0px;
          margin-bottom: 0px;
        }
  }

@media only screen and (min-width:661px) and (max-width: 767px) {
  
  .header .video-container .row{
    flex-direction: column;
        top: 11%;
        left: 7%;
        width: 94% !important;
        border: none !important;
    }
    
    .header .video-container .row .card{
    width:100px;
    height:100px;
    }

    /* .header .video-container .row .secondcolumn{
      margin-right: 17%;
    } */

.header .video-container .row h1,h2{
  margin-top: 0px;
  margin-bottom: 0px;
}
   
}


@media only screen and (min-width:768px) and (max-width:1000px){ 
  .header .video-container .row{
    flex-direction: column;
        top: 19%;
        left: 7%;
        width: 94% !important;
        border: none !important;
    }

  .header .video-container .row h1,h2{
    margin-top: 0px;
    margin-bottom: 0px;
    white-space: nowrap;
  }

  .header .video-container .row .card{
    width:100px;
    height:100px;
    }
}

@media only screen and (min-width:1001px) and (max-width:1384px){ 

  
  .header .video-container .row{
    width: 90% !important;
        left: 5%;
       
    }



  .header .video-container .row .card{
    width:185px;
    height:230px;
    }
}

@media only screen and (min-width:1385px){
  .header .video-container .row h1,h2{
white-space: nowrap;
  }
}

@media (max-width: 300px) {

.modal-header .close{

  margin-top: -16%;
}
}

  /* .header .video-container .title{
    font-size: 63px;
    color: white;
    position: absolute;
    z-index: 9999;
    top: 30%;
    left: 50%;
    transform: translate(-50%,100%);   
    font-weight: 700;
  }

  .header .video-container .subtitle
  {
    font-size: 40px;
    color: white;
    position: absolute;
    z-index: 9999;
    top: 70%;
    left: 50%;
    transform: translate(-50%,100%);   
    font-weight: 700;
  }

  .header .video-container button{
    position: absolute;
    z-index: 9999;
    top: 100%;
    left: 50%;
    transform: translate(-50%,100%);  
  } */

  /* .header .video-container h1{
    font-size: 4em;
    color: white;
    position: absolute;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%,100%);
  } */
 
/* .header video {
    position: absolute;
    left: 50%;
    top: 50%;
   
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;   
} */

.header .video-container .RCLogo_col{
  height: 100%;
    /* min-width: 20%; */
}
.header .video-container .Desc_col{  
    min-width: 60%;
}

.header .video-container  .NABLLogo_col{
  /* min-width: 20%; */
  text-align: center;
}

.header .row {
    position: relative;
    z-index: 1;   
    height: 500px;
}   


.header h1{
    color: #fff;
    text-align: center;
    font-size: 50px;
    /* margin-top: 200px; */
    
}

.header h3{
text-align: center;
color: #fff;
}

.LogoNABL span,
.LogoNABL h1{   
    font-size: 60px;
    text-shadow: 1px 2px 2px #8B5F4D;
    /* background: -webkit-linear-gradient(#ff1010, #ffad06);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    /* color: #ff022c; */
}
.LogoNABL h1{ 
    text-align: center; 
    font-size: 60px;   
    color: black;
    
}

.LogoNABL h2{
    font-family: 'Poppins', sans-serif;
    margin-top: 0;
    font-size: 35px;
    font-weight: bold;
    text-transform: uppercase;
    /* color: #898989; */
    color: darkblue;
    text-align: center;
    text-shadow: 1px 2px 2px #8B5F4D;
}



.flex-container{
    display: flex !important;
    border: 1px solid transparent !important;
    height: 100px;
    justify-content: center;
}

.flex{
    text-align: center;
    align-self: center;
    color: #fff;
    border-radius: 2px;
    border:0;
    background-color: chocolate;
}



.LogoNABL{
    /* border: 2px solid #000; */
}
.card{
    width: 200px;
    height: 230px;
    display: inline-block;
    border-radius: 10px;
    padding: 15px 25px;
    box-sizing: border-box;
    cursor: pointer;
    margin: 10px 15px;    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.8s;
}

.card:hover,.form-box:hover{
    transform: translateY(-10px);
}

.RC_Logo{
    background-image: url(../images/RC_Logo.png);
}

.NABL_Logo{
    background-image: url(../images/NABL_Logo.png);
    opacity: 0.5;
}

.revealNABL.active{
  opacity: 1;
  animation: zoomin 0.5s linear 1;
  animation-delay: 0.5s;
  visibility: hidden;
  animation-fill-mode: forwards;
}

@keyframes zoomin{
  0%{
    transform: scale(0.1);
    visibility: visible;
  }
  100%{
    transform: scale(1);
    visibility: visible;
  }
}

.About_Logo{
    background-image: url(../images/about.jpg);
    border: 1px solid lightgray;
    height: 274px !important;
}

.certificate{
  background: url(../images/MICRO11.JPG);
    background-repeat: round;
}

.certificate_Logo{
    background-image: url(../images/certificate.jpg);
    width: 300px !important;
    height: 400px !important;
    opacity: 1;
}

.broucher_Logo{
  background-image: url(../images/RC_broucher.jpg);
  width: 300px !important;
  height: 400px !important;
  opacity: 1;
}

.description{
  font-weight: 600;
  font-size: 16px;
  /* color: #000; */
  color: darkblue;
  text-shadow: 1px 2px 2px #8b5f4d;
}


/*ABOUT STYLE*/
.about{
    background-image: url(../images/template2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.about h6,.certificate h6,.contact h6{
  color: #fff;
    font-size: 36px;
    font-weight: 600;
    font-family: BankGothic LT BT;
    text-align: center;
    text-transform: lowercase;
    text-shadow: 1px 2px 2px red !important;
}

.Abouttext h1{
    font-size: 20px;
    color: #000 !important;
    font-family: BankGothic LT BT;
}

.Abouttext  strong{
    font-weight: bolder;
    text-decoration: none;
    color: #fff;
   /* background: -webkit-linear-gradient(#ff1010, #ffad06);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent; */

}

.Abouttext p{
 font-family: bankgothic LT BT ;
 text-align: justify;
 font-size: 16px;
}

.Aboutimage{
    width: 30%;
    border: 1px solid red;  
    margin-top: 5px; 
}

.Aboutimage img {
  
 height: 200px;
}

/***************************Contact Us Style******************/
.contact{
  background: url(../images/watermark5.JPG);
  background-repeat: round;
  background-size: contain;
    
}
.contact-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/contact-us4.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.contact-header h1{
    margin-top: 40px;
   
}
.contact-us{
    width: 80%;
    margin:auto;
    padding-top: 80px;
    padding-bottom: 50px;
}


.hero{
    height: 31%;
    width: 100%;
    float: left;
    /* background:linear-gradient(to right,#ff105f,#ffad06); */
  }
  .hero1{
      width: 100%;
    height: 88%;
    top: 5.5%;
    left: 0%;
    float: right;
    background-image: url("dark.jpg");
    /* background:linear-gradient(to right,#ff105f,#ffad06); */
  }
  .form-box{
    width: 380px;
    height: 522px;
    position: relative;
    /* margin: 0% auto; */
    /* background: #fff; */
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow: hidden;
    border: 1px solid black;
    background-color: #111;
    text-align: left;
    opacity: 0.8;    
    transition: transform 0.8s;
  }

  .button-box{
    width: 220px;
    margin: 15px auto;
    position: relative;
    box-shadow: 0 0 20px 9px #ff61241f;
    border-radius: 30px;
  }

  .toggle-btn{
    padding: 6px 22px;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: 1px;
    position: relative;
    color: #fff;
  }

  #btn{
    top: 0;
    left: 0;
    position: absolute;
    width: 110px;
    height: 100%;
    background: linear-gradient(to right,#ff105f,#ffad06);
    border-radius: 30px;
    transition: .5s;
  }

  .input-group{
    top: 68px;
    /* left: 13px; */
    position: absolute;
    width: 365px;
    transition: 0.5s;

  }
 
  .map,.touch{
      margin-top: 10px;     
  }

  .mapframe{
      height: 522px;
      width: 100%;
  }

  .bgimage{
    background-image: url(./images/contact.gif);
    background-position: right 0px center;
    background-size: 700px 450px;
   
    background-repeat: no-repeat;
  }

  .contactsection_title h1{
      color: #777;
      font-size: 20px;
      font-weight: bolder;
      background: -webkit-linear-gradient(#ff1010, #ffad06);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .contact-group{
    background: transparent;
    top: 77px;
    left: 13px;
    position: absolute;
    width: 365px;
    transition: 0.5s;
    /* border: 1px solid #ff5e14; */
  }

  .contact-group table{
      width: 100%;
      text-align: center;
  }
  .contact-group table tr th{
    color: #fff;
    font-size: 20px;
    text-transform: capitalize;
    text-align: center;
    /* font-family: calibri; */    
  }

  .contact-group table tr td p,.contact-group table tr td p a{
    
    font-size: 14px;    
    color: #ff5e14;
    line-height: 2;
    font-weight:600;
    
  }

  .contact-group table tr td p a i{
    width: 1.5em ;
  }
  .input-field{
    width: 360px;
    height: 38px;
    /* left: 4px; */
    padding: 10px 18px;
    margin: 4px 0px;
    border-radius: 18px;
    outline: none;
    background: transparent;
    color: grey;
    border: 1px solid orangered;
  }
 
  .submit-btn {
    width: 52%;
    padding: 11px 30px;
    cursor: pointer;
    display: block;
    margin: auto;
    background: linear-gradient(to right,#ff105f,#ffad06);
    border: 0;
    
    border-radius: 30px;
  }
  .submit-btn:hover{
    color:white;
  }

  #emailform{
left: 450px;
  }

  #contactform{
left: 10px;
  }

/***************************Contact Us Style******************/
footer{
  width: 100%;
  position: relative;
  bottom: 0;
  top:0;
  background: linear-gradient(to right,#00093c,#2d0b00);
  color: #fff;
  padding: 100px 0 30px;
  /* border-top-left-radius: 125px;
  border-top-right-radius: 125px; */
  font-size: 13px;
  line-height: 20px;
  font-family: Calibri !important;
}

.footerrow{
  width: 85%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  flex-basis: 25%;
padding: 10px;
}

footer .underline{
  width: 35%;
  height: 5px;
  background: #767676;
  border-radius: 3px;
  position: absolute;
  top: 25px;
  left: 0;
  overflow: hidden;
}

footer .underline span{
  width:15%;
  height: 100%;
  background-color: #fff; 
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 10px;
  animation: moving 2s linear infinite;
}

@keyframes moving{
  0%{
    left: -20px;
  }
  100%{
    left: 100%;
  }
}



footer h3{
margin-top: 0;
}

footer .footer-icons a{
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor:unset;
  /* background-color: #33383b; */
  border-radius: 2px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 35px;
  margin: 3px;
  margin-bottom: 5px;
  transition: .5s;
}
footer .footer-icons a img{
  width: 30px;
  margin: 2px 2px;
  box-shadow: 0 0 20px 0 #7f7f7f3d;    
  border-radius: 50%;
  cursor:unset;
}

footer .quickLinks a{
  color: white;
  cursor: pointer;
}

footer .quickLinks a:hover{
  /* color: #8A0303; */
  background: -webkit-linear-gradient(#ff1010, #ffad06);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

.btn-color-background{
  width: 230px;
  -moz-user-select: none;
  background-image: -webkit-linear-gradient(
145deg
,#faa61f 0%,#faa61f 0%,#ed1847 100%);
  border: 1px solid #bfa67a;
  border-radius: 25px;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1.42857;
  margin-bottom: 10px;
  margin-top: 38px;
  padding: 12px 10px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.5s ease 0s;
  vertical-align: middle;
  text-decoration: none;
  
}

.btn-color-background:hover{
 text-decoration: none;
 color: #272627;
 background: transparent;
}

/* @media screen and (max-width: 991px) {
  .sociallinks{
    text-align: center;
  }
} */

  /*Modal Popup*/
  #certificateModal .btn, #broucherModal .btn{
    transition: all 300ms ease-in-out;
    font-weight: bold !important;  
    text-transform: none;  
}

#certificateModal .btn-info,#broucherModal .btn-info{
    color: #fff;
    background-color: #002834 !important;
    border-color: #002834 !important;;    
}


/*Reveal Section*/
.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: all 1.5s ease;
}

.reveal.active{
  transform: translateY(0px);
  opacity: 1;
}


.revealbox1{
  position: relative;
  transform: translateX(100px);
  opacity: 0;
  transition: all 2s ease;
}

.revealbox1.active{
  transform: translateX(0px);
  opacity: 1;
}


/****************SlideShow*******************************/
:root{
    --marquee-width:89vw;
    --marquee-height:40vh;
    --marquee-elements: 15;
    /* --marquee-elements:9; */
    --marquee-elements-displayed:3;
    --marquee-elements-width:calc(var(--marquee-width)/var(--marquee-elements-displayed));
    --marquee-animation-duration:calc(var(--marquee-elements)*3s);
}

.marquee{
    width: var(--marquee-width);
    height: var(--marquee-height);
    background-color: #eee;
    color: #111;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    border: 5px solid #d3cccc;
    border-radius: 10px;
}

.marquee:before,.marquee:after{
    position: absolute;
    top:0;
    width: 1rem;
    height:100%;
    content:"";
    z-index:1;
}

.marquee:before{
    left: 0;
    background:linear-gradient(to right,#eee 0%,transparent 100%);
}

.marquee:after{
    right: 0;
    background:linear-gradient(to left,#eee 0%,transparent 100%);
}

.marquee-content{
    list-style: none;
    height: 100%;
    display: flex;
    animation: scrolling var(--marquee-animation-duration) linear infinite;
}

@keyframes scrolling{
    0% {transform: translateX(0vw);}
    100%{transform: translateX(calc(-1*var(--marquee-elements-width)*var(--marquee-elements)));}
}

.marquee-content:hover{
    animation-play-state:paused;
}

.marquee-content li{
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 3px solid teal; */
    width: var(--marquee-elements-width);
    flex-shrink: 0;
    font-size: calc(var(--marquee-height)*2/3);
    white-space: nowrap;
}

.marquee-content li img{
    width: 100%;
    height:40vh;
    border:2px solid #eee;
}

/* @media(max-width:600px){
    
    .marquee{
        right: 45%;
    }
    :root{
        --marquee-width:88vw;
        --marquee-height:16vh;
        --marquee-elements-displayed:3;
    }
    .marquee:before,.marquee:after{width: 5rem;}
} */



/* Clients section css */

.clients .container1{
  width: 90%;
  height: auto;
  margin: auto;
  transition: .5s;
  margin-top: 25px;
}

.clients .container1 h1{
  color: #777;
  font-size: 36px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 30px;
  text-shadow: 1px 2px 2px #8B5F4D;
}

.clients .container1 .item{
  float: left;
  width: 24%;
  height: 120px;
  background: #fff;
  margin: 5px;
  position: relative;
  box-shadow: -3px -3px 7px #fff , 3px 3px 5px rgba(94,104,121,0.712);
  text-align: center;
  border:0.8px solid;
  
}

.clients .container1::after{
  content: "";
  position: relative;
  width: 92%;
  height: 100px;
  left: 10px;
  top: 10px;
  background: transparent;
  box-shadow: inset -3px -3px 7px #fff, inset 3px 3px 5px rgba(94,104,121,0.712);
}

.clients .container1:hover::after{
  box-shadow:  -3px -3px 7px #fff,  3px 3px 5px rgba(94,104,121,0.712);
}

.clients .container1 .item img{
width: 200px;
height: 80px;
margin: auto;
padding: 0px;
display: block;
cursor: pointer;
filter: grayscale(0);
margin-top: 20px;
transition: 0.5s;
}

.clients .container1 .item:hover img{
  filter: grayscale(1);
}

@media only screen and (min-width:360px) and (max-width:467px){
  .clients .container1{
     width: 46%;
     height: 91px;
  }

  .clients .container1 h1{
      font-size: 28px;
  }
  .clients .container1 .item{
      width: 100%;
      height: auto;
  }

  .clients .container1::after{
      width: 87%;
      height: 73px;
  }

  .clients .container1 .item img{
      width: 130px;
      height: 62px;
      margin-top: 16px;
  }
  
}

/* Service section css */
.service{
width: 90%;
margin: auto;
text-align: center;
padding-top: 50px;
background: url(../images/watermark8.jpg);
  background-repeat: round;

}

.service h1{
  color: #fff;
  font-size: 50px;
  font-weight: 600;
  font-family: BankGothic LT BT;
}
.service .servicepara{
  color: #fff;
  font-size: 20px;
  font-weight: 300;
  line-height: 22px;
  padding: 10px;
  font-family: BankGothic LT BT;
}

.service .servicestrong{
  background: -webkit-linear-gradient(#ff1010, #ffad06);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: underline;
}

.service p{
  color: rgb(0, 0, 0);
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  padding: 10px;
}


.container2{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; 
  flex-wrap: wrap;
  /* background: #fff3f3; */
  
  margin: 15px;
}
.container2 .box{
  position: relative;
  width: 300px;
  height: 300px;
  color: #fff;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 30px;
  transition: 0.5s;

}

.container2 .box1{
  position: relative;
  width: 210px;
  height: 68px;
  color: #fff;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 30px;
  transition: 0.5s;

}

.container2 .box-new1{
  width:400px;

}
.container2 .box:hover{
  transform: translateY(-20px);
}

.container2 .box1:hover{
  transform: translateY(-20px);
}

.container2 .box::before{
  content:'';
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg,#ffbc00,#ff0058);
}


.container2 .box1::before{
  content:'';
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg,#ffbc00,#ff0058);
}

.container2 .box1::after{
  content:'';
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: linear-gradient(315deg,#ffbc00,#ff0058);
  
}

.container2 .box::after{
  content:'';
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: linear-gradient(315deg,#ffbc00,#ff0058);
 
}

.container2 .box:nth-child(2)::before,.container2 .box:nth-child(2)::after{
background: linear-gradient(315deg,#03a9f4,#ff0058); 
}

.container2 .box:nth-child(3)::before,.container2 .box:nth-child(3)::after{
  background: linear-gradient(315deg,#4dff03,#ff0058); 
  }

.container2 .box:nth-child(4)::before,.container2 .box:nth-child(4)::after{
      background: linear-gradient(315deg,#4dff03,#ff0058); 
      }
.container2 .box:nth-child(5)::before,.container2 .box:nth-child(5)::after{
          background: linear-gradient(315deg,#03a9f4,#ff0058); 
          }
          .container2 .box:nth-child(7)::before,.container2 .box:nth-child(7)::after{
              background:  linear-gradient(185deg, red, blue); 
              }
              .container2 .box:nth-child(8)::before,.container2 .box:nth-child(8)::after{
                  background: linear-gradient(185deg,#42c9c9,#1d0a01);
                  }
                  .container2 .box:nth-child(9)::before,.container2 .box:nth-child(9)::after{                        
                      background: linear-gradient(90deg,#4dff03,#ff0058);
                      }

                      .container2 .box:nth-child(10)::before,.container2 .box:nth-child(10)::after{
                        background: linear-gradient(315deg,#03a9f4,#ff0058); 
                        }
                        
                        .container2 .box:nth-child(11)::before,.container2 .box:nth-child(11)::after{
                          background: linear-gradient(185deg,#4dff03,#ff0058); 
                          }
                        
                        /* .container2 .box:nth-child(12)::before,.container2 .box:nth-child(12)::after{
                          background: linear-gradient(315deg,#03a9f4,#ff0058); 
                         } */

.container2 .box span{
  position: absolute;
  top:6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  background:rgba(0, 0, 0, 0.6);
  z-index:2;
}
.container2 .box span::before{
  content:'';
  position: absolute;
  top:0;
  left:0;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
 pointer-events:none;

}
.container2 .box .content{
  position: relative;
  z-index: 10;
  padding: 20px 40px;
}
.container2 .box .content h2{
font-size: 19px;
color: #fff;
font-weight: bolder;
}
.container2 .box .content p{
  
  color: #fff;
  margin-bottom: 10px;
  
  }
.container2 .box .content a{
  display: inline-block;
  font-size: 0.7em;
  color: #111;
  background: #fff;
  padding: 8px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50px;
  transform: 0.8s;
}

.hroverwrite{
  margin-top: 10px;
  margin-bottom: 0;
 
     border-top: 2px solid #eee;
}

.column{
  float: left;
}


/*Modal Styles*/


.tensileheader,.bendheader,.compressionheader,.hardnessheader,.ffheader,.impactheader{
  border: none !important;margin: 0;padding: 0;
  background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(../images/mechanicaltesting1.gif);
        background-position: center;
        background-size: cover;
        height: 25vh;
    width: 100%;
}

.spectroheader,.pmiheader{
  border: none !important;margin: 0;padding: 0;
  background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(../images/chemicaltesting1.jpg);
        background-position: center;
        background-size: cover;
        height: 25vh;
    width: 100%;
}

.microheader,.macroheader{
  border: none !important;margin: 0;padding: 0;
  background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(../images/Metallographic.jpg);
        background-position: center;
        background-size: cover;
        height: 25vh;
    width: 100%;
}

.linearheader,.pressureheader{
  border: none !important;margin: 0;padding: 0;
  background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(../images/Callibration_Header.png);
        background-position: center;
        background-size: cover;
        height: 25vh;
    width: 100%;
}

.sampleheader{
  border: none !important;margin: 0;padding: 0;
  background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(../images/samplebanner.jpg);
        background-position: center;
        background-size: cover;
        height: 25vh;
    width: 100%;
}

#tensileModal .modal-header h1,#bendModal .modal-header h1,#compressionModal .modal-header h1,#hardnessModal .modal-header h1,
#ffModal .modal-header h1,#impactModal .modal-header h1,#spectroModal .modal-header h1,#pmiModal .modal-header h1
,#microModal .modal-header h1,#macroModal .modal-header h1,#linearModal .modal-header h1,#pressureModal .modal-header h1,
#sampleModal .modal-header h1{
  font-family: 'BankGothic LT BT';
    text-transform: uppercase;
    font-weight: 700;
    color: floralwhite;
    text-align: center;
    margin-top: 6%;
}


#tensileModal .modal-dialog,#bendModal .modal-dialog,#compressionModal .modal-dialog,#hardnessModal .modal-dialog,
#ffModal .modal-dialog,#impactModal .modal-dialog,#spectroModal .modal-dialog,#pmiModal .modal-dialog
,#microModal .modal-dialog,#macroModal .modal-dialog,#linearModal .modal-dialog,#pressureModal .modal-dialog
,#sampleModal .modal-dialog{
  overflow-y: initial !important
}


#tensileModal .modal-dialog .modal-body,#bendModal .modal-dialog .modal-body,#compressionModal .modal-dialog .modal-body,
#hardnessModal .modal-dialog .modal-body,#ffModal .modal-dialog .modal-body,#impactModal .modal-dialog .modal-body,
#spectroModal .modal-dialog .modal-body,#pmiModal .modal-dialog .modal-body,
#microModal .modal-dialog .modal-body,#macroModal .modal-dialog .modal-body,#linearModal .modal-dialog .modal-body
,#pressureModal .modal-dialog .modal-body,#sampleModal .modal-dialog .modal-body{
margin:50px 50px;
border:1px solid grey;
overflow-y: scroll;
height: 50vh;
overflow-y: auto;
font-family: Calibri !important;
font-size: 15px;
font-weight: bold;
}

#tensileModal .modal-dialog .modal-body img,#bendModal .modal-dialog .modal-body img,#compressionModal .modal-dialog .modal-body img,
#hardnessModal .modal-dialog .modal-body img,#ffModal .modal-dialog .modal-body img,#impactModal .modal-dialog .modal-body img
,#spectroModal .modal-dialog .modal-body img,#pmiModal .modal-dialog .modal-body img
,#microModal .modal-dialog .modal-body img
,#linearModal .modal-dialog .modal-body img,#pressureModal .modal-dialog .modal-body img,#sampleModal .modal-dialog .modal-body img{
  border-radius: 10px;
}

#tensileModal .modal-dialog .modal-body ul,#bendModal .modal-dialog .modal-body ul,#compressionModal .modal-dialog .modal-body ul,
#hardnessModal .modal-dialog .modal-body ul,#ffModal .modal-dialog .modal-body ul,#impactModal .modal-dialog .modal-body ul
,#spectroModal .modal-dialog .modal-body ul,#pmiModal .modal-dialog .modal-body ul
,#microModal .modal-dialog .modal-body ul,#macroModal .modal-dialog .modal-body ul
,#linearModal .modal-dialog .modal-body ul,#pressureModal .modal-dialog .modal-body ul,#sampleModal .modal-dialog .modal-body ul
{
  list-style-type: disclosure-closed;
  margin-left: 10%;
}

.modal-footer{
  text-align: center !important;
}

@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
    /* top:50px; */
   max-width: 1200px;
  }
}

.modal-header .close {
  color: #fff; 
  opacity: 1;
  margin-top: -11%;
}

/*Carousel*/
/* .carousel {
  height: 500px;
  margin-bottom: 60px;
}

.carousel-caption {
  z-index: 10;
}

.carousel .item {
  width: 100%;
  height: 500px;
  background-color: #777;
}
.carousel-inner > .carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}
@media (min-width: 768px) {
  .carousel-caption p {
      margin-bottom: 20px;
      font-size: 21px;
      line-height: 1.4;
  }
} */