/* ----------------------------------------------------------------
[Table of contents]
01. Body
02. Page Loader
03. Main Menu
04. Main Content
05. Section Home
06. Section About
07. Section Resume
08. Section Portfolio
09. Section Blog
10. Section Contact
11. Main Footer
12. landing
13. Components
------------------------------------------------------------------- */
/*-------------------------------------------------------------------
01. Body
------------------------------------------------------------------- */
html, body {
  overflow-x: hidden;
}

*, ::after, ::before {
  box-sizing: border-box;
}

/*-------------------------------------------------------------------
02. Page Loader
------------------------------------------------------------------- */
.yb-pageloader-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  font-weight: 700;
  z-index: 10000;
  background-color: #fff;
}

.yb-pageloader-wrapper.page-is-loaded {
  display: none;
}

.yb-dark-skin .yb-pageloader-wrapper {
  background: #05182c;
}

/*-------------------------------------------------------------------
03. Main Menu
------------------------------------------------------------------- */
.yb-main-header {
  background: #fff;
  box-sizing: border-box;
  position: relative;
  min-height: 80px;
}

.yb-main-menu{
  position: absolute;
  z-index: 100;
  
  /*background: #fff;*/
	
  left: 20px;
  right: 20px;
  top: 20px;
  z-index: 100;
  border-bottom: 1px solid #e5e5e5;
	
}

.yb-main-menu.fixed {
  position: fixed;
  top: 10px;
  bottom: auto;
 /*background: #fff;*/
}



.blur {
   
    /*filter: blur(5px);
       background: rgba(255, 255, 255, 0.6);*/
       
       background: rgba(255, 255, 255, 0.5); /* 1. Semi-transparent background */
  border-radius: 12px;                  /* 2. Rounded corners */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* 3. Subtle shadow */
  backdrop-filter: blur(5px);           /* 4. The main blur effect */
  -webkit-backdrop-filter: blur(5px);   /* Vendor prefix for Safari */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 5. Light border */
  /* Add padding and width as needed */
  }

  .noblur {
   
    filter: blur(0px);
   
    
    background: rgba(255, 255, 255, 0.5);
  }

.yb-main-menu .uk-navbar-nav > li > a {
  text-transform: none;
  font-weight: 700;
/*   text-shadow:
    0 0 2px #fff,  
    0 0 5px #fff, 
    0 0 10px #fff, 
    0 0 15px #fff;  Optional: additional layers for more intensity */
}

.whiteblur {
     text-shadow:
    0 0 2px #fff,  /* First layer, small blur */
    0 0 5px #fff, /* Second layer, medium blur */
    0 0 10px #fff, /* Third layer, larger blur */
    0 0 15px #fff; /* Optional: additional layers for more intensity */
}

.yb-main-menu .yb-icon-close {
  display: none;
}

@media (max-width: 959px) {
  .yb-main-menu.open-menu .yb-menu-toggle-wrapper {
    display: block;
  }
}

.yb-main-menu.open-menu .yb-icon-menu {
  display: none;
}

.yb-main-menu.open-menu .yb-icon-close {
  display: inline;
}

.yb-logo {
  font-weight: 700;
  position: relative;
}

.yb-logo span {
  display: inline-block;
  position: relative;
}

.yb-logo span::first-letter {
  color: #fff;
}

.yb-logo::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  top: 50%;
  margin-top: -15px;
  background: #c60000;
  left: 3px;
  border-radius: 50%;
  z-index: 0;
}

.yb-menu-toggle-wrapper {
  display: block;
}

.yb-menu-toggle-wrapper .uk-navbar-right {
  position: absolute;
  right: 40px;
}

@media (max-width: 959px) {
  .yb-menu-toggle-wrapper {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 20px 40px;
    overflow: auto;
    max-height: 420px;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
  }
  .yb-menu-toggle-wrapper .uk-navbar-center {
    position: relative;
    transform: none;
    left: 0;
    top: 0;
    width: 100%;
  }
  .yb-menu-toggle-wrapper .uk-navbar-right {
    position: relative;
    right: 0;
  }
  .yb-menu-toggle-wrapper .uk-navbar-nav {
    margin: 0 auto;
  }
}

@media (max-width: 959px) and (max-width: 639px) {
  .yb-menu-toggle-wrapper .uk-navbar-nav:not(.yb-social-icons) {
    display: block;
  }
  .yb-menu-toggle-wrapper .uk-navbar-nav:not(.yb-social-icons) a {
    min-height: 40px;
  }
}

.yb-dark-skin .yb-main-header {
  background: #05182c;
}

.yb-dark-skin .yb-main-menu {
  background: #05182c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 959px) {
  .yb-dark-skin .yb-menu-toggle-wrapper {
    background: #05182c;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/*-------------------------------------------------------------------
04. Main Content
------------------------------------------------------------------- */
.yb-main-content {
  position: relative;
  z-index: 10;
  background: #fff;
  min-height: 650px;
}

.yb-section {
  position: relative;
}

.yb-section-padding {
  padding-top: 80px;
  padding-bottom: 80px;
}

.yb-section-padding-top {
  padding-top: 80px;
}

.yb-section-padding-bottom {
  padding-bottom: 80px;
}

.yb-section-title {
  font-weight: 700;
  letter-spacing: -1px;
}

.yb-dark-skin {
  background: #05182c;
}

.yb-dark-skin .yb-main-content {
  background: #05182c;
}

/*-------------------------------------------------------------------
05. Section Home
------------------------------------------------------------------- */
.yb-profile-desc {
  position: fixed;
  display: flex;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.yb-profile-desc h1 {
  font-size: 80px;
  letter-spacing: -4px;
}

.yb-profile-desc h1.yb-gradient-text {
  background: -webkit-linear-gradient(45deg, #09009f, #00ff95 80%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.yb-profile-desc h1.yb-shadow-text {
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.4);
}

@media (max-width: 959px) {
  .yb-profile-desc h1 {
    font-size: 50px;
  }
}

.yb-profile-desc-wrap {
  align-self: center;
  padding-bottom: 80px;
}

.yb-myjob {
  font-size: 25px;
}

.yb-myjob span {
  text-decoration: underline;
  color: #c60000;
}

.yb-video-wrapper, .yb-slide-wrapper {
  position: absolute;
  top: 0;
  bottom: 80px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.yb-video-wrapper2, .yb-slide-wrapper2 {
  position: absolute;
  top: 0;
  bottom: 80px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

.yb-video-bg {
  min-width: 100%;
  min-height: 100%;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.yb-video-overfly, .yb-slide-overfly {
  background: rgba(0, 0, 0, 0.7);
}

/*-------------------------------------------------------------------
06. Section About
------------------------------------------------------------------- */
.yb-my-profile {
  position: relative;
}

.yb-my-profile-img {
/* background-color: rgba(0, 0, 0, 0.5);*/
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
}

@media (max-width: 959px) {
  .yb-my-profile-img {
    position: relative;
    width: 100%;
    height: 400px;
  }
}




.yb-my-profile-desc {
  position: relative;
}

.yb-my-profile-desc-top {
  padding: 80px 30px 10px 40px;
}

@media (max-width: 639px) {
  .yb-my-profile-desc-top {
    padding: 80px 15px 10px 15px;
  }
}

.yb-my-profile-desc-bottom {
  position: relative;
  padding: 30px 30px 30px 40px;
}

@media (max-width: 639px) {
  .yb-my-profile-desc-bottom {
    padding: 30px 15px 30px 15px;
  }
}

.yb-my-profile-desc-bottom::before {
  content: "";
  position: absolute;
  background: #fff;
  bottom: 0;
  top: 0;
  width: 0px;
  left: 0px;
  z-index: 10;
}

.yb-my-profile-desc-bottom::after {
  content: "";
  top: 0;
  position: absolute;
  background: inherit;
  bottom: 0;
  right: -1200px;
  width: 1200px;
}

.yb-my-profile-desc-info {
  margin: 0;
  font-size: 0.8rem;
}

.yb-my-profile-desc-info span {
  display: inline-block;
  width: 100px;
  font-weight: 700;
}

.yb-my-intro {
  position: absolute;
  bottom: 20px;
  right: 0;
  z-index: 10;
  display: block;
  font-size: 13px;
  background-image: linear-gradient(-90deg, rgba(49, 207, 171, 0.5) 0%, #50E3C2 100%);
  color: #fff;
  padding: 10px 40px 10px 20px;
  border-radius: 30px 0 0 30px;
}

.yb-my-intro-text {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  vertical-align: middle;
  transition: .3s;
  font-weight: 700;
}

.yb-my-intro:hover {
  text-decoration: none;
  color: #fff;
}

.yb-my-intro:hover .yb-my-intro-text {
  max-width: 100px;
}

.yb-box-services > div {
  margin-top: 0 !important;
}

.yb-box-service {
  padding: 30px 10px;
}

.yb-box-service .uk-icon {
  display: block;
}

.yb-box-service h5 {
  margin-top: 20px;
  margin-bottom: 0;
  font-weight: 700;
  letter-spacing: -1px;
}

/*-------------------------------------------------------------------
07. Section Resume
------------------------------------------------------------------- */
.yb-resume-list > .uk-list {
  padding-left: 0;
  margin-bottom: 60px;
}

.yb-resume-item {
  position: relative;
  padding: 30px 30px 0 40px;
}

.yb-resume-item h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  transition: 0.3s;
}

.yb-resume-item:hover h4 {
  color: #c60000;
}

.yb-resume-item-date {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

.yb-resume-item-date-icon {
  width: 30px;
  height: 30px;
  text-align: center;
  padding-top: 2px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  float: left;
}

.yb-resume-item-date-text {
  float: left;
  padding-top: 3px;
  padding-left: 10px;
  overflow: hidden;
  display: -webkit-box; /* Required for WebKit/Blink browsers */
  -webkit-line-clamp: 2; /* Limits the text to 2 lines */
  -webkit-box-orient: vertical; /* Stacks the lines vertically */
  line-clamp: 2; /* Standard property (limited support) */
  box-orient: vertical; /* Standard property (limited support) */ 
}

@media (max-width: 959px) {
  .yb-resume-item-date-text {
  float: left;
  padding-top: 3px;
  padding-left: 2px;
  width:90%;
  height:auto;
overflow:line-break;
  display: -webkit-box; /* Required for WebKit/Blink browsers */
  -webkit-line-clamp: 2; /* Limits the text to 2 lines */
  -webkit-box-orient: vertical; /* Stacks the lines vertically */
  line-clamp: 2; /* Standard property (limited support) */
  box-orient: vertical; /* Standard property (limited support) */
}
  
    
}

.yb-resume-skill-item .uk-progress {
  margin-bottom: 0;
  height: 5px;
}

.yb-box-circle {
  width: 100px;
  margin: 6px;
  padding-bottom: 20px;
  padding-top: 20px;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 1.2;
}

.yb-box-circle strong {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  transition: 0.3s;
}

.yb-box-circle:hover strong {
  color: #c60000;
}

.yb-box-circle-title {
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 0;
}

/*-------------------------------------------------------------------
08. Section Portfolio
------------------------------------------------------------------- */
.yb-nav-filter.uk-subnav-pill > li > a {
  border-radius: 15px;
  min-width: 50px;
  text-align: center;
  text-transform: none !important;
  font-weight: 700;
  color: #000;
  transition: 0.3s;
}

.yb-nav-filter.uk-subnav-pill > li > a:hover {
  color: #c60000;
}

.yb-nav-filter.uk-subnav-pill a.uk-active {
  background-color: #c60000;
  color: #fff;
}

.yb-nav-filter.uk-subnav-pill a.uk-active:hover {
  color: #fff;
}

.yb-work-item {
  overflow: hidden;
  position: relative;
}

.yb-work-item-img {
  background: rgba(0, 0, 0, 0.5);
}

.yb-work-item-img-wrap {
  margin-right: 50px;
  margin-bottom: 40px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

@media (max-width: 959px) {
  .yb-work-item-img-wrap {
    margin-right: 0;
    margin-bottom: 0;
  }
}

.yb-work-item-img-wrap::before {
  content: "";
  position: absolute;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  right: 40px;
  left: 0;
  bottom: 40px;
  z-index: 2;
  transition: 1s;
}

@media (max-width: 959px) {
  .yb-work-item-img-wrap::before {
    right: 70px;
  }
}

.yb-work-item-img-wrap:hover::before {
  right: 100%;
}

.yb-work-item:hover h5 {
  color: #c60000;
}

.yb-work-item-overlay {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
}

.yb-work-item-overlay a {
  display: block;
  border-radius: 4px;
  width: 40px;
  height: 40px;
  background: #c60000;
  margin: 5px;
  text-align: center;
  padding-top: 8px;
  color: #fff;
  transition: 0.3s;
}

.yb-work-item-overlay a:hover {
  background: #000;
}

.yb-work-item-title {
  position: absolute;
  right: 25px;
  bottom: 39px;
  width: 50px;
  height: 50px;
  white-space: nowrap;
  transform: rotate(-90deg);
  line-height: 1;
}

@media (max-width: 959px) {
  .yb-work-item-title {
    right: 0;
    bottom: 0;
  }
}

.yb-work-item-title h5 {
  position: absolute;
  margin: 0;
  transition: 0.3s;
  padding: 5px 16px;
  font-weight: 700;
  display: block;
  background: #fff;
  font-size: 25px;
  top: 0;
  border-radius: 0 20px 20px 0;
}

@media (max-width: 959px) {
  .yb-work-item-title h5 {
    font-size: 14px;
    top: -10px;
  }
}

.yb-work-item-title span {
  font-weight: 700;
  font-size: 12px;
  position: absolute;
  bottom: -10px;
  margin: 0;
  padding: 5px 16px;
  font-weight: 700;
  display: block;
  background: #fff;
  display: block;
  color: #c60000;
  border-radius: 0 20px 20px 0;
}

@media (max-width: 959px) {
  .yb-work-item-title span {
    bottom: 5px;
  }
}

.yb-work-content {
  overflow: auto;
}

.yb-work-content::-webkit-scrollbar {
  width: 6px;
  height: 3px;
}

@media (max-width: 959px) {
  .yb-work-content {
    height: auto !important;
  }
}

.yb-testi-nav a {
  display: block;
  border: 1px solid #e5e5e5;
  margin-bottom: 4px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  background: #c60000;
  color: #fff;
  font-weight: 700;
  transition: 0.3s;
  padding-top: 3px;
}

.yb-testi-nav a:hover {
  background: #000;
  color: #fff;
}

.yb-testi-item-desc {
  padding: 25px;
  border: 1px solid #e5e5e5;
  margin-bottom: 20px;
  border-radius: 4px;
  position: relative;
}

.yb-testi-item-desc::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background: #c60000;
  border-radius: 50%;
  bottom: -14px;
  left: 14px;
  border: 3px solid #fff;
}

.yb-testi-item-desc h4 {
  font-weight: 700;
  transition: 0.3s;
}

.yb-testi-item-desc:hover h4 {
  color: #c60000;
}

.yb-testi-item-img {
  position: relative;
  margin-left: 20px;
}

.yb-testi-item-img::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #c60000;
  border-radius: 50%;
  top: -7px;
  left: -10px;
}

.yb-testi-item-img::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: #c60000;
  border-radius: 50%;
  top: 10px;
  left: -5px;
}

.yb-testi-item-img img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

.yb-box-fact {
  padding: 30px 10px;
}

.yb-box-fact-count {
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -1px;
  margin: 0;
}

.yb-box-fact-desc {
  display: block;
  font-size: 0.8rem;
  margin-top: 5px;
}

.yb-client-item {
  opacity: 0.6;
  transition: 0.3s;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

.yb-client-item:hover {
  opacity: 1;
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}

.yb-pricing-item .uk-card {
  box-shadow: none;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  transition: 0.3s;
}

.yb-pricing-item .uk-card-header {
  border-bottom: 1px solid #e5e5e5;
  transition: 0.3s;
}

.yb-pricing-item .uk-card:hover {
  border: 1px solid #c60000;
}

.yb-pricing-item .uk-card:hover h4 {
  color: #c60000;
}

.yb-pricing-item h4 {
  font-weight: 700;
  transition: 0.3s;
}

.yb-dark-skin .yb-work-item-img-wrap::before {
  background: rgba(5, 24, 44, 0.5);
}

.yb-dark-skin .yb-work-item-overlay {
  background-color: rgba(5, 24, 44, 0.9);
}

.yb-dark-skin .yb-work-item-title h5 {
  background: #05182c;
}

.yb-dark-skin .yb-work-item-title span {
  background: #05182c;
}

.yb-dark-skin .yb-testi-nav a {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.yb-dark-skin .yb-testi-item-desc {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.yb-dark-skin .yb-testi-item-desc::before {
  border: 3px solid #05182c;
}

.yb-dark-skin .yb-pricing-item .uk-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.yb-dark-skin .yb-pricing-item .uk-card:hover {
  border: 1px solid #c60000;
}

.yb-dark-skin .yb-pricing-item .uk-card-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/*-------------------------------------------------------------------
09. Section Blog
------------------------------------------------------------------- */
.yb-blog-item {
  border-radius: 4px;
  height: 320px;
  background-color: #000;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
}

.yb-blog-item .uk-position-cover, .yb-blog-item .uk-position-bottom {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.6) 100%);
}

.yb-blog-item-title {
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
}

.yb-blog-item .uk-position-bottom, .yb-blog-item .uk-position-top {
  transition: 0.3s;
}

.yb-blog-item:hover {
  transform: scale(0.96);
}

.yb-blog-item:hover .uk-position-top {
  padding-top: 40px;
}

.yb-blog-item:hover .uk-position-bottom {
  padding-bottom: 40px;
}

.yb-blog-item .uk-badge {
  padding-left: 15px;
  padding-right: 15px;
  font-weight: 700;
  font-size: 12px;
}

.yb-blog-item-meta {
  color: #fff;
  font-size: 0.8rem;
}

.yb-blog-item-meta > div {
  display: inline-block;
  margin-right: 10px;
}

.yb-sidebar-item {
  margin-bottom: 30px;
}

.yb-sidebar-item .uk-form-custom .uk-button-default {
  border-color: #e5e5e5;
  text-transform: none;
}

.yb-sidebar-tags > a {
  text-transform: none;
  font-size: 13px;
  font-weight: 700;
  display: inline-block;
  border-radius: 3px;
  border: 1px solid #e5e5e5;
  padding: 2px 5px;
  margin-bottom: 3px;
  transition: 0.3s;
}

.yb-sidebar-tags > a:hover {
  background: rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #c60000 !important;
}

.yb-img-featured {
  border-radius: 20px;
  border: 1px solid #e5e5e5;
}

@media (max-width: 959px) {
  .yb-img-featured {
    border-radius: 10px;
  }
}

.yb-blog-share {
  margin-bottom: 40px;
}

.yb-blog-share > div {
  text-align: center;
  margin: 5px 0;
  display: inline-block;
}

.yb-blog-share > div:first-child {
  text-align: left;
  min-width: 80px;
}

@media (min-width: 960px) {
  .yb-blog-share {
    position: absolute;
    left: 0;
    width: 100px;
    top: 100px;
  }
  .yb-blog-share > div {
    display: block;
  }
  .yb-blog-share > div:first-child {
    text-align: center;
    min-width: 0;
  }
}

.yb-blog-content {
  position: relative;
  margin-top: -80px;
  min-height: 300px;
  background: #fff;
  margin-left: 100px;
  border-radius: 20px 0 20px 20px;
  padding: 50px;
  border: 1px solid #e5e5e5;
}

@media (max-width: 959px) {
  .yb-blog-content {
    margin-top: 30px;
    margin-left: 0;
    border-radius: 0;
    padding: 0;
    border: 0 !important;
  }
}

.yb-dark-skin .yb-sidebar-tags a {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.yb-dark-skin .yb-sidebar-item .uk-form-custom .uk-button-default {
  border-color: rgba(255, 255, 255, 0.08);
}

.yb-dark-skin .yb-img-featured {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.yb-dark-skin .yb-blog-content {
  background: #05182c;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.uk-comment-list > :nth-child(n+2),
.uk-comment-list .uk-comment ~ ul {
  margin-top: 30px;
}

/*-------------------------------------------------------------------
10. Section Contact
------------------------------------------------------------------- */
@media (max-width: 959px) {
  .yb-contact-left {
    padding-bottom: 0;
  }
}

@media (max-width: 959px) {
  .yb-contact-right {
    padding-top: 0;
  }
}

.yb-contact-mini .uk-icon {
  width: 40px;
}

/*-------------------------------------------------------------------
11. Main Footer
------------------------------------------------------------------- */
.yb-main-footer {
  padding-top: 30px;
  padding-bottom: 30px;
  background: #0b549e;
  font-size: 0.7rem;
  text-align: center;
}

.yb-main-footer-wrapper {
  color: rgba(255, 255, 255, 0.5);
  position: relative;
}

.yb-totop {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #c60000;
  top: -60px;
  right: 20px;
  text-align: center;
  z-index: 20;
  color: #fff;
  border-radius: 50%;
  padding-top: 18px;
  transition: .3s;
  transform: scale(0.7);
}

.yb-totop:hover, .yb-totop:focus {
  color: #fff;
  background-color: #000;
  transform: scale(1);
}

.yb-footer-social a {
  color: rgba(255, 255, 255, 0.5);
  
}

@media (min-width: 640px) {
  .yb-footer-social a {
    margin-left: 20px;
  }
}

@media (max-width: 639px) {
  .yb-footer-social a {
    margin-left: 5px;
    margin-right: 5px;
  }
}

.waveHorizontals {
  width: 100%;
  height: 20px;
  position: absolute;
  overflow: hidden;
  z-index: 10;
  top: -20px;
}

.waveHorizontal {
  width: 200%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 350px 100%;
  transform-origin: 0 100% 0;
  /* animation: move linear infinite; */
  -webkit-animation-name: move;
          animation-name: move;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#waveHorizontal1 {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}

#waveHorizontal2 {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}

#waveHorizontal3 {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

@-webkit-keyframes move {
  0% {
    transform: translate(-175px, 0px) scale(1, 1);
  }
  50% {
    transform: translate(-87px, 0px) scale(1, 0.5);
  }
  100% {
    transform: translate(0px, 0px) scale(1, 1);
  }
}

@keyframes move {
  0% {
    transform: translate(-175px, 0px) scale(1, 1);
  }
  50% {
    transform: translate(-87px, 0px) scale(1, 0.5);
  }
  100% {
    transform: translate(0px, 0px) scale(1, 1);
  }
}

/*-------------------------------------------------------------------
12. Landing
------------------------------------------------------------------- */
.yb-landing-left {
  position: relative;
  padding-right: 40px;
  background: #fff;
  border-radius: 0;
}

@media (max-width: 639px) {
  .yb-landing-left {
    padding-right: 0;
    border-radius: 0;
  }
  .yb-landing-left::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 1800px;
    left: 100%;
    top: 0;
    background: #fff;
  }
}

.yb-landing-left::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 1800px;
  right: 100%;
  top: 0;
  background: #fff;
}

.yb-landing-right {
  position: relative;
  padding-left: 40px;
}

@media (max-width: 639px) {
  .yb-landing-right {
    padding-left: 0;
  }
}

.yb-landing-preview {
  border-radius: 0;
  overflow: hidden;
  transition: 0.3s;
  background: #000;
}

.yb-landing-preview:hover {
  transform: scale(0.95);
}

/*-------------------------------------------------------------------
13. Components
------------------------------------------------------------------- */
.yb-text-small {
  font-size: 13px;
}

.yb-border-top {
  border-top: 1px solid #e5e5e5;
}

.yb-border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.yb-label {
  text-transform: none;
  font-weight: 700;
}

.yb-full-height {
  transition: 0.3s;
  min-height: 100vh;
  /* Fallback for browsers that do not support Custom Properties */
  min-height: calc(var(--vh, 1vh) * 100);
}

.yb-full-height-fixed {
  height: 100vh;
  /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

.yb-graphic-1 {
  position: absolute;
  top: -100px;
  right: -60px;
  display: block;
  width: 220px;
  height: 220px;
  transform: rotate(-45deg);
  background-image: linear-gradient(90deg, #2336B6 0%, rgba(31, 38, 103, 0.9) 100%);
}

.yb-graphic-2 {
  position: absolute;
  top: -100px;
  right: 80px;
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-image: linear-gradient(-90deg, rgba(49, 207, 171, 0.5) 0%, #50E3C2 100%);
}

.yb-slider-items li {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in;
}

.yb-slider-items li.uk-active {
  max-height: 500px;
}

.yb-section-point {
  border-left: 1px solid #e5e5e5;
  height: 35px;
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

.yb-section-point.right {
  border-left: 0;
  text-align: right;
  border-right: 1px solid #e5e5e5;
}

.yb-section-point.center {
  text-align: center;
  border: 0;
}

.yb-section-point span {
  letter-spacing: -1px;
}

.yb-section-point-wrapper {
  z-index: 2;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.3);
}

.yb-btn {
  text-transform: none;
  font-weight: 700;
  border-radius: 3px;
  min-width: 180px;
}

.yb-btn-rounded {
  border-radius: 30px;
}

.yb-overlay-primary {
  background-color: rgba(0, 0, 0, 0.4);
}

.yb-work-filter a {
  text-transform: none;
}

.yb-nav-left::before {
  border: 0;
}

.yb-nav-left li {
  border-radius: 4px;
}

.yb-nav-left a {
  text-transform: none;
  font-weight: 700;
  border: 0 !important;
  color: #000;
  padding-left: 0;
}

.yb-nav-left a span {
  width: 0;
  transition: 0.3s;
}

.yb-nav-left a:hover {
  color: #c60000;
}

.yb-nav-left .uk-active {
  position: relative;
}

.yb-nav-left .uk-active a {
  color: #c60000;
}

.yb-nav-left .uk-active span {
  width: 30px;
}

.yb-margin-top-1 {
  margin-top: 30px;
}

.yb-margin-top-2 {
  margin-top: 60px;
}

.yb-margin-bottom-1 {
  margin-bottom: 30px;
}

.yb-margin-bottom-2 {
  margin-bottom: 60px;
}

.yb-bg-soft {
  background-color: rgba(229, 229, 229, 0.5);
}

.yb-bg-inverse {
  background-color: #05182c;
}

.yb-paggination {
  font-size: 13px;
}

.yb-paggination .uk-active > a {
  background: #c60000;
  color: #fff;
  padding: 0 8px;
  border-radius: 3px;
}

.yb-width-1 {
  width: 80px;
}

.yb-dark-skin .yb-border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.yb-dark-skin .yb-border-bottom {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.yb-dark-skin .yb-bg-soft {
  background-color: rgba(255, 255, 255, 0.02);
}

.yb-dark-skin .yb-section-point {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.yb-dark-skin .yb-section-point.right {
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.yb-dark-skin .yb-section-point-wrapper {
  color: rgba(255, 255, 255, 0.3);
}

.yb-dark-skin .uk-modal-dialog,
.yb-dark-skin .uk-modal-close-full {
  background-color: #05182c;
}

.yb-dark-skin .uk-alert {
  background: #101e2c;
}

.yb-dark-skin .uk-form-danger {
  border-color: #f0506e !important;
}


.typewriter h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: nowrap;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: nowrap; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}

@media only screen and (max-width: 767px) {
    .typewriter h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: normal;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: normal; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}
}

/* Class added by JS when visible */
.typewriter.start-type {
  visibility: visible;
  animation: 
    typing 3.5s steps(40, end) forwards,
    blink-caret 0.75s step-end infinite;
}

.typewriter2 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: nowrap;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter2 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: nowrap; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}

@media only screen and (max-width: 767px) {
.typewriter2 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: normal;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter2 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: normal; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}
}
/* Class added by JS when visible */
.typewriter2.start-type {
  visibility: visible;
  animation: 
    typing 3.5s steps(40, end) forwards,
    blink-caret 0.75s step-end infinite;
}

.typewriter3 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: nowrap;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter3 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: nowrap; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}

@media only screen and (max-width: 767px) {
   .typewriter3 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: normal;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter3 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: normal; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
} 
    
}   

/* Class added by JS when visible */
.typewriter3.start-type {
  visibility: visible;
  animation: 
    typing 3.5s steps(40, end) forwards,
    blink-caret 0.75s step-end infinite;
}

.typewriter4 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: nowrap;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter4 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: nowrap; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}

@media only screen and (max-width: 767px) {
    .typewriter4 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: normal;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter4 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: normal; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}
}    
    

/* Class added by JS when visible */
.typewriter4.start-type {
  visibility: visible;
  animation: 
    typing 3.5s steps(40, end) forwards,
    blink-caret 0.75s step-end infinite;
}

.typewriter5 h2 {
  text-align: left;
  height:auto;
  overflow: hidden;
  font-size: 100%;
  border-right: .15em solid #fff;
  white-space: nowrap;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter5 {
    height:auto;
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: nowrap; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}

@media only screen and (max-width: 767px) {
    
.typewriter5 h2 {
  text-align: left;
  height:auto;
  overflow: hidden;
  font-size: 100%;
  border-right: .15em solid #fff;
  white-space: normal;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter5 {
    height:auto;
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: normal; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}    
}    

/* Class added by JS when visible */
.typewriter5.start-type {
  visibility: visible;
  animation: 
    typing 3.5s steps(40, end) forwards,
    blink-caret 0.75s step-end infinite;
}



.typewriter6 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: nowrap;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter6 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: nowrap; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}

@media only screen and (max-width: 767px) {
   .typewriter6 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: normal;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter6 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: normal; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}
 
    
}    

/* Class added by JS when visible */
.typewriter6.start-type {
  visibility: visible;
  animation: 
    typing 3.5s steps(40, end) forwards,
    blink-caret 0.75s step-end infinite;
}


.typewriter7 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: nowrap;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter7 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: nowrap; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}

@media only screen and (max-width: 767px) {
    .typewriter7 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: normal;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter7 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: normal; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}
}    

/* Class added by JS when visible */
.typewriter7.start-type {
  visibility: visible;
  animation: 
    typing 3.5s steps(40, end) forwards,
    blink-caret 0.75s step-end infinite;
}


.typewriter8 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: nowrap;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter8 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: nowrap; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}
@media only screen and (max-width: 767px) {
  .typewriter8 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: normal;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter8 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: normal; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}  
}    
/* Class added by JS when visible */
.typewriter8.start-type {
  visibility: visible;
  animation: 
    typing 3.5s steps(40, end) forwards,
    blink-caret 0.75s step-end infinite;
}


.typewriter9 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: nowrap;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter9 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: nowrap; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}

@media only screen and (max-width: 767px) {
  .typewriter9 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: normal;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter9 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: normal; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}  
}   
    
/* Class added by JS when visible */
.typewriter9.start-type {
  visibility: visible;
  animation: 
    typing 3.5s steps(40, end) forwards,
    blink-caret 0.75s step-end infinite;
}

.typewriter10 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: nowrap;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter10 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: nowrap; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}
@media only screen and (max-width: 767px) {
 .typewriter10 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: normal;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter10 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: normal; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}   
}   
/* Class added by JS when visible */
.typewriter10.start-type {
  visibility: visible;
  animation: 
    typing 3.5s steps(40, end) forwards,
    blink-caret 0.75s step-end infinite;
}

.typewriter11 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: nowrap;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter11 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: nowrap; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}

@media only screen and (max-width: 767px) {
  .typewriter11 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: normal;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter11 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: normal; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}  
}    

/* Class added by JS when visible */
.typewriter11.start-type {
  visibility: visible;
  animation: 
    typing 3.5s steps(40, end) forwards,
    blink-caret 0.75s step-end infinite;
}

.typewriter12 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: nowrap;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter12 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: nowrap; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}

@media only screen and (max-width: 767px) {
  .typewriter12 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: normal;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter12 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: normal; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}  
}    
    
/* Class added by JS when visible */
.typewriter12.start-type {
  visibility: visible;
  animation: 
    typing 3.5s steps(40, end) forwards,
    blink-caret 0.75s step-end infinite;
}

.typewriter13 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: nowrap;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter13 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: nowrap; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}
@media only screen and (max-width: 767px) {
  .typewriter13 h1 {
  text-align: left;
  overflow: hidden;
  font-size: 200%;
  border-right: .15em solid #fff;
  white-space: normal;
  /* keeps content in one line */
  letter-spacing: 0em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter13 {
  /*font-family: monospace;*/
  overflow: hidden; /* Ensures text is hidden until typed */
  white-space: normal; /* Keeps text on a single line */
  border-right: 0px solid black; /* The cursor */
  width: 0; /* Start with width 0 */
  visibility: hidden; /* Hidden until scrolled into view */
}  
}
/* Class added by JS when visible */
.typewriter13.start-type {
  visibility: visible;
  animation: 
    typing 3.5s steps(40, end) forwards,
    blink-caret 0.75s step-end infinite;
}

/* The typing animation */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The cursor animation */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: black; }
}

.parallax {
  /* The image used */
  background-image: url("../../img/bgimg.jpg");

  /* Set a specific height */
  min-height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax2 {
  /* The image used */
  background-image: url("../../img/bgimg2.jpg");

  /* Set a specific height */
  min-height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ParallaxVideo{ 
    height: 200px;
    padding-bottom: 50px;
    padding-top: 50px; 
	overflow: hidden;
}
.ParallaxVideo video{ 
    min-width: 100%;
    position:relative;
    top:0;
    z-index: -999;
}
.ParallaxVideo h1 {
  color: #fff;
  font-size: 76px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}







.main-container {
    display: flex; /* Use flexbox for a two-column layout */
    justify-content: space-between;
    z-index:100;
    position: fixed;
    bottom:0;
    right:0;
    
}

.page-content {
    width: 65%; /* Adjust widths as needed */
    /* Ensure height is sufficient to allow scrolling */
    min-height: 100px; 
}

.contact-panel-container {
    width: 30%; /* Adjust widths as needed */
    /* This container defines the maximum area the sticky panel can float in */
}

.contact-panel {
    position: sticky; /* The core property */
    top: 20px; /* Distance from the top of the viewport when it "sticks" */
    
    /* Optional styling for the panel */
    padding: 0px;
    /* background-color: #f4f4f4;*/
    border: 0px solid #ccc;
    border-radius: 5px;
    z-index: 100; /* Ensure it appears above other content */
}

.contact-button {
    display: block;
    margin-top: 3px;
    padding: 10px;
    background-color: #C60000;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
}




.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 50px auto;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}

/* ---------------------------------------------------------- */
/*                  Snippflow Responsive Table                */
/* ---------------------------------------------------------- */

.sc-responsive-table { width: 100%; border-collapse: collapse; margin: 20px 0; text-align: left; font-size: 15px; }
.sc-responsive-table thead { background-color: #333; color: #fff; }
.sc-responsive-table tbody tr:nth-child(even) { background-color: rgba(0,0,0,.1); }
.sc-responsive-table th,
.sc-responsive-table td { padding: 10px; border-bottom: 1px solid rgba(0,0,0,.1); }

@media only screen and (max-width: 767px) {
    .sc-responsive-table thead { display: none; }
    .sc-responsive-table tbody { display: block; width: 100%; }
    .sc-responsive-table tbody tr,
    .sc-responsive-table tbody tr:nth-child(even) { background-color: rgba(0,0,0,.1); }
    .sc-responsive-table tr { display: block; padding: 15px; margin-bottom: 15px; }
    .sc-responsive-table td { display: block; align-items: left; justify-content: space-between; text-align: left; font-weight: 700; padding-left: 0; padding-left: 10; }
    .sc-responsive-table td:before { content: attr(data-label); margin-left: 10px; border:0px solid #000; padding-left:10px; font-weight: 400; color:#fff; }
    .sc-responsive-table td:last-child {border-bottom: 0; }
}

.modal {
    display: none; /* Hidden by default for non-dialog elements, dialog handles this differently */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4); /* Black with opacity */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    position: relative;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}


.modal-open{overflow:hidden}

.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}

.modal.fade .modal-dialog{
    -webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out,-o-transform .3s ease-out}
    
.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}

.modal-open .modal{overflow-x:hidden;overflow-y:auto}

.modal-dialog{position:relative;width:900px;margin:10px}

.modal-content{position:relative;background-color:#fff;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);outline:0}

.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}

.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}

.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}

.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}

.modal-header .close{margin-top:-2px}

.modal-title{margin:0;line-height:1.42857143}

.modal-body{position:relative;padding:15px}

.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}

.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}

.modal-footer .btn-group .btn+.btn{margin-left:-1px}

.modal-footer .btn-block+.btn-block{margin-left:0}

.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}

@media (min-width:768px){
    .modal-dialog{width:600px;margin:30px auto}
    .modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}
    .modal-sm{width:300px}}
    
@media (min-width:992px){
    .modal-lg{width:900px}} 
    
    .modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both}
 





 /* Container to hold the divs side by side */
  .container {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 30px;
  }
  
  @media only screen and (max-width: 767px) {
      
     .container {
    display: block;
    justify-content: center;
    gap: 20px;
    padding: 10px;
  } 
      
  }

  /* Styling for the individual divs */
  .box {
    width: 100%;
    height: auto;
    padding: 10px;
    background-color: #ecd4d4;
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover */
    display:block;
    align-items: center;
    justify-content: left;
    /*font-family: sans-serif;
     cursor: pointer; */
  }

  /* Mouseover effect: raise shadow and lift slightly */
  .box:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Deeper shadow */
    transform: translateY(-5px); /* Lift effect */
    background-color: #cccccc; /* Slight color change */
  }
  
  
   .box2 {
    width: 100%;
    height: auto;
    padding: 10px;
    background-color: #cccccc;
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover */
    display:block;
    align-items: center;
    justify-content: left;
    /*font-family: sans-serif;
     cursor: pointer; */
  }

  /* Mouseover effect: raise shadow and lift slightly */
  .box2:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Deeper shadow */
    transform: translateY(-5px); /* Lift effect */
    background-color: #cccccc; /* Slight color change */
  }
  
  
   .box3 {
    width: 100%;
    height: auto;
    padding: 10px;
    color:#fff;
    background-color: #333333;
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover */
    display:block;
    align-items: center;
    justify-content: left;
    /*font-family: sans-serif;
     cursor: pointer; */
  }

  /* Mouseover effect: raise shadow and lift slightly */
  .box3:hover {
      color:#000;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Deeper shadow */
    transform: translateY(-5px); /* Lift effect */
    background-color: #cccccc; /* Slight color change */
  }
  
 
 .box4 {
    width: 100%;
    height: auto;
    padding: 10px;
    color:#fff;
    background-color: #640b0b;
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover */
    display:block;
    align-items: center;
    justify-content: left;
    border:10px solid #fff;
    /*font-family: sans-serif;
     cursor: pointer; */
  }

  /* Mouseover effect: raise shadow and lift slightly */
  .box4:hover {
      color:#000;
      border:10px solid #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Deeper shadow */
    transform: translateY(-5px); /* Lift effect */
    background-color: #cccccc; /* Slight color change */
  }
  
  .box5 {
    width: fit-content;
    height: auto;
    padding: 4px;
    color:#000;
    background-color: #fff;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover */
    display:inline-block;
    align-items: center;
    justify-content: left;
    border:1px solid #000;
    /*font-family: sans-serif;
     cursor: pointer; */
  }

  /* Mouseover effect: raise shadow and lift slightly */
  .box5:hover {
      color:#fff;
      background-color: #000;
      border:0px solid #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Deeper shadow */
    transform: translateY(-5px); /* Lift effect */
    /* Slight color change */
  }
  
  
  .bg2 {
      background-color:#e8e8e8;
      padding:10px;
      
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.footer {
    background-color: #1a1a2e; /* Deep blue background */
    color: #e0e0e0; /* Light gray text */
    padding: 1rem 1rem;
    margin-top: auto; /* Helps the footer "stick" to the bottom of the page if content is short */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    gap: 0rem;
}

.footer-column {
    flex: 1;
    min-width: 150px;
}

.footer-column h4 {
    color: #0f3460; /* Accent color for headings */
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-size: 1rem;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li a {
    color: #e0e0e0;
    text-decoration: none;
    display: block;
    padding: 0.3rem 0;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover,
.footer-column ul li a:focus {
    color: #ff6700; /* Hover effect with an accent color */
    text-decoration: underline;
}

.footer-bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    font-size: 0.8rem;
}

.footer-bottom nav a {
    color: #e0e0e0;
    text-decoration: none;
    margin: 0 0.5rem;
}

.footer-bottom nav a:hover {
    text-decoration: underline;
}

/* Basic responsiveness for smaller screens */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: left;
    }
    .footer-column h4 {
        margin-top: 1rem;
    }
}







.intro {
  opacity: 0;
}

.styling {
 
}

@-webkit-keyframes fadeInUpA {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpA {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInUp {
  animation-duration: 1s;
  animation-delay: 0.5s;
  -webkit-animation-name: fadeInUpA;
  animation-name: fadeInUpA;
  animation-fill-mode: both;
}

.vid1 {
width:183px;
height:374; 
position:relative; 
display:auto; 
float:left; 
padding-right:10px;
}

@media only screen and (max-width: 767px) {
   .vid1 {
width:100%;
height:auto; 
position:relative; 
display:auto; 
}
}

.img1 {
width:383px; 
height:574;
}

@media only screen and (max-width: 767px) {
.img1 {
width:100%; 
height:auto;
}
}


.par1 {

}

@media only screen and (max-width: 767px) {
.par1 {
width:100%; 
height:auto;
}
}



@keyframes color-change {
  0%   { background-color: #cccccc; left: 0px; top: 0px; }
  50%  { background-color: black; left: 200px; top: 0px; }
 /* 50%  { background-color: blue; left: 200px; top: 200px; }
  75%  { background-color: green; left: 0px; top: 200px; }*/
  100% { background-color: blue; left: 0px; top: 0px; }
}

/* Apply the animation to the div */
.animated-box {
 
  position: relative; /* Required for 'left' and 'top' to work */
   background-color: #cccccc;
   color:black;
  animation-name: color-change;
  animation-duration: 4s;
  animation-iteration-count: 1; /* Makes the animation repeat forever */
}

.fa-home {
  font-size: 48px;
  color: blue;
  text-shadow: 2px 2px 4px #000000;
}