* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

@media (min-width: 320px) {

  .icon {
        font-size: 18px;
        margin-right: 10px;
        color: #001f3f;
        width: auto;
    }

  .section-title {
    font-size: 18px!important;
  }

  .navBarContainer {
    display: flex !important;
    flex-flow: row !important;
    width: 100%;
    height: auto;
  }

  .mobileStyle {
    display: flex!important;
    align-items: center!important;
    flex-flow: column!important;
    height: auto;
  }

  .navBar {
    flex-direction: row!important;
    flex-wrap: wrap!important;
    justify-content: space-between !important;
    height: auto;
    width: auto;
  }

  .nav-left, .nav-right {
    gap: 0px;
}

  /* Scope to nav only — don't override all anchors */
.navBar a,
.navBarContainer a {
  padding: 6px 12px;
  border: 1.5px solid rgba(0, 31, 63, 0.25);
  border-radius: 10px;
  color: #001f3f;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  text-decoration: none;
  display:flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  opacity: 1 !important;
  font-size: 15px!important;
}

  img {
    height: 70px;
    width: 175px;
  }

  .p1,
  .p2 {
    font-size: 15px!important;
    line-height: 25px!important;
  }

  p {
    font-size: 15px!important;
}

  form {
    width: 100px;
    height: 550px;
  }

  button {
    width: 92%;
    color: #001f3f;
    height: 36px!important;
}

#send {
  height: 36px;
}

  .carousel-wrapper {
    height: 160px;
  }

  .carousel {
    height: 140px;
  }

  .carousel-item {
    width: 75px;
    height: 75px;
  }

  .top, .bottom, .top2, .bottom2 {
    display: flex;
    flex-flow: column;
    color: #001a33;
    font-size: 12px!important;
    font-family: "Montserrat", sans-serif;
    line-height: 1.75;
    width: 750px;
    max-width: 92%;
    text-align: left;
    background: #ffffff;
    border: 1px solid rgba(0, 31, 63, 0.12);
    border-radius: 18px;
    padding: 30px 34px;
    margin: 22px auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10), 0 18px 45px rgba(0, 31, 63, 0.12);
    transition: all 0.25s ease;
}

.descriptionContent {
    height: 93%!important;
    justify-content: end !important;
}

.descriptionContent2 {
    height: auto!important;
    justify-content: end !important;
}

ul.p {
    display: flex;
    flex-flow: column;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 70%;
    text-align: center;
    height: 55%;
    justify-content: center;
}

ul.p li {  
    font-size: 12px!important;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

  .email-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
}

#form {
  width: 100%!important;
}

.list {
    display: flex;
    flex-flow: column;
    height: 100% !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center!important;
}

a {
  font-size: 20px;
}

.email-card {
    width: 92%!important;
}

.copy {
    top: 5px;
    position: relative;
    background: transparent;
    border: 1px solid #001f3f;
    color: #001f3f;
    /* padding: 4px 10px; */
    border-radius: 8px;
    font-size: 10px;
    cursor: pointer;
    transition: 0.2s ease;
    left: 10px;
}

.paragraphCenter {
    width: auto!important;
}

.opacityVisible {
    height: 100%;
}

}

@media (min-width: 481px) {

  .opacityVisible {
    height: 100%;
}

  .mobileStyle {
    display: flex!important;
    align-items: center!important;
    flex-flow: column!important;
    height: auto;
  }

  .list {
    display: flex;
    flex-flow: column;
    height: 100% !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: end !important;
}

  img {
    height: 150px;
    width: 325px;
  }

  .navBarContainer {
    display: flex !important;
    flex-flow: row !important;
    width: 65%;
    height: auto;
    justify-content: start !important;
  }

  .navBar {
    flex-direction: row!important;
    height: auto;
  }


  .navBar a,
.navBarContainer a {
  font-size: 14px;
  padding: 7px 14px;
}

  .p1,
  .p2 {
    font-size: 20px!important;
  }

  form {
    width: 150px;
    height: 450px;
  }

  input {
        width: 95.5%;
    }

    #top, #bottom, #top2, #bottom2 {
    display: flex;
    flex-flow: column;
    color: #001a33;
    font-size: 14px;
    font-family: "Montserrat", sans-serif;
    line-height: 1.75;
    width: 750px;
    max-width: 82%;
    text-align: left;
    background: #ffffff;
    border: 1px solid rgba(0, 31, 63, 0.12);
    border-radius: 18px;
    padding: 30px 34px;
    margin: 22px auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10), 0 18px 45px rgba(0, 31, 63, 0.12);
    transition: all 0.25s ease;
}

.descriptionContent {
    height: 95%!important;
    justify-content: end !important;
}
.descriptionContent2 {
    height: auto!important;
    justify-content: end !important;
}

ul.p {
    display: flex;
    flex-flow: column;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 70%;
    text-align: center;
    height: 50%;
    justify-content: center;
}

ul.p li {  
    font-size: 12px!important;
}

.carousel-wrapper {
    height: 160px;
  }

  .carousel {
    height: 140px;
  }

  .carousel-item {
    width: 100px;
    height: 100px;
  }

  .email-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
}

.icon {
    font-size: 18px;
    color: #001f3f;
    width: auto;
}

.paragraphCenter {
    width: auto!important;
}

}

@media (min-width: 601px) {

  .opacityVisible {
    height: 100%;
}

  .list {
    display: flex;
    flex-flow: column;
    height: 100% !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: end !important;

}

  input {
        width: 96.5%;
    }

    img {
    height: 250px;
    width: 375px;
  }

.navBar {
    flex-direction: column!important;
    height: auto;
  }

  #top, #bottom, #top2, #bottom2 {
    display: flex;
    flex-flow: column;
    color: #001a33;
    font-size: 16px;
    font-family: "Montserrat", sans-serif;
    line-height: 1.75;
    width: 750px;
    max-width: 82%;
    text-align: left;
    background: #ffffff;
    border: 1px solid rgba(0, 31, 63, 0.12);
    border-radius: 18px;
    padding: 30px 34px;
    margin: 22px auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10), 0 18px 45px rgba(0, 31, 63, 0.12);
    transition: all 0.25s ease;
}

.descriptionContent {
        height: 90% !important;
        justify-content: end !important;
    }

.descriptionContent2 {
    height: auto!important;
    justify-content: end !important;
}

.p1,
.p2 {
    font-size: 20px!important;
  }

  ul.p {
    display: flex;
    flex-flow: column;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 70%;
    text-align: center;
    height: 60%;
    justify-content: center;
}

ul.p li {  
    font-size: 12px!important;
}

.carousel-wrapper {
    height: 100px;
  }

  .carousel {
    height: 100px;
  }

  .carousel-item {
    width: 100px;
    height: 100px;
    top: 40%;
  }

  .email-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.icon {
    font-size: 18px;
    margin-right: 10px;
    color: #001f3f;
    width: auto;
}

.mobileStyle {
        display: flex !important;
        align-items: center !important;
        flex-flow: column !important;
        justify-content: space-between;
        height: auto;
    }

    
.navBarContainer { 
  height: auto; 
} 

}

@media (min-width: 769px) {

  .opacityVisible {
    height: 100%;
}

  .list {
    display: flex;
    flex-flow: column;
    height: 100% !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: end !important;

}

  img {
    height: 250px;
    width: 375px;
  }

  .container {
    padding: 24px;
    max-width: 900px;
    margin: auto;
  }

  .navBarContainer {
    display: flex !important;
    flex-flow: row !important;
    width: 100%;
    flex-wrap: wrap!important;
    height: auto;
    justify-content: start !important;
  }

  .navBar {
    flex-direction: column!important;
    height: auto;
  }

  input {
        width: 97%;
    }

    .descriptionContent {
    height: 95%!important;
    justify-content: end !important;
}

.descriptionContent2 {
    height: auto!important;
    justify-content: end !important;
}

.carousel-wrapper {
    height: 100%;
  }

  .carousel {
     height: 140px;
  }

  .carousel-item {
    width: 100px;
    height: 100px;
  }

  .mobileStyle {
    display: flex!important;
    align-items: center!important;
    flex-flow: column!important;
    height: auto;
  }

  .icon {
        font-size: 18px;
        margin-right: 10px;
        color: #001f3f;
        width: auto;
}
}

@media (min-width: 1025px) {

  .navBar {
    flex-direction: row!important;
    flex-wrap: wrap!important;
    justify-content: space-evenly !important;
    height: 200px;
  }

  .navBar a,
.navBarContainer a {
  font-size: 20px!important;
  padding: 8px 20px;
}

  .carousel-item img {
    width: 150px;
    height: 150px;
    -o-object-fit: contain;
    object-fit: contain;
}

  img {
    height: 200px;
    width: 350px;
  }

  .p1,
  .p2 {
    font-size: 55px!important;
  }

  p {
    color: #001f3f;
    font-size: 20px !important;
    font-family: "Montserrat", sans-serif;
    /* line-height: 50px !important; */
    width: 70% !important;
    text-align: center !important;
    opacity: 1 !important;
}

  form {
    width: 100%;
  }

  input {
    width: 97%;
  }

  .descriptionContent {
    height: 100%!important;
    justify-content: start !important;
}

.descriptionContent2 {
    height: auto!important;
}

.p1 {
    color: #001f3f;
    font-size: 20px !important;
    font-family: "Montserrat", sans-serif;
    line-height: 50px !important;
    text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #001, 0 0 9px #001f, 0 0 14px #001f3f;

ul.p li {  
    font-size: 16px!important;
}
}

.carousel-item {
    width: 100%;
    height: 100%;
    top:0%;
  }


  .email-grid {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
}

.icon {
  font-size: 18px;
  margin-right: 10px;
  color: #001f3f;
  width: auto;
}

textarea {
  width: 97%;
}

.list {
    display: flex;
    flex-flow: column;
    height: auto !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: start !important;

}

ul.p li {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    font-size: 20px;
    font-family: "Montserrat", sans-serif;
    transition: 0.3s ease;
    border: 1px solid #001f3f;
    font-size: 16px !important;
    opacity: 0.9;
    height: 50px;
    margin-bottom: 10px;
}

#form {
    display: flex !important;
    flex-flow: column !important;
    justify-content: space-evenly !important;
    width: 500px !important;
    /* height: 550px !important; */
}

.label {
    font-size: 18px;
    color: #001f3f;
    font-family: "Montserrat", sans-serif;
}

.icon {
    font-size: 20px;
    color: #001f3f;
}

.mobileStyle {
    display: flex !important;
    align-items: center !important;
    flex-flow: row !important;
    justify-content: space-between !important;
    height: 550px;
  
}

.navBarContainer { 
  height: auto; 
  width: 100%;
} 

.kontaktCenter {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%!important;
}

.nav-left, .nav-right {
        gap: 30px;
}

.carousel {
    height: 0px;
}

.section-title {
    font-size: 22px!important;
  }

  .top, .bottom, .top2, .bottom2 {
    font-size: 20px !important;
    opacity: 0.8!important;
  }
  
}