html {
  background: #F2F1EB;
  -webkit-font-smoothing: antialiased;
}

body {
  color: #F2F1EB;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 auto;
}

header {
  top: 0;
  left: 0;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  background-color: transparent;
  padding: 2em 2em 0em 2em;
  z-index: 9999;
}

.large {
  font-family: 'Caudex', serif;
  font-size: 75px;
  font-weight: 100;
  margin: 0;
  line-height: 110%;
}

.display {
  font-family: 'Caudex', serif;
  font-size: 75px;
  font-weight: 100;
  margin: 0;
  line-height: 110%;
}


h1 {
  font-family: 'Caudex', serif;
  font-size: 58px;
  font-weight: 100;
  margin: 0;
  line-height: 110%;
}

h2 {
  font-family: 'Caudex', serif;
  font-weight: 100;
  margin: 0;
  font-size: 40px;
  line-height: 120%;
}

h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  margin: 0;
  font-size: 22px;
  line-height: 145%;
}

h4 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 168%;
}

h5 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 145%;
  letter-spacing: .02rem;
}

h6 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 148%;
  letter-spacing: 0.52px;
  margin: 0;
  padding: 0;
}

display {
    
}

p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 145%;
}

img {
  vertical-align: middle;
}

span {
  display: inline-block;
  vertical-align: middle;
}

.italic {
    font-style: italic;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 0;
}

.logo {
  margin: 0;
  padding: 0px;
}

.logo img {
  max-width: 100%;
  height: 0 auto;
}

.logo:hover img {
  opacity: 70%;
}

a {
  text-decoration: none;
  color: #ffffff;
}

a:hover {
  text-decoration: underline;
  color: #ffffff;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

nav li {
  margin-left: 0px;
}

nav a {
  color: #F2F1EB;
  text-decoration: none;
  font-size: 14px;
}

a:hover {
  color: #ffffff;
}

* {
  box-sizing: border-box;
}

.role-description {
    margin-top: 0;
    margin-bottom: 10px;
}

.rotate {
  transform: rotate(180deg)
}

.badge {
  position: relative;
  display: inline-block;
  padding: 6px 20px 6px 35px;
  border-radius: 1.875rem;
  color: #171717;
  font-family: "Helvetica Neue";
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 168.2%; 
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
  border: 1px solid #DE9B6D;
  overflow: hidden;
}

.badge::before {
  content: "";
  position: absolute;
  left: 15px; 
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--dot-color, #e74c3c);
  border: 1px solid #171717;

}

.badge-case {
  border: 1px solid #171717;
  position: relative;
  display: inline-block;
  padding: 6px 20px 6px 35px;
  border-radius: 1.875rem;
  color: #171717;
  font-family: "Helvetica Neue";
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 168.2%; 
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
  overflow: hidden;
}

.badge-case::before {
  border: 1px solid #171717;
  content: "";
  position: absolute;
  left: 15px; 
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--dot-color, #e74c3c);
}


.badge-responsibility {
  position: relative;
  display: inline-block;
  padding: 6px 16px 6px 16px;
  border-radius: 1.875rem;
  color: #ffffff;
  font-family: "Helvetica Neue";
  font-size: 8px;
  font-style: normal;
  font-weight: 500;
  line-height: 168.2%; 
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
  margin-right: 8px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.font-weight-600 {
  font-weight: 600;
}

.font-weight-500 {
  font-weight: 500;

}

.outer-container {
  background-color: #ffffff;
  max-width: 1480px;
  margin: 0 auto;
  max-height: 820px;
  border-radius: 1.875rem;
}

.outer-container-case {
  width: 100%;
  margin: 0 auto;
  border-radius: 1.875rem;
  min-height: 950px;
}

.main-content-margin {
  margin: 2em 2em 2em 2em;
}

.case-bg-hero {
  width: 100%;
  background-color: #171717;
  margin: 0 auto;
  max-height: 950px;
}

.outer-container-bottom {
  width: 100%;
  background-color: #171717;
  margin: 0 auto;

}

.inner-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 80px 80px 80px 80px;
  max-height: 690px;
  max-width: 1480px;
  margin: 0 auto;
}

.about-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 80px 24px 80px 24px;
    max-width: 1480px;
    margin: 0 auto;
}
    

.video1 {
  border: 4px solid #171717;
  border-radius: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center; 
}

.masonry {
  width: 100%;
  max-width: 1480px;
  margin: 0em auto; 
  columns: 2;
  column-gap: 2.5%;
}

.masonry img {
  width: 100%;
  margin-bottom: 5.5%;
}

.results-container {
  display: flex;
  flex-wrap: wrap;
}

.results-item {
  flex: 1;
  margin-right: 24px;
  line-height: 1.2;
}


.inner-container-case {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  padding: 160px 2em 130px 2em;  
  max-height: 690px;
  max-width: 1480px;
  margin: 0 auto;
}

.centered-hero-case {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  max-height: 690px;
  max-width: 100%;
  margin: 0 auto;
}

.centered-hero-case img {
  position: absolute;
  width: 100%;
  display: block; 
  max-width: 1480px;
  margin: auto;
}


.centered-video-case {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1480px;
  max-height: 916px;
  margin: 0 auto;
  padding: 80px 24px 80px 24px;
  border-radius: 30px;
}

.centered-video-case  video {
  display: block;
  border-radius: 25px;
}

.video-white-bg {
  background-color: #ffffff;

}

.sunnova-purple {
    background-image:url(private/sunnova/sunnova_gradient_bg.png);
}

.sunnova-beige {
    background-color: #F8F7F5;
}

.pawport-teal {
    background-image:url(private/pawport/pawport_bg_gradient.png);
}

.pawport-grey {
    background-color: #f3f3f3;
}

.scout-green {
    background-image:url(private/scout/scout_bg_gradient.png);
}

.scout-blue {
    background-color: #F4F7FA;
}

.wbur-orange {
    background-image:url(private/wbur/wbur_bg_gradient.png);
}

.wbur-grey {
    background-color: #F3F3F3;
}

.ltk-teal {
    background-image:url(private/ltk/ltk_bg_gradient.png);
}

.centered-img-case {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: 1480px;
  margin: 0 auto;
}

.centered-img-case img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  border-radius: 30px;
}

.centered {
  max-width: 880px;
  margin: 0 auto;
}


.container-break {
  margin: 20px;
}

.container-thumb {
  border-radius: 1.875rem;
  max-height: 530px;
}

.image {
  width: 100%;
  max-width: 730px;
  margin: 0;
}

.image img {
  width: 100%;
  height: 0 auto;
  display: block;
}

.container-image {
  position: relative;
  width: 100%;
  max-width: 730px;
  margin: 0;
  border-radius: 1.875rem;
}

.container-image img {
  width: 100%;
  height: 0 auto;
  display: block;
  border-radius: 1.875rem;

}

.content {
  flex-grow: 1;
}

.slider-container {
  display: flex;
  padding: 0 60px;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.wrapper {
  padding-left: 90px;
  padding-right: 90px;
}

.content h2 {
  margin-top: 0px;
}

hr.divider {
  border: .5px solid rgba(0, 0, 0, 0.1); 
  max-width: 880px;
  width: 100%;

}

.light {
  color: #7DAE9C;
}

.white {
    color: #ffffff;
}

.dark {
  color: #171717;
}

.grey {
  color: #494949;
}

.grey-ondark {
  color: #C2C2C2;
}

.grey-onlight {
  color: #727272;
}

.mgt-x {
  margin-top: 400px;
}

.mgt-xl {
  margin-top: 500px;
}

.mgt-132 {
  margin-top: 132px;
}

.mgtb-132 {
  margin-top: 132px;
  margin-bottom: 132px;
}

.mgt-80 {
  margin-top: 80px;
}

.mgt-40 {
  margin-top: 40px;
}

.mgt-32 {
  margin-top: 32px;
}

.mgt-20 {
  margin-top: 20px;
}

.mgt-10 {
   margin-top: 10px;
}

.mgb-1 {
  margin-bottom: 75px;
}

.mgl-1 {
  margin-left: 100px;
}

.mgl-3 {
  margin-left: 100px;
}

.pdr-1 {
  padding-right: 20px;
}

.pdl-1 {
  padding-left: 20px;
}

.pdb-1 {
  padding-bottom: 60px;
}

.pdt-1 {
  padding-top: 20px;
}

.pdt-16 {
  padding-top: 16px;
}

.fade-in-up {
  opacity: 0; 
  transform: translateY(30px); 
  transition: opacity 0.4s ease-out, transform 0.4s ease-out; 
}

.fade-in-up.visible {
  opacity: 1; 
  transform: translateY(0);
}

.hero-centered {    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 100px 0px 140px 0px;
}

.hero-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 80px 24px 80px 24px;
    max-width: 1480px;
    margin: 0 auto;
}

.fun-gradient {
    background-image: url(assets/2Up5qhBnjl3CEcaOkbgBbS8UdZg.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: rgb(240, 240, 240);
}

.fun-gradient-small {
    background-image: url(assets/2Up5qhBnjl3CEcaOkbgBbS8UdZg.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: rgb(240, 240, 240);
}

.footer-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 100px 0px 60px 0px;

}

.bottom-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: auto;
  padding: 60px;
  padding: 2em 2em 2em 2em;

}

.block {
  flex: 1;
  text-align: center;
  padding: 32px;
}

.large-link {
  font-family: 'Caudex', serif;
  font-size: 58px;
  font-weight: 100;
  display: block;
  font-size: 24px;
  text-decoration: none;
  color: #ffffff; 
  padding: 20px;
  border-radius: 300px;
  transition: all 0.3s ease; 
}

.large-link:hover {
  background-color: #ffffff; 
  color: #171717; 
}

.two-columnimg-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1480px;
  margin: 0 auto;
  border-radius: 30px;
}

.two-column-container {
    display: flex;
    align-items: flex-start; /* Align items at the start of the cross axis */
}

.left-column-fixed {
    flex: 0 0 auto; /* Flex-grow, flex-shrink, and flex-basis */
    margin-right: 30px; /* Adjust the margin between columns */
    align-self: flex-start;
}

.left-column-fixed img {
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 100px;
}

.right-column-fluid {
    flex: 1; /* Take remaining space */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.left-column50, .right-column50 {
  width: 50%;
}

.left-column50 {
  order: 1;
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.right-column50 {
  order: 2;
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


.left-2column, .right-2column {
  position: relative;
  width: 100%;
}

.left-3column, .mid-3column, .right-3column {
  position: relative;
  width: 100%;
}


.left-2column {
  border-radius: 1.875rem;
  order: 1;
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.right-2column {
  order: 2;
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.left-3column {
  order: 1;
  flex: 0 0 50%;
  display: block;
  flex-direction: column;
  justify-content: flex-end;
  padding-right: 120px;
}

.mid-3column {
  order: 2;
  flex: 0 0 30%;
  flex-direction: column;
  justify-content: flex-end;
  padding-right: 120px;
}



 .container-column {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between; /* Distribute space between items */
    max-width: 1480px; /* Maximum width of the container */
     
  }

  .column {
    flex: 0 0 calc(50% - 10px); /* 50% width for each column minus half of the gap */
    margin-right: 20px; /* Gap between columns */
    border-radius: 30px;
  }

  .column {
    margin-right: 0; /* Remove margin from the last column */
  }

  .column img {
    width: 100%; /* Make images fill the column width */
    display: block; /* Remove extra space below images */
    border-radius: 30px;
  }


.right-3column {
  order: 3;
  flex: 0 0 20%;
  flex-direction: column;
  justify-content: flex-end;
}

.button-primary {
  font-size: 14px;
  border: 1px solid #ffffff;
  box-shadow: none;
  display: inline-block;
  padding: 18px 35px;
  border-radius: 100px;
  background-color: #171717;
  color: #F2F1EB;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.5;
}

.button-primary:hover {
  color: #14201C;
  background-color: #ffffff;
  cursor: pointer;
}

.button-secondary {
  position: relative;
  font-size: 14px;
  border: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  padding: 18px 35px; 
  height: 60px;
  border-radius: 100px;
  background-color: #171717;
  color: #F2F1EB;
  text-decoration: none;
  white-space: nowrap;
}

.button-secondary::after {
  font-family: 'Material Symbols Outlined';
  content: '\e8e4'; 
  font-size: 20px;
  color: #DE9B6D;
  padding-left: 10px; 
}
 
.button-secondary:hover {
  border: 1px solid #171717;
  color: #171717;
  background-color: #ffffff;
  cursor: pointer;
}

.second-button {
  margin-left: 24px;
}


.nav-link {
  position: relative;
  font-size: 14px;
  border: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  padding: 18px 35px; 
  height: 60px;
  border-radius: 100px;
  background-color: #171717;
  color: #F2F1EB;
  text-decoration: none;
  white-space: nowrap;
}

.nav-link:hover {
  border: 1px solid #171717;
  color: #171717;
  background-color: #ffffff;
  cursor: pointer;
}
 
.button-secondary:hover {
  border: 1px solid #171717;
  color: #171717;
  background-color: #ffffff;
  cursor: pointer;
}


::selection {
  background-color: #52A679; 
  color: #ffffff; 
}

.rotate {
  transform: rotate(180deg);
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 16px; 
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

.gold {
  color: #DE9B6D;
}

.icon-button {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%; 
  color: white; 
  text-align: center;
  line-height: 40px; 
  font-size: 20px; 
  margin: 0 16px; 

}

.icon-container {
  display: flex; 
  justify-content: center; 
}

.svg-link:hover svg {
  fill: #ff0000; 
}

.button-back {
  z-index: 1;
  position: fixed;
  top: 30px;
  left: 30px;
  width: 60px;
  height: 60px;
  background-color: #171717; 
  font-size: 16px; 
  border: 1px solid #ffffff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-back:hover {
  background-color: #ffffff;
  border: 1px solid #171717;
  cursor: pointer;
}

.full-width-section .content {
}

.full-width-section img {
  width: 100%;
  height: auto;
  display: block;
}

.wave {
  animation-name: wave-animation; 
  animation-duration: 2.5s; 
  animation-iteration-count: infinite; 
  transform-origin: 70% 70%;
  display: inline-block;
}

@keyframes wave-animation {
  0% {
    transform: rotate(0.0deg)
  }
  10% {
    transform: rotate(14.0deg)
  }
  
  20% {
    transform: rotate(-8.0deg)
  }
  30% {
    transform: rotate(14.0deg)
  }
  40% {
    transform: rotate(-4.0deg)
  }
  50% {
    transform: rotate(10.0deg)
  }
  60% {
    transform: rotate(0.0deg)
  }
  
  100% {
    transform: rotate(0.0deg)
  }
}

.badge-container {
  display: flex;
}


/* MEDIA BREAKPOINTS */

/* Wide */
@media screen and (min-width: 1480px) and (max-width: 1600px) {
  
  .inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 40px 30px 40px 30px;
    max-height: 820px;
    max-width: 1480px;
    margin: 0 auto;
  }

  .inner-container-case {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    padding: 160px 80px 130px 80px;
    max-height: 820px;
    max-width: 1480px;
    margin: 0 auto;
  }
}   
    
/* Desktop */
@media screen and (min-width: 1281px) and (max-width: 1479px) {
  
  .hero-two-columns-container {
    padding: 30px 20px 30px 20px;
  }

  .left-column, .right-column {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 30px 0px 0px 0px;
  }

  .left-2column, .right-2column {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0;
  }

  .inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 30px 30px 30px 30px;
    max-height: 820px;
    max-width: 1480px;
    margin: 0 auto;
  }

  .inner-container-case {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    padding: 160px 80px 130px 80px;
    max-height: 820px;
    max-width: 1480px;
    margin: 0 auto;
  }

  .inner-container img {
    max-width: 100%;
  }

  .mgl-3 {
    margin-left: 60px;
  }
    
  .mgt-xl {
   margin-top: 480px;
}

  .content h1 {
    font-size: 70px;
  }

  .pdb-1 {
    padding-bottom: 40px;
  }
}   
    
/* Laptop */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
    
 
.left-column50 {
  order: 1;
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.right-column50 {
  order: 2;
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
    
.hero-two-columns-container {
    padding: 60px 20px 60px 20px;
  }

  .left-column, .right-column {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 30px 0px 0px 0px;
  }

  .left-2column, .right-2column {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0;
  }

  .inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 30px 30px 30px 30px;
    max-height: 820px;
    max-width: 1480px;
    margin: 0 auto;
  }

  .inner-container-case {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    padding: 160px 80px 130px 80px;
    max-height: 820px;
    max-width: 1480px;
    margin: 0 auto;
  }

  .inner-container img {
    max-width: 100%;
  }

  .mgl-3 {
    margin-left: 60px;
  }

  .mgt-xl {
   margin-top: 480px;
}

  .content h1 {
    font-size: 70px;
  }

  .pdb-1 {
    padding-bottom: 40px;
  }
    
  .left-3column {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0px;
  }

 .mid-3column {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 80px;
  }

  .right-3column {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0px;
  }
}
    
/* Tablet Landscape */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  
.main-content-margin {
  margin: 2em 2em 2em 2em;
}
  .hero-two-columns-container {
    padding: 40px 20px 40px 20px;
  }

  .image {
    margin-bottom: 20px;
    margin-right: 0;
  }

  .container-image {
    margin-bottom: 20px;
    margin-right: 0;
  }
    
   .container-thumb {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
   }

  nav li {
    margin-left: 0px;
  }

  h1 {
    font-size: 45px;
  }

  h2 {
    font-size: 32px;
  }

  .left-2column, .right-2column {
    flex: 0 0 50%;
    max-width: 100%;
    padding: 0;
  }

  .left-3column {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0px;
  }

  .mid-3column {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 80px;

  }

  .right-3column {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0px;
  }

  .inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 30px 30px 30px 30px;
    max-height: 820px;
    max-width: 1480px;
    margin: 0 auto;
  }

  .inner-container-case {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    padding: 160px 80px 100px 80px;
    max-height: 820px;
    max-width: 1480px;
    margin: 0 auto;
  }

  .inner-container img {
    max-width: 100%;
  }


  .mgl-3 {
    margin-left: 30px;
  }

  .mgb-1 {
    margin-bottom: 20px;
  }
    
  .mgt-xl {
   margin-top: 480px;
}
    
   .mgb-2 {
    margin-bottom: 40px;
  }
    
  .mgr-1 {
    margin-right: 24px;
  }
    
  .content h1 {
    font-size: 50px;
  }

  .pdb-1 {
    padding-bottom: 20px;
  }
   
    
  .button-primary {
    font-size: 14px;
    border: 1px solid #ffffff;
    box-shadow: none;
    display: inline-block;
    padding: 0px 24px;
    height: 48px;
    border-radius: 100px;
    background-color: #171717;
    color: #F2F1EB;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
    }    
    
  .button-secondary {
    position: relative;
    font-size: 14px;
    border: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    padding: 18px 24px; /* Adjust padding to create space between icon and button edges */
    height: 48px;
    border-radius: 100px;
    background-color: #171717;
    color: #F2F1EB;
    text-decoration: none;
    white-space: nowrap;
}

.left-2column {
  flex-direction: row;
  justify-content: center;
}

    
}
    
/* Tablet Portrait */
@media screen and (min-width: 481px) and (max-width: 768px) {
  
    
.mgtb-132 {
    margin-top: 48px;
    margin-bottom: 48px;
}    
    
 .left-2column {
  flex-direction: row;
  justify-content: center;
}
    
    
.display {
  font-family: 'Caudex', serif;
  font-size: 55px;
  font-weight: 100;
  margin: 0;
  line-height: 110%;
}

    
 .case-bg-hero {
  max-width: 100%;
  background-color: #171717;
  margin: 0 auto;
  max-height: 900px;
}

    
.main-content-margin {
  margin: 2em 2em 2em 2em;
}

.mgt-xl {
   margin-top: 200px;
} 

  .left-2column {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: 32px;
  }

   .right-2column {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
 }

  .left-3column {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0px;
  }

  .mid-3column {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 32px;
  }

  .right-3column {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0px;
  }
    
   .hero-centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 80px 0px 80px 0px;
}

  .inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 24px 24px;
    max-height: 820px;
    max-width: 1480px;
    margin: 0 auto;
  }

  .inner-container-case {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    padding: 120px 48px 80px 48px;
    max-height: 820px;
    max-width: 1480px;
    margin: 0 auto;
  }

  .inner-container img {
    max-width: 100%;
  }

  .mgl-3 {
    margin-left: 0px;
  }

  .content h1 {
    font-size: 50px;
  }

  .hero-two-columns-container {
    padding: 50px 0px 50px 0px;
  }
    
  h1 {
    font-size: 38px;
  }
    

 h2 {
    font-size: 32px;
  }
    
 .button-primary {
    font-size: 14px;
    border: 1px solid #ffffff;
    box-shadow: none;
    display: inline-block;
    padding: 0px 24px;
    height: 48px;
    border-radius: 100px;
    background-color: #171717;
    color: #F2F1EB;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
}    
    
  .button-secondary {
    position: relative;
    font-size: 14px;
    border: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    padding: 18px 24px; /* Adjust padding to create space between icon and button edges */
    height: 48px;
    border-radius: 100px;
    background-color: #171717;
    color: #F2F1EB;
    text-decoration: none;
    white-space: nowrap;
}

  .button-back {
    z-index: 100000;
    position: fixed;
    top: 30px;
    left: 30px;
    width: 60px;
    height: 60px;
    background-color: #171717; /* Button background color */
    border: 1px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

    
  .bottom-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: auto;
    padding: 0px;
}
    
     .column {
    flex: 0 0 100%; /* Change to full width on smaller screens */
    margin-right: 0; /* Remove margin */
  }
    
    .column:nth-child(2) img {
    margin-top: 20px; /* Add margin top to the second image */
  }
    
}

/* Mobile */
@media screen and (min-width: 320px) and (max-width: 480px) {
    
.large {
  font-family: 'Caudex', serif;
  font-size: 58px;
  font-weight: 100;
  margin: 0;
  line-height: 110%;
}    
    
    
p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 145%;
}    
    
h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  margin: 0;
  font-size: 18px;
  line-height: 145%;
}    
    
.results-item {
  flex: 1;
  margin-top:24px;
  margin-right: 24px;
  margin-bottom: 24px;
  line-height: 1.2;
}    
    
.centered-video-case  video {
  display: block;
  border-radius: 10px;
}    
    
.video1 {
  border: 4px solid #171717;
  border-radius: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center; 
}    
    
.mgtb-132 {
    margin-top: 32px;
    margin-bottom: 32px;
}        
    
header {
  top: 0;
  left: 0;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  background-color: transparent;
  padding: 1em 1em 0em 1em;
  z-index: 9999;
}
    
h4 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 145%;
}
    
.column {
    flex: 0 0 100%;
    border-radius: 30px;
  }

  
.main-content-margin {
  margin: 1em 1em 1em 1em;
}
    
 .results-item {
    flex: 1 50%;
}
    
  .mgt-xl {
   margin-top: 230px;
} 
    
  
  .left-2column {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: 32px;
  }

   .right-2column {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
 }
    
  .left-3column {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0px;
  }

  .mid-3column {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0px;
  }

  .right-3column {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0px;
  }
    
  .hero-centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
    padding: 60px 0px 60px 0px;
}
    
.display {
  font-family: 'Caudex', serif;
  font-size: 38px;
  font-weight: 100;
  margin: 0;
  line-height: 110%;
}


  .inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 24px 24px;
    max-height: 820px;
    max-width: 1480px;
    margin: 0 auto;
  }

  .inner-container-case {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    padding: 120px 1em 120px 1em;
    max-height: 865px;
    max-width: 1480px;
    margin: 0 auto;
  }
    
.case-bg-hero {
  max-width: 100%;
  background-color: #171717;
  margin: 0 auto;
  max-height: 920px;
}

  .inner-container img {
    max-width: 100%;
  }

  .mgl-3 {
    margin-left: 0px;
  }

.mgt-132 {
    margin-top: 32px;
}    
    
  .mgt-80 {
    margin-top: 0px;
  }

  .content h1 {
    font-size: 50px;
  }

  .hero-two-columns-container {
    padding: 50px 0px 50px 0px;
  }
    
  h1 {
    font-size: 38px;
  }

 
 h2 {
    font-size: 32px;
  }
    
 .button-primary {
    font-size: 14px;
    border: 1px solid #ffffff;
    box-shadow: none;
    display: inline-block;
    padding: 0px 24px;
    height: 48px;
    border-radius: 100px;
    background-color: #171717;
    color: #F2F1EB;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
}    
    
  .button-secondary {
    position: relative;
    font-size: 14px;
    border: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    padding: 18px 24px; /* Adjust padding to create space between icon and button edges */
    height: 48px;
    border-radius: 100px;
    background-color: #171717;
    color: #F2F1EB;
    text-decoration: none;
    white-space: nowrap;
}

  .button-back {
    z-index: 1;
    position: fixed;
    top: 1em;
    left: 1em;
    width: 60px;
    height: 60px;
    background-color: #171717; /* Button background color */
    border: 1px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
    
  .bottom-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: auto;
    padding: 0px;
}
    
    .column {
    flex: 0 0 100%; /* Change to full width on smaller screens */
    margin-right: 0; /* Remove margin */
  }
    
    .column:nth-child(2) img {
    margin-top: 20px; /* Add margin top to the second image */
  }
    
.container-image {
  position: relative;
  width: 100%;
  max-width: 730px;
  margin: 0;
  border-radius: 1.5rem;
}

.container-image img {
  width: 100%;
  height: 0 auto;
  display: block;
  border-radius: 1.5rem;

}
    
    
}