/* ===================================================================
 *  10. home - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
 #home {
  width: 100%;
  height: 100%;
  
  /*background-image: url(../pexels-ann-h-1762851.jpg);*/
  /*background-color: rgb(0, 17, 255);*/
  background-repeat: no-repeat;
  background-position: center ;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  min-height: 804px;
  position: relative;
}
#home .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: #19191b2f;
}
/*video*/
.hero-image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover;
  
}

.home-content-table {
  width: 100%;
  height: 100%;
  display: table;
  position: relative;
  text-align: center;
}

.home-content-tablecell {
  display: table-cell;
  vertical-align: middle;
  z-index: 500;
}
.home-content-tablecell .row {
  position: relative;
  padding-top: 16.2rem;
  padding-bottom: 15rem;
}
.home-content-tablecell h3 {
  font-family: "montserrat-bold", sans-serif;
  font-size: 2.2rem;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: .3rem;
  margin: 0 0 .9rem 0;
}
.home-content-tablecell h1 {
  font-family: "librebaskerville-bold", serif;
  font-size: 9rem;
  line-height: 1.133;
  color: #FFFFFF;
}
.home-content-tablecell .more {
  margin: 4.8rem 0 0 0;
  
}
.home-content-tablecell .more .button {
  border-color: #FFFFFF;
  color: #FFFFFF;
  
  
}

/* home social-list */
.home-social-list {
  position: absolute;
  left: 48px;
  bottom: 54px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 2.4rem;
  line-height: 1.75;
  text-align: center;
}
.home-social-list::before {
  display: block;
  content: "";
  width: 2px;
  height: 42px;
  background-color: rgba(255, 255, 255, 0.3);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
}
.home-social-list li {
  padding-left: 0;
}
.home-social-list li a, .home-social-list li a:visited {
  color: #FFFFFF;
}
.home-social-list li a:hover, 
.home-social-list li a:focus, 
.home-social-list li a:active {
  color: #151515;
}

/* scroll down */
.scrolldown {
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: right top 0;
  -ms-transform-origin: right top 0;
  transform-origin: right top 0;
  float: right;
}
.scrolldown i {
  padding-left: 9px;
}
.scrolldown a:hover, .scrolldown a:focus, .scrolldown a:active {
  color: #151515 !important;
}

html[data-useragent*='MSIE 10.0'] .scrolldown,
.oldie .scrolldown {
  display: none;
}

.scroll-icon {
  display: inline-block;
  font-family: "montserrat-bold", sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .3rem;
  color: #FFFFFF !important;
  background: transparent;
  position: relative;
  top: 36px;
  right: 42px;
  -webkit-animation: animate-it 3s ease infinite;
  animation: animate-it 3s ease infinite;
}

/* vertical animation */
@-webkit-keyframes animate-it {
  0%, 60%, 80%, 100% {
    -webkit-transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-5px);
  }
  40% {
    -webkit-transform: translateX(20px);
  }
}
@keyframes animate-it {
  0%, 60%, 80%, 100% {
    -webkit-transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-5px);
  }
  40% {
    -webkit-transform: translateX(20px);
  }
}

/* ------------------------------------------------------------------- 
 * responsive:
 * home section 
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {
  .home-content-tablecell h3 {
    font-size: 2.1rem;
  }
  .home-content-tablecell h1 {
    font-size: 7rem;
  }
}
@media only screen and (max-width: 1024px) {
  .home-content-tablecell h3 {
    font-size: 2rem;
  }
  .home-content-tablecell h1 {
    font-size: 6rem;
  }
}
@media only screen and (max-width: 768px) {
  .home-content-tablecell .row {
    max-width: 650px;
  }
  .home-content-tablecell h3 {
    font-size: 1.8rem;
  }
  .home-content-tablecell h1 {
    font-size: 5.2rem;
  }
  .home-content-tablecell h1 br {
   
  }

  .home-social-list {
    left: 36px;
    bottom: 30px;
    font-size: 2.1rem;
  }
  .home-social-list::before {
    height: 30px;
  }

  .scrolldown .scroll-icon {
    font-size: 1.2rem;
    top: 24px;
    right: 10px;
  }
  .sc{
    
    flex-direction: column-reverse;
  }
}
@media only screen and (max-width: 600px) {
  #home {
    min-height: 702px;
  }

  .home-content-tablecell .row {
    max-width: 480px;
    padding-top: 12rem;
    padding-bottom: 12rem;
  }
  .home-content-tablecell h3 {
    font-size: 1.7rem;
  }
  .home-content-tablecell h1 {
    font-size: 4.8rem;
  }
}
@media only screen and (max-width: 500px) {
  .home-content-tablecell .row {
    max-width: 420px;
  }
  .home-content-tablecell h3 {
    font-size: 1.5rem;
  }
  .home-content-tablecell h1 {
    font-size: 4.2rem;
  }

  .home-social-list {
    left: 30px;
    bottom: 30px;
    font-size: 1.8rem;
  }
  .home-social-list::before {
    height: 24px;
  }
}
@media only screen and (max-width: 400px) {
  #home {
    min-height: 654px;
  }

  .home-content-tablecell .row {
    padding-top: 4.8rem;
    padding-bottom: 10.8rem;
  }
  .home-content-tablecell h3 {
    font-size: 1.4rem;
  }
  .home-content-tablecell h1 {
    font-size: 3.6rem;
  }
}

/* ===================================================================
 *  12. services - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
 #services {
  background-color:#dbe1ff;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  min-height: 800px;
  position: relative;
  padding: 15rem 0 15rem;
  color: rgba(255, 255, 255, 0.9);
  filter: saturate(110%);
  -webkit-filter: saturate(110%);
}

#services .section-intro h3 {
  text-align: center;
  color: rgb(24, 21, 21);
 text-transform: capitalize;
}
#services .section-intro h1 {
  text-align: center;
  color: #161515;
  font-size: 4.4rem;
  font-family: "librebaskerville-bold", serif;
}
#services .section-intro .lead {
  text-align: center;
  color: rgba(3, 2, 2, 0.932);
}
.lead2{
  color: rgb(41, 37, 241);
  text-align: left;
  margin-left: 2rem;
}
#services .services-content {
  text-align: center;
  max-width: 1040px;
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px;
  
}
#services .services-list {
  margin-top: 1.2rem;
  text-align: center;
  
}
.service-item {
  margin: 1rem;
  margin-top: 2rem;
  padding: 0 ;
  flex: 40%;
  max-width: 100%;
  
  box-shadow:0 10px 30px rgba(0, 0, 0, 0.2);
  
}
.h05{
  margin-top: 3rem;
  text-align: left;
  margin-left: 2rem;
  color: #3d28fa;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
}
.service-item img {
  width: 100%;
  height: 200px;
  vertical-align: middle;
  
}

@media screen and (max-width:800px){
  .service-item{
    flex: 100%;
    max-width: 100%;
    
  }
}
@media screen and (max-width:600px){
  .service-item{
    margin: 0.8rem;
    flex: 100%;
    max-width: 100%;
    margin-bottom: 4rem;
  }
}





/*-------------------------service2----------------------*/
#contact2 {
  background-color: #f0f3f7;
 background-image: url(../images/bg/rsa.png);
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  padding: 12rem 0 12rem;
  position: relative;
}
#contact2 .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .75;
  background-color: #f5f1f177;
}
#contact2 .section-intro h1 {
  color: rgb(7, 6, 6);
}
#contact2 .section-intro h3 {
  color: rgba(19, 18, 18, 1);
}
#contact2 .section-intro p.lead {
  color: rgba(29, 28, 28, 1);
}

.contact2-content {
  max-width: 1024px;
  margin-top: 3rem;
  color: #000000;
  z-index: 600;
  position: relative;
}
.contact2-content h5 {
  color: #000000;
  margin-bottom: 5.4rem;
}
.contact2-content h6 {
  color: #000000;
  font-size: 1.4rem;
}

/* contact info */
.contact2-info .cinfo {
  margin-bottom: 4.2rem;
}

/* contact form */
#contact2 form {
  margin-top: 0;
  margin-bottom: 3rem;
}
#contact2 form .form-field {
  position: relative;
}
#contact2 form .form-field:before, #contact form .form-field:after {
  content: "";
  display: table;
}
#contact2 form .form-field:after {
  clear: both;
}
#contact2 form .form-field label {
  font-family: "montserrat-bold", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  position: absolute;
  bottom: 1.5rem;
  right: 0;
  text-transform: uppercase;
  letter-spacing: .05rem;
  padding: .6rem 2rem .6rem 2rem;
  margin: 0;
  color: #000000;
  background: #f9a828;
  border-radius: 3px;
}
#contact2 form .form-field label::after {
  position: absolute;
  right: 15px;
  top: 1px;
  margin-top: -6px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #f9a828;
  content: "";
}
#contact2 form ::-webkit-input-placeholder {
  color: #ffffff;
}
#contact2 form :-moz-placeholder {
  color: #ffffff;
  /* Firefox 18- */
}
#contact2 form ::-moz-placeholder {
  color:#ffffff;
  /* Firefox 19+ */
}
#contact2 form :-ms-input-placeholder {
  color: #ffffff;
}
#contact2 form .placeholder {
  color: #ffffff !important;
}

#contact2 input[type="text"],
#contact2 input[type="password"],
#contact2 input[type="email"],
#contact2 textarea {
  width: 100%;
  color: #ffffff;
  margin-bottom: 3.6rem;
  background: #000000;;
}

#contact2 input[type="text"]:focus,
#contact2 input[type="password"]:focus,
#contact2 input[type="email"]:focus {
  color:#ffffff;
}

#contact2 textarea {
  min-height: 21rem;
  padding: 1.8rem 2rem;
}
#contact2 textarea:focus {
  color:#ffffff;
}

#contact2 button.submit2form {
  font-size: 1.5rem;
  display: block;
  letter-spacing: .2rem;
  height: 6rem;
  line-height: 6rem;
  padding: 0 3rem;
  width: 100%;
  background: #f9a828;
  color: #000000;
  margin-top: .6rem;
}
#contact2 button.submit2form:hover, #contact2 button.submit2form:focus {
  background: #f89e0f;
}

#message-warning2, #message-success2 {
  display: none;
  background: #000000;
  padding: 3rem;
  margin-bottom: 3.6rem;
  width: 100%;
}

#message-warning2 {
  color: #D32B2E;
}

#message-success2 {
  color: #f9a828;
}

#message-warning2 i,
#message-success2 i {
  margin-right: 10px;
}

/* form loader */
#submit-loader2 {
  display: none;
  position: relative;
  left: 0;
  top: 1.8rem;
  width: 100%;
  text-align: center;
  margin-bottom: 4.2rem;
}
#submit-loader2 .text-loader {
  display: none;
  font-family: "montserrat-bold", sans-serif;
  font-size: 1.4rem;
  color: #161515;
  letter-spacing: .2rem;
  text-transform: uppercase;
}

.oldie #submit-loader2 .s-loader {
  display: none;
}
.oldie #submit-loader2 .text-loader {
  display: block;
}

/* --------------------------------------------------------------- 
 * loader animation - (_layout.scss)
 * --------------------------------------------------------------- */
.s-loader2 {
  margin: 1.2rem auto 3rem;
  width: 70px;
  text-align: center;
  -webkit-transform: translateX(0.45rem);
  -ms-transform: translateX(0.45rem);
  transform: translateX(0.45rem);
}

.s-loader2 > div {
  width: 9px;
  height: 9px;
  background-color: #1b1a1a;
  border-radius: 100%;
  display: inline-block;
  margin-right: .9rem;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.s-loader2 .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.s-loader2 .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
/* ------------------------------------------------------------------- 
 * responsive:
 * contact 
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {
  .contact2-info {
    width: 38%;
  }
}
@media only screen and (max-width: 768px) {
  .contact2-content {
    max-width: 600px;
    text-align: center;
  }

  .contact2-info {
    width: 100%;
    margin-top: 3.6rem;
  }
}
@media only screen and (max-width: 600px) {
  .contact2-content {
    max-width: 480px;
  }
}
@media only screen and (max-width: 400px) {
  .contact2-info {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
}




.tab-wrap {
  transition: 0.3s box-shadow ease;
  border-radius: 6px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  list-style: none;
  background-color: #fff;
  margin: 10px 0;
  
}

.tab {
  display: none;
  visibility: hidden;
}
.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 100;
  transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 100;
  transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 100;
  transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 100;
  transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(5) ~ .tab__content:nth-of-type(5) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 100;
  transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:first-of-type:not(:last-of-type) + label {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.tab:not(:first-of-type):not(:last-of-type) + label {
  border-radius: 0;
}
.tab:last-of-type:not(:first-of-type) + label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.tab:checked + label {
  background-color: #fff;
  box-shadow: 0 -1px 0 #fff inset;
  cursor: default;
}
.tab:checked + label:hover {
  box-shadow: 0 -1px 0 #fff inset;
  background-color: #fff;
}
.tab + label {
  box-shadow: 0 -1px 0 #eee inset;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: #333;
  flex-grow: 3;
  text-align: center;
  background-color: #f2f2f2;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  transition: 0.3s background-color ease, 0.3s box-shadow ease;
  height: 50px;
  box-sizing: border-box;
  padding: 15px;
}
.tab + label:hover {
  background-color: #f9f9f9;
  box-shadow: 0 1px 0 #f4f4f4 inset;
}
.tab__content {
  padding: 10px 25px;
  background-color: transparent;
  position: absolute;
  width: 100%;
  z-index: -1;
  opacity: 0;
  left: 0;
  transform: translateY(-3px);
  border-radius: 6px;
}