/*!
Theme Name: OJA Theme
Description: A modern, clean, and flexible WordPress theme built for full compatibility with the Gutenberg block editor. Ideal for creating visually rich, fast, and accessible websites with ease. Includes support for custom blocks, wide and full alignments, and all core Gutenberg features.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: oja-theme
Tags: Custom-Background, Custom-Logo, Custom-Menu, Featured-Images, Threaded-Comments, Translation-Ready, Block-Styles, Wide-Alignments, Editor-Style



This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

oja-theme is based on Webytude https://webytude.com/, (C) 2012-2020 Automattic, Inc.
Webytude is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

@font-face {
    font-family: 'Campton';
    src: url('assets/fonts/Campton-Medium.woff') format('woff2'),
        url('assets/fonts/Campton-Medium.woff2') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Campton Book';
    src: url('assets/fonts/Campton-Book.woff2') format('woff2'),
        url('assets/fonts/Campton-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ========== Base ========== */
.site-topbar {
  background: var(--color-background-white); /* #FAF9F7; */
  position: relative;
  z-index: 1000;
}
.topbar-inner {
  max-width: var(--container-width);
  margin: auto;
  padding: 13px var(--padding-20);
}
.topbar-center {
  grid-column: 2;
  text-align: center;
}
.topbar-right {
  grid-column: 3;
  text-align: right;
}
.site-header {
  width: 100%;
  background: var(--color-white);
  color: var(--text-color);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition:
    transform 0.45s ease,
    background-color 0.35s ease,
    /* border-color 0.35s ease,
    box-shadow 0.35s ease, */
    color 0.25s ease;
}
.site-header.is-sticky .header-inner {
  padding: var(--padding-20); 
}
.site-header.nav-hidden {
  transform: translateY(-100%);
}
.header-inner {
  max-width: var(--container-width);
  margin: auto;
  padding: 45px var(--padding-20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding 0.3s ease;
}
.header-center {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* ========== Navigation ========== */
.main-navigation {
  transition: opacity 0.25s ease;
}
.main-navigation ul {
  display: flex;
  gap: 28px;
  list-style: none;
}
.main-navigation a {
  text-decoration: none;
  font-weight: 500;
  font-size: 17px;
}
.main-navigation a:hover {
  color: var(--color-brand);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-20);
}
.cursor-pointer {
  cursor: pointer;
}
.search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
}
.search-submit,
.search-toggle {
  color: var(--color-text-dark);
}
.search-submit:hover,
.search-toggle:hover {
  color: var(--color-text-blue);
}

/* ========== Search ========== */
.header-search {
  position: absolute;
  top: -15px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: var(--transition);
}
.search-inner {
  display: flex;
  align-items: center;
  gap: 25px;
}
.site-header.search-open .header-search {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.site-header.search-open .main-navigation,
.site-header.search-open .search-toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.search-box input {
  flex: 1;
  padding: 15px 32px;
  border-radius: 200px;
  border: 1px solid var(--border-dark);
  font-family: var(--font-primary);
  font-size: 17px;
  line-height: 24px;
  width: 687px;
}
.search-box .search-submit {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 15px;
  right: 32px;
}
.search-box {
  position: relative;
}
.search-close {
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle,
.menu-close {
  display: none;
}



 .btn-anchor{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
  }
  .btn-anchor::after {
    content: "";
    -webkit-mask: url("assets/images/chevron.svg") no-repeat center / contain;
    mask: url("assets/images/chevron.svg") no-repeat center / contain;
    background-color: var(--color-black);
    width: 13px;
    height: 16px;
  }

  .btn-anchor:hover::after{
    background-color: var(--color-text-blue);
  }


.addtoany_list.a2a_kit_size_32 a {
  font-size: 17px !important;
}
/* ========== Footer ========== */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0px var(--padding-20);
}
.section {
  padding: 100px 0px;
}
.footer {
  background: var(--color-text-dark);
  overflow: hidden;
  position: relative;
}
.footer-wrapper {
  background: #2B2B2B99;
  backdrop-filter: blur(200px);
  position: relative;
  color: var(--color-light);
  padding: 70px 0px 30px;
}
.round-bg1,
.round-bg2,
.round-bg3 {
  position: absolute;
}
.round-bg1 {
  background: url(./assets/images/rount1.png) 0px 0px no-repeat;
  width: 896px;
  height: 380px;
  right: 118px;
  top: 0;
}
.round-bg2 {
  background: url(./assets/images/round2.png) 0px 0px no-repeat;
  width: 238px;
  height: 428px;
  right: 0;
  top: 145px;
}
.round-bg3 {
  background: url(./assets/images/round3.png) 0px 0px no-repeat;
  width: 302px;
  height: 151px;
  right: 276px;
  bottom: 0;
}
.footer-top {
  display: grid;
  align-items: end;
  gap: 24px;
}
.footer-divider {
  border: none;
  border-bottom:1px solid var(--color-light);
}
.footer-bottom {
  display: grid;
  gap: 60px;
  position: relative;
}
.footer-logos {
  margin-bottom: 20px;
}
.footer-description {
  margin-bottom: 50px;
  color: var(--color-light);
}
.footer-brand address {
  font-style: normal;
  font-size: 13px;
  line-height: 16px;
}
.footer-brand address strong {
  display: block;
}
.footer-brand address a {
  color: var(--color-light);
  text-decoration: none;
}
.footer-col h4 {
  margin-bottom: 21px;
  font-size: 18px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
}
.footer-col ul li {
  margin-bottom: 5px;
}
.footer-col ul li a {
  color: var(--color-light);
  text-decoration: none;
}
.footer-col ul li a:hover {
  color: #fff;
}
.social-icons {
  display: flex;
  gap: 14px;
  margin: 28px 0px 24px;
  margin-bottom: 24px;
}
.social-icons a {
  color: var(--color-light);
  text-decoration: none;
}
.footer-copy {
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
}
.footer-connected h3 {
  font-family: 'Campton', sans-serif;
  font-size: 29px;
  line-height: 36px;
  font-weight: 500;
  margin-bottom: 8px;
}
.footer-connected p {
  font-size: 22px;
  line-height: 32px;
  max-width: 607px;
}
.wpcf7-text {
  width: 100%;
  border: 1px solid var(--color-light);
  background: none;
  font-size: 17px;
  line-height: 24px;
  color: var(--color-light);
  border-radius: 200px;
  padding: 23px 32px;
}
.footer-top .wpcf7-form {
  position: relative;
}
.wpcf7-spinner {
  display: none;
}
.footer-col .btn-secondary {
  color: var(--color-light);
  border-color: var(--color-light);
}
.artical-box {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  gap: 20px;
}
.featured-box h3 {
  font-family: 'Campton', sans-serif;
  font-weight: normal;
}
.f_title {
  font-size: 22px;
  line-height: 28px;
  padding-top: 19px;
  padding-bottom: 7px;
}
.menu_heading {
  font-size: 29px;
  line-height: 36px;
}
.menu-card-box .menu_heading {
  padding: 54px 0px 32px;
}
.border-orange {
  border-bottom: 12px solid var(--color-oja-orange);
}
.border-blue {
  border-bottom: 12px solid var(--color-oja-turquoise);
}
.border-yellow {
  border-bottom: 12px solid var(--color-oja-yellow);
}
.list-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.flex-actions {
  display: flex;
  justify-content: space-between;
}
.menu-contact {
  margin-top: 30px;
}
.menu-connect .social-icons {
  margin-top: 12px;
}
.image-caption {
  font-weight: 500;
  font-size: 13px;
  padding-top: 5px;
}
.btn-pill {
  min-width: 160px;
}
.support-text {
  width: 70%;
}
.heading-two {
  margin-bottom: 70px;
}
.heading-two h2 {
  margin-bottom: 22px;
}
.heading-two .caption {
  max-width: 670px;
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.breadcrumb {
  padding: 30px 0px;
  display: flex;
  gap: var(--gap-20);
  color: var(--color-gray);
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; 
}
.breadcrumb span {
  font-weight: 500;
  color: var(--color-black);
}
.breadcrumb a {
  color: var(--color-gray);
  text-decoration: none;
  transition: var(--transition);
}
.breadcrumb a:hover {
  color: var(--color-black);
}
.info-box {
  display: flex;
  padding: 22px 31px 28px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
}
.light-blue {
  background: var(--color-light-blue);
}
.light-gray {
  background: var(--color-light-gray);
}
.admission-status {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="17" viewBox="0 0 26 17" fill="none"><path d="M0.90078 16.5L10.5008 16.5C10.7414 16.5 10.9008 16.3406 10.9008 16.1C10.9008 14.9797 11.7805 14.1 12.9008 14.1C14.0211 14.1 14.9008 14.9797 14.9008 16.1C14.9008 16.3406 15.0602 16.5 15.3008 16.5L24.9008 16.5C25.1414 16.5 25.3008 16.3406 25.3008 16.1L25.3008 0.899999C25.3008 0.659374 25.1414 0.499998 24.9008 0.499998L15.3008 0.499997C15.0602 0.499997 14.9008 0.659373 14.9008 0.899998C14.9008 2.02032 14.0211 2.9 12.9008 2.9C11.7805 2.9 10.9008 2.02032 10.9008 0.899997C10.9008 0.659373 10.7414 0.499997 10.5008 0.499997L0.900781 0.499996C0.660156 0.499996 0.50078 0.659372 0.50078 0.899996L0.500778 16.1C0.500778 16.3406 0.660154 16.5 0.90078 16.5ZM1.30078 1.3L10.1416 1.3C10.301 2.54064 11.3009 3.5 12.5009 3.65936L12.5009 4.1L13.3009 4.1L13.3009 3.65936C14.5416 3.49998 15.5009 2.5 15.6603 1.3L24.5011 1.3L24.5011 15.7L15.6603 15.7C15.5009 14.4594 14.5009 13.5 13.3009 13.3406L13.3009 12.9L12.5009 12.9L12.5009 13.3406C11.2603 13.5 10.3009 14.5 10.1416 15.7L1.30078 15.7L1.30078 1.3ZM13.3008 7.6204L12.5008 7.6204L12.5008 5.86104L13.3008 5.86104L13.3008 7.6204ZM13.3008 11.1407L12.5008 11.1407L12.5008 9.38136L13.3008 9.38136L13.3008 11.1407Z" fill="%23373737" stroke="%23373737"/></svg>');
  background-repeat: no-repeat;
  background-position: 0px 5px;
  padding-left: 36px;
}
.location {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M20 10C20 14.4183 12 22 12 22C12 22 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10Z" stroke="%23373737" stroke-width="2"/><path d="M12 11C12.5523 11 13 10.5523 13 10C13 9.44772 12.5523 9 12 9C11.4477 9 11 9.44772 11 10C11 10.5523 11.4477 11 12 11Z" fill="%23373737" stroke="%23373737" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: 0px 5px;
  padding-left: 40px;
  margin: 40px 0px;
}
.exhibition-date {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 18 18" fill="none"><path d="M2.25 6.75H15.75M5.25 2.25V3.75M12.75 2.25V3.75M4.5 9.75H6M4.5 12.75H6M8.25 9.75H9.75M8.25 12.75H9.75M12 9.75H13.5M12 12.75H13.5M4.65 15.75H13.35C14.1901 15.75 14.6102 15.75 14.931 15.5865C15.2132 15.4427 15.4427 15.2132 15.5865 14.931C15.75 14.6102 15.75 14.1901 15.75 13.35V6.15C15.75 5.30992 15.75 4.88988 15.5865 4.56902C15.4427 4.28677 15.2132 4.0573 14.931 3.91349C14.6102 3.75 14.1901 3.75 13.35 3.75H4.65C3.80992 3.75 3.38988 3.75 3.06902 3.91349C2.78677 4.0573 2.5573 4.28677 2.41349 4.56902C2.25 4.88988 2.25 5.30992 2.25 6.15V13.35C2.25 14.1901 2.25 14.6102 2.41349 14.931C2.5573 15.2132 2.78677 15.4427 3.06902 15.5865C3.38988 15.75 3.80992 15.75 4.65 15.75Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: 0px 4px;
  padding: 0px 0px 0px 37px;
}

.tour-details,
.timing {
  width: 100%;
}
.detail-item,
.timing-row {
  display: flex;
}
.detail-item .label,
.timing-row .label {
  flex: 1;
}
.detail-item .value {
  flex: 0 0 162px;
}
.timing-row .value {
  flex: 0 0 203px;
}
.content-wrapper .wp-block-heading {
  font-family: var(--font-campton);
  font-size: 29px;
  font-weight: 500;
  line-height: 36px;
  margin-bottom: 52px;
}
.content-wrapper p {
  margin-bottom: 21px;
}
.inner-section {
  margin: 176px 0px;
}
.story-section {
  margin-bottom: 0;
}
.custom-section-desc,.custom-section-desc p{
  font-size: 29px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
}
.custom-section-desc2,.custom-section-desc2 p{
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.container.blog-container{
  --container-width: 988px;
}
.container.blog-container .container{
  padding: 0;
}

.oja_media_wrapper .caption{
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-black);
  padding: 0;
}
.oja_media_wrapper .oja_video .plyr{
  border-radius: var(--radius-sm);
  --plyr-color-main:var(--color-white)
}
.oja_media_wrapper .oja_video .plyr .plyr__progress__buffer{
  background: #525253;
}
.oja_media_wrapper .oja_video video,
.oja_media_wrapper .oja_video iframe{
  max-width: 100%;
}
.oja_media_wrapper .oja_video .plyr .plyr__controls{
    background: rgba(0,0,0,0.5) !important;
    margin: var(--plyr-control-spacing, 10px) !important;
    padding: 8px !important;
    margin-top: calc(var(--plyr-control-spacing, 10px) * 3.5) !important; 
    border-radius: 4px !important;
}
.oja_media_wrapper .oja_video .plyr .plyr__controls .plyr__controls__item:first-child{
  padding: 0 !important; 
  background: transparent !important;
  bottom: 0 !important;
  outline: 0 !important;
}
.plyr--full-ui.plyr--video .plyr__control--overlaid{
  padding: 0;
  background: transparent !important;
  top: calc(50% - 30px) !important;
}
.oja_media_wrapper .oja_video .video-block.autoplay{
  pointer-events: none;
}
.oja_media_wrapper .oja_video .plyr--full-ui.plyr--video .plyr__control--overlaid::before{
  content: 'Video Player';
  position: absolute;
  top: calc(100% + 6px);
  font-family: var(--font-campton);
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  color: var(--color-white);
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
}
.oja_media_wrapper .oja_video .plyr--full-ui.plyr--video .plyr__control--overlaid::after{
  content: 'Click to play video content';
  position: absolute;
  top: calc(100% + 36px);
  font-family: var(--font-primary);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-white);
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
}
.section-audio-player{
    padding: 0;
    padding-bottom: 40px;
}
.custom-audio-player{
    display:flex;
    align-items:center;
    gap:var(--gap-20);
    background:var(--color-background-white);
    padding:30px 40px;
    border-radius:var(--radius-sm);
    
}
.custom-audio-player .player-left{
    width: 266px;
}
.custom-audio-player .player-right{
    flex-grow: 1;
}
.custom-audio-player .play-btn{
    max-width:18px;
    height:24px;
    cursor:pointer;
    font-size:18px;
    border: 0;
    outline: 0;
    box-shadow: unset;
}
.custom-audio-player .player-title{
    font-family: var(--font-campton);
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    color: var(--color-black);
    margin-bottom: 8px;
}
.custom-audio-player .player-subtitle{
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-black);
    margin-bottom: 0;
}
.custom-audio-player .progress-bar{
    width:100%;
    height:8px;
    background:var(--color-button-gray);
    border-radius:10px;
    position:relative;
    cursor:pointer;
    margin: 16px 0 8px 0;
}
.custom-audio-player .progress{
    height:100%;
    width:0%;
    background:var(--color-black);
    border-radius:10px;
}
.custom-audio-player .times{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.custom-audio-player .time{
    font-size: 13px;
    font-style: normal;
    color: var(--color-black);
    font-weight: 500;
    line-height: 16px;
}
.custom-audio-player .top{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.custom-audio-player .volume-wrap{
    position:relative;
    display:flex;
    align-items:center;
}
.custom-audio-player .volume-btn{
    border:none;
    background:none;
    cursor:pointer;
    font-size:18px;
    display: flex;
}
.custom-audio-player .volume-btn.muted{
    opacity: 0.2;
}
.custom-audio-player .volume-btn.half-muted{
    opacity: 0.6;
}
.custom-audio-player .volume-btn.full-vol{
    opacity: 1;
}
.custom-audio-player .volume-slider{
    position:absolute;
    right:30px;
    width:90px;
    opacity:0;
    transform:translateY(10px);
    transition:.2s;
    accent-color: var(--color-black);
}
.custom-audio-player .volume-wrap:hover .volume-slider{
    opacity:1;
    transform:translateY(0);
}
.custom-audio-player .right-inner-wrap{
    display:flex;
    align-items:center;
    column-gap: var(--gap-20);
}
.custom-audio-player .speed-btn{
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-black);
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}
.custom-audio-player .icon-pause{
    font-size: 21px;
}
.hero-grid{
    display:grid;
    gap:40px;
}
.hero-description{
    line-height:38px;
}
.additions-card {
  color: var(--color-text-dark);
  display: grid;
  gap: 40px;
}
.additions-card-content {
  margin: 16px 0px;
}
.card-addi h3 {
  font-family: 'Campton', sans-serif;
  font-weight: 500;
  font-size: 29px;
  line-height: 36px;
  margin: 10px 0px;
}
.addi-card-des {
  max-width: 395px;
}
.additions-card .card-addi:nth-child(3n+1) .card-image {
    border-bottom: 18px solid #F05A28;
}
.additions-card .card-addi:nth-child(3n+2) .card-image {
    border-bottom: 18px solid #4DABC2;
}
.additions-card .card-addi:nth-child(3n) .card-image {
    border-bottom: 18px solid #F1C945;
}
.card-image {
  width: 100%;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  overflow: hidden;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}
.card-image a {
  display: contents;
}
.card-addi .card-image {
    overflow: hidden;
    height: 436px;
}
.card-addi:hover .card-image img {
    transform: scale(1.2);
}
.additions-card .featured-card {
  grid-column:1 / -1;
  margin-bottom: 40px;
}
.card-addi .card-option {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
}
.featured-card {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    padding: 270px 64px 64px;
}
.featured-card .actions {
    display: flex;
    align-items: center;
    gap: 30px;
}
.featured-card .content {
    color: var(--color-light);
    max-width: 920px;
}
.featured-card .content p {
    padding: 30px 0px 24px;
    max-width: 690px;
}
.page-hero {
  padding: 0px 0px 60px;
}
.load-more {
  padding-top: 24px;
}
.arrow-down {
  background: url('data:image/svg+xml,%3Csvg width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M17 1L9 9L1 0.999999" stroke="%23373737" stroke-width="2" stroke-linecap="round"/%3E%3C/svg%3E') 0px 0px no-repeat;
  width: 18px;
  height: 11px;
}
.full-width {
  width: 100%;
}
.tabs {
  display: flex;
  border-bottom: 3px solid var(--color-background-gray);
  margin-bottom: 52px;
}
.tabs li {
  position: relative;
  cursor: pointer;
  padding: 0px 40px 10px;
  margin-bottom: -3px;
}
.tabs li.active {
  border-bottom: 3px solid var(--color-oja-orange);
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}
.tab-description {
    max-width: 1070px;
    margin-bottom: 60px;
}
.section-tabs-block {
  padding-bottom: 64px;
}
.card-addi p {
  margin-bottom: 15px;
}

/** Share your story **/
.share-story-section .container {
  max-width: 950px;
  position: relative;
}
.register-wrapper {
  padding: 96px 0;
}
.form-container form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-container .row {
  display: flex;
  gap: 20px;
}
.input-group {
  flex: 1;
}
.input-group .label {
  display: block;
  padding-bottom: 8px;
}
.input-group.full {
  width: 100%;
}
.input-group input[type="text"],
.input-group input[type="email"],
.input-group textarea {
  width: 100%;
  padding: 16px 32px;
  border-radius: 28px;
  border: 1px solid var(--color-button-gray);
  font-family: var(--font-primary);
  font-size: 17px;
  line-height: 24px;
  outline: none;
  background: transparent;
  transition: 0.3s;
}
.input-group input:focus {
  border-color: #ff5a00;
}
.register-wrapper .content p {
  padding-bottom: 10px;
}
.release-agreement {
  background: var(--color-background-white);
  padding: 46px;
  border-radius: var(--radius-sm);
  gap: 30px;
  align-items: flex-start;
}
.release {
  gap: 16px;
  align-items: flex-start;
}
.story-form {
  padding-bottom: 64px;
}
.form-container .action {
  display: flex;
  gap: 32px;
  justify-content: end;
  padding-top: 12px;
}
.custom-checkbox input {
  display: none;
}
.checkmark {
  width: 29px;
  height: 29px;
  border: 1px solid var(--color-black);
  border-radius: 3.75px;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}
.checkmark::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 14px;
  border: solid var(--color-black);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  top: 4px;
  left: 10px;
  opacity: 0;
}
.custom-checkbox input:checked + .checkmark::after {
  opacity: 1;
}
.form-box {
  border: 1px solid var(--color-button-gray);
  border-radius: 28px;
  padding: 40px 32px;
  text-align: center;
  margin: auto;
}
.form-box .caption {
  padding: 8px 0px 30px;
}
.upload-btn {
  font-weight: 500;
  line-height: 24px;
  padding: 15px 40px;
  border-radius: var(--radius-pill);
  color: var(--color-text-dark);
  border: 1px solid var(--border-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.upload-btn:hover {
  color: var(--color-brand);
  border: 1px solid var(--color-brand);
}
.upload-btn input {
  display: none;
}
.note {
  padding-top: 15px;
}
.file-item {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.form-overlays {
  position: absolute;
  inset: 0;
  background: #ffffff90;
  z-index: 1;
}
.error {
  color: var(--color-oja-orange);
  margin-top: 5px;
}
#audioPlayback {
  width: 100%;
  margin-top: var(--margin-15);
}
#fileList > div {
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--color-button-gray);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 13px;
  margin-top: 10px;
}
#fileList .icon-delete {
  font-size: 13px;
}
#recordBtn.recording {
  animation: blink 2s infinite;
  color: var(--color-brand);
}
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}
.micButton {
  position: relative;
  width: 28px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 9px;
}
.micButton svg {
  position: absolute;
  top: 0;
  left: 0;
  display: inline;
  opacity: 0;
  width: 28px;
  height: 33px;
  animation: none;
}
.micButton svg:first-child {
  opacity: 1;
}
.micButton svg path {
  fill: var(--color-black);
}
.micButton.active svg:nth-child(2), .micButton.active svg:nth-child(3), .micButton.active svg:nth-child(4) {
  animation: listening 750ms ease-in infinite;
  display: inline;
}
.micButton.active svg:nth-child(2) {
  animation-delay: 0ms;
}
.micButton.active svg:nth-child(3) {
  animation-delay: 250ms;
}
.micButton.active svg:nth-child(4) {
  animation-delay: 500ms;
}
.micButton.active svg path {
  fill: var(--color-oja-blue);
}

@keyframes listening {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.custom-toast {
  border-radius: 100px !important;
  padding: 18px 26px 18px 66px!important;
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: var(--color-oja-blue) !important;
  box-shadow: 0 0px 0px -1px rgba(0, 0, 0, .1), 0 1px 5px 0px rgba(0, 0, 0, .1) !important;
}
.toast-close img {
  display: none;
}
.toast-close {
  background-image: url('data:image/svg+xml,%3Csvg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6.75781 17.2431L12.0004 12.0005M12.0004 12.0005L17.243 6.75781M12.0004 12.0005L6.75781 6.75781M12.0004 12.0005L17.243 17.2431" stroke="%23373737" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  background-position: 0px 1px !important;
  margin-left: 17px;
  opacity: 1 !important;
}
.required {
  color: var(--color-oja-orange);
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}
.popup-overlay.active {
  opacity: 1;
  visibility: visible;
  background: rgba(0,0,0,0.5);
}
.model-logo {
  margin-bottom: 90px;
}
.model-logo img {
  margin: auto;
}
.popup-box {
  background: var(--color-white);
  padding: 48px 195px 80px;
  border-radius: 5px;
  max-width: 864px;
  width: 90%;
  text-align: center;
  transform: translateY(200px);
  opacity: 0;
  transition: all .4s cubic-bezier(.215, .61, .355, 1);
}
.popup-overlay.active .popup-box {
  transform: translateY(0);
  opacity: 1;
}
.popup-content {
  padding: 28px 0px 32px;
}
.popup-actions {
  display: flex;
  justify-content: center;
  gap: 32px;
}
.popup-actions.stretch {
  justify-content: space-between;
}
.popup-actions.stretch a,
.popup-actions.stretch button {
  flex: 1;
}
button.loading {
  opacity: 0.7;
  pointer-events: none;
}

.story-header {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.story-hero-grid {
  display: grid;
  grid-template-columns: 2fr 2fr;
  gap: 20px;
}
.middel-container {
  max-width: 948px;
  margin: 148px auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.middel-container.about-oja {
  gap: 20px;
}
.middel-container:first-child {
  margin-top: 0;
}
.middel-container.full-container {
  max-width: none;
  padding: 64px 0px 97px;
}
.story-gallery {
  max-width: 948px;
  margin: 0px auto;
}
.story-gallery.full-gallery {
  max-width: none;
}
.story-content {
  max-width: 694px;
  margin: 0px auto;
}
.text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.text strong {
  font-weight: 700;
}
.logo-divider {
  display: flex;
  max-width: 948px;
  margin: auto;
}
.story-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.story-img-grid {
  display: grid;
  gap: 20px;
}
.grid-one {
  grid-template-columns: repeat(1, 1fr);
}
.grid-two {
  grid-template-columns: repeat(2, 1fr);
}
.grid-three {
  grid-template-columns: repeat(3, 1fr);
}
.grid-four {
  grid-template-columns: repeat(4, 1fr);
}
.story-grid-content {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 60px;
  align-items: start;
}
.collage-photo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}
.collage-photo.reverse {
  grid-template-columns: 1fr 1fr;
}
.gallery-item {
  position: relative;
  overflow: hidden;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-item.large {
  grid-row: span 2;
}
.reverse .gallery-item.large {
  grid-column: 2;
}
.gallery-item.small {
  height: 100%;
}
.reverse .gallery-item.small:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.reverse .gallery-item.small:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}
.light-bg {
  background: var(--color-background-gray);
}
.black-bg {
  background: var(--color-black);
  color: var(--color-light-gray);
}
.action-link {
  display: flex;
  gap: 60px;
  justify-content: center;
}
.gallery-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.gallery-layout img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-layout .col {
  display: grid;
  gap: 20px;
}
.gallery-layout .left {
  grid-template-rows: 2fr 1fr;
}
.gallery-layout .left .bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.gallery-layout .right {
  grid-template-rows: 1fr 2fr;
}
.gallery-layout .right .top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.bg-black {
  background: var(--color-black);
  color: var(--color-light);
}
.bg-deep-teal-blue {
  background: #13414F;
  color: var(--color-light);
}
.bg-olive-green {
  background: #535C45;
  color: var(--color-light);
}
.bg-dusty-rose {
  background: #5A4041;
  color: var(--color-light);
}
.bg-light-gray {
  background: #E8E6E3;
  color: var(--color-black);
}
.bg-light-green {
  background: #BDCCA5;
  color: var(--color-black);
}
.bg-light-blue {
  background: #D3EDF5;
  color: var(--color-black);
}
.bg-blush-pink {
  background: #FFDBCF;
  color: var(--color-black);
}
.error-404 {
  padding: 148px 0;
}
.error-404 .page-header {
  padding-bottom: 40px;
}
.error-404 .backtohome {
  padding-top: 40px;
}

.past-left-col {
  display: flex;
  align-items: center;
  gap: 30px;
}
.past-card-title a {
  color: var(--color-black);
  text-decoration: none;
}
.past-card-title a:hover {
  color: var(--color-text-blue);
}
.past-card-meta {
  padding-bottom: 6px;
}
.archive-results {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.archive-results .past-card {
  grid-column:1 / -1;
  background: var(--color-background-white);
  border-radius: 5px;
  overflow: hidden;
  padding: 0px 40px 0px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.archive-results .past-card .past-card-img { 
  max-width: 158px;
}
.archive-results .past-card .past-card-img img {
  object-fit: cover;
}
.archive-results .past-card:nth-child(5n+1) .past-card-img {
    border-left: 8px solid #F05A28;
}
.archive-results .past-card:nth-child(5n+2) .past-card-img {
    border-left: 8px solid #4DABC2;
}
.archive-results .past-card:nth-child(5n+3) .past-card-img {
    border-left: 8px solid #D88A27;
}
.archive-results .past-card:nth-child(5n+4) .past-card-img {
    border-left: 8px solid #6D1612;
}
.archive-results .past-card:nth-child(5n+5) .past-card-img {
    border-left: 8px solid #007BA1;
}

.section-inner-hero-banner{
    padding: 30px 0 96px;
}
.section-inner-hero-banner .breadcrumb{
    padding: 0;
    margin-bottom: 117px;
}
.section-inner-hero-banner .inner-content{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 95px;
}
.section-inner-hero-banner .hero-guides-tools .title{
    font-size: 65px;
    line-height: 77px;
}
.section-inner-hero-banner .title{
    font-size: 86px;
    font-style: normal;
    font-weight: 600;
    line-height: 88px;
    color: var(--color-black);
    margin-bottom: 32px;
}
.section-inner-hero-banner .desc,
.section-inner-hero-banner .desc p{
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    color: var(--color-black);
    margin-bottom: 56px;
}
.section-inner-hero-banner .desc{
    max-width: 631px;
}
.section-inner-hero-banner .desc p{
    margin-bottom: 18px;
}
.section-inner-hero-banner .desc p:last-child{
    margin-bottom: 0;
}
.section-inner-hero-banner .right-part img{
    width: 100%;
    border-radius: 5px;
}

.section-inner-hero-banner .right-part {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-inner-hero-banner .right-part p.body-xs{
    color: var(--color-black);
    line-height: 1.231;
    padding: 0;
}
.page-hero {
  padding: 0px 0px 60px;
}
.hero-guides-tools {
  padding: 0px 56px;
}
.tool-related-articles .inner-wrapper {
  max-width: 948px;
  margin: auto;
}
.past-archives-block {
  padding: 192px 0px 155px;
}
.past-archives-block .heading {
  padding-bottom: 24px;
}
.section-block {
  padding: 192px 0px;
}
.single-guides-tools .section-inner-hero-banner {
  padding: 30px 0 192px;
}
.related-articles.tool-related-articles {
  padding: 0;
}
.single-guides-tools .twocolumn-layout-withtitle {
  margin: 192px 0px;
}