/*
Theme Name:   Blue Logistics Group
Theme URI:    http://supertusch.dk/theme/blueloggroup/
Description:  Basically Bootstrap 5 Child Theme created for Blue Logistics Group
Author:       Supertusch
Author URI:   http://supertusch.dk
Template:     basically-bootstrap-5
Version:      1.0.0
Domain Path: /languages/
Text Domain:  blueloggroup
*/


@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


/* Colors */
:root {
    --blue: #0340EB;
    --light-blue: #EBF0FD;
    --dark-blue: #172554;
}

* {
  font-family: 'Karla', sans-serif;
}


/*  Fonts */

h1 {
  text-transform: uppercase;
  font-size: 65px;
  font-weight: 800;
  color: white;
}

h2 {
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 800;
  color: var(--blue);
}

h3 {
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 800;
  color: var(--blue);
}

p, a, li {
  font-size: 18px;
}

ul {
  padding-left: 20px;
}

li::marker {
  color: var(--blue);
}

.breadcrumb-item a.link {
  border-bottom: none;
}

.area-title {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 300;
  color: var(--blue);
  opacity: 0.58;
}

a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
}

a.link, .accordion-content a {
  text-transform: uppercase;
  color: var(--blue);
  border-bottom: 1px solid var(--blue);
  text-decoration: none;
  padding-bottom: 2.5px;
  font-weight: 500;
  width: fit-content;
}


a.btn, .wpcf7-submit {
  background-color: var(--blue);
  color: white;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 8px 30px;
  border: none;
}

a.btn:disabled,
a.btn[disabled],
.wpcf7-submit:disabled,
.wpcf7-submit[disabled] {
  background-color: #cccccc;
  color: #666666;
  border: none;
}

.wpcf7-spinner {
  display: none;
}

a.secondary-btn {
  background-color: white;
  color: var(--blue);
  border-radius: 4px;
}


.btn-container {
  display: flex;
  grid-gap: 15px;
}


@media (max-width: 768px) {


  h1 {
    font-size: 40px;
    word-break: break-word;
  }

  .placement-right {
    flex-direction: column-reverse;
  }

  .image-text-block img {
    margin-bottom: 30px;
  }
}


@media (min-width: 768px) {
  .content-container.image-left {
    margin-left: 20px;
  }
  .content-container.image-right {
    margin-right: 20px;
  }
}

/*****   GENERAL   *****/

main {
  margin-top: 90px;
}

img {
  width: 100%;
}

.blocks-container img {
  border-radius: 4px;
}

.image-text-block img {
  background-color: #c2d0fc;

}

.block-container {
  padding: 100px 0px;
}

.not-found {
  padding: 80px 0px;
}
.not-found h1 {
  color: var(--blue);
}


/*****   BACKGROUNDS   *****/

.grid-bg-1 {
  background-image: url('/wp-content/themes/blueloggroup/assets/img/rectangular-grid.svg');
  background-repeat: no-repeat;
  background-position: top right;
}

.grid-bg-white {
  background-image: url('/wp-content/themes/blueloggroup/assets/img/white-grid.svg');
  background-repeat: no-repeat;
  background-position: bottom right;
}

/*****   HERO   *****/

.hero {
  position: relative;
}


@media (min-width: 900px) {
  .hero-content {
    max-width: 80%;
  }
}


.hero-content {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-overlay {
  background-color: var(--dark-blue);
  opacity: 0.5;
  position: absolute;
  width: 100%;
  height: 100%;
}

.hero-img, .hero-video {
  max-height: 540px;
  width: 100%;
  object-fit: cover;
}

.hero-video {
  display: block;
}

.hero .area-title {
  color: white;
}

@media (max-width: 768px) {
  .hero-img, .hero-video {
    height: 400px;
  }
}


/*****   NAVIGATION   *****/

header {
  position: fixed;
  width: 100%;
  z-index: 2;
  background: white;
}



.navbar-brand img, .custom-logo-link img {
  max-width: 320px;
}

div.navbar-brand img {
  max-height: 70px;
  max-width: none;
}

.header-navigation {
  height: 90px;
  align-items: center;
}

.header-navigation #main-menu .nav-link {
  text-transform: uppercase;
  font-weight: 300;
  font-size: 16px;
  color: var(--dark-blue);
}


@media (max-width: 1199px) {


  .navbar {
    position: unset;
  }
  .navbar-expand-xl #main-menu {
      width: 100vw;
      background-color: white;
      position: absolute;
      left: 0;
      top: 80px;
  }

  .wpml-ls-item .nav-link {
    justify-content: center;
  }
}


/*****   FORM   *****/

.form-container {
  background-color: var(--light-blue);
  border-radius: 4px;
  padding: 50px 30px;
  display: flex;
  justify-content: center;
}

label, input, textarea {
  width: 100%;
}

.wpcf7-list-item.first {
  margin-left: 0;
}

.wpcf7-response-output {
  margin: 10px 0px !important;
  border-radius: 4px;
}

.wpcf7-list-item input {
  width: fit-content;
}

.wpcf7-list-item label span {
  color: black;
}

.checkbox-label {
  margin-bottom: 10px;
}

.form-container h2.heading-margin {
  margin-top: 40px;
}

.form-container input[type="text"], .form-container input[type="email"], .form-container input[type="date"] {
   padding: 7px 5px;
   border: 1px solid var(--blue);
   border-radius: 4px;
   margin-top: 10px !important;
  }

.form-container textarea {
  resize: none;
  border: 1px solid var(--blue);
  border-radius: 4px;
  height: 120px;
  margin-top: 10px;
}

.form-container label {
  color: var(--blue);
}


/*****   BLOCKS   *****/

.heading-row + .row {
  margin-top: 40px;
}

/*****   Text & billede   *****/

/* .content-container.image-left {
  margin-left: 20px;
}

.content-container.image-right {
  margin-right: 20px;
} */

/*****   Ikon kort   *****/

.icon-card {
  background-color: var(--light-blue);
  padding: 30px;
  border-radius: 4px;
  height: 100%;
}

.icon-card img {
  width: 90px;
  margin-bottom: 30px;
}


/*****   Link kort   *****/

.card-row {
  row-gap: 30px;
}

.link-card-block {
  background-color: var(--light-blue);
}

.card-content {
  background-color: white;
  padding: 30px;
}

.link-card {
  height: 100%;
}

.link-card .card-image {
  height: 255px;
  object-fit: cover;
  border-radius: 4px 4px 0px 0px;
}

.link-card .card-content {
  height: calc(100% - 255px);
}

.link-card .heading-container {
  display: flex;
  align-items: center;
  grid-gap: 20px;
  margin-bottom: 20px;
}

.link-card h3 {
  margin: 0;
}

.link-card .heading-container img {
  width: 50px;
}


/*****   Accordion   *****/

.accordion-row {
    background-color: var(--light-blue);
    display: flex;
    font-size: 1.2rem;
    font-weight: 700;
    justify-content: space-between;
    margin-top: 1.5rem;
    flex-direction: row-reverse;
}
.accordion-item-header {
  padding: 20px;
    width: 100%;
}
.accordion-toggler {
    position: relative;
    left: 0px;
    width: 60px;
    /* margin-left: 20px; */
    /* margin-left: 20px; */
    /* z-index: -1; */
}
.accordion-toggler .bar-1, .accordion-toggler .bar-2 {
    background-color: var(--blue);
    bottom: 0;
    display: block;
    height: 4px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s ease-in-out;
    width: 17px;
}

.accordions-block h2.block-heading {
    margin-bottom: 1rem;
}
.accordion-toggler .bar-2 {
    transform: rotate(90deg);
}
.accordion-item-header[aria-expanded=true] + .accordion-toggler .bar-2 {
    transform: rotate(180deg);
    background-color: white;
}

.accordion-item-header[aria-expanded=true] + .accordion-toggler {
    background-color: var(--blue);
}

.accordion-item-header[aria-expanded=true]{
    background-color: var(--blue);
    color: white;
}
.accordion-content {
    background-color: var(--blue);
    padding: 2.3333rem;
}
.accordion-content p {
    font-size: 1rem;
}
.accordion-column-2 {
    margin-top: 5rem;
}

.accordion-heading {
  font-size: 20px;
  font-weight: 700;
}

.accordion-content p {
  color: white;
}

.accordion-content a {
  color: white;
  border-color: white;
}


/*****   Video  *****/

.video-container iframe {
  width: 100%;
  height: 500px;
}

/*****   Animeret statistik  *****/

.stats-block {
  background-color: var(--light-blue);
}

.stats-grid {
  white-space: pre-wrap;
}

.stats-block .number, .stats-block .number-text {
  font-size: 60px;
  color: var(--blue);
  font-weight: 800;
}

.stats-block .stat {
  font-size: 18px;
}

/*****   Citat slider  *****/


.quote-slider-container {
  background-color: var(--blue);
  border-radius: 4px;
}


.single-quote {
  display: flex;
  padding: 35px;
  height: 100%;
}

.single-quote img {
  width: 320px;
}

.single-quote .quote-content {
  padding-left: 5rem;
  margin-bottom: 40px;
}


.single-quote .quote, .single-quote .quote-mark {
  font-size: 40px;
  color: white;
  font-weight: 800;
}

.single-quote .quote-mark {
  font-size: 80px;
}

.single-quote .source {
  color: white;
  font-size: 20px;
}

.quote-grid {
  display: flex;
  height: 100%;
}

.quote-grid img {
  object-fit: cover;
}


@media (max-width: 569px) {
  .press-card {
    flex-direction: column;
  }
  .press-person {
    margin-bottom: 15px;
  }
}

@media (max-width: 992px) {

  .press-card {
    margin-bottom: 40px;
  }

  .quote-grid img {
    display: none;
  }
  .single-quote .quote-content {
    padding-left: 0;
  }

  .quote-slider-container .slick-dots {
    left: 37px;
  }
}


/*****   Seneste nyheder  *****/

.latest-news {
  background-color: var(--light-blue);
}

.news-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.news-card {
  height: 100%;

}

.news-card img {
  border-radius: 4px 4px 0px 0px;
  height: 215px;
  object-fit: cover;
}

.news-card .card-content {
  padding-top: 20px;
  height: calc(100% - 215px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-card h3 {
  text-transform: none;
  margin-top: 8px;
}

.news-card .news-item-excerpt {
  margin-bottom: 10px;
}

.card-content span {
  font-weight: 300;
}

.card-content span.separator {
  color: #C8C8C8;
}

.card-content span.category {
  color: var(--blue);
}


/*****   Tracking   *****/

.tracking-block {
  background-color: var(--light-blue);
}

.track-warning {
  display: flex;
  justify-content: center
}

.track123-widget-wrapper {
  padding: 24px !important;
}
.track123-widget-search-container {
  margin-bottom: 0 !important;
}

.track-warning p {
  max-width: 400px;
  font-size: 14px;
}


/*****   POSTS ARCHIVE   *****/

.all-posts {
  background-color: var(--light-blue);
  padding: 100px 0px;
}


/*****   SINGLE POST   *****/

.post-hero {
  padding: 80px 0px;
  background-color: var(--light-blue);
}

.post h1 {
  color: var(--blue);
  word-break: break-word;
  hyphens: auto;
}

.article-block-container {
  padding: 60px 0px;
}

.post-hero span {
  font-weight: 300;
  font-size: 20px;
}

.post-hero span.separator {
  color: #C8C8C8;
}

.post-hero span.category {
  color: var(--blue);
}

.article-block-container .single-quote {
  background-color: var(--blue);
  border-radius: 4px;
}

.article-block-container .quote-content {
  padding-left: 0px;
}


/*****  TEXT PAGE TEMPLATE  *****/

.hero.text-hero {
  background-color: var(--light-blue);
  padding: 100px 0px;
}

.hero.text-hero h1 {
  color: var(--blue);
}

.text-content-container {
  padding: 60px 0px;
}


/*****   FOOTER   *****/

footer {
  background-color: var(--blue);
  color: white;
  padding: 80px 0px;
}

footer a:hover {
  color: white;
  text-decoration: underline !important;
}

footer a.link:hover {
  text-decoration: none !important;
}

footer a, footer a.link {
  color: white;
}

footer a.link {
  border-color: white;
}

footer li {
  list-style: none;
  margin-bottom: 10px;
}

footer li a {
  font-weight: 300;
  text-transform: uppercase;
  text-decoration: none;
}

footer p, footer a {
  font-size: 20px;
}

.footer-logo {
  max-width: 320px;
}

#menu-footer-menu {
  padding-left: 0;
}

footer .contact-wrapper img {
  width: 25px;
  margin-right: 15px;
}

footer .contact-wrapper {
  margin-bottom: 10px;
}

footer .contact-wrapper a {
  text-decoration: none;
}

footer .social-icon {
  width: 40px;
}



/* ***** Slick slider overrides ***** */

.slick-track
{
    display: flex !important;
}

.slick-slide
{
    height: inherit !important;
}

 .slick-dots {
   display: flex;
   /* margin: 0; */
   margin-top: 30px;
   /* padding: 1rem 0; */
   padding: 0;
   list-style-type: none;
   position: absolute;
    bottom: 26px;
    left: 447px;
 }
 .slick-dots li {
   margin-right: 15px;
 }
 .slick-dots button {
   display: block;
   width: 40px;
   height: 3px;
   padding: 0;
   border: none;
   background-color: white;
   opacity: 0.5;
   text-indent: -9999px;
 }
 .slick-dots li.slick-active button {
   background-color: white;
   opacity: 1;
 }


.bg-test {
width: 500px;
height: 400px;
background-size: cover;
border-radius: 4px;

}



.wpml-ls-flag {
  width: 18px;
  height: 12px;
}


.press-card {
  display: flex;
  column-gap: 20px;
  background-color: #ebf0fd;
  padding: 20px;
  border-radius: 4px;
}

.file-teaser {
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-teaser.white-background {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px;
}

.file-info {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.file-teaser img {
  width: 100%;
}

.press-card h3 {
  font-size: 20px;
}

.press-person {
  width: 150px;
  background: #c2d0fc;
  border-radius: 4px;
}

.press-contact img {
  width: 25px;
}

.press-contact {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  margin-top: 10px;
}

.press-contact div {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.press-contact a {
  color: black;
}

.downloads-container .accordion-row:first-child {
  margin-top: 0;
}



.downloads-container .accordion-content {
  padding-top: 20px;
}

.downloads-container .files-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 20px;
  column-gap: 20px;
}

.press-wrapper h2 {
  font-size: 25px;
  margin-bottom: 20px;
}

.files-wrapper a {
  font-size: 16px;
}