/*-- -------------------------- -->
<---        Portfolio Section   -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #portfolio .portfolio-container {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  #portfolio .portfolio-container .portfolio-item {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  #portfolio .portfolio-container .portfolio-item picture {
    display: block;
  }
  #portfolio .portfolio-container .portfolio-item picture img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  #portfolio .portfolio-container .portfolio-item .overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.1) 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1em;
    transition: background-image 0.3s ease-in-out;
  }
  #portfolio .portfolio-container .portfolio-item .overlay h3 {
    font-size: 1.75em;
    width: 100%;
    text-align: center;
    margin: 1em 0 0.5em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffa321;
    opacity: 1;
    font-style: italic;
  }
  #portfolio .portfolio-container .portfolio-item .overlay ul {
    list-style-type: disc;
    list-style-position: inside;
    padding-left: 1em;
    margin: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    text-align: left;
  }
  #portfolio .portfolio-container .portfolio-item .overlay ul li {
    font-size: 1.125em;
    margin-bottom: 0.5em;
    color: #fff;
  }
  #portfolio .portfolio-container .portfolio-item .overlay .button-solid-header2 {
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    margin-top: 2em;
    line-height: 2.85714286em;
    height: 2.85714286em;
    text-align: center;
    padding: 0 1.42857143em;
    position: relative;
    z-index: 1;
    border: solid 3px #ffa321;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, color 0.3s 0.1s;
  }
  #portfolio .portfolio-container .portfolio-item .overlay .button-solid-header2:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 0;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: var(--primaryDark);
    transition: width .3s;
  }
  #portfolio .portfolio-container .portfolio-item .overlay .button-solid-header2:hover {
    color: #ffa321;
    border-color: #ffa321;
  }
  #portfolio .portfolio-container .portfolio-item .overlay .button-solid-header2:hover:before {
    width: 100%;
  }
  #portfolio .portfolio-container .portfolio-item:hover .overlay {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 100%);
  }
  #portfolio .portfolio-container .portfolio-item:hover .overlay ul {
    opacity: 1;
  }
  #portfolio .portfolio-container .portfolio-item:hover .overlay .button-solid-header2 {
    opacity: 1;
  }
  #portfolio .portfolio-container .portfolio-item.in-view .overlay ul {
    opacity: 1;
  }
  #portfolio .portfolio-container .portfolio-item.in-view .overlay .button-solid-header2 {
    opacity: 1;
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #portfolio .portfolio-container {
    flex-direction: column;
  }
  #portfolio .portfolio-container .portfolio-item .overlay h3 {
    font-size: 3em;
  }
  #portfolio .portfolio-container .portfolio-item .overlay ul li {
    font-size: 2.625em;
  }
  #portfolio .portfolio-container .portfolio-item .overlay .button-solid-header2 {
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    margin-top: 2em;
    line-height: 2.85714286em;
    height: 2.85714286em;
    text-align: center;
    padding: 0 1.42857143em;
    position: relative;
    z-index: 1;
    border: solid 3px #ffa321;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, color 0.3s 0.1s;
  }
  #portfolio .portfolio-container .portfolio-item .overlay .button-solid-header2:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 0;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: var(--primaryDark);
    transition: width .3s;
  }
  #portfolio .portfolio-container .portfolio-item .overlay .button-solid-header2:hover {
    color: #ffa321;
    border-color: #ffa321;
  }
  #portfolio .portfolio-container .portfolio-item .overlay .button-solid-header2:hover:before {
    width: 100%;
  }
}
/* Desktop */
@media only screen and (min-width: 1300px) {
  #portfolio .portfolio-container {
    flex-direction: row;
  }
  #portfolio .portfolio-container .portfolio-item {
    flex: 1 1 25%;
    max-height: 26.25em;
  }
  #portfolio .portfolio-container .portfolio-item .overlay h3 {
    font-size: 1.625em;
  }
  #portfolio .portfolio-container .portfolio-item .overlay ul li {
    font-size: 1.125em;
  }
  #portfolio .portfolio-container .portfolio-item .overlay .button-solid-header2 {
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    margin-top: 2em;
    line-height: 2.85714286em;
    height: 2.85714286em;
    text-align: center;
    padding: 0 1.42857143em;
    position: relative;
    z-index: 1;
    border: solid 3px #ffa321;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, color 0.3s 0.1s;
  }
  #portfolio .portfolio-container .portfolio-item .overlay .button-solid-header2:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 0;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: var(--primaryDark);
    transition: width .3s;
  }
  #portfolio .portfolio-container .portfolio-item .overlay .button-solid-header2:hover {
    color: #ffa321;
    border-color: #ffa321;
  }
  #portfolio .portfolio-container .portfolio-item .overlay .button-solid-header2:hover:before {
    width: 100%;
  }
}
@media only screen and (max-width: 81.24em) {
  .portfolio-item.in-view .overlay ul {
    opacity: 1;
  }
  .portfolio-item.in-view .overlay .button-solid-header2 {
    opacity: 1;
  }
}
/*-- -------------------------- -->
<---        Events Section      -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #events {
    padding: 50px 0;
    background-color: var(--primaryDark);
  }
  #events .header {
    font-size: 2em;
    text-align: center;
    margin-bottom: 1em;
  }
  #events .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 1.25em;
  }
  #events .image-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    max-width: 400px;
    cursor: pointer;
  }
  #events .image-box picture {
    display: block;
    width: 100%;
  }
  #events .image-box picture img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
  #events .image-box .overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
  }
  #events .image-box .overlay .date {
    font-size: 0.875em;
    color: var(--primary);
    padding: 0.25em 0.5em;
    background-color: rgba(0, 0, 0, 0.8);
  }
  #events .image-box .overlay .text-container {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 1em;
  }
  #events .image-box .overlay .text-container .category {
    font-size: 1.25em;
    font-weight: bold;
    margin-bottom: 0.5em;
    color: var(--primaryShade);
  }
  #events .image-box .overlay .text-container .description {
    font-size: 0.875em;
    color: var(--primary);
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #events .container {
    flex-direction: column;
  }
}
/* Desktop */
@media only screen and (min-width: 1300px) {
  #events {
    padding: 3.125em 0;
  }
  #events .header {
    font-size: 3em;
    margin-bottom: 2em;
  }
  #events .container {
    flex-direction: row;
    justify-content: space-evenly;
    gap: 1.5em;
  }
  #events .container .image-box {
    max-width: 26.25em;
  }
  #events .container .image-box .overlay .date {
    font-size: 1.125em;
    padding: 0.375em 0.625em;
  }
  #events .container .image-box .overlay .text-container {
    padding: 1em;
  }
  #events .container .image-box .overlay .text-container .category {
    font-size: 1.5em;
  }
  #events .container .image-box .overlay .text-container .description {
    font-size: 1em;
  }
}
/*-- -------------------------- -->
<---        Business Section     -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #business {
    background-color: var(--primaryDark);
    padding: 3.125em 0;
  }
  #business .container {
    width: 92%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5em;
  }
  #business .container .image-box {
    position: relative;
    width: 100%;
    max-width: 25em;
    display: block;
  }
  #business .container .image-box picture {
    display: block;
  }
  #business .container .image-box picture img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  #business .container .image-box .stat {
    position: absolute;
    top: -1.5em;
    left: 1em;
    background-color: var(--primaryShade);
    padding: 1em;
    text-align: center;
  }
  #business .container .image-box .stat .count {
    display: block;
    font-size: 2em;
    font-weight: bold;
    color: #fff;
    margin-bottom: 0.25em;
  }
  #business .container .image-box .stat p {
    font-size: 0.875em;
    color: #fff;
    margin: 0;
  }
  #business .container .image-box .stat2 {
    position: absolute;
    bottom: -0.75em;
    right: 1em;
    background-color: var(--primaryShade);
    padding: 1em;
    text-align: center;
  }
  #business .container .image-box .stat2 .count {
    display: block;
    font-size: 2em;
    font-weight: bold;
    color: #fff;
    margin-bottom: 0.25em;
  }
  #business .container .image-box .stat2 p {
    font-size: 0.875em;
    color: #fff;
    margin: 0;
  }
  #business .container .content {
    width: 100%;
    text-align: center;
  }
  #business .container .content .label {
    font-size: 1em;
    color: var(--primaryShade);
    margin-bottom: 0.5em;
    font-style: italic;
  }
  #business .container .content .title {
    font-size: 1.75em;
    color: #fff;
    margin-bottom: 1em;
    line-height: 1.3;
  }
  #business .container .content .description {
    font-size: 1.125em;
    color: #fff;
    margin-bottom: 1.5em;
  }
  #business .container .content .features {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  #business .container .content .features li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5em;
    margin-bottom: 1.5em;
  }
  #business .container .content .features li i {
    font-size: 1.5em;
    color: var(--primaryShade);
  }
  #business .container .content .features li .text h4 {
    font-size: 1.25em;
    color: #fff;
    margin-bottom: 0.25em;
    font-style: italic;
  }
  #business .container .content .features li .text p {
    font-size: 1em;
    color: #fff;
    margin: 0;
    line-height: 1.4;
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #business {
    padding: 3.75em 0;
  }
  #business .container {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
  #business .container .image-box {
    flex: 1 1 40%;
    max-width: none;
  }
  #business .container .image-box .stat {
    top: -2em;
    left: 1em;
  }
  #business .container .image-box .stat2 {
    bottom: -1em;
    right: 1.5em;
  }
  #business .container .content {
    flex: 1 1 55%;
    padding-left: 2em;
  }
  #business .container .content .features li {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1em;
  }
  #business .container .content .features li i {
    margin-top: 0.25em;
  }
}
/* Desktop */
@media only screen and (min-width: 1300px) {
  #business {
    padding: 5em 0;
  }
  #business .container {
    justify-content: space-between;
  }
  #business .container .image-box {
    flex: 1 1 35%;
    max-width: none;
  }
  #business .container .image-box .stat {
    top: -2.5em;
    left: 1em;
  }
  #business .container .image-box .stat2 {
    bottom: -1.25em;
    right: 2em;
  }
  #business .container .content {
    flex: 1 1 60%;
  }
  #business .container .content .label {
    font-size: 1.125em;
  }
  #business .container .content .title {
    font-size: 2.25em;
  }
  #business .container .content .description {
    font-size: 1.125em;
  }
  #business .container .content .features li h4 {
    font-size: 1.375em;
  }
  #business .container .content .features li p {
    font-size: 1em;
  }
}
/*-- -------------------------- -->
<---        Experts Section      -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #experts {
    padding: 3.125em 0;
    background-color: var(--primaryDark);
  }
  #experts .container {
    width: 92%;
    margin: auto;
    background-color: #fff;
    border-radius: 1em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  #experts .image-box {
    width: 100%;
  }
  #experts .image-box picture {
    display: block;
  }
  #experts .image-box picture img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  #experts .content {
    padding: 1.5em 1em;
    text-align: center;
  }
  #experts .content .label {
    font-size: 1em;
    color: var(--primaryShade);
    margin-bottom: 0.5em;
    font-style: italic;
  }
  #experts .content .title {
    font-size: 1.75em;
    color: var(--bodyText);
    margin-bottom: 1em;
    line-height: 1.3;
  }
  #experts .content .description {
    font-size: 1.125em;
    color: var(--bodyText);
    margin: 0;
    line-height: 1.5;
    text-align: left;
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #experts {
    padding: 3.75em 0;
  }
  #experts .container {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  #experts .container .image-box {
    flex: 1 1 40%;
  }
  #experts .container .content {
    flex: 1 1 60%;
    padding: 2em;
  }
  #experts .container .content .label {
    font-size: 1.375em;
  }
  #experts .container .content .title {
    font-size: 2em;
  }
  #experts .container .content .description {
    font-size: 1.375em;
  }
}
/* Desktop */
@media only screen and (min-width: 1300px) {
  #experts {
    padding: 4.375em 0;
  }
  #experts .container {
    justify-content: space-between;
    flex-direction: row;
  }
  #experts .container .image-box {
    flex: 1 1 45%;
  }
  #experts .container .content {
    flex: 1 1 50%;
  }
  #experts .container .content .label {
    font-size: 1.125em;
  }
  #experts .container .content .title {
    font-size: 1.75em;
  }
  #experts .container .content .description {
    font-size: 1em;
    text-align: left ;
  }
}