@media (min-width: 576px) {
  .navbar-text {
    float: right;
  }
}
.appicon img{
  width: 100px;
  height: auto;
  -webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}

.appicon img:hover{
  box-shadow: 1px 1px 10px 0 rgba(0,0,0,.1);
  -webkit-transform: scale(1.1);
	transform: scale(1.1);
}








.justify{
  text-align: justify;
}
.hero-section {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
                url('../../img/slider/slider1.jpg') center/cover;
    height: 100vh;
    color: white;
}
.hero-section2 {
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
              url('../../img/slider/pagebg2.jpg') center/cover;
    min-height: 100vh;
    color: white;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.hero-section_whois {
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
              url('../../img/slider/whois.jpg') center/cover;
    min-height: 100vh;
    color: white;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.hero-section_contact {
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
              url('../../img/slider/contact.jpg') center/cover;
    min-height: 100vh;
    color: white;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.card-body{
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.fw-bold{
  text-shadow: 2px 3px 3px rgba(0,0,0,0.41);
}

.feature-icon {
    font-size: 2.5rem;
    color: #28a745;
}

.cta-section {
    background: #f8f9fa;
    padding: 4rem 0;
}

.navbar {
    transition: all 0.3s;
}

.navbar-scrolled {
    background: #282626d6;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.tab a{
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  transition: all 0.3s;
}
.tab a:hover{
  color: red;
}
a{
  text-decoration: none;
  color: red;
}
.social_icon i{
  font-size: 30px;
  color: red;
  transition: all ease-in-out 0.4s;
}
.social_icon i:hover{
  font-size: 32px;
  transform-origin: 60% 80%;
}

/* ############### Image area Css Start ################### */
.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 8px;
  overflow: hidden;
  position: relative;
}
.expertise-list {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 8px;
}
.gallery .column {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 8px;
}
.gallery .column img {
  padding-top: 8px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 8px;
  position: relative;
}
.column h3 {
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 400;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  overflow: hidden;
  transition: all ease-in-out 0.4s;
}
.column img:hover {
  transform: scale(1.02);
  transform-origin: 60% 80%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

.expertise-list .row>:nth-child(2) {
        margin-top: 5.12rem;
    }
.expertise-list .row>:nth-child(3) {
        margin-top: 10.12rem;
    }
.expertise-list .row>:nth-child(4) {
        margin-top: 15.12rem;
    }
    .expertise-list h1{
      text-transform: uppercase;
      font-size: 54px !important;
    }

/* ############### Image area Css End ################### */



/* ################## Footer css Start ###################### */
.f_bg{
  background-color: #033277;
opacity: 1;
border-top: 1px solid #ff0000;
background-size: 8px 8px;
background-image:  repeating-linear-gradient(to right, #859396, #859396 0.4px, #002145 0.4px, #002145);
}
.footer_icon ul li{
  list-style: none;
  margin: 0px 5px;
}

.footer_icon i{
  font-size: 24px;
  color: #be0030;
}
.f_menu ul{
  margin-top: -5px;
}
.f_menu ul li{
 list-style: none;
 margin-left: -32px;
}
.f_tab a{
  text-decoration: none;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
}
.f_tab a:hover{
  color: #ff0000;
}
.f_menu span{
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04rem;
  color: #ff0000;
  text-transform: uppercase;
  /* text-decoration: underline; */
}

.copyright_bg{
  /* border-top: 2px solid #ffffff; */
  border-bottom: 2px solid #2a2a2a;
  justify-content: center;
  background-color:#2a2a2a;
}

/* ################## Footer css End ###################### */

/* ################## lgoin css Start ###################### */
.hero-section_login {
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
              url('../../img/slider/staff.jpg') center/cover;
    min-height: 100vh;
    color: white;
    background-attachment: fixed;
    background-repeat: no-repeat;
    align-items: center;
}
.form-signin {
  max-width: 330px;
  padding: 1rem;
  color: #000000;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
  color: #000000;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  color: #000000;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  color: #000000;
}
/* ################## lgoin css End ###################### */
