@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&family=Playfair+Display&display=swap");

.navbar {
  background: #428bca;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #144989;
  background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
  color: #f5f6f7;
}
.side-line {
  border-left: 1px solid RGB(112, 112, 112, 0.3);
  height: 150px;
}
.img-pro {
  max-width: 50px;
}
#main-banner {
  position: relative;
}
#main-banner img {
  object-fit: cover;
  min-height: 350px;
}
#main-banner .banner-content-desktop,
#main-banner .banner-content-mobile {
  position: absolute;
  width: 100%;
  z-index: 10;
}
#main-banner .banner-content-desktop {
  text-align: center;
  top: 40%;
}
#main-banner .banner-content-mobile {
  text-align: center;
  top: 55%;
}
#main-banner .banner-content-desktop h2,
#main-banner .banner-content-mobile h2 {
  color: #9abbe3;
  margin-bottom: 10px;
}
#main-banner .banner-content-desktop h2 {
  font-size: 4em;
  text-align: center;
}
#main-banner .banner-content-mobile h2 {
  font-size: 2.8em;
  text-align: center;
}
#main-banner .banner-content-desktop h4,
#main-banner .banner-content-mobile h4 {
  color: #d4d4d4;
  margin-bottom: 25px;
  animation-delay: 0.5s;
}
#main-banner .banner-content-desktop h4 {
  text-align: center;
  font-size: 1.5em;
}
#main-banner .banner-content-mobile h4 {
  text-align: center;
  font-size: 1.2em;
}

#main-banner .banner-content-desktop h2 mark {
  color: white;
  background-color: rgba(252, 248, 227, 0);
}
#main-banner .banner-content-mobile h2 mark {
  color: white;
  background-color: rgba(252, 248, 227, 0);
}

#main-banner .btn-gray {
  border: 1px solid #fff;
  color: #fff;
}
#main-banner .btn-gray:hover {
  border: 1px solid #444;
}

#home {
  height: calc(100vh - 8vw);
}
.bg-banner {
  position: absolute;
  background-image: url(../../../images/roche/banner/banner_main.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  top: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-index-roche {
  display: flex;
  align-items: flex-end;
}
.logo-index-roche img {
  width: 100px;
}

.logo-index-text {
  font-family: "Open Sans", sans-serif;
  color: #fff;
  font-weight: 600;
  font-size: 50px;
  line-height: 1.5;
}

@media (max-width: 1440px) {
  #home {
    height: calc(100vh - 12vw);
  }
}

@media (max-width: 575px) {
  .logo-index-text {
    font-size: 30px;
  }
  .font-lg {
    font-size: 14px;
  }
  #home {
    height: calc(100vh - 20vw);
  }
}