.content h3 {
  font-size: 4em !important;
}
.content {
  padding-bottom:1.5rem;
}

/* Ensure Contribution section lists have visible bullets */
.content ul {
  list-style: disc !important;
  list-style-type: disc !important;
  padding-left: 20px !important;
}

.content ul li {
  list-style: disc !important;
  list-style-type: disc !important;
  margin-bottom: 8px !important;
  display: list-item !important;
}

/* More specific targeting for case study content */
.portfolio-details .content ul,
.casestudy .content ul {
  list-style: disc !important;
  list-style-type: disc !important;
  padding-left: 20px !important;
}

.portfolio-details .content ul li,
.casestudy .content ul li {
  list-style: disc !important;
  list-style-type: disc !important;
  margin-bottom: 8px !important;
  display: list-item !important;
}
h5.dep-del {
  width:48%;
  background-color:#ecffff;
  padding: 2em !important;
  margin: 6px;
  float: left;
  box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.04);
  border-radius: 5px;
  border: 1px solid #eceeff;
}
h5.dep-del:nth-child(2) {
  float: right;
}
.row div.imghldr {
  text-align: center;
}
.row div.imghldr img {
  width: 90%;
}

.row {
  margin-bottom: 14em !important;
}
div.row:last-of-type {
  margin-bottom:0 !important;
}
.img-row {
  margin-bottom:1.5em !important;
}
.img-row .imghldr img {
  width:100% !important;
}
.standout-content {
  background-color: #ecffff;
  padding: 2em !important;
  box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.04);
  border-radius: 9px;
  text-align: left;
  border: 1px solid #eceeff;
}
.process-bullets {
  text-align: center !important;
  border-bottom: 1px solid rgb(221, 221, 221);
  padding-bottom: 1em;
  margin-bottom: 2em;
}
.standout-content p {
  text-align: left;
  }
.standout-content h3 {
  text-align: left;
  }
.case-img.multiple {
  display:inline;
  z-index:0;margin:0 0 0 -1em;
}
.case-img.multiple:nth-child(2) {
  z-index:1;
  margin:-3em 0 0 3em;
}
.no-drop {
  box-shadow: none!important;
}
.caption {
  font-size: .7em; color:rgb(130, 130, 130); position: relative; top:15px;
}

@media (max-width: 767px) {
  h5.dep-del {
    width: 96%;
    float: none;
    margin: 0 .6em .6em !important;
    padding: 1em !important;
  }
  h5.dep-del:nth-child(2) {
    float: none;
  }
  
  /* iPhone and small mobile font adjustments */
  .content h3 {
    font-size: 2.5em !important;
  }
  
  #case-name h1 {
    font-size: 1.8em !important;
  }
  
  #case-name p {
    font-size: 1em !important;
  }
  
  .section-title h2 {
    font-size: 1.5em !important;
  }
  
  h5.dep-del {
    font-size: 0.9em !important;
  }
  
  .content p {
    font-size: 0.95em !important;
  }
  
  .content ul li {
    font-size: 0.9em !important;
  }
  
  /* Reorder content sections for mobile - image first, then text */
  .row {
    flex-direction: column !important;
  }
  
  /* Target all content rows and ensure images come first */
  .row .col-lg-6:has(img) {
    order: 1 !important; /* Image columns come first */
  }
  
  .row .col-lg-6:has(.content) {
    order: 2 !important; /* Content columns come second */
  }
  
  .row .col-lg-6:has(h3) {
    order: 2 !important; /* Text columns come second */
  }
  
  /* Ensure proper spacing between reordered elements */
  .row .col-lg-6:nth-child(2) {
    margin-top: 2.5em !important;
  }
  
  /* Additional spacing for content sections that come after images */
  .row .col-lg-6.content {
    margin-top: 2.5em !important;
  }
  
  /* Reduce vertical spacing between content sections on mobile */
  .row {
    margin-bottom: 3em !important;
  }
  
  .row:last-of-type {
    margin-bottom: 0 !important;
  }
  
  /* Reduce image margins on mobile for better space utilization */
  .case-img {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  .col-lg-6 img {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Fix overlapping multiple images on mobile by adding proper separation */
  .case-img.multiple {
    display: block !important;
    margin: 0 0 0.5em 0 !important;
    z-index: auto !important;
  }
  
  .case-img.multiple:nth-child(2) {
    margin: 0.5em 0 0 0 !important;
    z-index: auto !important;
  }
}

/* Medium screens (tablets) - above 767px but below desktop */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Reorder content sections for medium screens - image first, then text */
  .row {
    flex-direction: column !important;
  }
  
  /* Target all content rows and ensure images come first */
  .row .col-lg-6:has(img) {
    order: 1 !important; /* Image columns come first */
  }
  
  .row .col-lg-6:has(.content) {
    order: 2 !important; /* Content columns come second */
  }
  
  .row .col-lg-6:has(h3) {
    order: 2 !important; /* Text columns come second */
  }
  
  /* Ensure proper spacing between reordered elements */
  .row .col-lg-6:nth-child(2) {
    margin-top: 2.5em !important;
  }
  
  /* Additional spacing for content sections that come after images */
  .row .col-lg-6.content {
    margin-top: 2.5em !important;
  }
  
  /* Reduce vertical spacing between content sections on medium screens */
  .row {
    margin-bottom: 4em !important;
  }
  
  /* Make containers and images full width on medium screens */
  .col-lg-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  
  /* Ensure images take full width */
  .case-img {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  
  .col-lg-6 img {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Make h5 deployment/deliverables boxes full width */
  h5.dep-del {
    width: 100% !important;
    float: none !important;
    margin: 0 0 1em 0 !important;
  }
  
  /* Fix overlapping multiple images by adding proper separation */
  .case-img.multiple {
    display: block !important;
    margin: 0 0 0.5em 0 !important;
    z-index: auto !important;
  }
  
  .case-img.multiple:nth-child(2) {
    margin: 0.5em 0 0 0 !important;
    z-index: auto !important;
  }
}

/* iPhone SE and very small screens */
@media (max-width: 375px) {
  .content h3 {
    font-size: 2em !important;
  }
  
  #case-name h1 {
    font-size: 1.5em !important;
  }
  
  #case-name p {
    font-size: 0.9em !important;
  }
  
  .section-title h2 {
    font-size: 1.3em !important;
  }
  
  h5.dep-del {
    font-size: 0.8em !important;
  }
  
  .content p {
    font-size: 0.9em !important;
  }
  
  .content ul li {
    font-size: 0.85em !important;
  }
}

/* New Case Study Design Styles */
.case-study-section {
  margin-bottom: 18em;
  padding: 2em 0;
}

/* Add more breathing room on the right for tablet and larger screens */
@media (min-width: 1199px) {
  .case-study-section .overview-content,
  .case-study-section .research-content,
  .case-study-section .concepts-content,
  .case-study-section .testing-content,
  .case-study-section .documentation-content,
  .case-study-section .results-content,
  .case-study-section .future-content,
  .case-study-section .closing-content {
    padding-right: 6rem; 
  }
}

/* Make content sticky on larger screens for sections with multiple images */
@media (min-width: 1200px) {
  /* Ensure parent containers support sticky positioning */
  .case-study-section {
    overflow: visible !important;
    position: relative !important;
  }
  
  .case-study-section .container {
    overflow: visible !important;
  }
  
  .case-study-section .row {
    align-items: flex-start !important;
    overflow: visible !important;
    position: relative !important;
  }
  
  /* Apply sticky only to sections with multiple images with parallax effect */
  .concepts-section .concepts-content,
  .testing-section .testing-content,
  .documentation-section .documentation-content,
  .results-section .results-content,
  .future-section .future-content {
    position: sticky !important;
    top: 20px !important;
    height: fit-content !important;
    z-index: 10 !important;
    overflow: visible !important;
    will-change: transform !important;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }
  
  /* Ensure the column containers don't interfere */
  .case-study-section .col-lg-6:first-child {
    align-self: flex-start !important;
    overflow: visible !important;
  }
}

/* Reorder visual divs to appear after content on screens below 1200px */
@media (max-width: 1199px) {
  .case-study-section .row {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Content divs stay in their natural order (first) */
  .case-study-section .col-lg-6:first-child {
    order: 1 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    position: static !important; /* Override sticky on smaller screens */
  }
  
  /* Visual divs move to second position */
  .case-study-section .col-lg-6:last-child {
    order: 2 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  /* Disable sticky positioning for content divs on smaller screens */
  .concepts-section .concepts-content,
  .testing-section .testing-content,
  .documentation-section .documentation-content,
  .results-section .results-content,
  .future-section .future-content {
    position: static !important;
    transform: none !important;
  }
  
  /* Add spacing between image groups on smaller screens, but not for the last one */
  .concept-image-group:not(:last-child),
  .testing-image-group:not(:last-child),
  .doc-image-group:not(:last-child),
  .result-image-group:not(:last-child),
  .future-image-group:not(:last-child) {
    margin-bottom: 2em;
  }
}

.case-study-section:last-child {
  margin-bottom: 0;
}

/* Overview Section */
.overview-section {
  background: transparent;
}

.overview-heading {
  font-family: 'Raleway', sans-serif;
  font-size: 3em;
  line-height: 1.2;
  color: #728394;
  margin-bottom: .5em;
}

.overview-description {
  background: rgba(0, 21, 113, 0.06);
  border-left: 4px solid #818AB1;
  padding: 1em 1.5em 1em 1.125em;
  margin-bottom: 2em;
  border-radius: 0 9px 9px 0;
}

.overview-description p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  margin: 0;
}

.role-info h4 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 1em;
  line-height: 1.36;
  color: #728394;
  margin-bottom: 0.25em;
}

.role-info p {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.75em;
  line-height: 1.36;
  color: #272829;
  margin: 0;
}

.overview-img {
  width: 100%;
  height: auto;
  border-radius: 9px;
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
}

.overview-video {
  width: 100%;
  height: auto;
  border-radius: 9px;
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
  object-fit: cover;
  display: block;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  left: 0;
  right: 0;
  cursor: pointer;
}

/* Video Container and Controls */
.video-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Pulse animation for button feedback */
@keyframes buttonPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.play-pause-btn.pulse {
  animation: buttonPulse 0.3s ease-out;
}

.video-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.video-container:hover .video-controls {
  opacity: 1;
  pointer-events: auto;
}

.video-container.paused .video-controls {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile-specific video control improvements */
@media (max-width: 768px) {
  .video-controls {
    transition: opacity 0.3s ease;
  }
  
  .play-pause-btn {
    width: 50px;
    height: 50px;
  }
  
  .play-pause-btn i {
    font-size: 20px;
  }
  
  /* Keep controls visible when paused on mobile */
  .video-container.paused .video-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

.play-pause-btn {
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.play-pause-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.play-pause-btn i {
  color: white;
  font-size: 24px;
  margin-left: 2px; /* Slight adjustment for play icon centering */
}

.play-pause-btn.playing i {
  margin-left: 0; /* No adjustment needed for pause icon */
}

/* Research Section */
.research-section {
  background: transparent;
}

.research-content h3 {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.17;
  color: #728394;
  margin-bottom: 1em;
}

.research-description {
  background: rgba(0, 21, 113, 0.06);
  border-left: 4px solid #818AB1;
  padding: 1em 1.5em 1em 1.125em;
  margin-bottom: 1.5em;
  border-radius: 0 9px 9px 0;
}

.research-description p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  margin: 0;
}

.research-insights {
  margin-top: 1.5em;
}

.insight-item {
  margin-bottom: 1.5em;
}

.insight-item strong {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  display: block;
  margin-bottom: 0em;
}

.insight-item p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  margin: 0;
}

.research-img {
  width: 100%;
  height: auto;
  border-radius: 9px;
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.75em;
}

.research-caption {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875em;
  line-height: 1.5;
  color: #828282;
  text-align: left;
  margin: 0;
  padding-left: 24px;
}

/* Concepts Section */
.concepts-section {
  background: transparent;
}

.concepts-content h3 {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.17;
  color: #728394;
  margin-bottom: 1em;
}

.concepts-description {
  background: rgba(0, 21, 113, 0.06);
  border-left: 4px solid #818AB1;
  padding: 1em 1.5em 1em 1.125em;
  margin-bottom: 1.5em;
  border-radius: 0 9px 9px 0;
}

.concepts-description p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  margin: 0;
}

.concepts-process {
  margin-top: 1.5em;
}

.process-item {
  margin-bottom: 1.5em;
}

.process-item strong {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  display: block;
  margin-bottom: 0em;
}

.process-item p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  margin: 0;
}

.concept-image-group {
  margin-bottom: 2.5em;
}

.concept-img {
  width: 100%;
  height: auto;
  border-radius: 9px;
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.75em;
}

.concept-caption {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875em;
  line-height: 1.5;
  color: #828282;
  text-align: left;
  margin: 0;
  padding-left: 24px;
}

/* Testing Section */
.testing-section {
  background: transparent;
}

.testing-content h3 {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.17;
  color: #728394;
  margin-bottom: 1em;
}

.testing-description {
  background: rgba(0, 21, 113, 0.06);
  border-left: 4px solid #818AB1;
  padding: 1em 1.5em 1em 1.125em;
  margin-bottom: 1.5em;
  border-radius: 0 9px 9px 0;
}

.testing-description p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  margin: 0;
}

.testing-process {
  margin-top: 1.5em;
}

.testing-image-group {
  margin-bottom: 2.5em;
}

.testing-img {
  width: 100%;
  height: auto;
  border-radius: 9px;
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.75em;
}

.testing-video {
  width: 100%;
  height: auto;
  max-height: 400px;
  border-radius: 9px;
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.75em;
  object-fit: cover;
  display: block;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  left: 0;
  right: 0;
  cursor: pointer;
}

.testing-caption {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875em;
  line-height: 1.5;
  color: #828282;
  text-align: left;
  margin: 0;
  padding-left: 24px;
}

/* Documentation Section */
.documentation-section {
  background: transparent;
}

.documentation-content h3 {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.17;
  color: #728394;
  margin-bottom: 1em;
}

.documentation-description {
  background: rgba(0, 21, 113, 0.06);
  border-left: 4px solid #818AB1;
  padding: 1em 1.5em 1em 1.125em;
  margin-bottom: 1.5em;
  border-radius: 0 9px 9px 0;
}

.documentation-description p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  margin: 0;
}

.documentation-process {
  margin-top: 1.5em;
}

.doc-image-group {
  margin-bottom: 2.5em;
}

.doc-img {
  width: 100%;
  height: auto;
  border-radius: 9px;
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.75em;
}

.doc-caption {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875em;
  line-height: 1.5;
  color: #828282;
  text-align: left;
  margin: 0;
  padding-left: 24px;
}

/* Results Section */
.results-section {
  background: transparent;
}

.results-content h3 {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.17;
  color: #728394;
  margin-bottom: 1em;
}

.results-description {
  background: rgba(0, 21, 113, 0.06);
  border-left: 4px solid #818AB1;
  padding: 1em 1.5em 1em 1.125em;
  margin-bottom: 1.5em;
  border-radius: 0 9px 9px 0;
}

.results-description p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  margin: 0;
}

.results-impact {
  margin-top: 1.5em;
}

.impact-item {
  margin-bottom: 1.5em;
}

.impact-item strong {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  display: block;
  margin-bottom: 0em;
}

.impact-item p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  margin: 0;
}

.result-image-group {
  margin-bottom: 2.5em;
}

.result-img {
  width: 100%;
  height: auto;
  border-radius: 9px;
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.75em;
}

.result-caption {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875em;
  line-height: 1.5;
  color: #828282;
  text-align: left;
  margin: 0;
  padding-left: 24px;
}

/* Future Section */
.future-section {
  background: transparent;
}

.future-content h3 {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.17;
  color: #728394;
  margin-bottom: 1em;
}

.future-description {
  background: rgba(0, 21, 113, 0.06);
  border-left: 4px solid #818AB1;
  padding: 1em 1.5em 1em 1.125em;
  margin-bottom: 1.5em;
  border-radius: 0 9px 9px 0;
}

.future-description p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  margin: 0;
}

.future-insights {
  margin-top: 1.5em;
  margin-bottom: 2em;
}

.future-insights h4 {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 1.17;
  color: #728394;
  margin-top: 1.5em;
  margin-bottom: .5em;
}

.ai-considerations h4 {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 1.17;
  color: #728394;
  margin-top: 1.5em;
  margin-bottom: .5em;
}

.ai-item {
  margin-bottom: 1.5em;
}

.ai-item strong {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  display: block;
  margin-bottom: 0em;
}

.ai-item p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  margin: 0;
}

.future-image-group {
  margin-bottom: 2.5em;
}

.future-img {
  width: 100%;
  height: auto;
  border-radius: 9px;
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.75em;
}

.future-caption {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875em;
  line-height: 1.5;
  color: #828282;
  text-align: left;
  margin: 0;
  padding-left: 24px;
}

/* Closing Section */
.closing-section {
  background: transparent;
}

.closing-content h3 {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.17;
  color: #728394;
  margin-bottom: 1em;
}

.closing-description {
  background: rgba(0, 21, 113, 0.06);
  border-left: 4px solid #818AB1;
  padding: 1em 1.5em 1em 1.125em;
  margin-bottom: 1.5em;
  border-radius: 0 9px 9px 0;
}

.closing-description p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  margin: 0;
}

.closing-reflection {
  margin-top: 1.5em;
}

.closing-reflection p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  margin: 0;
}

.closing-img {
  width: 100%;
  height: auto;
  border-radius: 9px;
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.75em;
}

.lottie-container {
  width: 100%;
  position: relative;
  margin-bottom: 0.75em;
}

.lottie-container .closing-img {
  margin-bottom: 0;
}

/* Drone wiggle animation */
@keyframes droneWiggle {
  0%, 100% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateX(1px) translateY(-0.5px) rotate(0.2deg);
  }
  50% {
    transform: translateX(-0.5px) translateY(0.3px) rotate(-0.1deg);
  }
  75% {
    transform: translateX(0.3px) translateY(-0.2px) rotate(0.1deg);
  }
}

.closing-lottie {
  position: absolute;
  bottom: 2%;
  right: 1%;
  width: 25%;
  height: 50%;
  display: block;
  pointer-events: none;
  animation: droneWiggle 4s ease-in-out infinite;
}

.closing-caption {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875em;
  line-height: 1.5;
  color: #828282;
  text-align: left;
  margin: 0;
  padding-left: 24px;
}

/* Credits Section */
.credits-section {
  background: transparent;
  padding: 1.5em 0.75em 1.5em;
  margin-top: 2em;
}

.credits-section h4 {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 1.5em;
  line-height: 1.2;
  color: #272829;
  margin-bottom: 0.5em;
}

.credits-section p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #272829;
  margin-bottom: 0.5em;
}

.credits-section strong {
  font-weight: 700;
}

/* Responsive Design for New Structure */
@media (max-width: 767px) {
  .overview-heading {
    font-size: 2em !important;
  }
  
  .research-content h3,
  .concepts-content h3,
  .testing-content h3,
  .documentation-content h3,
  .results-content h3,
  .future-content h3,
  .closing-content h3 {
    font-size: 1.5em !important;
  }
  
  .future-insights h4,
  .ai-considerations h4 {
    font-size: 1.25em !important;
    margin-top: 2em !important;
  }
  
  .credits-section h4 {
    font-size: 1.25em !important;
  }
  
  .case-study-section {
    margin-bottom: 2em !important;
    padding: 1em 0;
  }
  
  
  .overview-description,
  .research-description,
  .concepts-description,
  .testing-description,
  .documentation-description,
  .results-description,
  .future-description,
  .closing-description {
    padding: 0.75em 1em 0.75em 0.75em;
    margin-bottom: 1em;
  }
  
  .insight-item,
  .process-item,
  .impact-item,
  .ai-item {
    margin-bottom: 1em;
  }
  
  .concept-image-group,
  .testing-image-group,
  .doc-image-group,
  .result-image-group,
  .future-image-group {
    margin-bottom: 1em;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .overview-heading {
    font-size: 2.5em !important;
  }
  
  .research-content h3,
  .concepts-content h3,
  .testing-content h3,
  .documentation-content h3,
  .results-content h3,
  .future-content h3,
  .closing-content h3 {
    font-size: 1.75em !important;
  }
  
  .case-study-section {
    margin-bottom: 15em !important;
    padding: 1.5em 0;
  }
  
}