@charset "UTF-8";

@font-face {

  font-family: "Open Sans";

  src: url("../fonts/OpenSans-Regular.ttf");

}

@font-face {

  font-family: "Open Sans";

  src: url("../fonts/OpenSans-ExtraBold.ttf");

  font-weight: 700;

}

@font-face {

  font-family: "Open Sans";

  src: url("../fonts/OpenSans-Bold.ttf");

  font-weight: 600;

}

@font-face {

  font-family: "Open Sans";

  src: url("../fonts/OpenSans-SemiBold.ttf");

  font-weight: 500;

}

@font-face {

  font-family: "Open Sans";

  src: url("../fonts/OpenSans-Light.ttf");

  font-weight: 300;

}

@font-face {

  font-family: "Myraid Pro";

  src: url("../fonts/MyriadPro-REGULAR.OTF");

}

@font-face {

  font-family: "Myraid Pro";

  src: url("../fonts/MyriadPro-BOLD.OTF");

  font-weight: 600;

}

@font-face {

  font-family: "Myraid Pro";

  src: url("../fonts/MyriadPro-SEMIBOLD.OTF");

  font-weight: 500;

}

@font-face {

  font-family: "Myraid Pro";

  src: url("../fonts/MyriadPro-Light.otf");

  font-weight: 300;

}

/* http://meyerweb.com/eric/tools/css/reset/

   v2.0 | 20110126

   License: none (public domain)

*/

html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

b,

u,

i,

center,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

embed,

figure,

figcaption,

footer,

header,

hgroup,

menu,

nav,

output,

ruby,

section,

summary,

time,

mark,

audio,

video {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

  min-width: 0;

}



/* HTML5 display-role reset for older browsers */

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

  display: block;

}



body {

  line-height: 1;

}



ol,

ul {

  list-style: none;

}



blockquote,

q {

  quotes: none;

}



blockquote:before,

blockquote:after,

q:before,

q:after {

  content: "";

  content: none;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  height: 100%;

  margin: 0px;

}



body {

  font-family: "Open Sans", sans-serif;

  line-height: 1;

  color: #42454d;

  background: #ffffff;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-height: 100vh;

}

body .content-wrapper {

  flex-grow: 1;

  position: relative;

}



.section-wrapper {

  overflow: hidden;

}



.section {

  display: flex;

  flex-direction: column;

  width: 100%;

  max-width: 1680px;

  margin: auto;

  padding: 0px 25px;

}



a {

  text-decoration: none;

  color: inherit;

}



content {

  flex-grow: 1;

}



@media (max-width: 1200px) {

  .section {

    padding: 0px 50px;

  }

}

@media (max-width: 768px) {

  .section {

    padding: 0px 15px;

  }

}

.scroll-to-top {

  cursor: pointer;

  z-index: 20;

  position: fixed;

  right: 25px;

  bottom: 25px;

  width: 60px;

  height: auto;

  aspect-ratio: 1;

  background-image: url("../icons/icon-top.svg");

  background-size: contain;

  background-position: center center;

  background-repeat: no-repeat;

}



.site-header {

  position: relative;

  width: 100%;

  display: flex;

  box-shadow: 4px 8px 9px -1px rgba(97, 53, 184, 0.1411764706);

  z-index: 10;

}

.site-header .header-wrapper {

  max-width: 1680px;

  width: 100%;

  padding: 25px 25px;

  margin: 0px auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.site-header .logo img {

  width: 204px;

  height: auto;

  aspect-ratio: 710/334;

  object-fit: contain;

  margin-right: 20px;

}

.site-header .main-nav {

  flex-grow: 1;

  max-width: 700px;

}

.site-header .main-nav .main-menu-mobile {

  cursor: pointer;

  display: none;

  width: 40px;

  height: auto;

  aspect-ratio: 40/32;

  background-image: url("../icons/icon-menu.svg");

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center center;

}

.site-header .main-nav .main-nav-menu {

  display: flex;

  justify-content: space-between;

  gap: 40px;

}

.site-header .main-nav .main-nav-menu li {

  position: relative;

}

.site-header .main-nav .main-nav-menu li a {

  display: flex;

  gap: 15px;

  align-items: flex-end;

  font-family: "Open Sans";

  font-weight: 400;

  font-size: 18px;

  position: relative;

  z-index: 2;

}

.site-header .main-nav .main-nav-menu li a .arrow {

  background-image: url("../icons/icon-arrow.svg");

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center center;

  width: 19px;

  height: auto;

  aspect-ratio: 17/13;

  transform: rotate(0deg);

  transition: 0.2s transform;

}

.site-header .main-nav .main-nav-menu li .float-menu-wrapper {

  z-index: 1;

  position: absolute;

  left: -20px;

  top: 0px;

  padding-top: 83px;

}

.site-header .main-nav .main-nav-menu li .float-menu {

  overflow: hidden;

  height: 0px;

  width: max-content;

  border-top: 1px #d3d3d3 solid;

  display: flex;

  flex-direction: column;

  background-color: white;

  color: #929292;

  opacity: 0;

  pointer-events: none;

  transition: 0.4s opacity;

  gap: 30px;

  padding: 0px;

}

.site-header .main-nav .main-nav-menu li .float-menu li {

  list-style: disc;

}

.site-header .main-nav .main-nav-menu li.active .float-menu {

  padding: 30px 50px 30px 70px;

  pointer-events: all;

  opacity: 1;

  height: auto;

}

.site-header .main-nav .main-nav-menu li.active a .arrow {

  transform: rotate(180deg);

}



@media (max-width: 1200px) {

  .scroll-to-top {

    right: 50px;

    bottom: 50px;

  }

  .site-header .header-wrapper {

    padding: 9px 50px;

  }

  .site-header .logo img {

    width: 165px;

  }

  .site-header .main-nav {

    max-width: 544px;

  }

  .site-header .main-nav .main-nav-menu {

    display: flex;

    gap: 14px;

  }

  .site-header .main-nav .main-nav-menu li a {

    gap: 5px;

  }

  .site-header .main-nav .main-nav-menu li a .arrow {

    width: 17px;

  }

  .site-header .main-nav .main-nav-menu li .float-menu-wrapper {

    padding-top: 57px;

  }

}

@media (max-width: 840px) {

  .site-header .main-nav .main-nav-menu li a {

    font-size: 16px;

  }

}

@media (max-width: 768px) {

  .scroll-to-top {

    right: 15px;

    bottom: 15px;

    width: 48px;

  }

  .site-header .header-wrapper {

    padding: 9px 15px;

  }

  .site-header .logo img {

    width: 195px;

  }

  .site-header .main-nav {

    max-width: 544px;

    display: flex;

    justify-content: flex-end;

  }

  .site-header .main-nav .main-menu-mobile {

    display: block;

  }

  .site-header .main-nav .main-nav-menu {

    box-shadow: inset 4px 8px 9px -1px rgba(97, 53, 184, 0.1411764706);

    position: absolute;

    flex-direction: column;

    left: 0px;

    top: 112px;

    background-color: #f9f9f9;

    padding: 30px 30px 60px 30px;

    width: 100%;

    gap: 31px;

    opacity: 0;

    pointer-events: none;

    transition: 0.4s opacity;

  }

  .site-header .main-nav .main-nav-menu li a {

    display: flex;

    justify-content: space-between;

    font-weight: 500;

    font-size: 24px;

    line-height: 28px;

  }

  .site-header .main-nav .main-nav-menu li a .arrow {

    width: 19px;

    aspect-ratio: 19/13;

    background-image: url("../icons/icon-arrow-bold.svg");

  }

  .site-header .main-nav .main-nav-menu li .float-menu-wrapper {

    height: 0px;

    position: relative;

    top: auto;

    left: auto;

    padding-top: 0px;

  }

  .site-header .main-nav .main-nav-menu li .float-menu {

    padding: 0px;

    overflow: hidden;

    border-top-width: 0px;

    background-color: transparent;

    gap: 26px;

  }

  .site-header .main-nav .main-nav-menu li .float-menu li a {

    font-weight: 300;

    font-size: 21px;

    line-height: 1;

    color: #42454d;

  }

  .site-header .main-nav .main-nav-menu li.active .float-menu-wrapper {

    height: auto;

    margin-top: 24px;

    margin-bottom: 7px;

  }

  .site-header .main-nav .main-nav-menu li.active .float-menu {

    padding: 0px;

  }

  .site-header .main-nav .main-nav-menu li.active a .arrow {

    transform: rotate(180deg);

  }

  .site-header .main-nav .main-nav-menu.active {

    opacity: 1;

    pointer-events: all;

  }

}

.debug-overlay {

  z-index: 100;

  display: none;

  position: fixed;

  width: 100vw;

  height: 100vh;

  pointer-events: none;

  left: 0px;

  top: 0px;

  opacity: 0.2;

}



.site-footer {

  display: flex;

  width: 100%;

  background: #f9f9f9;

  text-align: center;

}

.site-footer .footer-wrapper {

  width: 100%;

  display: flex;

  flex-direction: column;

  max-width: 1680px;

  padding: 0px 25px;

  padding-top: 103px;

  padding-bottom: 50px;

  margin: 0px auto;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

}

.site-footer .footer-wrapper .row {

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 50px;

}

.site-footer .footer-wrapper .row:nth-child(2) {

  align-items: center;

}

.site-footer .footer-wrapper .logo {

  width: 461px;

  height: auto;

  aspect-ratio: 461/81;

  object-fit: contain;

}

.site-footer .footer-wrapper .site-map {

  display: flex;

  flex-grow: 1;

  justify-content: space-between;

  max-width: 950px;

}

.site-footer .footer-wrapper .site-map li {

  gap: 17px;

  align-items: flex-start;

  display: flex;

  flex-direction: column;

  font-family: "Open Sans";

  font-weight: 400;

  font-size: 18px;

  line-height: 1;

  text-align: left;

  padding-left: 15px;

}

.site-footer .footer-wrapper .site-map li a {

  color: #222222;

}

.site-footer .footer-wrapper .site-map li .sub-items {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.site-footer .footer-wrapper .social-links {

  display: flex;

  align-items: center;

  gap: 32px;

}

.site-footer .footer-wrapper .social-links img {

  width: 31px;

  height: auto;

  aspect-ratio: 1;

  object-fit: contain;

}



.row > .flex-right {

  flex-grow: 1;

  display: flex;

  justify-content: flex-end;

}



.site-footer .footer-wrapper .copy-right {

  display: flex;

  gap: 40px;

}

.site-footer .footer-wrapper .copy-right > p {

  font-family: "Myraid Pro";

  font-weight: 300;

  font-size: 16px;

  line-height: 1;

  color: #808080;

}



@media (max-width: 1200px) {

  .site-footer .footer-wrapper {

    padding: 0px 50px;

    padding-top: 50px;

    padding-bottom: 30px;

  }

  .site-footer .footer-wrapper .row {

    width: 100%;

    flex-direction: column;

    gap: 53px;

  }

  .site-footer .footer-wrapper .row:nth-child(2) {

    align-items: flex-start;

    gap: 30px;

  }

  .site-footer .footer-wrapper .site-map {

    width: 100%;

    display: flex;

    justify-content: space-between;

    gap: 20px;

  }

  .site-footer .footer-wrapper .site-map li {

    gap: 17px;

    padding-left: 0px;

  }

  .site-footer .footer-wrapper .copy-right {

    display: flex;

    gap: 30px;

  }

  .site-footer .footer-wrapper .copy-right > p {

    text-align: left;

  }

}

@media (max-width: 768px) {

  .site-footer .footer-wrapper {

    padding: 0px 15px;

    gap: 62px;

    padding-top: 50px;

    padding-bottom: 28px;

  }

  .site-footer .footer-wrapper .row {

    gap: 63px;

  }

  .site-footer .footer-wrapper .row:nth-child(2) {

    gap: 20px;

    align-items: center;

  }

  .site-footer .footer-wrapper .logo {

    width: 336px;

    max-width: 100%;

  }

  .site-footer .footer-wrapper .site-map {

    flex-wrap: wrap;

    padding-left: 54px;

    padding-right: 54px;

    gap: 40px 20px;

  }

  .site-footer .footer-wrapper .site-map li:nth-child(1) {

    flex: 0 1 calc((100% - 70px) * 0.6);

  }

  .site-footer .footer-wrapper .site-map li:nth-child(n+3) {

    flex: 0 1 30%;

  }

  .site-footer .footer-wrapper .copy-right {

    justify-content: center;

    gap: 0px 45px;

    flex-wrap: wrap;

    width: 300px;

  }

  .site-footer .footer-wrapper .copy-right > p {

    font-size: 18px;

    line-height: 30px;

    text-align: center;

  }

  .site-footer .footer-wrapper .copy-right > p:nth-child(3) {

    width: 300px;

  }

}

@media (max-width: 490px) {

  .site-footer .footer-wrapper .site-map {

    padding-left: 0px;

    padding-right: 0px;

  }

}

.lightbox-modal {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.8);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 9999;

}

.lightbox-modal.hidden {

  display: none;

}

.lightbox-modal .lightbox-content {

  position: relative;

  max-width: 90%;

  max-height: 90%;

  background: #fff;

  border-radius: 8px;

  overflow: hidden;

  padding: 10px;

}

.lightbox-modal .lightbox-content img,

.lightbox-modal .lightbox-content video {

  max-width: 100%;

  max-height: 80vh;

  display: block;

}

.lightbox-modal .lightbox-close {

  position: absolute;

  z-index: 1;

  top: 5px;

  right: 15px;

  font-size: 48px;

  color: #fff;

  cursor: pointer;

}



.section-hero-background {

  display: none;

}

.section-hero-background.section-hero-background-desktop {

  display: block;

}



.filter-menu-button {

  display: none;

}

.filter-menu-button .mobile-title {

  display: none;

}



.filter-menu {

  display: flex;

  flex-direction: column;

  gap: 30px;

}

.filter-menu .case-menu-item .submenu {

  height: 0px;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.4s;

}

.filter-menu .case-menu-item h5 {

  font-weight: 500;

  font-size: 24px;

  line-height: 28px;

}

.filter-menu .case-menu-item h5 a {

  display: flex;

  justify-content: space-between;

}

.filter-menu .case-menu-item h5 .arrow {

  display: inline-block;

  background-image: url("../icons/icon-arrow-bold.svg");

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center center;

  width: 19px;

  height: auto;

  aspect-ratio: 19/13;

  transform: rotate(0deg);

  transition: 0.2s transform;

}

.filter-menu .case-menu-item strong {

  font-weight: 500;

  font-size: 20px;

  line-height: 34px;

  color: #01a4a7;

  display: block;

  margin-top: 21px;

}

.filter-menu .case-menu-item ul {

  margin-top: 5px;

  display: flex;

  flex-direction: column;

  gap: 19px;

}

.filter-menu .case-menu-item li {

  font-weight: 300;

  font-size: 20px;

  line-height: 34px;

  color: #929292;

}

.filter-menu .case-menu-item.active .submenu {

  height: auto;

  opacity: 1;

  pointer-events: all;

}

.filter-menu .case-menu-item.active h5 .arrow {

  transform: rotate(180deg);

}



.select {

  position: relative;

}

.select label {

  background-color: white;

  border-radius: 5px;

  border: 1px solid #01a4a7;

  position: relative;

  padding: 19px 20px;

  display: flex;

  align-items: center;

  gap: 12px;

  width: 333px;

  cursor: pointer;

}

.select label .icon {

  width: 39px;

  height: 37px;

  object-fit: contain;

}

.select label .title {

  flex-grow: 1;

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 18px;

  line-height: 28px;

  color: #929292;

}

.select label .arrow {

  background-image: url("../icons/icon-arrow.svg");

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center center;

  width: 19px;

  height: auto;

  aspect-ratio: 17/13;

  transform: rotate(0deg);

  transition: 0.2s transform;

}

.select .float-menu {

  padding: 16px 20px 22px 50px;

  position: absolute;

  opacity: 0;

  z-index: 3;

  pointer-events: none;

  background-color: white;

  width: 100%;

  top: calc(100% - 5px);

  border-radius: 5px;

  border: 1px solid #01a4a7;

}

.select .float-menu ul {

  display: flex;

  flex-direction: column;

  gap: 1px;

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 18px;

  line-height: 45px;

  color: #929292;

}

.select .float-menu ul li {

  display: flex;

  align-items: center;

}

.select .float-menu ul li:before {

  content: "·";

  color: #929292;

  font-size: 50px;

  margin-right: 12px;

}

.select.active .float-menu {

  pointer-events: all;

  opacity: 1;

}

.select.active label {

  z-index: 4;

}

.select.active label .arrow {

  transform: rotate(180deg);

}



input,

textarea {

  padding: 14px 30px 13px 30px;

  border-radius: 5px;

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 18px;

}

input::placeholder,

textarea::placeholder {

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 18px;

  line-height: 28px;

  color: #929292;

}



button {

  cursor: pointer;

  background-color: #01a4a7;

  color: white;

  padding: 15px 15px;

  min-width: 146px;

  border-width: 0px;

  border-radius: 5px;

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 18px;

  text-align: center;

}



button.btn-clear {

  background-color: #959595;

}

button:hover {

  background-color: #4f2783;

}



h1 {

  font-family: "Open Sans";

  font-weight: 600;

  font-size: 50px;

  line-height: 123%;

}



h2 {

  font-family: "Open Sans";

  font-weight: 600;

  font-size: 42px;

  line-height: 100%;

}



h3 {

  font-family: "Open Sans";

  font-weight: 600;

  font-size: 26px;

  line-height: 100%;

}



h4 {

  font-family: "Open Sans";

  font-weight: 400;

  font-size: 32px;

  line-height: 100%;

}

h4.header-text {

  line-height: 1.2;

}



h5 {

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 24px;

  line-height: 34px;

}

h5.header-text {

  font-weight: 400;

}



small {

  font-family: "Open Sans";

  font-weight: 400;

  font-size: 22px;

  line-height: 30px;

}



p {

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 20px;

  line-height: 34px;

  color: #929292;

}



p.breadcrumb {

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 18px;

  line-height: 1;

  color: white;

  letter-spacing: 1px;

}



small.professor {

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 18px;

  line-height: 32px;

  color: #3d3d3d;

}



.bordered-box {

  border-radius: 5px;

  border: 1px solid #01a4a7;

}



.card .title {

  font-family: "Open Sans";

  font-weight: 600;

  font-size: 22px;

  line-height: 34px;

}

.card .subTitle {

  font-family: "Myraid Pro";

  font-weight: 600;

  font-size: 20px;

  line-height: 20px;

  color: #929292;

}

.card p {

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 20px;

  line-height: 34px;

}

.card .more {

  font-family: "Myraid Pro";

  font-weight: 500;

  font-size: 18px;

  line-height: 34px;

  color: #01a4a7;

}

.more {

  font-family: "Myraid Pro";

  font-weight: 500;

  font-size: 18px;

  line-height: 34px;

  color: #01a4a7;

}

.card small {

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 18px;

  line-height: 32px;

}

.card span {

  font-family: "Open Sans";

  font-weight: 300;

  font-size: 18px;

  line-height: 34px;

}

.card span.small {

  color: #929292;

}

.card ul {

  display: flex;

  flex-wrap: wrap;

  gap: 0px;

}

.card ul li {

  width: calc((100% - 10px) / 2);

  display: flex;

  align-items: center;

}

.card ul li:before {

  content: "·";

  color: #929292;

  font-size: 30px;

  margin-right: 12px;

}

.card h3 {

  margin-top: 4px;

  margin-bottom: 15px;

  padding-bottom: 18px;

  border-bottom: 2px solid #ededed;

}

.card p {

  padding-right: 20px;

}

.card h5 {

  margin-top: 29px;

  margin-bottom: 9px;

}



.section-hero {

  position: relative;

  z-index: 1;

  height: 281px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  color: white;

}

.section-hero h2 {

  margin-bottom: 29px;

}



.section-hero-wrapper {

  background-position: center center;

  background-size: cover;

  background-color: #888888;

  background-blend-mode: multiply;

  background-position: center center;

  background-size: cover;

  text-align: center;

  position: relative;

}



.section-hero-background {

  position: absolute;

  width: 100%;

  height: 100%;

  background-image: url("../icons/icon-view.svg");

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

}



.section-wrapper-dark-background {

  background-color: #f9f9f9;

}



.content-ul {

  color: #929292;

  display: flex;

  flex-wrap: wrap;

  gap: 0px;

}

.content-ul li {

  width: calc((100% - 10px) / 2);

  display: flex;

  align-items: center;

  font-weight: 300;

  font-size: 18px;

  line-height: 34px;

}

.content-ul li:before {

  content: "·";

  color: #929292;

  font-size: 40px;

  margin-right: 12px;

  position: relative;

  top: 0.06em !important;

}



.case-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

  width: 31.3333333333%;

}

.case-item .image-wrapper {

  overflow: hidden;

}

.case-item:hover img {

  transform: scale(1.2);

}

.case-item img {

  width: 100%;

  height: auto;

  aspect-ratio: 400/272;

  object-fit: cover;

  transition: transform 0.5s ease;

}

.case-item .button-container {

  z-index: 1;

  margin-top: -40px;

  bottom: 0px;

  left: 30px;

  width: calc(100% - 60px);

  flex-direction: column;

  align-items: center;

  text-align: center;

  background-color: white;

  box-shadow: 4px 8px 9px -1px rgba(97, 53, 184, 0.1411764706);

  padding: 20px;

}

.case-item .button-container p {

  font-weight: 300;

  font-size: 22px;

  line-height: 30px;

  color: #42454d;

  margin-bottom: 30px;

}



.home-hero-section-wrapper {

  position: relative;

}

.home-hero-section-wrapper .section-hero-background {

  position: absolute;

  right: 0px;

  top: 0px;

  height: calc(100% - 1px);

  width: calc(50% - 100px);

  background-position: center center;

  background-size: cover;

}

.home-hero-section-wrapper .home-hero-section {

  position: relative;

  z-index: 1;

}

.home-hero-section-wrapper .home-hero-section .section-inner {

  position: relative;

}

.home-hero-section-wrapper .home-hero-section .hero-content-purple-background {

  width: calc(50% + 50px + 270px + 12px);

  position: absolute;

  height: calc(100% - 1px);

  background-color: #4f2783;

  clip-path: polygon(0% 0%, calc(100% - 220px) 0%, 100% 100%, 0% 100%);

}

.home-hero-section-wrapper .home-hero-section .hero-content {

  position: relative;

  width: calc(50% + 50px + 270px);

  height: 698px;

  display: flex;

  align-items: center;

  background-color: white;

  clip-path: polygon(0% 0%, calc(100% - 220px) 0%, 100% 100%, 0% 100%);

}



.home-bodyParts-section {

  margin-bottom: 50px;

}

.home-bodyParts-section h2 {

  margin-top: 110px;

  margin-bottom: 57px;

}

.home-bodyParts-section .body-parts-grid {

  display: flex;

  flex-wrap: wrap;

  /* justify-content: space-between; */

  justify-content: start;

  gap: 50px 2.75%;

}

.home-bodyParts-section .body-parts-grid .part-card {

  width: 31.5%;

  position: relative;

  padding-bottom: 75px;

}

.home-bodyParts-section .body-parts-grid .part-card .image-wrap {

  overflow: hidden;

}

.home-bodyParts-section .body-parts-grid .part-card .image-wrap img {

  width: 100%;

  height: auto;

  aspect-ratio: 525/328;

  object-fit: cover;

  transition: transform 0.5s ease;

}

.home-bodyParts-section .body-parts-grid .part-card .part-footer {

  position: absolute;

  width: calc(100% - 60px);

  display: flex;

  gap: 10px;

  left: 30px;

  align-items: center;

  padding: 30px;

  justify-content: space-between;

  background-color: white;

  bottom: 0px;

  box-shadow: 4px 8px 9px -1px rgba(97, 53, 184, 0.1411764706);

}

.home-bodyParts-section .body-parts-grid .part-card .part-footer img {

  width: 85px;

  height: 70px;

  object-fit: contain;

}

.home-bodyParts-section .body-parts-grid .part-card:hover .image-wrap img {

  transform: scale(1.2);

}



.home-academic-section {

  padding-top: 108px;

  padding-bottom: 100px;

}

.home-academic-section h2 {

  margin-bottom: 58px;

}

.home-academic-section .academic-grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.home-academic-section .academic-grid .academic-card {

  position: relative;

  width: calc((100% - 50px) / 2);

  padding-bottom: 50px;

}

.home-academic-section .academic-grid .academic-card > img {

  width: 100%;

  height: auto;

  aspect-ratio: 818/429;

}

.home-academic-section .academic-grid .academic-card .academic-info {

  position: absolute;

  width: calc(100% - 30px - 110px);

  gap: 10px;

  right: 30px;

  align-items: center;

  padding: 62px 43px 33px 43px;

  justify-content: space-between;

  background-color: white;

  bottom: 0px;

  box-shadow: 4px 8px 9px -1px rgba(97, 53, 184, 0.1411764706);

}

.home-academic-section .academic-grid .academic-card .academic-info h3 {

  margin-bottom: 36px;

}

.home-academic-section .academic-grid .academic-card .academic-info p {

  text-align: right;

}



.home-about-section-wrapper {

  background-color: #513476;

  /* background-image: url("../images/home-about-background.jpg"); */

  background-blend-mode: multiply;

  background-position: center center;

  background-size: cover;

}



.home-about-section {

  padding-top: 107px;

  padding-bottom: 149px;

  color: white;

  text-align: center;

}

.home-about-section h2 {

  margin-bottom: 37px;

}

.home-about-section p {

  color: white;

  padding: 0px 150px;

}



.aboutUs-message-cases-section .container {

  padding: 98px 190px 98px 190px;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: flex-start;

  gap: 99px;

}

.aboutUs-message-cases-section h4 {

  margin-top: 6px;

  margin-bottom: 37px;

}

.aboutUs-message-cases-section .image-block {

  max-width: 472px;

  width: 39%;

  height: auto;

  aspect-ratio: 472/556;

  flex-shrink: 0;

}

.aboutUs-message-cases-section .image-block img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.aboutUs-message-person {

  margin-bottom: 52px;

}

.aboutUs-message-person .container {

  padding: 98px 190px 98px 190px;

}



.profile-card {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: flex-start;

  padding: 40px;

  gap: 28px;

  box-shadow: 4px 8px 9px -1px rgba(97, 53, 184, 0.14);

}

.profile-card .profile-image {

  max-width: 337px;

  width: 100%;

  height: auto;

  aspect-ratio: 337/397;

  flex-shrink: 0;

}

.profile-card .profile-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.aboutUs-professors-list-section {

  margin-top: 105px;

  margin-bottom: 90px;

}

.aboutUs-professors-list-section h4 {

  margin-bottom: 56px;

}

.aboutUs-professors-list-section .page-row {

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 21px;

}

.aboutUs-professors-list-section .page-row .page-col {

  width: calc((100% - 21px) / 2);

}

.aboutUs-professors-list-section .page-row .bordered-box {

  padding: 10px 20px;

  width: 100%;

  text-align: center;

}

.aboutUs-professors-list-section .professor-qualifications {

  margin-top: -5px;

}

.aboutUs-professors-list-section .professor-list {

  margin-top: 54px;

}

.aboutUs-professors-list-section .professor-list h3 {

  margin-bottom: 21px;

}

.aboutUs-professors-list-section .professor-list .professor-info {

  padding-right: 52px;

}

.aboutUs-professors-list-section .professor-card {

  padding-bottom: 57px;

  margin-bottom: 54px;

  border-bottom: 2px solid #ededed;

}

.aboutUs-professors-list-section .professor-card:last-child {

  margin-bottom: 0px;

  border-width: 0px;

}



.cases-search-section {

  margin-top: 99px;

  margin-bottom: 85px;

}

.cases-search-section .container {

  display: flex;

  justify-content: center;

  gap: 20px;

}

.cases-search-section .container input {

  width: 100%;

  max-width: 564px;

}



.cases-filter-section {

  margin-bottom: 23px;

}

.cases-filter-section .container {

  display: flex;

  justify-content: flex-end;

  align-items: flex-start;

  gap: 20px;

}



.cases-list-section {

  margin-bottom: 140px;

}

.cases-list-section .container {

  display: flex;

  gap: 50px;

}

.cases-list-section .section-col-1 {

  min-width: 329px;

  padding: 50px 50px;

  background-color: #f9f9f9;

}

.cases-list-section .section-col-2 {

  flex-grow: 1;

}

.cases-list-section .section-col-2 .items {

  /* display: flex; */

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  flex-wrap: wrap;

  gap: 50px 1.5%;

  margin-bottom: 100px;

  justify-content: space-between;

}

.cases-list-section .section-col-2 .items .item {

  /* width: 32.3333333333%; */

  width: 100%;

}

.cases-list-section .section-col-2 .pagination {

  display: flex;

  justify-content: center;

  gap: 18px;

}

.cases-list-section .section-col-2 .pagination a {

  font-weight: 300;

  font-size: 18px;

  line-height: 100%;

  display: inline-block;

  padding: 0px 5px 3px 5px;

}

.cases-list-section .section-col-2 .pagination a.active {

  color: #01a4a7;

  border-bottom: 1px #01a4a7 solid;

}

.cases-list-section .section-col-2 .pagination a:first-child,

.cases-list-section .section-col-2 .pagination a:last-child {

  font-weight: 500;

  font-size: 18px;

  line-height: 100%;

  color: #01a4a7;

}



.cases-detail-information-section {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  margin-top: 104px;

  gap: 0px 50px;

  flex-grow: 1;

}

.cases-detail-information-section h4 {

  width: 100%;

  margin-bottom: 60px;

}

.cases-detail-information-section .case-text {

  width: calc(100% - 350px - 50px);

}

.cases-detail-information-section .case-text h5 {

  margin-bottom: 22px;

}

.cases-detail-information-section .case-text p {

  margin-bottom: 52px;

}

.cases-detail-information-section .case-key-info-column {

  flex-shrink: 0;

  width: 350px;

  margin-top: 44px;

}

.cases-detail-information-section .case-key-info-column .case-key-info {

  padding: 25px 25px 44px 25px;

  box-shadow: 4px 8px 9px -1px rgba(97, 53, 184, 0.1411764706);

}

.cases-detail-information-section .case-key-info-column .case-key-info h5 {

  font-weight: 600;

  font-size: 22px;

  line-height: 34px;

  border-left: 3px solid #4f2783;

  margin-left: -27px;

  padding-left: 24px;

}

.cases-detail-information-section .case-key-info-column .case-key-info ul {

  margin-top: 17px;

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.cases-detail-information-section .case-key-info-column .case-key-info div {

  margin-top: 17px;

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.cases-detail-information-section .case-key-info-column .case-key-info li {

  font-weight: 300;

  font-size: 18px;

  line-height: 28px;

  color: #929292;

}

.cases-detail-information-section .case-key-info-column .case-key-info p {

  font-weight: 300;

  font-size: 18px;

  line-height: 28px;

  color: #929292;

}

.cases-detail-information-section .case-key-info-column .case-key-info li strong {

  font-weight: 500;

  font-size: 18px;

  line-height: 28px;

}

.cases-detail-information-section .case-key-info-column .case-key-info p strong {

  font-weight: 500;

  font-size: 18px;

  line-height: 28px;

}



.cases-detail-images-section h5 {

  margin-bottom: 20px;

}

.cases-detail-images-section .media-item-list {

  display: flex;

  flex-wrap: wrap;

  gap: 60px 3.5%;

}

.cases-detail-images-section .media-item-list .media-item {

  position: relative;

  width: 31%;

}

.cases-detail-images-section .media-item-list .media-item img {

  width: 100%;

  height: auto;

  aspect-ratio: 394/295;

}

.cases-detail-images-section .media-item-list .media-item .icon-play,

.cases-detail-images-section .media-item-list .media-item .icon-zoom {

  position: absolute;

  display: block;

  width: 50px;

  height: auto;

  aspect-ratio: 1;

  right: 20px;

  bottom: 20px;

  background-image: url("../icons/icon-view.svg");

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

  cursor: pointer;

}

.cases-detail-images-section .media-item-list .media-item .icon-play.icon-play,

.cases-detail-images-section .media-item-list .media-item .icon-zoom.icon-play {

  background-image: url("../icons/icon-play.svg");

}

.cases-detail-images-section .media-description {

  margin-top: 20px;

  max-width: 850px;

}



.cases-detail-author-section {

  margin-top: 50px;

}

.cases-detail-author-section .author-box {

  padding: 25px 25px 49px 25px;

  box-shadow: 4px 8px 9px -1px rgba(97, 53, 184, 0.1411764706);

}

.cases-detail-author-section .author-box .title {

  border-left: 3px solid #4f2783;

  margin-left: -27px;

  padding-left: 24px;

}

.cases-detail-author-section .author-box .subTitle {

  margin-top: 28px;

}

.cases-detail-author-section .author-box p {

  /* margin-top: 11px; */

  max-width: 100%;

}

.cases-detail-author-section .author-box .more {

  display: block;

  margin-top: 17px;

}

.more {

  display: block;

  margin-top: 17px;

}



.cases-detail-related-section {

  margin-top: 51px;

  /* margin-bottom: 153px; */

}

.cases-detail-related-section h5 {

  margin-bottom: 20px;

}

.cases-detail-related-section .items {

  /* display: flex;

  flex-wrap: wrap;

  justify-content: space-between; */

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  /* gap max 50px and min 20 px  when view between 1680 and 1200*/

  gap: 20px;

}



@media (min-width: 1200px) and (max-width: 1680px) {

    .cases-detail-related-section .items {

        gap: calc(20px + (30 * ((100vw - 1200px) / 480))); /* Adjusts gap between 20px and 50px */

    }

}



.cases-detail-related-section .items .item {

  width: 100%;

  display: flex;

}



.contactUs-form-section {

  width: 100%;

  margin-top: 100px;

  margin-bottom: 150px;

  flex-direction: row;

  justify-content: center;

}

.contactUs-form-section .contact-wrapper {

  display: flex;

  gap: 38px;

  justify-content: center;

  align-items: flex-start;

  width: 100%;

  max-width: 1300px;

}

.contactUs-form-section .contact-form {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 47px;

  padding: 68px 50px;

  width: 100%;

}

.contactUs-form-section .contact-form .form-row {

  width: 100%;

  display: flex;

  gap: 23px;

}

.contactUs-form-section .contact-form .form-group {

  width: 100%;

}

.contactUs-form-section .contact-form .form-group input {

  margin-top: 14px;

  width: 100%;

}

.contactUs-form-section .contact-form .form-group textarea {

  margin-top: 14px;

  width: 100%;

  height: 437px;

}

.contactUs-form-section .contact-info-box {

  overflow: hidden;

  width: calc(40% - 38px);

}

.contactUs-form-section .contact-info-box .google-map {

  width: 100%;

  height: auto;

  aspect-ratio: 462/373;

}

.contactUs-form-section .contact-info-box .info {

  padding: 35px 30px 60px 30px;

  display: flex;

  flex-direction: column;

  gap: 22px;

}

.contactUs-form-section .contact-info-box .info p {

  display: flex;

  gap: 20px;

  align-items: flex-start;

}

.contactUs-form-section .contact-info-box .icon {

  margin-top: 8px;

  flex-shrink: 0;

  display: block;

  width: 30px;

  height: auto;

  aspect-ratio: 30/40;

  background-repeat: no-repeat;

  background-position: center top;

  background-size: contain;

}

.contactUs-form-section .contact-info-box .icon.icon-location {

  background-image: url("../icons/icon-location.svg");

}

.contactUs-form-section .contact-info-box .icon.icon-phone {

  background-image: url("../icons/icon-phone.svg");

}

.contactUs-form-section .contact-info-box .icon.icon-mail {

  background-image: url("../icons/icon-mail.svg");

}



@media (max-width: 1200px) {

  .section-hero-background {

    display: none;

  }

  .section-hero-background.section-hero-background-tablet {

    display: block;

  }

  .filter-menu-button {

    position: relative;

    display: block;

  }

  .filter-menu-button .icon-wrapper {

    width: 100%;

    height: 100%;

    padding: 20px;

    padding-bottom: 25px;

  }

  .filter-menu-button .icon {

    width: 35px;

    height: auto;

    aspect-ratio: 35/30;

    background-image: url("../icons/icon-filter-menu.svg");

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center center;

  }

  .filter-menu-button .filter-menu {

    display: none;

    opacity: 0;

    pointer-events: none;

    background-color: #f9f9f9;

    z-index: 2;

    position: absolute;

    right: -1px;

    top: calc(100% + 1px);

    padding: 30px 30px 60px 30px;

    min-width: 400px;

  }

  .filter-menu-button.active .filter-menu {

    display: flex;

    pointer-events: all;

    opacity: 1;

  }

  .filter-menu {

    padding-top: 0px;

    display: flex;

    flex-direction: column;

    gap: 26px;

  }

  .filter-menu .case-menu-item h5 {

    font-size: 20px;

    line-height: 24px;

  }

  .filter-menu .case-menu-item h5 .arrow {

    width: 16px;

  }

  .filter-menu .case-menu-item h5.active .arrow {

    transform: rotate(180deg);

  }

  .filter-menu .case-menu-item strong {

    font-size: 18px;

    line-height: 29px;

    margin-top: 17px;

    font-weight: 400;

  }

  .filter-menu .case-menu-item ul {

    margin-top: 3px;

    gap: 17px;

  }

  .filter-menu .case-menu-item li {

    font-size: 18px;

    line-height: 29px;

  }

  .select {

    position: relative;

  }

  .select label {

    width: auto;

  }

  .select label .arrow {

    margin-left: 40px;

  }

  .select .float-menu {

    padding: 20px 20px 31px 50px;

  }

  .select .float-menu ul {

    gap: 0px;

  }

  .select .float-menu ul li:before {

    font-size: 40px;

  }

  input.form-input,

  textarea.form-textarea {

    padding: 6px 20px 6px 20px;

  }

  h1 {

    font-size: 32px;

    line-height: 46px;

  }

  h2 {

    font-size: 28px;

  }

  h3 {

    font-size: 26px;

  }

  h3.part-text {

    font-size: 22px;

  }

  h3.academic-info-text {

    font-size: 22px;

  }

  h5.form-label {

    font-size: 20px;

    line-height: 23.23px;

  }

  h5.tab-text {

    font-size: 21px;

  }

  small {

    font-size: 18px;

    line-height: 32px;

  }

  p.date {

    font-size: 16px;

    line-height: 1;

  }

  p.contact-map-info {

    font-size: 18px;

    line-height: 28px;

  }

  .card .subTitle {

    font-size: 20px;

    line-height: 34px;

  }

  .card small {

    font-size: 18px;

    line-height: 32px;

  }

  .card h3 {

    font-size: 26px;

  }

  .card ul li {

    width: 100%;

  }

  .section-hero {

    height: 277px;

  }

  .section-hero h2 {

    margin-bottom: 29px;

  }

  .content-ul li {

    padding: 0px;

  }

  .case-item {

    width: 32%;

  }

  .case-item .button-container {

    margin-top: -28px;

    left: 15px;

    width: calc(100% - 30px);

    padding: 15px 20px 20px 20px;

  }

  .case-item .button-container p {

    font-size: 18px;

    line-height: 24px;

    margin-bottom: 15px;

  }

  .case-item .button-container button {

    padding: 12px;

  }

  .home-hero-section-wrapper .section-hero-background {

    width: calc(50% - 90px);

  }

  .home-hero-section-wrapper .home-hero-section {

    position: relative;

    z-index: 1;

  }

  .home-hero-section-wrapper .home-hero-section .hero-content-purple-background {

    width: calc(50% + 50px + 140px + 5px);

    clip-path: polygon(0% 0%, calc(100% - 100px) 0%, 100% 100%, 0% 100%);

  }

  .home-hero-section-wrapper .home-hero-section .hero-content {

    width: calc(50% + 50px + 140px);

    height: 265px;

    clip-path: polygon(0% 0%, calc(100% - 100px) 0%, 100% 100%, 0% 100%);

  }

  .home-bodyParts-section {

    margin-bottom: 34px;

  }

  .home-bodyParts-section h2 {

    margin-top: 56px;

    margin-bottom: 35px;

  }

  .home-bodyParts-section .body-parts-grid {

    gap: 15px 1.1%;

  }

  .home-bodyParts-section .body-parts-grid .part-card {

    width: 32.6%;

    padding-bottom: 48px;

  }

  .home-bodyParts-section .body-parts-grid .part-card .part-footer {

    width: calc(100% - 40px);

    left: 20px;

    padding: 20px;

  }

  .home-bodyParts-section .body-parts-grid .part-card .part-footer img {

    width: 46px;

    height: 40px;

  }

  .home-academic-section {

    padding-top: 56px;

    padding-bottom: 100px;

  }

  .home-academic-section h2 {

    margin-bottom: 31px;

  }

  .home-academic-section .academic-grid .academic-card {

    width: calc((100% - 10px) / 2);

    padding-bottom: 24px;

  }

  .home-academic-section .academic-grid .academic-card .academic-info {

    width: calc(100% - 60px - 20px);

    right: 20px;

    gap: 0px;

    padding: 14px 25px 18px 25px;

    box-shadow: 4px 8px 9px -1px rgba(97, 53, 184, 0.1411764706);

  }

  .home-academic-section .academic-grid .academic-card .academic-info h3 {

    margin-bottom: 7px;

    line-height: 26px;

  }

  .home-academic-section .academic-grid .academic-card .academic-info p {

    text-align: right;

  }

  .home-about-section {

    padding-bottom: 99px;

  }

  .home-about-section h2 {

    margin-bottom: 32px;

  }

  .home-about-section p {

    color: white;

    padding: 0px 80px;

  }

  .aboutUs-message-cases-first-section-wrapper {

    margin-bottom: 55px;

  }

  .aboutUs-message-cases-section .container {

    padding: 50px 0px 48px 0px;

    gap: 50px;

  }

  .aboutUs-message-cases-section h4 {

    margin-bottom: 28px;

  }

  .aboutUs-message-person {

    margin-bottom: 52px;

  }

  .aboutUs-message-person .container {

    padding: 50px 0px 50px 0px;

  }

  .profile-card {

    padding: 40px;

  }

  .profile-card .profile-image {

    max-width: 296px;

  }

  .aboutUs-professors-list-section {

    margin-top: 111px;

    margin-bottom: 19px;

  }

  .aboutUs-professors-list-section .page-row .page-col.page-col-1 {

    width: 36.7%;

    flex-shrink: 0;

  }

  .aboutUs-professors-list-section .page-row .page-col.page-col-2 {

    flex-grow: 1;

  }

  .aboutUs-professors-list-section .professor-qualifications {

    margin-top: -7px;

  }

  .aboutUs-professors-list-section .professor-list {

    margin-top: 55px;

  }

  .aboutUs-professors-list-section .professor-list h3 {

    margin-bottom: 21px;

  }

  .aboutUs-professors-list-section .professor-list .professor-info {

    padding-right: 0px;

  }

  .aboutUs-professors-list-section .professor-card {

    padding-bottom: 81px;

    margin-bottom: 54px;

  }

  .cases-search-section {

    margin-top: 50px;

    margin-bottom: 50px;

  }

  .cases-search-section .container {

    gap: 10px;

  }

  .cases-search-section .container input {

    width: 100%;

    max-width: 376px;

  }

  .cases-filter-section {

    margin-bottom: 52px;

  }

  .cases-filter-section .container {

    position: relative;

    gap: 10px;

  }

  .cases-list-section {

    margin-bottom: 100px;

  }

  .cases-list-section .container {

    display: flex;

    gap: 50px;

  }

  .cases-list-section .filter-menu {

    display: none;

  }

  .cases-list-section .section-col-2 .items {

    gap: 20px 1.5%;

    margin-bottom: 54px;

  }

  

  .cases-detail-images-section {

    margin-top: 14px;

  }

  .cases-detail-images-section h5 {

    margin-bottom: 50px;

  }

  .cases-detail-images-section .media-item-list {

    gap: 8px;

  }

  .cases-detail-images-section .media-item-list .media-item {

    width: calc((100% - 16px) / 3);

  }

  .cases-detail-images-section .media-item-list .media-item .icon-play,

  .cases-detail-images-section .media-item-list .media-item .icon-zoom {

    width: 36px;

    right: 15px;

    bottom: 15px;

  }

  .cases-detail-images-section .media-description {

    margin-top: 48px;

    max-width: 100%;

  }

  .cases-detail-author-section .author-box .subTitle {

    margin-top: 20px;

  }

  .cases-detail-author-section .author-box p {

    /* margin-top: 5px; */

    max-width: 100%;

  }

  .cases-detail-author-section .author-box .more {

    margin-top: 16px;

  }

  .more {

    margin-top: 16px;

  }

  .cases-detail-related-section {

    margin-top: 50px;

    /* margin-bottom: 94px; */

  }

  .cases-detail-related-section h5 {

    margin-bottom: 15px;

  }

  .contactUs-form-section {

    margin-top: 105px;

    margin-bottom: 100px;

  }

  .contactUs-form-section .contact-wrapper {

    gap: 20px;

  }

  .contactUs-form-section .contact-form {

    gap: 31px;

    padding: 46px 30px;

  }

  .contactUs-form-section .contact-form .form-row {

    gap: 18px;

  }

  .contactUs-form-section .contact-form .form-group input {

    margin-top: 9px;

  }

  .contactUs-form-section .contact-form .form-group textarea {

    margin-top: 9px;

    height: 299px;

  }

  .contactUs-form-section .contact-info-box .info {

    padding: 22px 20px 54px 20px;

    gap: 14px;

  }

  .contactUs-form-section .contact-info-box .info p {

    align-items: flex-start;

    gap: 20px;

  }

  .contactUs-form-section .contact-info-box .icon {

    width: 24px;

  }

}



@media (max-width: 1024px) {

  .cases-detail-information-section {

    margin-top: 111px;

    gap: 50px;

  }

  .cases-detail-information-section h4 {

    margin-bottom: 7px;

  }

  .cases-detail-information-section .case-text {

    width: 100%;

    /* calc(100% - 324px - 50px); */

    order: 3;

  }

  .cases-detail-information-section .case-text h4 {

    margin-bottom: 60px;

  }

  .cases-detail-information-section .case-text h5 {

    margin-bottom: 22px;

  }

  .cases-detail-information-section .case-text p {

    margin-bottom: 37px;

  }



  .cases-detail-information-section .case-key-info-column {

    width: 100%;

    order: 2;

    margin-top: 0px;

    flex-shrink: 0;

    /* width: 324px; */

  }



   .cases-detail-information-section .case-key-info-column .case-key-info {

    /* padding: 25px 25px 44px 25px; */

    box-shadow: 4px 8px 9px -1px rgba(97, 53, 184, 0.1411764706);

    padding: 25px 25px 35px 25px;

  }

  .cases-detail-information-section .case-key-info-column .case-key-info h5 {

    font-weight: 600;

    font-size: 22px;

    line-height: 34px;

    border-left: 3px solid #4f2783;

    margin-left: -27px;

    padding-left: 24px;

  }

  .cases-detail-information-section .case-key-info-column .case-key-info ul {

    margin-top: 17px;

    display: flex;

    /* flex-direction: column;

    gap: 20px; */

    flex-direction: row;

    justify-content: space-between;

    gap: 15px;

  }



  .cases-detail-information-section .case-key-info-column .case-key-info div {

    margin-top: 17px;

    display: flex;

    flex-direction: column;

    gap: 20px;

  }

  .cases-detail-information-section .case-key-info-column .case-key-info li {

    font-weight: 300;

    font-size: 18px;

    line-height: 28px;

    color: #929292;

    flex-direction: row;

    justify-content: space-between;

    gap: 15px;

  }



  .cases-detail-information-section .case-key-info-column .case-key-info li strong {

    font-weight: 500;

    font-size: 18px;

    line-height: 28px;

  }

  .cases-detail-information-section .case-key-info-column .case-key-info p {

    font-weight: 300;

    font-size: 18px;

    line-height: 28px;

    color: #929292;

  }

  .cases-detail-information-section .case-key-info-column .case-key-info p strong {

    font-weight: 500;

    font-size: 18px;

    line-height: 28px;

  }

  

}



@media (max-width: 768px) {

  .section-hero-background {

    display: none;

  }

  .section-hero-background.section-hero-background-mobile {

    display: block;

  }

  .filter-menu-button .icon {

    display: none;

  }

  .filter-menu-button .mobile-title {

    width: 100%;

    display: flex;

    padding-left: 10px;

    padding-right: 10px;

    margin-top: 5px;

    margin-bottom: 5px;

  }

  .filter-menu-button .mobile-title h5 {

    width: 100%;

    font-weight: 500;

    font-size: 24px;

    line-height: 28px;

  }

  .filter-menu-button .mobile-title h5 a {

    justify-content: space-between;

    display: flex;

    width: 100%;

  }

  .filter-menu-button .mobile-title h5 .arrow {

    display: inline-block;

    background-image: url("../icons/icon-arrow-bold.svg");

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center center;

    width: 19px;

    height: auto;

    aspect-ratio: 19/13;

    transform: rotate(0deg);

    transition: 0.2s transform;

  }

  .filter-menu-button .filter-menu {

    top: 100%;

    width: 100%;

    min-width: 100%;

    padding-top: 0px;

    gap: 33px;

  }

  .filter-menu-button .filter-menu .case-menu-item h5 {

    font-size: 24px;

  }

  .filter-menu-button .filter-menu .case-menu-item h5 .arrow {

    width: 19px;

  }

  .filter-menu-button .filter-menu .case-menu-item strong {

    font-size: 20px;

    line-height: 34px;

    margin-top: 23px;

  }

  .filter-menu-button .filter-menu .case-menu-item ul {

    margin-top: 5px;

  }

  .filter-menu-button .filter-menu .case-menu-item li {

    font-size: 20px;

    line-height: 34px;

  }

  .filter-menu-button.active .filter-menu {

    pointer-events: all;

    opacity: 1;

  }

  .filter-menu-button.active .mobile-title h5 .arrow {

    transform: rotate(180deg);

  }

  .select label {

    padding: 12px 12px;

    gap: 12px;

  }

  .select label .title {

    font-size: 21px;

    line-height: 33px;

  }

  .select .float-menu {

    padding: 16px 32px 22px 32px;

  }

  .select .float-menu ul {

    font-size: 20px;

    line-height: 45px;

  }

  .select .float-menu ul li:before {

    font-size: 40px;

  }

  input,

  textarea {

    padding: 12px 30px 12px 30px;

    font-size: 21px;

  }

  input::placeholder,

  textarea::placeholder {

    font-size: 21px;

  }

  button {

    font-size: 21px;

    padding: 13px 49px;

  }

  h1 {

    font-size: 28px;

    line-height: 38px;

  }

  h2 {

    font-size: 28px;

  }

  h2.hero-text {

    font-size: 32px;

  }

  h3 {

    font-size: 26px;

    line-height: 35px;

  }

  h3.part-text {

    font-size: 21px;

  }

  h3.academic-info-text {

    font-size: 21px;

  }

  h4 {

    font-weight: 300;

    font-size: 28px;

    line-height: 36px;

  }

  h4.header-text {

    font-weight: 400;

    font-size: 32px;

  }

  h5 {

    font-size: 24px;

    line-height: 34px;

  }

  h5.tab-text {

    font-size: 21px;

  }

  p {

    font-size: 21px;

    line-height: 36px;

  }

  small.professor {

    font-size: 21px;

    line-height: 36px;

    color: #929292;

  }

  p.date {

    font-size: 18px;

  }

  p.contact-map-info {

    font-size: 21px;

    line-height: 33px;

  }

  p.media-description {

    font-size: 20px;

    line-height: 34px;

  }

  .card .subTitle {

    font-weight: 500;

    font-size: 21px;

    line-height: 34px;

  }

  .card p {

    font-size: 21px;

    line-height: 36px;

  }

  .card .more {

    font-weight: 400;

    font-size: 21px;

    line-height: 34px;

  }

  .more {

    font-weight: 400;

    font-size: 21px;

    line-height: 34px;

  }

  .card small {

    font-size: 21px;

    line-height: 34px;

  }

  .card span {

    font-size: 21px;

    line-height: 34px;

  }

  .section-hero {

    height: 239px;

  }

  .section-hero h2 {

    margin-bottom: 0px;

  }

  .section-hero p {

    display: none;

  }

  .content-ul {

    color: #929292;

    display: flex;

    flex-wrap: wrap;

    gap: 0px;

  }

  .content-ul li {

    width: 100%;

    font-size: 21px;

    line-height: 36px;

  }

  .case-item {

    width: calc((100% - 10px) / 2);

  }

  .case-item .button-container {

    margin-top: -28px;

    left: 12px;

    width: calc(100% - 24px);

    padding: 20px 20px 20px 20px;

  }

  .case-item .button-container p {

    font-size: 21px;

    line-height: 31px;

    margin-bottom: 17px;

  }

  .home-hero-section-wrapper .section-hero-background {

    width: 50%;

  }

  .home-hero-section-wrapper .home-hero-section .hero-content-purple-background {

    width: calc(50% + 40px + 80px + 3px);

    clip-path: polygon(0% 0%, calc(100% - 70px) 0%, 100% 100%, 0% 100%);

  }

  .home-hero-section-wrapper .home-hero-section .hero-content {

    width: calc(50% + 40px + 80px);

    height: 198px;

    padding-right: 40px;

    clip-path: polygon(0% 0%, calc(100% - 70px) 0%, 100% 100%, 0% 100%);

  }

  .home-bodyParts-section {

    margin-bottom: 50px;

  }

  .home-bodyParts-section h2 {

    margin-top: 56px;

    margin-bottom: 21px;

  }

  .home-bodyParts-section .body-parts-grid {

    gap: 15px -46.1%;

  }

  .home-bodyParts-section .body-parts-grid .part-card {

    width: 48.7%;

    padding-bottom: 42px;

  }

  .home-bodyParts-section .body-parts-grid .part-card .image-wrap img {

    aspect-ratio: 264/203;

  }

  .home-bodyParts-section .body-parts-grid .part-card .part-footer {

    width: calc(100% - 40px);

    left: 20px;

    padding: 15.5px;

  }

  .home-bodyParts-section .body-parts-grid .part-card .part-footer img {

    width: 50px;

    height: 41px;

  }

  .home-academic-section {

    padding-top: 55px;

    padding-bottom: 50px;

  }

  .home-academic-section h2 {

    text-align: center;

    margin-bottom: 29px;

  }

  .home-academic-section .academic-grid {

    gap: 25px;

  }

  .home-academic-section .academic-grid .academic-card {

    width: 100%;

    padding-bottom: 53px;

  }

  .home-academic-section .academic-grid .academic-card > img {

    aspect-ratio: 540/283;

  }

  .home-academic-section .academic-grid .academic-card .academic-info {

    padding: 37px 20px 35px 20px;

  }

  .home-academic-section .academic-grid .academic-card .academic-info h3 {

    margin-bottom: 32px;

  }

  .home-about-section {

    padding-top: 56px;

    padding-bottom: 49px;

  }

  .home-about-section h2 {

    margin-bottom: 32px;

  }

  .home-about-section p {

    padding: 0px 0px;

  }

  .aboutUs-message-cases-first-section-wrapper {

    margin-bottom: 0px;

  }

  .aboutUs-message-cases-section .container {

    flex-direction: column;

    gap: 50px;

  }

  .aboutUs-message-cases-section .image-block {

    width: 100%;

    max-width: 100%;

    aspect-ratio: 544/306;

  }

  .profile-card {

    padding: 40px;

    flex-direction: column;

  }

  .profile-card .profile-image {

    max-width: 296px;

  }

  .aboutUs-professors-list-section {

    margin-top: 55px;

    margin-bottom: 19px;

  }

  .aboutUs-professors-list-section h4 {

    margin-bottom: 97px;

  }

  .aboutUs-professors-list-section .scroller {

    width: 100%;

    overflow-y: auto;

  }

  .aboutUs-professors-list-section .page-row {

    min-width: 630px;

  }

  .aboutUs-professors-list-section .page-row .page-col.page-col-1 {

    width: 50%;

  }

  .aboutUs-professors-list-section .page-row .bordered-box {

    width: 100%;

    height: 94px;

    display: flex;

    justify-content: center;

    align-items: center;

  }

  .aboutUs-professors-list-section .professor-qualifications {

    margin-top: -5px;

  }

  .aboutUs-professors-list-section .professor-list {

    margin-top: 35px;

  }

  .aboutUs-professors-list-section .professor-list h3 {

    margin-bottom: 21px;

  }

  .aboutUs-professors-list-section .professor-card {

    padding-bottom: 38px;

    margin-bottom: 46px;

  }

  .cases-search-section {

    margin-top: 50px;

    margin-bottom: 19px;

  }

  .cases-search-section .container input {

    max-width: 100%;

  }

  .cases-filter-section {

    margin-bottom: 52px;

  }

  .cases-filter-section .container {

    flex-wrap: wrap;

    position: relative;

    gap: 10px;

  }

  .cases-filter-section .container .select {

    flex-grow: 1;

  }

  .cases-filter-section .container .filter-menu-button {

    width: 100%;

    margin-top: 44px;

    border-width: 0px;

    background-color: #f9f9f9;

  }

  .cases-list-section {

    margin-bottom: 100px;

  }

  .cases-list-section .container {

    display: flex;

    gap: 50px;

  }

  .cases-list-section .filter-menu {

    display: none;

  }

  .cases-detail-related-section .items {

    grid-template-columns: repeat(2, 1fr);

    gap: 20px 10px;

  }



  .cases-list-section .section-col-2 .items {

    gap: 10px 10px;

  }

  .cases-list-section .section-col-2 .items .item {

    /* width: calc((100% - 10px) / 2); */

  }

  .cases-list-section .section-col-2 .pagination a {

    font-size: 21px;

  }

  .cases-list-section .section-col-2 .pagination a:first-child,

  .cases-list-section .section-col-2 .pagination a:last-child {

    font-size: 21px;

  }

  .cases-detail-information-section {

    display: flex;

    flex-direction: column;

    margin-top: 52px;

    gap: 0px;

    flex-grow: 1;

  }

  .cases-detail-information-section h4 {

    order: 1;

    margin-bottom: 22px;

  }

  .cases-detail-information-section .case-text {

    margin-top: 50px;

    width: 100%;

    order: 3;

  }

  .cases-detail-information-section .case-text h5 {

    margin-bottom: 19px;

  }

  .cases-detail-information-section .case-text p {

    margin-bottom: 50px;

  }

  .cases-detail-information-section .case-key-info-column {

    width: 100%;

    order: 2;

  }

  .cases-detail-information-section .case-key-info-column .case-key-info {

    padding: 25px 25px 35px 25px;

  }

  .cases-detail-information-section .case-key-info-column .case-key-info ul {

    flex-direction: row;

    justify-content: space-between;

    gap: 15px;

  }

  .cases-detail-information-section .case-key-info-column .case-key-info div {

    flex-direction: row;

    justify-content: space-between;

    gap: 15px;

  }

  .cases-detail-images-section {

    margin-top: 0px;

  }

  .cases-detail-images-section h5 {

    margin-bottom: 18px;

  }

  .cases-detail-images-section .media-item-list .media-item {

    width: calc((100% - 8px) / 2);

  }

  .cases-detail-images-section .media-item-list .media-item .icon-play,

  .cases-detail-images-section .media-item-list .media-item .icon-zoom {

    width: 33px;

  }

  .cases-detail-images-section .media-description {

    margin-top: 20px;

  }

  .cases-detail-author-section {

    margin-top: 14px;

  }

  .cases-detail-author-section .author-box {

    padding: 25px 25px 40px 25px;

  }

  .cases-detail-related-section {

    margin-top: 50px;

    /* margin-bottom: 94px; */

  }

  .cases-detail-related-section h5 {

    margin-bottom: 15px;

  }

  .cases-detail-related-section .items {

    gap: 20px 10px;

  }

  .contactUs-form-section {

    margin-top: 50px;

  }

  .contactUs-form-section .contact-wrapper {

    flex-direction: column-reverse;

  }

  .contactUs-form-section .contact-form {

    /* width: 100%; */

    gap: 28px;

    padding: 46px 30px;

  }

  .contactUs-form-section .contact-form .form-row {

    gap: 18px;

  }

  .contactUs-form-section .contact-form .form-group input {

    margin-top: 9px;

  }

  .contactUs-form-section .contact-form .form-group textarea {

    margin-top: 9px;

    height: 299px;

  }

  .contactUs-form-section .contact-info-box {

    width: 100%;

    display: flex;

    flex-direction: row;

  }

  .contactUs-form-section .contact-info-box .info {

    padding: 32px 20px 28px 20px;

    min-height: 253px;

  }

  .contactUs-form-section .contact-info-box .info p {

    align-items: flex-start;

    gap: 20px;

  }

  .contactUs-form-section .contact-info-box .icon {

    width: 22px;

  }

}

@media (max-width: 490px) {

  .home-hero-section-wrapper .home-hero-section .hero-content {

    width: calc(50% + 40px + 80px);

    height: 198px;

    clip-path: polygon(0% 0%, calc(100% - 70px) 0%, 100% 100%, 0% 100%);

  }

  .home-bodyParts-section .body-parts-grid .part-card {

    width: 100%;

  }

  .home-academic-section .academic-grid .academic-card .academic-info {

    padding: 20px 20px 20px 20px;

    width: calc(100% - 20px);

    left: 10px;

  }

  .home-academic-section .academic-grid .academic-card .academic-info h3 {

    margin-bottom: 32px;

  }

  .profile-card {

    padding: 10px;

  }

  .cases-detail-related-section .items {

    grid-template-columns: 1fr;

    gap: 20px 10px;

  }



  .cases-list-section .section-col-2 .items {

    gap: 10px 10px;

  }

  .cases-list-section .section-col-2 .items .item {

    width: 100%;

  }

  .cases-list-section .section-col-2 .pagination {

    flex-wrap: wrap;

  }

  .cases-detail-information-section .case-key-info-column .case-key-info ul {

    flex-direction: column;

    justify-content: space-between;

  }

  .cases-detail-information-section .case-key-info-column .case-key-info div {

    flex-direction: column;

    justify-content: space-between;

  }

  .cases-detail-images-section .media-item-list .media-item {

    width: 100%;

  }

  .cases-detail-related-section .items .item {

    width: 100%;

  }

  .contactUs-form-section .contact-info-box {

    flex-direction: column;

  }

  .contactUs-form-section .contact-form .form-row {

    gap: 18px;

    flex-direction: column;

  }

}