:root {
  --clr-acc: #3f8096;
  --clr-acc-lt: #6898aa;
  --clr-acc-lr: #d4e5ed;

  --gray: #555;
  --gray-lt: #999;
  --gray-lr: #f6f6f6;
  --gray-md: #666;
  --gray-dk: #333;

  --tr-t1: .3s ease-in-out;

  --shadow-1: 0 -5px 5px hsla(0, 0%, 0%, 0.15);
  --shadow-2: 0 0 5px hsla(0, 0%, 0%, 0.1);
}

/* Fonts */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-SemiBoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

body {
  background: var(--gray-lr) 0%;
}

body, input, button, select, textarea {
  font-family: 'Montserrat', sans-serif;
}

a {
  color: var(--clr-acc);
  transition: color var(--tr-t1);
}

a:hover {
  color: var(--clr-acc-lt);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--gray-dk);
  font-weight: bold;
}

.docCard {
  min-height: 107px;
  margin-bottom: 25px;
}
.docCard:hover {
  background-color: var(--clr-acc-lr);
}

.docCard i.fal {
  color: var(--clr-acc);
  font-size: 1.2em;
}

.docCard a {
  text-decoration: none;
}

.btn {
  color: var(--clr-acc);
  font-size: 1rem;
  padding: .5rem 1.5rem !important;
  text-transform: uppercase;
  text-shadow: none;
  background: none;
  border: 1px solid var(--clr-acc);
  border-radius: 100px;
  box-shadow: none;
  transition: color var(--tr-t1),
    background-color var(--tr-t1);
}

.btn:hover {
  color: white !important;
  background-color: var(--clr-acc) !important;
  border: 1px solid var(--clr-acc) !important;
}

.btn-primary {
  color: white;
  text-transform: uppercase;
  background: var(--clr-acc);
  background: linear-gradient(75deg, 
    var(--clr-acc) 65%, 
    var(--clr-acc-lt) 65%);
  background-position-x: 65%;
  background-size: 200%;
  border-color: transparent;
  transition: background-position var(--tr-t1) !important;
}

.btn-primary:hover,
.btn-primary:active {
  color: white !important;
  background: var(--clr-acc-lt);
  background: linear-gradient(75deg, 
    var(--clr-acc) 65%, 
    var(--clr-acc-lt) 65%);
  background-position-x: 80%;
  background-size: 200%;
  border-color: transparent !important;
}

.btn-circle {
  width: 4rem;
  height: 4rem;
  padding: 0 !important;
  display: inline-block;
  line-height: 4rem;
  background-color: white;
  border: 1px solid white;
  box-shadow: var(--shadow-1);
  transition: color var(--tr-t1),
    background-color var(--tr-t1),
    border-color var(--tr-t1);
}

.btn-circle:hover,
.btn-circle:active {
  color: white !important;
  background-color: var(--clr-acc-lt) !important;
  border-color: var(--clr-acc-lt) !important;
  transition: color var(--tr-t1),
    background-color var(--tr-t1),
    border-color var(--tr-t1);
}

.btn-circle.go-up {
  margin-bottom: -2rem;
  position: relative;
  z-index: 1;
  color: white;
  background-color: var(--gray-dk);
  border-color: transparent;
  box-shadow: none;
}

.btn:not(.btn-circle, .link-ims) i {
  margin-right: .5rem;
}

.qa-info button.btn-sm {
  padding-block: .3rem !important;
  padding-inline: .8rem !important;
  font-size: .7rem !important;
}

/* Header */
header {
  width: 100%;
  position: absolute;
  z-index: 10;
  text-transform: uppercase;
  font-size: .75rem;
}

header .navbar-brand img {
  width: 250px;
}

header .main-nav .nav-link {
  padding: .7em 0 !important;
  position: relative;
  color: white;
  letter-spacing: .1em;
  transition: color var(--tr-t1);
}

header .main-nav .nav-link:hover,
body.page-home .link-home,
body.page-alpha .link-alpha,
body.page-qa .link-qa,
body.page-information .link-information,
body.page-contact .link-contact,
body.page-about .link-about,
body.page-policyholder .link-policyholder,
body.page-privacy .link-privacy,
body.page-complain .link-complain {
  color: var(--clr-acc);
}

header .main-nav .nav-link::after {
  content: '';
  width: 0;
  height: 1px;
  display: block;
  position: absolute;
  left: 0;
  bottom: 5px;
  background-color: var(--clr-acc);
  transition: width var(--tr-t1);
}

header .main-nav .nav-link:hover::after,
body.page-home .link-home::after,
body.page-alpha .link-alpha::after,
body.page-qa .link-qa::after,
body.page-information .link-information::after,
body.page-contact .link-contact::after,
body.page-about .link-about::after,
body.page-policyholder .link-policyholder::after {
  width: 1.7em;
}

header .main-nav .link-ims {
  padding: .4em 1.3em !important;
  font-size: 1em;
}

header .main-nav .link-ims::after {
  display: none;
}

header .social-nav .nav-link {
  padding: 0 1em;
  color: white;
  font-size: 1.1em;
  transition: color var(--tr-t1);
}

header .social-nav .nav-link:hover {
  color: var(--clr-acc);
}

header .social-nav span {
  display: none;
}

.navbar-toggler {
  border: none !important;
  box-shadow: none !important;
  translate: -.5rem 2.5rem;
}

.navbar-toggler-icon {
  background: none;
}

.navbar-toggler-icon::before {
  position: relative;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  position: absolute;
  color: white;
  font-family: "Font Awesome 5 Pro";
  font-size: 2.5rem;
  font-weight: 300;
  transition: opacity var(--tr-t1);
}

.navbar-toggler-icon::before {
  content: '\f0c9';
}

.navbar-toggler-icon::after {
  content: '\f00d';
  left: 2rem;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  opacity: 0;
}

.navbar-toggler[aria-expanded="false"] .navbar-toggler-icon::after {
  opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  opacity: 1;
}

.navbar-toggler[aria-expanded] ~ .navbar-collapse::before {
  content: '';
  display: none;
  position: absolute;
  inset: 0 calc(var(--bs-gutter-x) * -.5) 0;
  z-index: -1;
  background-color: hsla(0, 0%, 0%, 0.9);
  opacity: 0;
  transition: opacity var(--tr-t1);
}

.navbar-toggler[aria-expanded="true"] ~ .navbar-collapse::before {
  opacity: 1;
}


/* Footer */
footer {
  color: white;
  font-size: .9rem;
  background-color: var(--gray-dk);
}

footer img {
  width: 70px;
}

footer .nav-item {
  margin: 0 .5rem !important;
  display: inline-block;
}

footer .nav-link,
footer a {
  color: white;
  text-decoration: none;
  text-transform: lowercase;
}

footer .nav-link:hover {
  color: var(--clr-acc-lt);
}

footer .social-nav span {
  display: none;
}

footer .link-ims {
  padding: .2em .8em !important;
  font-size: 1em;
  background: none;
  border: 1px solid white;
  transition: color var(--tr-t1),
    border-color var(--tr-t1) !important;
}

footer .link-ims:hover {
  color: var(--clr-acc-lt) !important;
  background: none !important;
  border: 1px solid var(--clr-acc-lt) !important;
}

footer .footer-bottom {
  font-size: .9em;
  border-top: 1px solid var(--gray-md);
}

/* Home page */
.carousel::after,
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, 
    rgba(0,0,0, .9) 10%, 
    rgba(0,0,0,0) 45%, 
    rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.carousel img {
  height: calc(100vh - 2.5rem);
  object-fit: cover;
}

.carousel-caption {
  padding-inline: 1rem;
  padding-bottom: 2rem;
  bottom: 7rem;
  color: white;
  font-size: 1.5rem;
  background-color: hsla(0, 0%, 0%, 0.7);
}

.carousel-caption h1 {
  color: white;
  font-weight: normal;
  text-transform: uppercase;
}

.carousel-indicators {
  bottom: 2rem;
}

.carousel-indicators [data-bs-target] {
  width: 15px;
  height: 15px;
  border-radius: 100%;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  filter: drop-shadow(1px 1px 3px hsla(0, 0%, 0%, 0.75));
}

.go-down {
  margin-top: -2rem;
  position: relative;
  z-index: 1;
}

.welcome {
  font-size: 1.3rem;
  line-height: 1.3;
}

.welcome h1 {
  margin-bottom: 1em;
  font-size: 2.3rem;
  text-transform: uppercase;
}

/* internal */
.hero {
  height: 450px;
  position: relative;
  background-size: cover;
}

.hero::before {
  content: "";
  background: hsla(0, 0%, 0%, 0.25);
  width: 100%;
  height: 100%;
  position: absolute;
}

.hero .page-title {
  margin: 0 0 4rem;
  padding: 4rem;
  position: relative;
  color: white;
  font-size: 3.2rem;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  /* background-color: hsla(0, 0%, 0%, 0.6); */
  /* text-shadow: 0px 0px 15px hsla(0, 0%, 0%, 0.7); */
}

.hero .page-title::after {
  content: '';
  height: 5px;
  position: absolute;
  inset-inline: 4rem;
  bottom: 3rem;
  background-color: var(--clr-acc-lt);
}

.info {
  padding: 3rem 7rem ;
  background-color: white;
  box-shadow: var(--shadow-2);
}

.info h2 {
  color: var(--clr-acc);
  font-size: 1.5rem;
  font-weight: normal;
  text-transform: uppercase;
}

.info h3 {
  color: var(--clr-acc);
  font-size: 1.25rem;
  font-weight: normal;
  text-transform: uppercase;
}

.info .info-title {
  border-bottom: 1px solid;
}

.info li::marker {
  color: var(--clr-acc);
}

.info ul li::marker {
  content: '\f00c   ';
  font-family: "Font Awesome 5 Pro";
  font-size: .9em;
}

.fa-external-link {
  margin-left: .2em;
  font-size: .75em;
  vertical-align: .25em;
}

/* Page: Alpha */
.page-alpha .hero {
  background-image: url(../img/img-alpha.jpg);
  background-position: center top;
}

/* Page: Q&A */
.page-qa .hero {
  background-image: url(../img/img-qa.jpg);
  background-position: center top;
}

.qa-info .qa-item:first-child h2 {
  padding-top: 0;
}

.qa-info h2 {
  padding-top: 1.5rem;
  padding-bottom: .3rem;
  font-size: 1.2rem;
  text-transform: unset;
  border-bottom: 1px solid var(--clr-acc-lr);
  transition: border-color var(--tr-t1);
}

.qa-info h2:hover {
  border-bottom-color: var(--clr-acc);
  cursor: pointer;
}

.qa-info h2 a {
  display: block;
  text-decoration: none;
}

.qa-info .fa-chevron-down {
  font-size: .8em;
  transition: rotate var(--tr-t1),
    translate var(--tr-t1);
}

.qa-info a[aria-expanded="true"] .fa-chevron-down {
  translate: 0 -.2em;
  rotate: 180deg;
}

.qa-info .qa-text {
  margin-left: 1rem;
}

.qa-info .qa-text h3 {
  margin-bottom: 0;
  font-size: 1rem;
}

/* Page: Further information */
.page-information .hero {
  background-image: url(../img/img-information.jpg);
  background-position: top center;
}

/* Page: About us */
.page-about .hero {
  background-image: url(../img/aboutUsBanner.jpeg);
  background-position: center center;
}

.page-about .role {
  margin-left: .5em;
  color: var(--clr-acc);
  font-size: .8em;
  text-transform: uppercase;
}

/* Page: Policyholder information */
.page-policyholder .hero {
  background-image: url(../img/policyholderBanner.jpeg);
  background-position: center center;
}

/* Page: Contact us */
.page-contact .hero {
  background-image: url(../img/contactBanner.jpeg);
  background-position: top center;
}

.page-contact .info ul li.contact-address::marker {
  content: '\f3c5   ';
  font-weight: 100;
}

.page-contact .info ul li.contact-phone::marker {
  content: '\f095   ';
  font-weight: 100;
}

.page-contact .info ul li.contact-email::marker {
  content: '\f0e0   ';
  font-weight: 100;
}

.form-floating>label {
  color: var(--clr-acc);
}

.page-contact .form-floating > .form-control {
  background-color: var(--gray-lr);
  border-color: var(--gray-lr);
  border-radius: 0;
  transition: background-color  var(--tr-t1),
    border-bottom-color var(--tr-t1);
}

.page-contact .form-floating > .form-control:hover,
.page-contact .form-floating > .form-control:focus {
  background-color: white;
  border-bottom-color: var(--clr-acc);
}

.page-contact #commentsField {
  min-height: 10.2rem;
  line-height: 1.4;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-bottom-color: #dc3545;
}

/* Page: Privacy policy, How to complain */
.page-privacy .hero,
.page-complain .hero {
  height: 375px;
  background-color: black;
}

/* Page: error */
.page-error .hero {
  height: 375px;
  background-color: black;
}

.page-error .fa-exclamation-triangle {
  --fa-primary-color: var(--clr-acc);
  --fa-secondary-color: var(--clr-acc-lt);
}

.page-error p {
  color: var(--clr-acc);
  font-size: 1.7rem;
}

/* Responsive */
@media (max-width: 992px) {
  header {
    font-size: 1rem;
  }

  header .main-nav {
    border-top: 1px solid white;
  }

  .navbar-toggler[aria-expanded] ~ .navbar-collapse::before {
    display: block;
  }

  footer{
    font-size: 1.1rem;
  }

  footer .link-ims {
    margin-top: 1rem;
    display: inline-block;
  }

  .info {
    padding-inline: 1.5rem;
  }
}