/* Glodal styling classes
all global classes should be prepended with ocd-g
*/

/* colors */
:root{
    --ocd-color-primary: #7DB02C;
    --ocd-color-accent: #2A241A;
    --ocd-color-gold: #EDFFC7;
    --ocd-color-white: #E5E0D4;
    --ocd-color-green-lt: #A7C774;
    --ocd-color-green-med: #303818;
}

.ocd-color-primary :is(h1, h2, h3, h4, h5, h6, p, span, ul, ol, li){
    color: var(--ocd-color-primary);
}
.ocd-color-gold :is(h1, h2, h3, h4, h5, h6, p, span, ul, ol, li){
    color: var(--ocd-color-gold);
}
.ocd-color-white :is(h1, h2, h3, h4, h5, h6, p, span, ul, ol, li){
    color: var(--ocd-color-white);
}
.ocd-color-green-lt :is(h1, h2, h3, h4, h5, h6, p, span, ul, ol, li){
    color: var(--ocd-color-green-lt);
}
.ocd-opacity-80 :is(h1, h2, h3, h4, h5, h6, p, svg, path){
    opacity: 80%;
}
.ocd-opacity-70 :is(h1, h2, h3, h4, h5, h6, p, svg, path){
    opacity: 70%;
}
.ocd-opacity-60 :is(h1, h2, h3, h4, h5, h6, p, svg, path){
    opacity: 60%;
}      

/* typography */
:root{
    --ocd-family-primary: 'Laviossa';
    --ocd-family-titles: 'Guarajada_OCD';
    --ocd-family-accent: 'Reem-Kufi';
    --ocd-family-body: 'Montserrat-variable';
}
.ocd-font-upper{
    text-transform: uppercase;
}
.ocd-font-cap{
    text-transform: capitalize;
}
.ocd-font-under{
    text-decoration: underline;
}
.ocd-font-italic{
    font-style: italic;
}

.ocd-font-primary :is(h1, h2, h3, h4, h5, h6, p, a){
font-family: var(--ocd-family-primary);
}
.ocd-font-titles :is(h1, h2, h3, h4, h5, h6, p, a){
font-family: var(--ocd-family-titles);
}
.ocd-font-accent :is(h1, h2, h3, h4, h5, h6, p, a){
font-family: var(--ocd-family-accent);
}
.ocd-font-body :is(h1, h2, h3, h4, h5, h6, p, a, span, ul, ol, li){
font-family: var(--ocd-family-body);
}
.ocd-font-body :is(a):hover{
    color: var(--ocd-color-green-lt);
}

.ocd-style-body :is(h1, h2, h3, h4, h5, h6, p, a){
    font-weight: 400;
    letter-spacing: 0.15rem;
    line-height: 1.8 !important;
}

/* .ocd-g-h1 :is(h1, h2, h3, h4, h5, h6, p)
{
font-size: clamp(3.8rem, 2.3211rem + 2.7324vw, 5.6rem);
font-weight: 500;
line-height: clamp(4rem, 2.3567rem + 3.0361vw, 6rem);
} */
 
:root{
    --ocd-font-size-xxxlarge: clamp(3.80rem, 2.86897rem + 3.97241vw, 5.60rem);
    --ocd-font-size-xxlarge: clamp(3.05rem, 2.45517rem + 2.53793vw, 4.20rem);
    --ocd-font-size-xlarge: clamp(2.44rem, 2.06914rem + 1.58234vw, 3.16rem);
    --ocd-font-size-large: clamp(1.95rem, 1.73276rem + 0.92690vw, 2.37rem);
    --ocd-font-size-medium: clamp(1.25rem, 1.20707rem + 0.18317vw, 1.33rem);
    --ocd-font-size-small: clamp(1.13rem, 1.06034rem + 0.27586vw, 1.25rem);
    --ocd-font-size-xsmall: clamp(1.00rem, 0.93534rem + 0.27586vw, 1.13rem);
    --ocd-font-size-xxsmall: clamp(0.82rem, 0.76681rem + 0.24828vw, 0.94rem);
    --ocd-font-size-xxxsmall: .78rem;
}

html { font-size: 16px; } /* Default root size */

.xxxlarge :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(3.80rem, 2.86897rem + 3.97241vw, 5.60rem);
    line-height: 1.4;
}

.xxlarge :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(3.05rem, 2.45517rem + 2.53793vw, 4.20rem);
    line-height: 1.4;
}

.xlarge :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(2.44rem, 2.06914rem + 1.58234vw, 3.16rem);
    line-height: 1.4;
}

.large :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(1.95rem, 1.73276rem + 0.92690vw, 2.37rem);
    line-height: 1.4;
}

.xmedium :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(1.56rem, 1.45231rem + 0.47228vw, 1.78rem);
    line-height: 1.4;
}

.medium :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(1.25rem, 1.20707rem + 0.18317vw, 1.33rem);
    line-height: 1.4;
}

.small :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(1.13rem, 1.06034rem + 0.27586vw, 1.25rem);
    line-height: 1.4;
}

.xsmall :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(1.00rem, 0.93534rem + 0.27586vw, 1.13rem);
    line-height: 1.4;
}

.xxsmall :is(h1, h2, h3, h4, h5, h6, p, a) {
    font-size: clamp(0.82rem, 0.76681rem + 0.24828vw, 0.94rem);
    line-height: 1.4;
}


.ocd-text-link{
    text-decoration: underline !important;
    color: var(--ocd-color-primary) !important;
}

/* Icons */
.icon-outline svg #Layer_1-2{
    stroke: var(--ocd-color-gold);
    stroke-width: 1px;
    stroke-opacity: 80%;
    fill:var(--ocd-color-green-lt);
}

.ocd-radial-gradient-blur{
    backdrop-filter: blur(10px); 
    mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 70%); /* For WebKit browsers */
}


.product-loop-icon{
    fill: var(--ocd-color-primary);
    opacity: 30%;
    width: 3rem;

}

/* buttons */
.ocd-btn a{
    transition: 300ms;
    font-family: var(--ocd-family-accent);
    padding: 8px 30px 8px 30px;
    background-color: var(--ocd-color-primary);
    color: var(--ocd-color-white);
    border: 1px solid #B4E762;
    border-radius: 24px;
}
.ocd-btn a:hover{
    background-color: #4A661F;
    color: #B4E762;
     box-shadow: 0 0 16px #b4e762af;
    transform: scale(1.1);
}

/* numbers */
.fraction {
  display: inline-block; /* Allows the fraction to be in line with other text */
  vertical-align: middle; /* Aligns the fraction vertically with the surrounding text */
  text-align: center; /* Centers the numerator and denominator */
}

.numerator {
  display: block; /* Places the numerator on its own line */
  border-bottom: 1px solid black; /* Creates the horizontal line */
  padding-bottom: 2px; /* Adds a little space between the numerator and the line */
}

.denominator {
  display: block; /* Places the denominator on its own line */
  padding-top: 2px; /* Adds a little space between the denominator and the line */
}