embed,
img,
object,
video {
  max-width: 100%;
}
sup {
  font-size: 58.3%;
  vertical-align: text-top;
}
sub {
  font-size: 58.3%;
  vertical-align: text-bottom;
}
.no-space-between-inline-blocks {
  *letter-spacing: normal; /*reset IE < 8*/
  letter-spacing: -0.31em; /*webkit*/
  word-spacing: -0.43em; /*IE < 8 && gecko*/
}
/*restore spacing on inner elements*/
.no-space-between-inline-blocks > * {
  letter-spacing: normal;
  word-spacing: normal;
}
.displace {
  left: -5000px;
  position: absolute;
}
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,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, textarea {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
  margin-top: 0;
}
.COLS_IN_ROW_WITHOUT_GAP {
  margin-left: -15px;
  margin-right: -15px;
}
.navbar-nav > li > a {
  padding: unset;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:active,
.navbar-nav > li > a:focus {
  background: unset;
}
a {
  color: #FFFFFF;
  text-decoration: none;
}
a:hover {
  color: #e9c900;
  text-decoration: none;
}
a:active, a:focus{
    text-decoration: none;
    outline: none;
    color: #e9c900;
}
.col-logo a:hover, .col-logo a:active, .col-logo a:focus{
    color: #FFFFFF;
}
h1{
      color: #e8c900;
      font-size: 3rem;
}
.rtl {
    direction: rtl;
}

@media (min-width:1200px){
  .auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
  .auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
  .auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
  .auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
  .auto-clear .col-lg-6:nth-child(odd){clear:left;}
}
@media (min-width:992px) and (max-width:1199px){
  .auto-clear .col-md-1:nth-child(12n+1){clear:left;}
  .auto-clear .col-md-2:nth-child(6n+1){clear:left;}
  .auto-clear .col-md-3:nth-child(4n+1){clear:left;}
  .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
  .auto-clear .col-md-6:nth-child(odd){clear:left;}
}
@media (min-width:768px) and (max-width:991px){
  .auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
  .auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
  .auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
  .auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
  .auto-clear .col-sm-6:nth-child(odd){clear:left;}
}
@media (max-width:767px){
  .auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
  .auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
  .auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
  .auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
  .auto-clear .col-xs-6:nth-child(odd){clear:left;}
}
html {
  font-size: 10px;
}
body {
  color: #ffffff;
  background: #0f0f0f;
  font-family: Poppins, sans-serif;
  font-size: 1.8rem; /* 18px / 10px = 1.8rem */
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0;
  text-decoration: none;
  overflow-x: hidden;
}
@media (max-width: 768px) {
html {
  font-size: 8px;
}
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Small devices (≥576px) */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
    /* body{
        background-color: red;
    } */
}

/* Medium devices (≥768px) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
    /* body{
        background-color: green;
    } */
    .col{ padding: 8.4rem 0 4.7rem;}
    .dvr{
        left: -35% !important;
    }
    .vr-headset{
        right: -45% !important;
    }
}

/* Large devices (≥992px) */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
    /* body{
        background-color: yellow;
    } */
    .dvr{
        left: -10% !important;
    }
    .vr-headset{
        right: -30% !important;
    }
}

/* Extra large devices (≥1200px) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    /* body{
        background-color: pink;
    } */
}

/* Extra extra large devices (≥1400px) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    /* body{
        background-color: blue;
    } */
}

/* .container {
    width: 1200px;
}
@media (min-width: 1200px) {
    .container {
    width: 1400px;
    }
} */

.text-item a:link,
a.text-item:link {
  /* color: #ffffff; */
  font-size: 1.6464rem; /* 16.46px / 10px = 1.646rem */
  letter-spacing: 0;
}
.text-item.selected a,
a.text-item.selected {
  color: #e9c900;
  text-decoration: none;
}
a.text-item{
  text-decoration: none;
}
a.text-item:hover{
    color: #e9c900;
}
.global_container_ {
  float: none;
  height: auto;
  margin: 0 auto;
  position: relative;
  /* background: url(images/background.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; */
}
.rectangle-1-holder {
  position: relative;
  /* background: #0c0c0c; */
  background-position: center center;
}
.col {
  padding: 8.4rem 0 4.7rem;
  position: relative;
  /* background: url(images/beautiful-black-night-sky.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; */
}
.col-data-wrapper {
  margin: 10px auto 0;
  position: relative;
}
.col-4 {
  margin: 0 auto;
  /*padding: 0 9.649123%; */
  position: relative;
}
.hablilaw {
  color: #909090;
  font-size: 5rem; /* 58.05px / 10px = 5.805rem */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: left;
}
.text {
  margin: 10px 0 0 auto;
  font-weight: 500;
  line-height: 20px;
  font-size: 14px;
}
@media (max-width: 768px) {
.col-4 {
  margin-bottom: 20px;
}
}
.menu {
  margin: 5px auto 0;
  max-width: 744px;
  min-height: 48px;
  padding: 13px 25px; /* 32px / 760px = 4.210526% */
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.28); /*stroke*/
  -webkit-border-radius: 23.77px;
  -moz-border-radius: 23.77px;
  border-radius: 30px;
  background: rgba(12, 12, 12, 0.49);
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; /*Will not allow bg color to leak outside borders*/
  background-position: center center;
}
.nav-2 {
  margin: 0 auto;
  position: relative;
}
.navbar-default {
  background-color: transparent;
}
@media (max-width: 768px) {
.navbar-collapse {
  background-color: rgba(255, 255, 255, 0.8);
}
.navbar-collapse > ul {
  padding: 5px;
}
.nav-2 {
  margin: 0 0 0 auto;
}
}
.nav-list {
  position: relative;
  width: fit-content;
  list-style: none;
  margin: 0 auto;
  float: none;
}
.nav-item-4-5 {
  max-width: 73px;
  position: absolute;
  right: 1px;
  top: 0;
  width: 73px;
  line-height: unset;
}
@media (max-width: 768px) {
.nav-item-4-5 {
  display: block;
  margin: 15px auto;
  position: relative;
  width: 100%;
  width: auto;
  min-width: unset;
  max-height: unset;
  min-height: unset;
  top: unset;
  bottom: unset;
  left: unset;
  right: unset;
}
}
.nav-item-4-4 {
  max-width: 80px;
  position: absolute;
  right: 114px;
  top: 0;
  width: 80px;
  line-height: unset;
}
@media (max-width: 768px) {
.nav-item-4-4 {
  display: block;
  margin: 15px auto;
  position: relative;
  width: 100%;
  width: auto;
  min-width: unset;
  max-height: unset;
  min-height: unset;
  top: unset;
  bottom: unset;
  left: unset;
  right: unset;
}
}
.nav-list li {
  margin: 0 29px 0 0; /* 40px / 675px = 5.925926% */
}
@media (max-width: 768px) {
.nav-list li {
  margin: 0 auto;
  text-align: center;
}
}
.nav-list li:last-child {
  margin-right: 0;
}
.nav-item-1 {
  line-height: unset;
}
.nav-item-4 {
  line-height: unset;
}
.nav-item-4-2 {
  line-height: unset;
}
.nav-item-4-3 {
  line-height: unset;
}
@media (max-width: 768px) {
.menu {
  margin-bottom: 20px;
  display: none;
}
}
.text-2 {
  margin: 9.7rem 43.950478% 0; /* 781px / 1777px = 43.950478% */
  position: relative;
  color: #e8c900;
  font-size: 3rem; /* 30px / 10px = 3rem */
}
.wrapper-4 {
  margin: 0px auto 0;
  min-height: 666px;
  position: relative;
  width: 99.83118%; /* 1774px / 1777px = 99.83118% */
}
.text-3 {
  left: 50%;
  position: absolute;
  top: 102px;
  width: 44.64487%; /* 792px / 1774px = 44.64487% */
  margin-left: -107px;
}
.text-4 {
  left: 50%;
  position: absolute;
  top: 436px;
  width: 45.603157%; /* 809px / 1774px = 45.603157% */
  line-height: 25px;
  margin-left: -107px;
}
.rectangle-12 {
  left: 50%;
  max-width: 410px;
  position: absolute;
  top: 108px;
  width: 100%;
  margin-left: -687px;
}
.rectangle-15-holder {
  left: 50%;
  min-height: 230px;
  position: absolute;
  top: 0;
  width: 16.572718%; /* 294px / 1774px = 16.572718% */
  background: url(images/rectangle_15.png) no-repeat center 0;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  margin-left: -832px;
}
.rectangle-15-copy {
  bottom: 18px;
  left: 50%;
  max-width: 252px;
  position: absolute;
  width: 100%;
  margin-left: -127px;
}
@media (max-width: 768px) {
.rectangle-15-copy {
  display: block;
  margin: 15px auto;
  position: relative;
  width: 100%;
  width: auto;
  min-width: unset;
  max-height: unset;
  min-height: unset;
  top: unset;
  bottom: unset;
  left: unset;
  right: unset;
}
}
.rectangle-9-holder {
  left: 50%;
  min-height: 329px;
  padding: 14px 1.352875% 11.5rem; /* 24px / 1774px = 1.352875% */
  position: absolute;
  top: 159px;
  width: 16.17813%; /* 287px / 1774px = 16.17813% */
  background: url(images/rectangle_9.png) no-repeat center 0;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  margin-left: -469px;
}
.rectangle-9-copy {
  display: block;
  margin: 0 auto;
  max-width: 207px;
  position: relative;
  right: 6.694561%;
  width: 100%;
}
@media (max-width: 768px) {
.rectangle-9-copy {
  right: 0;
}
}
.rectangle-3-holder {
  left: 50%;
  min-height: 343px;
  padding: 3.3rem 2.029312% 7.8rem; /* 36px / 1774px = 2.029312% */
  position: absolute;
  top: 282px;
  width: 21.984217%; /* 390px / 1774px = 21.984217% */
  background: url(images/rectangle_3.png) no-repeat center 0;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  margin-left: -887px;
}
.rectangle-3-copy {
  display: block;
  left: 8.333333%;
  margin: 0 auto;
  max-width: 265px;
  position: relative;
  width: 100%;
}
@media (max-width: 768px) {
.rectangle-3-copy {
  left: 0;
}
}
.casette {
  left: 50%;
  max-width: 490px;
  position: absolute;
  top: 194px;
  width: 100%;
  margin-left: -688px;
}
.line-1-copy-3 {
  height: 2px;
  left: 50%;
  max-width: 1169px;
  position: absolute;
  top: 66px;
  width: 65.89628%; /* 1169px / 1774px = 65.89628% */
  border: 1px solid rgba(255, 255, 255, 0.2); /*stroke*/
  background: rgba(244, 191, 20, 0.2);
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; /*Will not allow bg color to leak outside borders*/
  margin-left: -282px;
}
.gray-line{
    height: 2px;
    left: 40%;
    width: 75%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background:rgba(244, 191, 20, 0.2);
    background-clip: border-box;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin: 3rem 0 10px 25%;
}
@media (max-width: 1774px) {
.wrapper-4 {
  left: 0;
  right: 0;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
}
.footer {
  margin: 18.4rem auto 0;
  position: relative;
}
.text-5 {
  margin: 2px auto 0;
  color: #e9c900;
  font-size: 5.5rem; /* 55px / 10px = 5.5rem */
  font-weight: bold;
  text-align: right;
}
@media (max-width: 768px) {
.text-5 {
  margin-bottom: 20px;
}
}
.col-2 {
  margin: 0 auto;
  position: relative;
}
.vector-smart-object-copy-16 {
  display: block;
  margin: 0 0 0 0.692042%; /* 4px / 578px = 0.692042% */
  max-width: 167px;
  position: relative;
  width: 100%;
}
.nav-2-2 {
  margin: 17px 0 0;
  position: relative;
}
.nav-3{ display: flex;}
.nav-3 ul li{
    width: 35px;
    height: 30px;
    text-align: center;
    margin-left: 10px;
}
.mr-3{
    padding-right: 3rem !important;
}
.p-0{
    padding: 0;
}
@media (max-width: 768px) {
.navbar-collapse {
  background-color: rgba(255, 255, 255, 0.8);
}
.navbar-collapse > ul {
  padding: 5px;
}
.nav-2-2 {
  margin: 0 0 0 auto;
}
}
.nav-list-2 {
  position: relative;
  width: 100%;
  list-style: none;
}
.nav-list-2 li {
  margin: 0 15px 0 0; /* 25px / 578px = 4.32526% */
}
.nav-list-2 li a.selected{
    color: #e9c900;
}
@media (max-width: 768px) {
.nav-list-2 li {
  margin: 0 auto;
  text-align: center;
}
}
.nav-list-2 li:last-child {
  margin-right: 0;
}
.nav-item-1-2 {
  color: #fff8f3;
  font-size: 1.5rem;
  text-align: center;
}
.nav-item-1-3 {
  color: #fff8f3;
  font-size: 1.5rem;
  text-align: center;
}
.nav-item-1-4 {
  color: #fff8f3;
  font-size: 1.8rem;
  text-align: center;
}
.nav-item-1-5 {
  color: #fff8f3;
  font-size: 1.5rem;
  text-align: center;
}
.nav-item-1-6 {
  color: #fff8f3;
  font-size: 1.5rem;
  text-align: center;
}
.nav-item-1-7 {
  color: #fff8f3;
  font-size: 1.5rem;
  text-align: center;
}
@media (max-width: 768px) {
    .col-2 {
    margin-bottom: 20px;
    }
}
.group-3 {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  justify-content: center;
  margin: 10.1rem auto 0;
  position: relative;
}
.text-6 {
  display: inline-block;
  font-size: 1.6rem; /* 16px / 10px = 1.6rem */
  font-weight: 500;
  text-transform: uppercase;
}
.text-7 {
  display: inline-block;
  margin: 0 0 0 10px;
  font-size: 1.5rem; /* 15px / 10px = 1.5rem */
  font-weight: 300;
  text-transform: uppercase;
}
.container-2 {
  position: relative;
}
.text-style-3 {
  line-height: 25px;
}
.text-style-2 {
  font-size: 2.8rem; /* 28px / 10px = 2.8rem */
  line-height: 37px;
}
.text-style-5{
    font-size: 2.8rem;
    line-height: 35px;
    color: #e9c900;
}
.text-conent{
    padding: 3rem 0;
}
.about-description p:nth-of-type(1),
.about-description p:nth-of-type(2),
.about-description p:nth-of-type(3){
    font-size: 2.8rem;
    line-height: 37px;
}
.overview-description p:last-child{
    font-size: 2.8rem;
    line-height: 35px;
    color: #e9c900;
}
.mb-100{
    margin-bottom: 10rem;
}
.colore9c900 {
  color: #e9c900;
}
.text-style-4 {
  display: block;
  line-height: 12px;
  margin-bottom: 0;
}
.text-style {
  display: block;
  line-height: 18px;
  margin-bottom: 0;
}

/* People vs. Page css */
.page-title {
    font-size: 1.8rem;
    color: #ffd700;
    position: relative;
    padding-left: 15px;
    margin-bottom: 40px;
}

.page-title:before {
    content: "/";
    position: absolute;
    left: 0;
    color: #ffd700;
}

.divider {
    height: 1px;
    background-color: #333;
    margin-bottom: 40px;
}

.case-sidebar {
    padding: 0 20px;
    border:1px solid #333;
    width: 90%;
}
.case-sidebar.single-page{
    background-color: #e8c900;
    color: #000000;
    padding: 20px;
}
.case-sidebar.single-page .case-label{
    margin-top: 0;
    color: #000000;
}
.case-sidebar.single-page .case-year {
    font-size: 1.8rem;
    color: #000000;
}
.case-sidebar.single-page .case-nav-item{
    margin-bottom: 15px;
    border-bottom: thin solid #000;
    padding-bottom: 15px;
}
.case-sidebar.single-page h2{
    font-size: 2rem;
    color: #000000;
    margin-bottom: 15px;
}
.case-nav {
    list-style: none;
    padding: 0;
    padding-top: 15px;
}

.case-nav-item {
    margin-bottom: 30px;
}

.case-label {
    color: #666;
    font-size: 2.4rem;
    margin-bottom: 5px;
    margin-top: 30px;
}

.case-year {
    font-size: 2.3rem;
    color: #fff;
}
a:hover .case-year,
a.active .case-year{
    color: #e8c900;
}
.case-nav-item:not(:last-child) {
    position: relative;
}

.case-nav-item:not(:last-child):after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #333;
}

.case-content {
    margin-bottom: 60px;
}

.case-number {
    color: #ffd700;
    font-size: 2rem;
    margin-bottom: 10px;
}

.case-year-header {
    color: #999;
    font-size: 2.2rem;
    margin-bottom: 5px;
}
.case-year-header.first-child {
    margin-top: 4.5rem;
}
.case-title {
    font-size: 2.6rem;
    margin-bottom: 20px;
}

.case-description {
    border: 1px solid #333;
    padding: 25px;
    margin-bottom: 20px;
    font-size: 1.8rem;
    line-height: 1.6;
}

.read-more {
    background-color: #ffd700;
    color: #000;
    border: none;
    border-radius: 30px;
    padding: 8px 25px;
    font-size: 1.8rem;
    font-weight: 600;
    transition: all 0.3s;
}

.read-more:hover {
    background-color: #e6c300;
}

.pagination {
    margin-top: 50px;
    justify-content: center;
}

.page-item .page-link {
    background-color: transparent;
    border: none;
    color: #fff;
    margin: 0 5px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}
.pagination > li:first-child > a, .pagination > li:first-child > span,
.pagination > li:last-child > a, .pagination > li:last-child > span{
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    border-radius: 50%;
}
.page-item.active .page-link {
    background-color: #ffd700;
    color: #000;
}

.page-item .page-link:hover, .pagination > li:first-child > a:hover {
    background-color: #333;
    color: #FFFFFF;
}
.mt-3{
    margin-top: 3rem;
}
.mt-4{
    margin-top: 4rem;
}
.header-wrapper{
    border-bottom: 2px solid #3a3a3a;
    padding-bottom: 3rem;
}
.ml-15{
    margin-left: 15px;
}

.audio-container {
    width: 90%;
    padding: 20px;
    text-align: center;
    margin-top: 6rem;
}

.profile-pic {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
}

.profile-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.user-name {
    font-size: 18px;
    font-weight: bold;
    margin-right: 10px;
}

.waveform {
    display: inline-block;
    width: 120px;
    height: 20px;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIGZpbGw9IiNmZmYiPgogICAgPHJlY3QgeD0iMCIgeT0iOCIgd2lkdGg9IjIiIGhlaWdodD0iNCIgLz4KICAgIDxyZWN0IHg9IjQiIHk9IjYiIHdpZHRoPSIyIiBoZWlnaHQ9IjgiIC8+CiAgICA8cmVjdCB4PSI4IiB5PSI0IiB3aWR0aD0iMiIgaGVpZ2h0PSIxMiIgLz4KICAgIDxyZWN0IHg9IjEyIiB5PSIyIiB3aWR0aD0iMiIgaGVpZ2h0PSIxNiIgLz4KICAgIDxyZWN0IHg9IjE2IiB5PSIzIiB3aWR0aD0iMiIgaGVpZ2h0PSIxNCIgLz4KICAgIDxyZWN0IHg9IjIwIiB5PSI4IiB3aWR0aD0iMiIgaGVpZ2h0PSI0IiAvPgogICAgPHJlY3QgeD0iMjQiIHk9IjUiIHdpZHRoPSIyIiBoZWlnaHQ9IjEwIiAvPgogICAgPHJlY3QgeD0iMjgiIHk9IjkiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIC8+CiAgICA8cmVjdCB4PSIzMiIgeT0iNiIgd2lkdGg9IjIiIGhlaWdodD0iOCIgLz4KICAgIDxyZWN0IHg9IjM2IiB5PSIzIiB3aWR0aD0iMiIgaGVpZ2h0PSIxNCIgLz4KICAgIDxyZWN0IHg9IjQwIiB5PSIxIiB3aWR0aD0iMiIgaGVpZ2h0PSIxOCIgLz4KICAgIDxyZWN0IHg9IjQ0IiB5PSI0IiB3aWR0aD0iMiIgaGVpZ2h0PSIxMiIgLz4KICAgIDxyZWN0IHg9IjQ4IiB5PSI3IiB3aWR0aD0iMiIgaGVpZ2h0PSI2IiAvPgogICAgPHJlY3QgeD0iNTIiIHk9IjkiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIC8+CiAgICA8cmVjdCB4PSI1NiIgeT0iNSIgd2lkdGg9IjIiIGhlaWdodD0iMTAiIC8+CiAgICA8cmVjdCB4PSI2MCIgeT0iNCIgd2lkdGg9IjIiIGhlaWdodD0iMTIiIC8+CiAgICA8cmVjdCB4PSI2NCIgeT0iNyIgd2lkdGg9IjIiIGhlaWdodD0iNiIgLz4KICAgIDxyZWN0IHg9IjY4IiB5PSI2IiB3aWR0aD0iMiIgaGVpZ2h0PSI4IiAvPgogICAgPHJlY3QgeD0iNzIiIHk9IjkiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIC8+CiAgICA8cmVjdCB4PSI3NiIgeT0iNSIgd2lkdGg9IjIiIGhlaWdodD0iMTAiIC8+CiAgICA8cmVjdCB4PSI4MCIgeT0iMyIgd2lkdGg9IjIiIGhlaWdodD0iMTQiIC8+CiAgICA8cmVjdCB4PSI4NCIgeT0iNiIgd2lkdGg9IjIiIGhlaWdodD0iOCIgLz4KICAgIDxyZWN0IHg9Ijg4IiB5PSI4IiB3aWR0aD0iMiIgaGVpZ2h0PSI0IiAvPgogICAgPHJlY3QgeD0iOTIiIHk9IjUiIHdpZHRoPSIyIiBoZWlnaHQ9IjEwIiAvPgogICAgPHJlY3QgeD0iOTYiIHk9IjIiIHdpZHRoPSIyIiBoZWlnaHQ9IjE2IiAvPgogICAgPHJlY3QgeD0iMTAwIiB5PSI3IiB3aWR0aD0iMiIgaGVpZ2h0PSI2IiAvPgogICAgPHJlY3QgeD0iMTA0IiB5PSI0IiB3aWR0aD0iMiIgaGVpZ2h0PSIxMiIgLz4KICAgIDxyZWN0IHg9IjEwOCIgeT0iOCIgd2lkdGg9IjIiIGhlaWdodD0iNCIgLz4KICAgIDxyZWN0IHg9IjExMiIgeT0iNiIgd2lkdGg9IjIiIGhlaWdodD0iOCIgLz4KICAgIDxyZWN0IHg9IjExNiIgeT0iOSIgd2lkdGg9IjIiIGhlaWdodD0iMiIgLz4KICA8L2c+Cjwvc3ZnPgo=') no-repeat;
}

.audio-controls {
    background-color: #fff;
    height: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    position: relative;
}

.play-button {
    width: 24px;
    height: 24px;
    background-color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 10px;
}

.play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #fff;
    margin-left: 2px;
}

.progress-bar {
    flex-grow: 1;
    height: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.progress {
    width: 0%;
    height: 100%;
    background-color: #000;
    border-radius: 2px;
    position: relative;
}

.progress-thumb {
    width: 12px;
    height: 12px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
}

.time-display {
    margin-left: 15px;
    color: #000;
    font-size: 14px;
    min-width: 40px;
    text-align: right;
}
/* */
.aboutus-image img{
    width: 100%;
    margin-top: 3rem;
}



.mobile-view{
    display: none !important;
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s ease-in-out infinite;
    margin-right: 5px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Alert styles */
.alert {
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease-in-out;
}

.alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media screen and (min-width: 768px)  and  (max-width: 912px) {
    .text-5{
        text-align: left;
    }
}
@media (min-width: 992px) and  (max-width: 1400px){
    body{
        overflow-x: hidden;
    }
    .menu{
        padding: 10px 10px;
        max-width: 100%;
    }
    .nav-list li{
        margin: 0 15px 0 0;
    }
    .gray-line{
        margin-top: 3rem;
    }
    .news-text{
        font-size: 1.8rem !important;
    }
    .navbar-collapse{
        padding-right: 0;
        padding-left: 0;
    }
}
@media (min-width: 992px) and  (max-width: 1024px){

    .nav-list li{
        margin: 0 10px 0 0;
    }
    .col{
        padding: 4rem 0 4rem;
    }
}

@media (min-width: 768px) {
    body {
        overflow-x: hidden;
    }
    .menu{
        margin-top: 25px;
    }
    .nav-list li{
        margin: 0 20px 0 0;
    }
    .text-5{
        /* float: left; */
        margin: 0 !important;
        right: 0 !important;
    }


    .case-sidebar{
        width: 100%;
        margin-top: 6rem;
    }
}

@media screen and (max-width: 768px) {
    .polaroid-1{
        left: 0 !important;
    }
    .polaroid img{
        filter:grayscale(0%) !important;
    }
  body.menu-lock {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  }
  .navbar-toggle {
  position: fixed;
  right: 5px;
  top: 5px;
  background: #e8c900;
  z-index: 101;
  margin: auto;
  }
  .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
    background-color: #e8c900;
  }
  .navbar-default .navbar-toggle{ border-color: #909090;}
  .navbar-default .navbar-toggle .icon-bar{ background-color:#909090; }
  .navbar-collapse {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100% !important;
  padding-top: 50px;
  background: black;
  z-index: 100;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  }
  .navbar-collapse.collapse{
    height: 100% !important;
    display: none !important;
    overflow-y: auto !important;
  }
  .collapse.in{
    display: block !important;
  }
  .navbar-nav>li{
    float: none;
  }
  .navbar-toggle{ display: block;}
  .navbar-collapse li p,
  .navbar-collapse li a {
  font-size: 20px;
  padding: 20px 0px;
  }
}

@media (max-width: 768px) {
    .text-2 {
    margin: 8% 0 0 0; /* 781px / 768px = 101.69271% */
    }
    .hablilaw,
    .text{
        text-align: left;
        padding:0;
    }
    .p-sm-0{
        padding: 0;
    }
    .col{ padding: 0rem 0 4.7rem; }
    .text-3,
    .text-4{
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        margin-left: 0;
    }
    .web-view{ display: none;}
    .text-5{ text-align: center;}
}
@media (max-width: 768px) {
    .footer {
    margin: 10% auto 0;
    }
}
@media (max-width: 768px) {
    .group-3 {
    margin: 25px auto 0;
    }
    .case-sidebar{
        width: 100%;
        margin-top: 6rem;
    }
    .audio-container{ width: 100%; }
    .social-media .navbar-nav > li {
        float: left;
    }
    .nav-3 {
        justify-content: center;
        align-items: center;
    }
    .mb-100{margin-bottom: 4rem;}
    .gray-line{
        width: 100%;
        margin: 1rem 0 10px 0;
    }

    .practice-area-container{
        display: block !important;
    }
    .sticky-container{
        width: 100% !important;
        margin-bottom: 20px;
        border-top: 2px solid rgba(255, 255, 255, 0.2);
        padding-top: 3rem;
    }
    .practice-area-card{
        border-top: none;
        padding: 20px;
    }
    .vr-headset, .dvr{
        display: none;
    }
    .text-5{
        right: 0 !important;
        float: none !important;
        margin-bottom: 15px !important;
    }
    .group-3{
        text-align: center;
        margin: 45px auto 0 !important;
        flex-direction: column;
    }
    .polaroid-section{
        /* height: auto !important; */
        height: 300px !important;
        margin: 0 !important;
    }
    .polaroid{
        /* width: 48% !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: translateX(0%) rotate(0deg) !important;
        margin-bottom: 15px;
        margin-left: 1% !important;
        margin-right: 1% !important;
        float: left; */
        padding: 10px 10px 15px !important;
        width: 150px !important;
        min-height: 150px !important;
    }
    .polaroid figure,
    .polaroid img{
        height: 135px !important;
    }
    .polaroid .caption{
        margin-top: 5px !important;
    }
    .polaroid-2 {
        top: -10% !important;
    }
    .polaroid-3 {
        top: 10% !important;
    }
    .polaroid-4 {
        top: -20% !important;
        left: 65% !important;
    }

    .polaroid-5 {
        top: 40% !important;
        left: 75% !important;
    }
    .home-center{
        margin: 5rem 0 10rem 0 !important;
    }
    .mobile-view{
        display: block !important;
    }
    .practice-area-container .image-container{
        display: none !important;
    }
    .practice-area-container .sticky-container{
        padding-top: 0;
        margin-bottom: 0;
    }
    .practice-area-card:first-child{
        border-top: none !important;
    }
    .practice-area-container figure{
        margin-bottom: 20px;
    }
    .practice-description,
    .practice-title{
        opacity: 1 !important;
    }
    .practice-number{
        margin-left: 0 !important;
    }
    .article-issue{
        direction: rtl;
        font-size: 2.4rem !important;
    }
    .nav-arrow{ width: 35px !important;}
    .prev-arrow{ left: 5px !important; }
    .next-arrow{ right: 5px !important; }
}


@media (max-width: 576px) {
    .about-description p:nth-of-type(1), .about-description p:nth-of-type(2), .about-description p:nth-of-type(3){
        font-size: 2.4rem;
        line-height: 30px;
    }
    .text-conent{
        padding: 2rem 0;
    }
    .mb-100{
        margin-bottom: 2rem;
    }
    .polaroid-section{
        top: 45px;
    }
    .polaroid{
        padding: 10px 10px 10px !important;
        width: 125px !important;
        min-height: 125px !important;
    }
    .polaroid figure,
    .polaroid img{
        height: 115px !important;
    }
    .polaroid .caption{
        margin-top: 5px !important;
        font-size: 14px !important;
    }

    .polaroid-1 {
        top: 20% !important;
        left: 5% !important;
    }
    .polaroid-2 {
        top: -10% !important;
        left: 10% !important;
    }
    .polaroid-3 {
        top: 5% !important;
        left: 28% !important;
    }
    .polaroid-4 {
        top: -20% !important;
        left: 50% !important;
    }

    .polaroid-5 {
        top: 40% !important;
        left: 55% !important;
    }
    .polaroid-6{
        /* left: 80% !important; */
        top: 5% !important;
        right: 22px !important;
        left: auto !important;
    }
    .article-logo{
        height: 35px !important;
    }
    .text-60{
        font-size: 3rem !important;
        line-height: 40px !important;
    }

    .home-center{
        margin: 8rem 0 10rem 0 !important;
    }
    .ml-15{
        margin-left: 0 !important;
    }
}